const CTA_URL = 'https://forms.withsurface.com/s/cmsrsvk1c00010akn90vu70t2';
window.CTA_URL = CTA_URL;

const Mark = () => (
  <svg viewBox="0 0 328 248" aria-hidden="true" style={{ width: '100%', height: '100%', display: 'block' }}><rect x="0" y="176" width="72" height="72" fill="#E8833A"></rect><rect x="91" y="108" width="84" height="84" fill="#0E1A2E"></rect><rect x="202" y="0" width="126" height="126" fill="#1E3A8A"></rect></svg>
);

const Nav = () => (
  <nav className="nav">
    <div className="wrap">
      <a href="#top" className="brand"><img className="logo-img" src="assets/apex-logo.png" alt="Apex Growth" /></a>
      <div className="nav-links">
        <a href="#team">Team</a><a href="#work">Results</a><a href="#services">Services</a>
      </div>
      <a href={CTA_URL} data-form="1" className="btn btn-primary" style={{ padding: '10px 16px', fontSize: 14 }}>Talk to an expert</a>
    </div>
  </nav>
);

const GrowthChart = () => (
  <div className="card chart hero-chart">
    <div className="chart-head"><span className="chart-title">Revenue vs. customer acquisition cost</span><span className="tag-illus">Illustrative · 8 quarters</span></div>
    <svg viewBox="0 0 800 256" role="img" aria-label="Revenue rises steeply while acquisition cost with Apex stays nearly flat; without Apex, cost rises with spend">
      <defs>
        <linearGradient id="revFill" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stopColor="var(--blue-500)" stopOpacity=".16"></stop><stop offset="1" stopColor="var(--blue-500)" stopOpacity="0"></stop></linearGradient>
      </defs>
      {[30,80,130,180].map(y => <line key={y} x1="40" x2="640" y1={y} y2={y} stroke="var(--line-2)" strokeWidth="1"></line>)}
      <line x1="40" y1="230" x2="640" y2="230" stroke="var(--ink)" strokeOpacity=".5" strokeWidth="1"></line>
      <path className="pop" d="M40 214 C220 210 360 150 480 86 S600 22 640 16 L640 230 L40 230 Z" fill="url(#revFill)" style={{ animationDelay: '1.4s' }}></path>
      <path className="gap-fill" d="M40 192 C240 188 400 140 520 104 S610 78 640 72 L640 196 C460 200 260 196 40 192 Z" fill="var(--warm)" fillOpacity=".08"></path>
      <path id="revPath" className="draw" pathLength="1" d="M40 214 C220 210 360 150 480 86 S600 22 640 16" fill="none" stroke="var(--blue-600)" strokeWidth="3.5" strokeLinecap="round"></path>
      <path className="draw d2" pathLength="1" d="M40 192 C240 188 400 140 520 104 S610 78 640 72" fill="none" stroke="var(--warm)" strokeWidth="2.5" strokeLinecap="round" strokeDasharray="0.012 0.008"></path>
      <path className="draw d3" pathLength="1" d="M40 192 C260 196 460 200 640 196" fill="none" stroke="var(--ink)" strokeWidth="3" strokeLinecap="round"></path>
      <g className="gap-label" fontFamily="var(--mono)" fontSize="11" letterSpacing=".08em" fill="var(--warm)">
        <line x1="600" x2="600" y1="86" y2="192" stroke="var(--warm)" strokeWidth="1.25"></line>
        <path d="M595 92 L600 86 L605 92 M595 186 L600 192 L605 186" fill="none" stroke="var(--warm)" strokeWidth="1.25"></path>
        <text x="590" y="142" textAnchor="end">COST YOU AVOID</text>
      </g>
      <g className="climber"><circle r="14" fill="var(--blue-500)" fillOpacity=".18"></circle><circle r="5" fill="var(--blue-600)" stroke="#fff" strokeWidth="2"></circle><animateMotion dur="3.6s" begin="2.2s" repeatCount="indefinite" keyPoints="0;1;1" keyTimes="0;0.8;1" calcMode="linear"><mpath href="#revPath"></mpath></animateMotion></g>
      <circle className="pop" cx="640" cy="16" r="5" fill="var(--blue-600)" stroke="#fff" strokeWidth="2"></circle>
      <circle className="pop" cx="640" cy="72" r="5" fill="var(--warm)" stroke="#fff" strokeWidth="2"></circle>
      <circle className="pop" cx="640" cy="196" r="5" fill="var(--ink)" stroke="#fff" strokeWidth="2"></circle>
      <g className="pop end-labels" fontFamily="var(--sans)" fontSize="13" fontWeight="600">
        <text x="654" y="20" fill="var(--blue-700)">Revenue</text>
        <text x="654" y="70" fill="var(--warm)">Cost, spending</text><text x="654" y="86" fill="var(--warm)">more without a plan</text>
        <text x="654" y="194" fill="var(--ink)">Cost with Apex</text><text x="654" y="210" fill="var(--muted)" fontWeight="500">nearly flat</text>
      </g>
      <g fontFamily="var(--mono)" fontSize="10.5" letterSpacing=".06em" fill="var(--muted)"><text x="40" y="248" textAnchor="middle">Q1</text><text x="125.71428571428571" y="248" textAnchor="middle">Q2</text><text x="211.42857142857142" y="248" textAnchor="middle">Q3</text><text x="297.14285714285717" y="248" textAnchor="middle">Q4</text><text x="382.85714285714283" y="248" textAnchor="middle">Q5</text><text x="468.57142857142856" y="248" textAnchor="middle">Q6</text><text x="554.2857142857143" y="248" textAnchor="middle">Q7</text><text x="640" y="248" textAnchor="middle">Q8</text></g>
    </svg>
  </div>
);

const TypeWord = ({ words }) => {
  const [i, setI] = React.useState(0);
  const [n, setN] = React.useState(words[0].length);
  const [del, setDel] = React.useState(false);
  React.useEffect(() => {
    const w = words[i];
    let t;
    if (!del && n === w.length) t = setTimeout(() => setDel(true), 4500);
    else if (del && n === 0) t = setTimeout(() => { setDel(false); setI((i + 1) % words.length); }, 500);
    else t = setTimeout(() => setN(n + (del ? -1 : 1)), del ? 90 : 150);
    return () => clearTimeout(t);
  }, [n, del, i]);
  return <span className="type-word"><span>{words[i].slice(0, n)}</span></span>;
};

const Hero = () => (
  <header className="hero grid-bg" id="top">
    <div className="wrap hero-stack">
      <h1 className="h1" aria-label="More customers, revenue and pipeline. Lower cost."><span aria-hidden="true">More <TypeWord words={['customers', 'revenue', 'pipeline']} />.<br />Lower cost.</span></h1>
      <p className="lede hero-sub"><strong>$1B+ in paid media</strong> optimized by digital growth strategists with 10 to 20+ years of experience each. One team for strategy, paid acquisition, CRO and creative, built for top <strong>AI, B2B and D2C</strong> companies.</p>
      <div className="hero-actions">
        <a href={CTA_URL} data-form="1" className="btn btn-primary">Talk to an expert →</a>
        <a href="#work" className="btn btn-ghost">See the results</a>
      </div>
      <GrowthChart />
    </div>
  </header>
);

const Logos = () => {
  const logos = [['Shopify','assets/shopify.svg',34],['TransUnion','assets/transunion.png',34],['ABCmouse','assets/abcmouse.svg',30],['Hero Bread','assets/hero-bread.svg',52],['Upstart','assets/upstart.png',28],['Octave Health','assets/octave.png',30],['Redpanda','assets/redpanda.svg',22],['Pantaya','assets/pantaya.png',48],['Autoscience','assets/autoscience.png',26]];
  const items = [...logos, ...logos];
  return (
    <section className="logos">
      <div className="wrap">
        <div className="logos-head"><span className="label">Trusted by growth teams at</span></div>
        <div className="marquee"><div className="marquee-track">{items.map(([n,s,h],i) => <img key={i} src={s} alt={n} style={{ height: h }} />)}</div></div>
      </div>
    </section>
  );
};


const FormModal = () => {
  const [open, setOpen] = React.useState(false);
  React.useEffect(() => {
    const onClick = e => { const a = e.target.closest && e.target.closest('a[data-form]'); if (a) { e.preventDefault(); setOpen(true); } };
    const onKey = e => { if (e.key === 'Escape') setOpen(false); };
    document.addEventListener('click', onClick); document.addEventListener('keydown', onKey);
    return () => { document.removeEventListener('click', onClick); document.removeEventListener('keydown', onKey); };
  }, []);
  React.useEffect(() => { document.body.style.overflow = open ? 'hidden' : ''; }, [open]);
  if (!open) return null;
  return (
    <div className="form-modal" role="dialog" aria-modal="true" aria-label="Talk to an expert" onClick={() => setOpen(false)}>
      <div className="form-modal-box" onClick={e => e.stopPropagation()}>
        <button className="form-modal-x" aria-label="Close" onClick={() => setOpen(false)}>×</button>
        <iframe src={CTA_URL} title="Talk to an expert" allow="clipboard-write"></iframe>
      </div>
    </div>
  );
};

Object.assign(window, { Mark, Nav, Hero, Logos, FormModal });
