// Services overview page
const { useEffect, useState, useRef } = React;

const SERVICE_DATA = [
  {
    idx: "S/01",
    name: "Paid search",
    tag: "PPC · Shopping · YouTube",
    lede: "Google and Bing accounts that are profitable from the first auction — not the fourth quarter.",
    bullets: [
      "Auction-level restructuring, not just bid management",
      "Shopping feed architecture, GA4 → Merchant plumbing",
      "Brand, non-brand, and competitor strategies, separately accountable",
      "YouTube demand capture for the bottom of the funnel"
    ],
    proof: { num: "3.2×", lbl: "Avg. qualified-lead lift, first 90 days" }
  },
  {
    idx: "S/02",
    name: "Search optimization",
    tag: "Technical · Editorial · Authority",
    lede: "Compounded over quarters, not chased in weeks. We build share of voice the way you'd build an index fund.",
    bullets: [
      "Log-file, Core Web Vitals, and render-path audits",
      "Topic clusters briefed and shipped with your editorial team",
      "Digital PR and authority work (no link schemes, ever)",
      "International and multi-location SEO for scaled brands"
    ],
    proof: { num: "+412%", lbl: "12-month organic revenue, new clients (median)" }
  },
  {
    idx: "S/03",
    name: "Paid social",
    tag: "Meta · TikTok · LinkedIn",
    lede: "Creative that tests, audiences that clear CAC, and a weekly cadence that keeps winners compounding.",
    bullets: [
      "Creative testing framework with brief → edit → read-out in 7 days",
      "In-house UGC and studio production partners",
      "Retention and reactivation flows that extend LTV",
      "Full-funnel LinkedIn for ACV > $50k"
    ],
    proof: { num: "−38%", lbl: "Blended CAC across DTC portfolio, 2025" }
  },
  {
    idx: "S/04",
    name: "Content & editorial",
    tag: "Strategy · Editorial · SEO",
    lede: "Narrative, not noise. Briefs your operators would actually read; pieces your buyers would actually keep.",
    bullets: [
      "Editorial strategy rooted in commercial intent",
      "Staff writers with category chops (SaaS, finance, DTC, home)",
      "Distribution plans: organic, email, syndication, paid boosting",
      "AI as a tool, not as the work"
    ],
    proof: { num: "41", lbl: "Enterprise meetings booked, Q2 '25, single client" }
  },
  {
    idx: "S/05",
    name: "Analytics & attribution",
    tag: "GA4 · Warehouse · MMM",
    lede: "Enough plumbing to trust the number on the board. GA4, server-side, warehouse modeling, and MMM when the math warrants it.",
    bullets: [
      "Server-side tagging stack (GTM SS, or direct to your warehouse)",
      "GA4 + BigQuery attribution, with your first-party data in the seat of honor",
      "MMM calibrated with holdout tests — not a black box",
      "Dashboards your CFO will actually open"
    ],
    proof: { num: "100%", lbl: "Accounts with server-side tracking by day 30" }
  },
  {
    idx: "S/06",
    name: "Creative & brand",
    tag: "Identity · Ads · Social",
    lede: "Systems that scale across feeds, pages, and pitch decks — without going generic.",
    bullets: [
      "Brand sprints for growth-stage companies (2 weeks, fixed fee)",
      "Design systems that survive the handoff to in-house teams",
      "Ad creative libraries, weekly refresh",
      "Sonic and motion systems for video-first channels"
    ],
    proof: { num: "8:1", lbl: "Creative variants shipped vs. industry median" }
  },
  {
    idx: "S/07",
    name: "Web design & dev",
    tag: "Framer · Webflow · Next.js",
    lede: "Sites built to rank, load, and convert. We pick the stack that fits the team — never the agency.",
    bullets: [
      "Framer and Webflow for marketing sites your team can run",
      "Next.js and headless CMS for the programmatic-SEO jobs",
      "Performance and Core Web Vitals baked in, not bolted on",
      "Analytics, experimentation, and CRO from day one"
    ],
    proof: { num: "94", lbl: "Median Lighthouse performance score at launch" }
  }
];

function ServicesHero(){
  return (
    <section className="svc-hero">
      <div className="wrap svc-hero__wrap">
        <div>
          <span className="pill"><span className="dot"/>Services · 07 disciplines</span>
          <h1 className="display svc-hero__h1">
            One system.<br/>
            <em className="serif">Seven</em> ways we execute it.
          </h1>
          <p className="svc-hero__lede">
            We don't sell retainers by the discipline. Each engagement is scoped around the lowest-cost path to your next credible revenue milestone — we'll tell you which of these show up in the plan, and in what order.
          </p>
        </div>
        <aside className="svc-hero__aside">
          <div className="micro">On this page</div>
          <ul className="svc-hero__toc">
            {SERVICE_DATA.map(s => (
              <li key={s.idx}>
                <a href={`#${s.idx.replace('/','-').toLowerCase()}`}>
                  <span className="mono">{s.idx}</span>
                  <span>{s.name}</span>
                </a>
              </li>
            ))}
          </ul>
        </aside>
      </div>
    </section>
  );
}

function ServiceRow({s, i}){
  useReveal();
  const id = s.idx.replace('/','-').toLowerCase();
  return (
    <article className="svc" id={id}>
      <div className="wrap svc__wrap">
        <div className="svc__side">
          <div className="svc__idx mono">{s.idx}</div>
          <div className="svc__sticky">
            <div className="svc__proof">
              <div className="svc__proof-num display">{s.proof.num}</div>
              <div className="svc__proof-lbl">{s.proof.lbl}</div>
            </div>
            <a className="link" href="case-study.html">Read a case study →</a>
          </div>
        </div>
        <div className="svc__main">
          <div className="svc__tag mono">{s.tag}</div>
          <h2 className="display svc__name">{s.name}</h2>
          <p className="svc__lede serif">{s.lede}</p>
          <ul className="svc__list">
            {s.bullets.map((b, j) => (
              <li key={j} className="reveal" style={{transitionDelay: `${j*60}ms`}}>
                <span className="svc__bullet-idx mono">{String(j+1).padStart(2,'0')}</span>
                <span>{b}</span>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </article>
  );
}

function Stack(){
  const items = [
    ["Ads", "Google Ads", "Meta Ads", "LinkedIn Ads", "TikTok Ads", "Microsoft Ads", "Reddit"],
    ["Analytics", "GA4", "BigQuery", "Looker Studio", "Segment", "Amplitude", "Hotjar"],
    ["CMS / Dev", "Framer", "Webflow", "Next.js", "Sanity", "Contentful", "Shopify"],
    ["SEO", "Ahrefs", "Semrush", "Screaming Frog", "Clearscope", "Frase", "ContentKing"]
  ];
  return (
    <section className="stack">
      <div className="wrap stack__wrap">
        <div className="stack__head">
          <span className="micro">The stack</span>
          <h2 className="display stack__h2">Tools we know cold — and a few we prefer you not pay for.</h2>
        </div>
        <div className="stack__grid">
          {items.map(([cat, ...tools]) => (
            <div key={cat} className="stack__col">
              <div className="stack__cat mono">{cat}</div>
              <ul>{tools.map(t => <li key={t}>{t}</li>)}</ul>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Footprint(){
  return (
    <section className="footprint">
      <div className="wrap footprint__wrap">
        <span className="micro">Footprint</span>
        <div className="footprint__grid">
          <div className="footprint__stat">
            <div className="footprint__num display">$47M</div>
            <div className="footprint__lbl">Managed media, 2025</div>
          </div>
          <div className="footprint__stat">
            <div className="footprint__num display">180+</div>
            <div className="footprint__lbl">Active engagements</div>
          </div>
          <div className="footprint__stat">
            <div className="footprint__num display">14 yrs</div>
            <div className="footprint__lbl">Since 2011</div>
          </div>
          <div className="footprint__stat">
            <div className="footprint__num display">94%</div>
            <div className="footprint__lbl">Net retention, '24–'25</div>
          </div>
        </div>
      </div>
    </section>
  );
}

function ServicesCTA(){
  return (
    <section className="svc-cta">
      <div className="wrap svc-cta__wrap">
        <h2 className="display svc-cta__h2">
          Not sure which of the seven<br/>
          your next quarter <em className="serif">actually</em> needs?
        </h2>
        <p className="svc-cta__sub">Send us your numbers. We'll come back with a one-page read — what we'd do first, what we'd leave alone, and the three benchmarks we'd hold ourselves to.</p>
        <a className="btn btn--primary" href="mailto:hello@getvisible.com">Request an audit <span className="arrow">→</span></a>
      </div>
    </section>
  );
}

function Page(){
  useReveal();
  return (
    <>
      <CursorBlob/>
      <Nav active="services"/>
      <main>
        <ServicesHero/>
        <div className="svc-list">
          {SERVICE_DATA.map((s, i) => <ServiceRow key={s.idx} s={s} i={i}/>)}
        </div>
        <Stack/>
        <Footprint/>
        <ServicesCTA/>
      </main>
      <Footer/>
      <Tweaks/>
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<Page/>);