/* Acqius® sections - homepage content body */

const { useState: useStateS, useRef: useRefS, useEffect: useEffectS } = React;

function ArrowSm() {
  return (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
      <path d="M5 12h14M13 5l7 7-7 7" />
    </svg>
  );
}

/* ---------- Stats band ---------- */
function StatsBand() {
  const stats = [
    { v: '50+', l: 'Combined Years Experience' },
    { v: '200+', l: 'Private Equity Network' },
    { v: '1000+', l: 'Global Acquirer Network' },
    { v: 'UK, EMEA, USA, Canada, Asia', l: 'Global Reach', small: true },
  ];
  return (
    <section className="stats-band">
      <div className="container">
        <div className="grid">
          {stats.map((s, i) => (
            <Reveal key={s.l} delay={(i % 4) + 1} className="stat">
              <p className={'v' + (s.small ? ' sm' : '')} style={{ margin: 0 }}>{s.v}</p>
              <p className="l">{s.l}</p>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- What we do (four divisions / services) ---------- */
function ServicesSection() {
  const services = [
    { k: '01 — Sell-side', name: 'Selling A Business', href: 'selling-a-business.html' },
    { k: '02 — Buy-side', name: 'Buying A Business', href: 'buying-a-business.html' },
    { k: '03 — Capital', name: 'Raising Capital', href: 'raising-capital.html' },
    { k: '04 — Valuation', name: 'Financial Modelling', href: 'financial-modelling.html' },
    { k: '05 — Deal execution', name: 'Diligence Support', href: 'diligence-support.html' },
    { k: '06 — For private equity', name: 'Private Equity Services', href: 'private-equity.html' },
  ];
  return (
    <section id="services" className="section">
      <div className="container center">
        <Reveal><p className="eyebrow">What we do</p></Reveal>
        <Reveal delay={1}><h2 className="hd hd-xl mw-960 mx-auto" style={{ marginTop: 16 }}>Deep dive into our services.</h2></Reveal>
        <Reveal delay={2}><p className="lede mw-820 mx-auto" style={{ marginTop: 24 }}>
          Acqius® Ltd is a specialist in sell-side, buy-side, and capital-raising transactions, offering expert guidance for business owners and executives.
        </p></Reveal>

        <div className="col-2" style={{ textAlign: 'left' }}>
          {services.map((s, i) => (
            <Reveal key={s.name} delay={(i % 2) + 1}>
              <a href={s.href} className="info-card">
                <div className="k">{s.k}</div>
                <h3 className="svc-name">{s.name}</h3>
                <span className="link" style={{ marginTop: 22, display: 'inline-flex', alignItems: 'center', gap: 8 }}>Learn more <ArrowSm /></span>
              </a>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- Why Acqius® exists (wide dark) ---------- */
function WhyAcqiusSection() {
  const reasons = [
    'Certification matters',
    'Compliance risk can kill deals',
    'Technical due diligence is non-trivial',
    'Generalist advisors are out of their depth',
  ];
  const sectors = [
    'Explosion protection (ATEX / IECEx / NEC)',
    'Oil & Gas',
    'Nuclear supply chain',
    'Rail-certified equipment',
    'Aerospace',
    'Medical device manufacturing',
    'Fire & life safety systems',
    'Defence',
    'Marine',
    'Hydrogen & hazardous energy infrastructure',
  ];
  return (
    <section id="why" className="why-bento">
      <div className="container">
        <div className="head">
          <Reveal><p className="why-eyebrow">Why Acqius® exists</p></Reveal>
          <Reveal delay={1}>
            <h2 className="hd hd-xl" style={{ fontFamily: 'var(--font-serif)', fontWeight: 500, letterSpacing: '-0.01em', textTransform: 'none', marginTop: 14, color: 'var(--ink)' }}>Acqius® exists to advise on the sale and acquisition of businesses where:</h2>
          </Reveal>
        </div>

        <div className="why-grid">
          <Reveal delay={1}>
            <div className="why-card" style={{ height: '100%' }}>
              <div className="big">1000+</div>
              <p className="big-sub">Acquirers in our global network — strategics, private equity &amp; international entrants.</p>
            </div>
          </Reveal>

          <Reveal delay={2}>
            <div className="why-card" style={{ height: '100%' }}>
              <h3>Certification &amp; compliance can make or break a deal</h3>
              <div className="why-transfer">
                <div className="wt-node teal" aria-hidden="true">
                  <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 9h.01M15 9h.01M9 13h.01M15 13h.01M9 17h6" /></svg>
                </div>
                <div className="wt-arrows" aria-hidden="true">
                  <svg width="100%" height="12" viewBox="0 0 120 12" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"><path d="M4 6h108M104 2l8 4-8 4" /></svg>
                  <svg width="100%" height="12" viewBox="0 0 120 12" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" style={{ marginTop: 8 }}><path d="M116 6H8M16 2l-8 4 8 4" /></svg>
                </div>
                <div className="wt-node dark" aria-hidden="true">
                  <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M3 21h18M4 10h16M5 10l7-6 7 6M6 10v11M18 10v11M10 10v11M14 10v11" /></svg>
                </div>
              </div>
            </div>
          </Reveal>

          <Reveal delay={2} className="wide">
            <div className="why-card wide">
              <div className="why-wide-left">
                <h3>Where certification decides the outcome</h3>
                <div className="why-stats">
                  <div className="why-stat">
                    <span className="ic" aria-hidden="true">
                      <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M12 2l8 3v6c0 5-3.5 8.5-8 11-4.5-2.5-8-6-8-11V5l8-3z" /><path d="M9 12l2 2 4-4" /></svg>
                    </span>
                    <span className="v">100%</span>
                    <span className="l">Focus on regulated &amp; technically critical sectors</span>
                  </div>
                  <div className="why-stat">
                    <span className="ic" aria-hidden="true">
                      <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="9" /><path d="M3 12h18M12 3c2.5 2.5 3.8 6 3.8 9s-1.3 6.5-3.8 9c-2.5-2.5-3.8-6-3.8-9S9.5 5.5 12 3z" /></svg>
                    </span>
                    <span className="v">5</span>
                    <span className="l">Regions: UK, EMEA, USA, Canada &amp; Asia</span>
                  </div>
                  <div className="why-stat">
                    <span className="ic" aria-hidden="true">
                      <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="8" r="5" /><path d="M8.5 12.5L7 22l5-3 5 3-1.5-9.5" /></svg>
                    </span>
                    <span className="v">ATEX · IECEx</span>
                    <span className="l">Deep certification &amp; compliance expertise</span>
                  </div>
                </div>
                <a href="industries.html" className="btn-primary" style={{ marginTop: 30 }}>Explore our industries</a>
              </div>
              <div className="why-panel">
                <div className="why-panel-head">
                  <span className="k">Qualified buyers approached</span>
                  <span className="pill">Per mandate</span>
                </div>
                <p className="why-panel-amount">40+</p>
                <svg className="why-panel-chart" viewBox="0 0 420 150" preserveAspectRatio="none" aria-hidden="true">
                  <defs>
                    <linearGradient id="whyFill" x1="0" y1="0" x2="0" y2="1">
                      <stop offset="0%" stopColor="rgba(125,156,132,0.5)" />
                      <stop offset="100%" stopColor="rgba(125,156,132,0)" />
                    </linearGradient>
                  </defs>
                  <line x1="0" y1="40" x2="420" y2="40" stroke="#e3e8e4" strokeWidth="1" />
                  <line x1="0" y1="80" x2="420" y2="80" stroke="#e3e8e4" strokeWidth="1" />
                  <line x1="0" y1="120" x2="420" y2="120" stroke="#e3e8e4" strokeWidth="1" />
                  <path d="M0,130 L70,116 L140,104 L210,78 L280,58 L350,34 L420,14 L420,150 L0,150 Z" fill="url(#whyFill)" />
                  <path d="M0,130 L70,116 L140,104 L210,78 L280,58 L350,34 L420,14" fill="none" stroke="#3f684d" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" />
                  <circle cx="420" cy="14" r="4.5" fill="#3f684d" />
                </svg>
                <div className="why-panel-months"><span>Wk 1</span><span>Wk 3</span><span>Wk 6</span><span>Wk 9</span><span>Close</span></div>
              </div>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

/* ---------- Latest news — stacked sticky panels ---------- */
const NEWS_PANELS = [
  { label: 'Deal announcement', statement: 'Acqius® advises on sale of Atexor Oy to Raytec Ltd', dir: -1 },
  { label: 'Acquisition story', statement: 'Triumph in Hazardous Area Enclosure Acquisitions: A Victory for Kent Business Investors', dir: 1 },
  { label: 'M&A insight', statement: 'Streamlining Expansion: Leveraging M&A in Industrial Supplies', dir: -1 },
  { label: 'Sector insight', statement: 'Capitalise on a Growing Sector: Keeping Healthcare Acquisitions Healthy', dir: 1 },
];

function NewsPanel({ index, total, label, statement, dir }) {
  const ref = useRefS(null);
  const [inView, setInView] = useStateS(false);
  useEffectS(() => {
    if (!ref.current) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => setInView(e.isIntersecting));
    }, { threshold: 0.4 });
    io.observe(ref.current);
    return () => io.disconnect();
  }, []);
  const pad = (n) => String(n).padStart(2, '0');
  return (
    <article className="news-panel">
      <div className="inner">
        <div className="head">
          <span className="idx">{pad(index + 1)} / {pad(total)}</span>
          <span className="lbl">{label}</span>
        </div>
        <p
          ref={ref}
          className="statement"
          style={{
            opacity: inView ? 1 : 0,
            transform: inView ? 'translateX(0)' : `translateX(${dir * 120}px)`,
          }}
        >{statement}</p>
      </div>
    </article>
  );
}

function NewsSection() {
  return (
    <section id="news" className="news-stack">
      {NEWS_PANELS.map((p, i) => (
        <NewsPanel key={p.statement} index={i} total={NEWS_PANELS.length} label={p.label} statement={p.statement} dir={p.dir} />
      ))}
    </section>
  );
}

/* ---------- Latest news (home) ---------- */
const HOME_NEWS = [
  { title: 'Acqius® advises Western Technology on its sale to Federal Signal Corporation', img: 'assets/news-western.jpg', href: 'news-western-technology.html' },
  { title: 'Acqius® advises on sale of Atexor Oy to Raytec Ltd', img: 'assets/news-atexor.jpg', href: 'news-atexor-raytec.html' },
  { title: 'Triumph in hazardous area enclosure acquisitions: a victory for Kent Business Investors', img: 'assets/news-enclosures.jpg', href: 'news-index-enclosures.html' },
  { title: 'Streamlining expansion: leveraging M&A in industrial supplies', img: 'assets/news-supplies.jpg', href: 'news-industrial-supplies.html' },
];

function LatestNewsSection() {
  return (
    <section id="latest-news" className="bfs-section" style={{ paddingTop: 0 }}>
      <div className="container">
        <Reveal><h2 className="bfs-title">Latest news</h2></Reveal>
        <div className="bfs-rule" />
        <div className="ln-grid">
          {HOME_NEWS.map((a, i) => (
            <Reveal key={a.title} delay={(i % 4) + 1}>
              <a href={a.href} className="ln-card">
                <div className="media" style={{ backgroundImage: `url(${a.img})` }} />
                <div className="scrim" />
                <div className="content">
                  <h3>{a.title}</h3>
                  <span className="lm">
                    Learn more
                    <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14M13 5l7 7-7 7" /></svg>
                  </span>
                </div>
              </a>
            </Reveal>
          ))}
        </div>
        <div className="ln-more">
          <a href="insights.html" className="btn-primary">All news &amp; insights</a>
        </div>
      </div>
    </section>
  );
}

/* ---------- Four divisions band ---------- */
function FourDivisionsBand() {
  const blocks = [
    {
      h: 'Sell, Buy, Raise',
      p: "Acqius® Ltd is a specialist in sell-side, buy-side, and capital-raising transactions, offering expert guidance for business owners and executives. Whether you're looking to sell your business, raise funds, or make acquisitions, we have the knowledge and experience to help you succeed. Our founders have personally acquired and sold businesses across the US, Europe, and Asia, giving us a global perspective and a deep understanding of the complexities involved.",
    },
    {
      h: 'Technology',
      p: 'At Acqius®, we are deeply invested in utilising new technology to enhance our client offering. This is work in progress and will develop over time however our current operational productivity is impressive. In particular, we regularly transact cross border deals as we believe that aside from language barriers and geographical legal nuances, the transaction process is fundamentally the same wherever the location.',
    },
    {
      h: 'Four Divisions',
      p: 'Comprising four distinct divisions, selling, buying, raising capital and financial modelling and valuation, the Acqius® Group aims to deliver comprehensive, innovative, and effective services that enhance the financial health and operational success of its clients.',
    },
    {
      h: 'End-to-end Support',
      p: 'Beyond transaction support, we provide financial modelling, business valuations, and access to exclusive private equity opportunities through our extensive network. We regularly engage at the board level with executives in the UK and overseas, ensuring that our clients benefit from a wide-reaching perspective and market insights.',
    },
  ];
  return (
    <section className="band-green">
      <div className="container">
        <div className="grid2" style={{ marginTop: 0 }}>
          {blocks.map((b, i) => (
            <Reveal key={b.h} delay={(i % 2) + 1}>
              <h3>{b.h}</h3>
              <p>{b.p}</p>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- Businesses for sale (carousel) ---------- */
/* Documents come from deal-docs.js (window.DEAL_DOCS), which mirrors
   assets/deal-docs/MANIFEST.md, so the buttons can never disagree with the
   files actually shipped. */
const DEALS = [
  { name: 'Project Energy', sector: 'Industrial Solar Panel and Battery Systems', img: 'assets/deal-energy.jpg' },
  { name: 'Project Marlin', sector: 'Sports Media Technology', img: 'assets/deal-marlin.jpg' },
  { name: 'Project Typhoon', sector: 'Hazardous Area HMI', img: 'assets/deal-typhoon.jpg' },
  { name: 'Project Tornado', sector: 'Safety Critical Consultancy', img: 'assets/deal-tornado.jpg' },
  { name: 'Project Alaska', sector: 'Oil and Gas Procurement', img: 'assets/deal-alaska.jpg' },
  { name: 'Project AQ0335-01', sector: 'E-Commerce / Retail', img: 'assets/deal-aq0335.jpg' },
  { name: 'Project Atlantic', sector: 'Industrial Sensor Manufacturing', img: 'assets/deal-atlantic.jpg' },
  { name: 'Project Barracuda', sector: 'Data Centre Design and Construction', img: 'assets/deal-barracuda.jpg' },
  { name: 'Project Dolphin', sector: 'Oil Recovery Enhancement Software Platform', img: 'assets/deal-dolphin.jpg' },
  { name: 'Project Oxygen', sector: 'Industrial Software', img: 'assets/deal-oxygen.jpg' },
  { name: 'Project Ocean', sector: 'ExLoc Sensor Manufacturer', img: 'assets/deal-ocean.jpg' },
  { name: 'Project Diamond', sector: 'Industrial LED Lighting and Battery Systems Manufacturer', img: 'assets/deal-diamond.jpg' },
].map((d) => ({ ...d, docs: window.dealDocKinds(d.name) }));

function BusinessesSection() {
  const trackRef = useRefS(null);
  const isMobile = window.useIsMobile ? window.useIsMobile(760) : false;
  const perView = isMobile ? 1 : 4;
  const pages = Math.ceil(DEALS.length / perView);
  const [page, setPage] = useStateS(0);

  const goTo = (p) => {
    const clamped = Math.max(0, Math.min(pages - 1, p));
    setPage(clamped);
    const track = trackRef.current;
    if (track) track.scrollTo({ left: clamped * track.clientWidth, behavior: 'smooth' });
  };
  const onScroll = () => {
    const track = trackRef.current;
    if (track) setPage(Math.round(track.scrollLeft / track.clientWidth));
  };
  const drag = useRefS({ active: false, startX: 0, startLeft: 0, moved: false });
  const paused = useRefS(false);
  useEffectS(() => {
    let raf;
    const speed = 0.35;
    const step = () => {
      const t = trackRef.current;
      if (t && !drag.current.active && !paused.current) {
        if (t.scrollLeft >= t.scrollWidth - t.clientWidth - 1) t.scrollLeft = 0;
        else t.scrollLeft += speed;
      }
      raf = requestAnimationFrame(step);
    };
    raf = requestAnimationFrame(step);
    return () => cancelAnimationFrame(raf);
  }, []);
  const onPointerDown = (e) => {
    const track = trackRef.current;
    if (!track) return;
    drag.current = { active: true, startX: e.clientX, startLeft: track.scrollLeft, moved: false };
  };
  const onPointerMove = (e) => {
    if (!drag.current.active) return;
    const dx = e.clientX - drag.current.startX;
    if (Math.abs(dx) > 4) drag.current.moved = true;
    trackRef.current.scrollLeft = drag.current.startLeft - dx;
  };
  const endDrag = () => { drag.current.active = false; };
  const openDoc = (e) => {
    e.preventDefault();
    if (drag.current.moved) return;
    window.location.href = 'contact.html';
  };

  return (
    <section id="businesses" className="bfs-section">
      <div className="container">
        <Reveal><h2 className="bfs-title">Businesses for sale</h2></Reveal>
        <div className="bfs-rule" />
        <div className="bfs-carousel">
          <button className="bfs-arrow prev" aria-label="Previous" onClick={() => goTo(page - 1)}>
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M15 18l-6-6 6-6" /></svg>
          </button>
          <div className="bfs-track" ref={trackRef} onScroll={onScroll} onPointerDown={onPointerDown} onPointerMove={onPointerMove} onPointerUp={endDrag} onPointerLeave={endDrag} onMouseEnter={() => { paused.current = true; }} onMouseLeave={() => { paused.current = false; }}>
            {DEALS.map((d) => (
              <div key={d.name} className="bfs-card" style={d.img ? { backgroundImage: `url(${d.img})` } : null}>
                {!d.img && <span className="bfs-watermark">Acqius®</span>}
                {d.img && <div className="bfs-scrim" />}
                <div className="bfs-content">
                  <h3>{d.name}</h3>
                  <p className="bfs-sector">{d.sector}</p>
                  <div className="bfs-docs">
                    {d.docs.map((k) => {
                      const file = window.dealDocHref(d.name, k);
                      return file
                        ? <a key={k} href={file} className="bfs-doc" download target="_blank" rel="noopener noreferrer" onClick={(e) => { if (drag.current.moved) e.preventDefault(); }}>{k}</a>
                        : <a key={k} href="#" className="bfs-doc" onClick={openDoc}>{k}</a>;
                    })}
                  </div>
                </div>
              </div>
            ))}
          </div>
          <button className="bfs-arrow next" aria-label="Next" onClick={() => goTo(page + 1)}>
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M9 18l6-6-6-6" /></svg>
          </button>
        </div>
        <div className="bfs-dots">
          {Array.from({ length: pages }).map((_, i) => (
            <button key={i} className={'bfs-dot' + (i === page ? ' active' : '')} aria-label={'Page ' + (i + 1)} onClick={() => goTo(i)} />
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- Amber CTA ---------- */
function ExpertsCTA() {
  return (
    <section className="band-amber">
      <div className="container">
        <Reveal>
          <h2 className="hd hd-xl mw-960">We're experts at selling businesses because we've successfully sold our own.</h2>
        </Reveal>
        <Reveal delay={1}><p className="sub">Thirty years of expertise guiding acquisitions.</p></Reveal>
        <Reveal delay={2}>
          <div className="cta-row">
            <a href="contact.html" className="btn-deep">Schedule a call <ArrowSm /></a>
            <a href="tel:+443337723616" className="tel-lg">Call Us: +44 (0)333 772 3616</a>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

/* ---------- Testimonials ---------- */
function TestimonialsSection() {
  const quotes = [
    {
      q: '"I consulted with Acqius® on growth and exit strategies and received valuable, forthright advice and suggestions. The relationship was informal and enjoyable and will, without hesitation, use Acqius® again"',
      nm: 'Sandor', rl: 'Founder of ShopGuard', c: '#1f7a8c', t: 'a week ago',
    },
    {
      q: "''Acqius® were the perfect partner for our sale and I have no hesitation in recommending them to anyone actively seeking to sell their business”",
      nm: 'Richard', rl: 'InDex Enclosures', c: '#b0642a', t: '2 weeks ago',
    },
    {
      q: '"They have a deep understanding of the intrinsic value of specialised niche businesses which other general M&A brokers do not. We believe they achieved a valuation that more than covered their commission and saved a huge amount of time and effort on our part. I call that a win-win!"',
      nm: 'John Hartley', rl: 'Founder of Extronics', c: '#2c5138', t: 'a month ago',
    },
    {
      q: '“I have worked with Clive Stanley and his team of Acqius® professional experts over the last year and without a doubt they are the market leaders in the field of MAA market place. You only need them.”',
      nm: 'Jason', rl: 'Founder of Critical Power', c: '#5b3a8a', t: 'a month ago',
    },
  ];
  const Stars = () => (
    <div className="g-stars" aria-label="5 out of 5 stars">
      {[0, 1, 2, 3, 4].map((i) => (
        <svg key={i} width="17" height="17" viewBox="0 0 24 24" fill="#fbbc04"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" /></svg>
      ))}
    </div>
  );
  const GoogleG = () => (
    <svg width="22" height="22" viewBox="0 0 48 48" aria-hidden="true">
      <path fill="#4285F4" d="M45.12 24.5c0-1.56-.14-3.06-.4-4.5H24v8.51h11.84c-.51 2.75-2.06 5.08-4.39 6.64v5.52h7.11c4.16-3.83 6.56-9.47 6.56-16.17z" />
      <path fill="#34A853" d="M24 46c5.94 0 10.92-1.97 14.56-5.33l-7.11-5.52c-1.97 1.32-4.49 2.1-7.45 2.1-5.73 0-10.58-3.87-12.31-9.07H4.34v5.7C7.96 41.07 15.4 46 24 46z" />
      <path fill="#FBBC05" d="M11.69 28.18c-.44-1.32-.69-2.73-.69-4.18s.25-2.86.69-4.18v-5.7H4.34C2.85 17.09 2 20.45 2 24s.85 6.91 2.34 9.88l7.35-5.7z" />
      <path fill="#EA4335" d="M24 10.75c3.23 0 6.13 1.11 8.41 3.29l6.31-6.31C34.91 4.18 29.93 2 24 2 15.4 2 7.96 6.93 4.34 14.12l7.35 5.7c1.73-5.2 6.58-9.07 12.31-9.07z" />
    </svg>
  );
  return (
    <section id="testimonials" className="section" style={{ background: 'var(--paper)' }}>
      <div className="container">
        <Reveal><p className="eyebrow">Testimonials</p></Reveal>
        <Reveal delay={1}><h2 className="hd hd-xl" style={{ marginTop: 14 }}>What owners say.</h2></Reveal>
        <Reveal delay={1}>
          <div className="g-summary">
            <span className="g-score">5.0</span>
            <Stars />
            <span className="g-based">Based on client reviews on</span>
            <GoogleG />
            <span className="g-word">Google</span>
          </div>
        </Reveal>
        <div className="g-grid">
          {quotes.map((t, i) => (
            <Reveal key={t.nm} delay={(i % 3) + 1}>
              <div className="g-card">
                <div className="g-head">
                  <span className="g-avatar" style={{ background: t.c }}>{t.nm[0]}</span>
                  <div className="g-meta">
                    <p className="g-name">{t.nm}</p>
                    <p className="g-role">{t.rl}</p>
                  </div>
                  <span className="g-logo"><GoogleG /></span>
                </div>
                <div className="g-rating">
                  <Stars />
                </div>
                <p className="g-text">{t.q}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- Glass bento ---------- */
function GlassBento() {
  return (
    <section className="glass-bento">
      <div className="orb" style={{ width: 420, height: 420, background: 'rgba(239,161,78,0.4)', top: '-6%', left: '-4%' }} />
      <div className="orb" style={{ width: 480, height: 480, background: 'rgba(125,156,132,0.5)', bottom: '-10%', right: '-6%' }} />
      <div className="container">
        <Reveal><p className="eyebrow" style={{ color: 'var(--brand-sage)' }}>The Acqius® network</p></Reveal>
        <Reveal delay={1}>
          <h2 className="hd hd-xl" style={{ marginTop: 14, color: '#fff', fontFamily: 'var(--font-serif)', fontWeight: 500 }}>
            Reach, discretion, and results.
          </h2>
        </Reveal>

        <div className="grid">
          <Reveal delay={1}>
            <div className="glass-card" style={{ height: '100%' }}>
              <div className="stat-big">1000+</div>
              <p className="stat-label">Acquirers in our global network — strategics, private equity, and international entrants.</p>
            </div>
          </Reveal>

          <Reveal delay={2}>
            <div className="glass-card" style={{ height: '100%' }}>
              <h3>Confidential by default, from first contact to close</h3>
              <p className="sub">Mandates are anonymised and released under NDA. Your intentions stay private until the right buyer is at the table.</p>
              <div className="transfer-row">
                <div className="transfer-node amber" aria-hidden="true">
                  <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 9h.01M15 9h.01M9 13h.01M15 13h.01M9 17h.01M15 17h.01" /></svg>
                </div>
                <div className="transfer-arrows" aria-hidden="true">
                  <svg width="100%" height="12" viewBox="0 0 120 12" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"><path d="M4 6h108M104 2l8 4-8 4" /></svg>
                  <svg width="100%" height="12" viewBox="0 0 120 12" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"><path d="M116 6H8M16 2l-8 4 8 4" /></svg>
                </div>
                <div className="transfer-node dark" aria-hidden="true">
                  <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M3 21h18M4 10h16M5 10l7-6 7 6M6 10v11M18 10v11M10 10v11M14 10v11" /></svg>
                </div>
              </div>
            </div>
          </Reveal>

          <Reveal delay={2} className="wide">
            <div className="glass-card wide">
              <div>
                <h3>Deal value realised for our clients</h3>
                <p className="sub">Across sell-side, buy-side, and capital-raising mandates in regulated and technically critical sectors.</p>
              </div>
              <div className="deal-panel">
                <div className="row-top">
                  <span className="k">Cumulative transaction value</span>
                  <span className="pill">Trailing 6 quarters</span>
                </div>
                <p className="amount">£420M+</p>
                <svg className="chart" viewBox="0 0 560 180" preserveAspectRatio="none" aria-hidden="true">
                  <defs>
                    <linearGradient id="dealFill" x1="0" y1="0" x2="0" y2="1">
                      <stop offset="0%" stopColor="rgba(239,161,78,0.4)" />
                      <stop offset="100%" stopColor="rgba(239,161,78,0)" />
                    </linearGradient>
                  </defs>
                  <path d="M0,150 L93,132 L186,120 L279,92 L372,74 L465,44 L560,20 L560,180 L0,180 Z" fill="url(#dealFill)" />
                  <path d="M0,150 L93,132 L186,120 L279,92 L372,74 L465,44 L560,20" fill="none" stroke="#efa14e" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" />
                </svg>
                <div className="months">
                  <span>Q1</span><span>Q2</span><span>Q3</span><span>Q4</span><span>Q5</span><span>Q6</span>
                </div>
              </div>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, {
  StatsBand, ServicesSection, WhyAcqiusSection, NewsSection,
  FourDivisionsBand, BusinessesSection, ExpertsCTA, TestimonialsSection, GlassBento, LatestNewsSection,
});