// Sections: About, Services, GEO explainer, Analytics, Case studies, Stack, Contact, Footer

const { useState: useState2, useEffect: useEffect2, useRef: useRef2 } = React;

// =============================================================
// Logos strip
// =============================================================
const ClientsStrip = () => {
  const items = [
    "Northwind", "Helio", "Orbital", "Ledgerwise", "Telemetric", "Vector Ops",
    "Compliant.dev", "Mercator", "Slate Labs", "Halcyon", "Parallax", "Northstar",
  ];
  return (
    <section className="section-narrow" style={{ paddingTop: 40, paddingBottom: 40 }}>
      <div className="container">
        <div className="row" style={{ justifyContent: "space-between", marginBottom: 20 }}>
          <span style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--text-3)", textTransform: "uppercase", letterSpacing: "0.1em" }}>
            Trusted by AI-forward operators
          </span>
          <span style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--text-3)" }}>
            128 brands · 14 countries
          </span>
        </div>
        <div className="marquee">
          <div className="marquee-track">
            {items.concat(items).map((name, i) => (
              <span key={i} style={{
                fontFamily: "var(--font-display)",
                fontStyle: "italic",
                fontSize: 28,
                color: "var(--text-3)",
                opacity: 0.7,
                whiteSpace: "nowrap",
              }}>
                {name}
              </span>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

// =============================================================
// About / Positioning
// =============================================================
const About = () => (
  <section className="section" id="about">
    <div className="container">
      <div className="section-head" style={{ maxWidth: 820 }}>
        <span className="eyebrow"><Sparkle /> The next layer of search</span>
        <h2 className="h-section">
          Discovery has moved <span className="serif gradient-text">inside the model</span>.
          Most marketers are still optimizing the page.
        </h2>
        <p className="lede">
          Livingstone is the growth infrastructure layer for an internet
          where ChatGPT, Perplexity, Gemini, and Claude decide what gets
          recommended. We make brands citable, retrievable, and the default
          answer — at every step of the AI funnel.
        </p>
      </div>

      <div className="stats-grid" style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 16 }}>
        {[
          { label: "AI search share-of-voice", val: "+342%", note: "avg. client lift in 90 days" },
          { label: "Cited in", val: "47", note: "AI engines monitored live" },
          { label: "Org. traffic", val: "+118%", note: "from GEO-led content" },
          { label: "Automated workflows", val: "1.4M", note: "events/mo across stack" },
        ].map((s, i) => (
          <div key={i} className="card card-glow" style={{ padding: 22, minHeight: 150 }}>
            <div style={{ fontSize: 11, fontFamily: "var(--font-mono)", color: "var(--text-3)", textTransform: "uppercase", letterSpacing: "0.08em", marginBottom: 14 }}>{s.label}</div>
            <div className="stat-num gradient-text">{s.val}</div>
            <div style={{ fontSize: 12.5, color: "var(--text-3)", marginTop: 6 }}>{s.note}</div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

// =============================================================
// Services
// =============================================================
const SERVICES = [
  { num: "01", title: "GEO Optimization", desc: "Engineer brand presence into the retrieval layer of LLMs. Citation strategy, embedding hygiene, source authority.", tag: "core", icon: "geo" },
  { num: "02", title: "AI Search Visibility", desc: "Daily monitoring across 47 AI engines. Share-of-voice, ranking, sentiment, and competitive citation tracking.", tag: "monitoring", icon: "radar" },
  { num: "03", title: "Technical SEO", desc: "Crawlability, IndexNow, Core Web Vitals, schema, and llms.txt for the new generation of crawlers.", tag: "foundation", icon: "code" },
  { num: "04", title: "Marketing Automation", desc: "n8n, Zapier, and bespoke event pipelines orchestrating sales, content, lifecycle, and analytics.", tag: "ops", icon: "flow" },
  { num: "05", title: "AI Content Systems", desc: "Retrieval-augmented content factories with editorial control, source citations, and brand voice models.", tag: "content", icon: "stack" },
  { num: "06", title: "Conversational Search", desc: "Optimize for the questions humans actually ask LLMs. Intent mapping, prompt-tier keyword research.", tag: "research", icon: "chat" },
  { num: "07", title: "AI Chat Optimization", desc: "Position your brand inside the answer — not just in the citations. Persona, schema, and retrieval bias tuning.", tag: "core", icon: "spark" },
  { num: "08", title: "Branding & Strategy", desc: "Positioning that translates cleanly to embeddings: distinctive language, defensible categories, named POVs.", tag: "strategy", icon: "compass" },
  { num: "09", title: "Analytics Infrastructure", desc: "GA4 + warehouse + AI-attribution. See which prompts drive pipeline, not just which keywords.", tag: "data", icon: "chart" },
  { num: "10", title: "Conversion Systems", desc: "Landing, lifecycle, and lead routing engineered around AI-referred visitors who arrive pre-qualified.", tag: "growth", icon: "target" },
];

const ServiceIcon = ({ kind }) => {
  const common = { width: 22, height: 22, viewBox: "0 0 22 22", fill: "none", stroke: "currentColor", strokeWidth: 1.4, strokeLinecap: "round", strokeLinejoin: "round" };
  switch (kind) {
    case "geo": return (<svg {...common}><circle cx="11" cy="11" r="7" /><path d="M4 11 H18 M11 4 a10 10 0 0 1 0 14 a10 10 0 0 1 0 -14" /></svg>);
    case "radar": return (<svg {...common}><circle cx="11" cy="11" r="8" /><circle cx="11" cy="11" r="4" /><path d="M11 11 L17 7" /></svg>);
    case "code": return (<svg {...common}><path d="M7 7 L3 11 L7 15 M15 7 L19 11 L15 15 M13 5 L9 17" /></svg>);
    case "flow": return (<svg {...common}><circle cx="5" cy="6" r="2" /><circle cx="17" cy="6" r="2" /><circle cx="11" cy="16" r="2" /><path d="M5 8 V12 a2 2 0 0 0 2 2 H9 M17 8 V12 a2 2 0 0 1 -2 2 H13" /></svg>);
    case "stack": return (<svg {...common}><path d="M11 3 L19 7 L11 11 L3 7 Z M3 11 L11 15 L19 11 M3 15 L11 19 L19 15" /></svg>);
    case "chat": return (<svg {...common}><path d="M4 6 a2 2 0 0 1 2 -2 H16 a2 2 0 0 1 2 2 V13 a2 2 0 0 1 -2 2 H9 L5 18 V15 a2 2 0 0 1 -1 -2 Z" /><circle cx="8" cy="9" r="0.6" fill="currentColor" /><circle cx="11" cy="9" r="0.6" fill="currentColor" /><circle cx="14" cy="9" r="0.6" fill="currentColor" /></svg>);
    case "spark": return (<svg {...common}><path d="M11 3 L13 9 L19 11 L13 13 L11 19 L9 13 L3 11 L9 9 Z" /></svg>);
    case "compass": return (<svg {...common}><circle cx="11" cy="11" r="8" /><path d="M14 8 L10 10 L8 14 L12 12 Z" /></svg>);
    case "chart": return (<svg {...common}><path d="M4 17 V8 M9 17 V4 M14 17 V11 M19 17 V6" /></svg>);
    case "target": return (<svg {...common}><circle cx="11" cy="11" r="7" /><circle cx="11" cy="11" r="3" /><circle cx="11" cy="11" r="0.5" fill="currentColor" /></svg>);
    default: return null;
  }
};

const Services = () => (
  <section className="section" id="services">
    <div className="container">
      <div className="section-head">
        <span className="eyebrow"><Sparkle /> Services</span>
        <h2 className="h-section">Ten capabilities. <span style={{ color: "var(--text-3)" }}>One growth engine.</span></h2>
        <p className="lede">
          Modular by design. Take one capability, take all ten — they share
          the same data spine, so a GEO win compounds into automation,
          attribution, and revenue.
        </p>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(260px, 1fr))", gap: 14 }}>
        {SERVICES.map(s => (
          <div key={s.num} className="card service-card">
            <div className="row" style={{ justifyContent: "space-between" }}>
              <span className="service-num">{s.num}</span>
              <span className="tag">{s.tag}</span>
            </div>
            <div style={{ color: "var(--blue-2)" }}>
              <ServiceIcon kind={s.icon} />
            </div>
            <div className="h-card">{s.title}</div>
            <div className="service-desc">{s.desc}</div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

// =============================================================
// GEO explainer — animated flow
// =============================================================
const GeoFlow = () => {
  const [step, setStep] = useState2(0);
  useEffect2(() => {
    const id = setInterval(() => setStep(s => (s + 1) % 4), 2200);
    return () => clearInterval(id);
  }, []);

  const stages = [
    { label: "Human asks", detail: "“which logging tool handles AI workloads?”" },
    { label: "LLM retrieves", detail: "embeddings · context · sources" },
    { label: "Model cites", detail: "your brand · ranked first" },
    { label: "Customer arrives", detail: "pre-qualified · high intent" },
  ];

  return (
    <div className="card card-glow" style={{ padding: 32, position: "relative", overflow: "hidden" }}>
          <div style={{ position: "absolute", inset: 0, background: "radial-gradient(800px 300px at 50% 100%, color-mix(in oklab, var(--blue) 16%, transparent), transparent 60%)", pointerEvents: "none" }} />

      <div className="process-grid" style={{ position: "relative", display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 12, alignItems: "stretch" }}>
        {stages.map((s, i) => {
          const active = step === i;
          const past = step > i;
          return (
            <React.Fragment key={i}>
              <div style={{
                padding: 18,
                border: "1px solid " + (active ? "color-mix(in oklab, var(--blue) 50%, transparent)" : "var(--line)"),
                borderRadius: 12,
                background: active
                  ? "linear-gradient(180deg, color-mix(in oklab, var(--blue) 14%, transparent), color-mix(in oklab, var(--violet) 8%, transparent))"
                  : past
                    ? "rgba(255,255,255,0.02)"
                    : "rgba(255,255,255,0.01)",
                boxShadow: active ? "0 0 0 1px color-mix(in oklab, var(--blue) 30%, transparent), 0 20px 50px -20px color-mix(in oklab, var(--blue) 48%, transparent)" : "none",
                transition: "all 0.4s ease",
              }}>
                <div style={{
                  width: 26, height: 26, borderRadius: 6,
                  background: active ? "var(--grad-1)" : "rgba(255,255,255,0.04)",
                  display: "grid", placeItems: "center",
                  fontFamily: "var(--font-mono)", fontSize: 12,
                  color: active ? "#fff" : "var(--text-3)",
                  marginBottom: 12,
                  transition: "background 0.3s",
                }}>{i + 1}</div>
                <div style={{ fontSize: 14, color: "var(--text)", marginBottom: 4 }}>{s.label}</div>
                <div style={{ fontSize: 12, color: "var(--text-3)", fontFamily: i === 0 ? "var(--font-display)" : "var(--font-mono)", fontStyle: i === 0 ? "italic" : "normal" }}>{s.detail}</div>
              </div>
            </React.Fragment>
          );
        })}
      </div>

      {/* Connecting flow line */}
      <div style={{ position: "relative", height: 60, marginTop: 20 }}>
        <svg width="100%" height="60" style={{ position: "absolute", inset: 0 }} preserveAspectRatio="none" viewBox="0 0 100 60">
          <defs>
            <linearGradient id="flow" x1="0" x2="1" y1="0" y2="0">
              <stop offset="0%" stopColor="var(--blue)" />
              <stop offset="100%" stopColor="var(--violet)" />
            </linearGradient>
          </defs>
          <path d="M 5 50 Q 25 10, 50 30 T 95 12" stroke="url(#flow)" strokeWidth="1.5" fill="none" strokeDasharray="3 4" />
          {[0.15, 0.4, 0.65, 0.9].map((t, i) => (
            <circle key={i} cx={5 + (95 - 5) * t} cy={[44, 22, 28, 14][i]} r={step === i ? "2.5" : "1.5"} fill={step === i ? "#fff" : "var(--blue-2)"} opacity={step === i ? 1 : 0.5} />
          ))}
        </svg>
      </div>
    </div>
  );
};

const Geo = () => (
  <section className="section" id="geo">
    <div className="container">
      <div className="geo-grid" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64, alignItems: "flex-start" }}>
        <div>
          <span className="eyebrow"><Sparkle /> Generative Engine Optimization</span>
          <h2 className="h-section" style={{ marginTop: 18 }}>
            What is <span className="serif gradient-text">GEO</span>?
          </h2>
          <p className="lede" style={{ marginTop: 18 }}>
            Generative Engine Optimization is the practice of making your
            brand the source LLMs choose when they answer. It's not SEO
            with a coat of paint — it's a different stack.
          </p>

          <div style={{ display: "flex", flexDirection: "column", gap: 12, marginTop: 28 }}>
            {[
              ["Retrieval", "Get indexed by the engines that actually feed answers — Bing, Brave, Common Crawl, vector caches."],
              ["Authority", "Be the source LLMs trust: structured citations, named entities, defensible POV."],
              ["Recency", "Win the freshness signal. Topics rotate; your presence shouldn't."],
              ["Synonyms", "Capture every prompt variant — 'best CRM' is 412 different queries."],
            ].map(([k, v]) => (
              <div key={k} className="row" style={{ alignItems: "flex-start", gap: 14 }}>
                <span style={{
                  flexShrink: 0,
                  width: 28, height: 28, borderRadius: 8,
                  display: "grid", placeItems: "center",
                  background: "color-mix(in oklab, var(--blue) 12%, transparent)",
                  border: "1px solid color-mix(in oklab, var(--blue) 35%, transparent)",
                  color: "var(--blue-2)",
                  fontFamily: "var(--font-mono)",
                  fontSize: 11,
                }}>{k[0]}</span>
                <div>
                  <div style={{ fontSize: 14.5, color: "var(--text)", marginBottom: 2 }}>{k}</div>
                  <div style={{ fontSize: 13, color: "var(--text-3)", lineHeight: 1.55 }}>{v}</div>
                </div>
              </div>
            ))}
          </div>
        </div>

        <div style={{ position: "sticky", top: 100 }}>
          <GeoFlow />
          <div className="terminal" style={{ marginTop: 16, padding: 18, border: "1px solid var(--line)", borderRadius: 12, background: "rgba(7,7,10,0.8)" }}>
            <div><span className="comment">// share-of-voice diff · last 30d</span></div>
            <div><span className="prompt">geo&gt;</span> diff --before=2025-10-27 --after=2026-05-26</div>
            <div style={{ marginTop: 8 }}>
              <span className="key">chatgpt</span>     <span className="val">8.2%</span>  → <span className="num">38.4%</span> <span style={{ color: "var(--green)" }}>↑</span>
            </div>
            <div>
              <span className="key">perplexity</span>  <span className="val">4.1%</span>  → <span className="num">29.7%</span> <span style={{ color: "var(--green)" }}>↑</span>
            </div>
            <div>
              <span className="key">gemini</span>      <span className="val">2.0%</span>  → <span className="num">18.1%</span> <span style={{ color: "var(--green)" }}>↑</span>
            </div>
            <div>
              <span className="key">claude</span>      <span className="val">3.4%</span>  → <span className="num">22.6%</span> <span style={{ color: "var(--green)" }}>↑</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
);

// =============================================================
// Analytics dashboard
// =============================================================
const useTickingData = (length = 24, base = 50, vol = 20) => {
  const [data, setData] = useState2(() =>
    Array.from({ length }, (_, i) => base + Math.sin(i / 3) * vol * 0.6 + Math.random() * vol * 0.4)
  );
  useEffect2(() => {
    const id = setInterval(() => {
      setData(prev => {
        const next = [...prev.slice(1), Math.max(0, prev[prev.length - 1] + (Math.random() - 0.3) * vol * 0.5)];
        return next;
      });
    }, 1400);
    return () => clearInterval(id);
  }, []);
  return data;
};

const LiveDataRow = ({ label, color, engine, last, delta }) => {
  return (
    <div className="row" style={{
      justifyContent: "space-between",
      padding: "10px 0",
      borderBottom: "1px solid var(--line)",
    }}>
      <div className="row gap-3">
        {engine
          ? <EngineMark engine={engine} size={14} />
          : <span style={{ width: 8, height: 8, borderRadius: 2, background: color }} />}
        <span style={{ fontSize: 13.5, color: "var(--text)" }}>{label}</span>
      </div>
      <div className="row gap-3">
        <span style={{ fontFamily: "var(--font-mono)", fontSize: 13, color: "var(--text)" }}>{last}</span>
        <span style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--green)" }}>{delta}</span>
      </div>
    </div>
  );
};

const Bars = ({ data, color = "var(--blue)", height = 80 }) => {
  const max = Math.max(...data);
  return (
    <div style={{ display: "flex", alignItems: "flex-end", gap: 4, height }}>
      {data.map((v, i) => (
        <div key={i} style={{
          flex: 1,
          height: `${(v / max) * 100}%`,
          background: `linear-gradient(180deg, ${color}, ${color}22)`,
          borderRadius: 2,
          minHeight: 4,
          transition: "height 0.6s ease",
        }} />
      ))}
    </div>
  );
};

const Analytics = () => {
  const series1 = useTickingData(40, 60, 30);
  const series2 = useTickingData(40, 40, 25);
  const bars = useTickingData(14, 50, 20);

  return (
    <section className="section" id="analytics">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow"><Sparkle /> Analytics infrastructure</span>
          <h2 className="h-section">Every prompt. Every citation. <span style={{ color: "var(--text-3)" }}>Every dollar.</span></h2>
          <p className="lede">
            We pipe AI search data into your warehouse alongside GA4, ads,
            and CRM — so attribution finally answers the question executives
            actually ask: "which LLM is bringing us pipeline?"
          </p>
        </div>

        <div className="card card-glow" style={{ padding: 24 }}>
          {/* Top KPI strip */}
          <div className="analytics-stats-grid" style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 16, marginBottom: 24 }}>
            {[
              { k: "AI-referred sessions", v: "284,910", d: "+34.2%" },
              { k: "Share-of-voice", v: "38.4%", d: "+12.1pp" },
              { k: "Citation rank", v: "2.1", d: "↓ from 6.4" },
              { k: "Pipeline attributed", v: "$1.42M", d: "+218%" },
            ].map(s => (
              <div key={s.k} style={{
                padding: 16,
                border: "1px solid var(--line)",
                borderRadius: 10,
                background: "rgba(255,255,255,0.015)",
              }}>
                <div style={{ fontSize: 11, fontFamily: "var(--font-mono)", color: "var(--text-3)", textTransform: "uppercase", letterSpacing: "0.08em", marginBottom: 8 }}>{s.k}</div>
                <div style={{ fontFamily: "var(--font-sans)", fontSize: 26, color: "var(--text)", letterSpacing: "-0.025em" }}>{s.v}</div>
                <div style={{ fontSize: 12, color: "var(--green)", fontFamily: "var(--font-mono)", marginTop: 4 }}>{s.d}</div>
              </div>
            ))}
          </div>

          {/* Chart row */}
          <div className="analytics-chart-grid" style={{ display: "grid", gridTemplateColumns: "2fr 1fr", gap: 16 }}>
            <div style={{ border: "1px solid var(--line)", borderRadius: 12, padding: 18, background: "rgba(255,255,255,0.01)" }}>
              <div className="row" style={{ justifyContent: "space-between", marginBottom: 14 }}>
                <div>
                  <div style={{ fontSize: 13, color: "var(--text)" }}>AI search visibility · 30d</div>
                  <div style={{ fontSize: 12, color: "var(--text-3)" }}>Hourly polling · 47 engines</div>
                </div>
                <div className="row gap-3">
                  <span className="tag tag-blue">SOV</span>
                  <span className="tag tag-violet">Citations</span>
                </div>
              </div>
              <div style={{ position: "relative" }}>
                <Sparkline data={series1} width={780} height={140} color="var(--blue)" />
                <div style={{ position: "absolute", top: 0, left: 0, right: 0 }}>
                  <Sparkline data={series2} width={780} height={140} color="var(--violet)" fill={false} />
                </div>
              </div>
              <div className="row" style={{ marginTop: 8, fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--text-3)", justifyContent: "space-between" }}>
                <span>Apr 28</span><span>May 5</span><span>May 12</span><span>May 19</span><span>May 26</span>
              </div>
            </div>

            <div style={{ border: "1px solid var(--line)", borderRadius: 12, padding: 18, background: "rgba(255,255,255,0.01)" }}>
              <div style={{ fontSize: 13, color: "var(--text)", marginBottom: 4 }}>Engine mix</div>
              <div style={{ fontSize: 12, color: "var(--text-3)", marginBottom: 16 }}>Citations by source</div>
              <Bars data={bars} color="var(--violet)" height={110} />
              <div style={{ marginTop: 14 }}>
                <LiveDataRow engine="gpt" label="ChatGPT" last="38.4%" delta="+4.1" />
                <LiveDataRow engine="perplexity" label="Perplexity" last="29.7%" delta="+8.2" />
                <LiveDataRow engine="gemini" label="Gemini" last="18.1%" delta="+2.4" />
                <LiveDataRow engine="claude" label="Claude" last="13.8%" delta="+5.6" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

// =============================================================
// Case studies
// =============================================================
const CASES = [
  {
    brand: "Northwind",
    tag: "B2B SaaS · CRM",
    headline: "0 → 38% share-of-voice across all major AI engines in 90 days.",
    metrics: [
      { k: "AI citations", v: "+1,240%", note: "from 17 → 228/mo" },
      { k: "Org. signups", v: "+312%", note: "AI-referred cohort" },
      { k: "Pipeline", v: "$4.8M", note: "attributable to GEO" },
    ],
    accent: "var(--blue)",
  },
  {
    brand: "Ledgerwise",
    tag: "Fintech · Embedded compliance",
    headline: "Default-cited answer for 'embedded KYC' across GPT-5 and Claude.",
    metrics: [
      { k: "Citation rank", v: "1.3", note: "from 14.6" },
      { k: "Demo bookings", v: "+604%", note: "AI-sourced leads" },
      { k: "CAC", v: "−47%", note: "blended" },
    ],
    accent: "var(--violet)",
  },
  {
    brand: "Telemetric",
    tag: "Devtools · Observability",
    headline: "Cited alongside Datadog in 9 of 10 LLM observability prompts.",
    metrics: [
      { k: "SOV", v: "41.2%", note: "category total" },
      { k: "Free → paid", v: "+89%", note: "AI cohort vs. baseline" },
      { k: "Time-to-quote", v: "−68%", note: "automation impact" },
    ],
    accent: "var(--cyan)",
  },
];

const CaseStudies = () => {
  return (
    <section className="section" id="work">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow"><Sparkle /> Selected work</span>
          <h2 className="h-section">Three engagements. <span style={{ color: "var(--text-3)" }}>Three categories rewritten.</span></h2>
        </div>

        <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
          {CASES.map((c, i) => (
            <div key={c.brand} className="card card-glow case-card" style={{
              padding: 32,
              display: "grid",
              gridTemplateColumns: "1.1fr 1.4fr",
              gap: 40,
              alignItems: "center",
              position: "relative",
              overflow: "hidden",
            }}>
              <div className="case-metrics-grid" style={{
                position: "absolute",
                top: -80, right: -80,
                width: 280, height: 280,
                borderRadius: "50%",
                background: c.accent,
                filter: "blur(120px)",
                opacity: 0.18,
                pointerEvents: "none",
              }} />
              <div style={{ position: "relative" }}>
                <div className="row gap-3" style={{ marginBottom: 16 }}>
                  <span style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: 36, color: "var(--text)" }}>{c.brand}</span>
                  <span className="tag">{c.tag}</span>
                </div>
                <div style={{ fontSize: 20, lineHeight: 1.25, color: "var(--text)", letterSpacing: "-0.015em", maxWidth: 420 }}>
                  {c.headline}
                </div>
                <a href="#" style={{
                  display: "inline-flex",
                  alignItems: "center",
                  gap: 6,
                  marginTop: 22,
                  fontSize: 13,
                  color: "var(--blue-2)",
                  fontFamily: "var(--font-mono)",
                }}>
                  Read case study <Arrow />
                </a>
              </div>

              <div style={{
                display: "grid",
                gridTemplateColumns: "repeat(3, 1fr)",
                gap: 1,
                background: "var(--line)",
                border: "1px solid var(--line)",
                borderRadius: 12,
                overflow: "hidden",
                position: "relative",
              }}>
                {c.metrics.map(m => (
                  <div key={m.k} style={{ padding: 22, background: "rgba(11,11,17,0.7)", backdropFilter: "blur(8px)" }}>
                    <div style={{ fontSize: 11, fontFamily: "var(--font-mono)", color: "var(--text-3)", textTransform: "uppercase", letterSpacing: "0.08em", marginBottom: 10 }}>{m.k}</div>
                    <div style={{ fontSize: 32, letterSpacing: "-0.03em", color: "var(--text)", marginBottom: 4 }}>{m.v}</div>
                    <div style={{ fontSize: 12, color: "var(--text-3)" }}>{m.note}</div>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// =============================================================
// Stack marquee
// =============================================================
const Stack = () => {
  const items = [
    { name: "OpenAI", mark: "gpt" },
    { name: "Anthropic", mark: "claude" },
    { name: "Google Gemini", mark: "gemini" },
    { name: "Perplexity", mark: "perplexity" },
    { name: "Google Analytics", mark: "ga" },
    { name: "SEMrush", mark: "semrush" },
    { name: "Ahrefs", mark: "ahrefs" },
    { name: "HubSpot", mark: "hubspot" },
    { name: "Zapier", mark: "zapier" },
    { name: "n8n", mark: "n8n" },
    { name: "Meta Ads", mark: "meta" },
    { name: "Google Search Console", mark: "gsc" },
    { name: "BigQuery", mark: "bigquery" },
    { name: "Segment", mark: "segment" },
    { name: "Mixpanel", mark: "mixpanel" },
    { name: "Brave Search", mark: "brave" },
  ];
  return (
    <section className="section" id="stack" style={{ paddingTop: 80 }}>
      <div className="container">
        <div className="section-head center" style={{ alignItems: "center", margin: "0 auto 48px" }}>
          <span className="eyebrow"><Sparkle /> Technology stack</span>
          <h2 className="h-section">Composable. <span style={{ color: "var(--text-3)" }}>Vendor-agnostic.</span></h2>
        </div>

        <div className="stack-grid" style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 12 }}>
          {items.map(it => (
            <div key={it.name} className="card stack-card" style={{
              padding: "18px 20px",
              display: "flex", alignItems: "center", gap: 12,
              transition: "all 0.2s",
            }}>
              <span style={{
                width: 32, height: 32, borderRadius: 8,
                background: "linear-gradient(135deg, color-mix(in oklab, var(--blue) 15%, transparent), color-mix(in oklab, var(--violet) 10%, transparent))",
                border: "1px solid var(--line)",
                display: "grid", placeItems: "center",
                fontFamily: "var(--font-mono)",
                fontSize: 13,
                color: "var(--text-2)",
              }}>
                {it.mark
                  ? <EngineMark engine={it.mark} size={18} mono />
                  : it.name[0]}
              </span>
              <span style={{ fontSize: 14, color: "var(--text)" }}>{it.name}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// =============================================================
// Contact
// =============================================================
const Contact = () => {
  const [form, setForm] = useState2({
    name: "",
    company: "",
    email: "",
    phone: "",
    url: "",
    scope: "GEO + AI visibility",
    message: "",
  });
  const [submitted, setSubmitted] = useState2(false);
  const [status, setStatus] = useState2({ state: "idle", message: "" });

  const handleSubmit = async (e) => {
    e.preventDefault();
    setStatus({ state: "sending", message: "" });

    try {
      const res = await fetch("/api/contact", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(form),
      });
      const data = await res.json().catch(() => ({}));
      if (!res.ok) throw new Error(data.error || "The message could not be sent.");
      setSubmitted(true);
    } catch (err) {
      setStatus({
        state: "error",
        message: err.message || "The message could not be sent. Please try again.",
      });
    }
  };

  return (
    <section className="section" id="contact" style={{ paddingBottom: 80 }}>
      <div className="container">
        <div className="card card-glow contact-card" style={{
          padding: 56,
          display: "grid",
          gridTemplateColumns: "1.1fr 1fr",
          gap: 56,
          position: "relative",
          overflow: "hidden",
        }}>
          <div style={{ position: "absolute", inset: 0, background: "radial-gradient(900px 400px at 80% 100%, color-mix(in oklab, var(--violet) 22%, transparent), transparent 60%), radial-gradient(700px 350px at 0% 0%, color-mix(in oklab, var(--blue) 22%, transparent), transparent 60%)", pointerEvents: "none" }} />

          <div style={{ position: "relative" }}>
            <span className="eyebrow"><Sparkle /> Strategy call</span>
            <h2 className="h-section" style={{ marginTop: 18 }}>
              See what your brand looks like <span className="serif gradient-text">inside the model</span>.
            </h2>
            <p className="lede" style={{ marginTop: 18 }}>
              30 minutes. We run your category through 47 engines live,
              show you where you're cited (and where competitors own you),
              and sketch the 90-day path to default-answer status.
            </p>

            <div style={{ marginTop: 32, display: "flex", flexDirection: "column", gap: 12 }}>
              {[
                ["Live AI audit", "Run 200+ category prompts during the call"],
                ["Custom 90-day plan", "Mapped to your stack and timeline"],
                ["Benchmarks included", "Compare against 3 named competitors"],
              ].map(([k, v]) => (
                <div key={k} className="row gap-3">
                  <span style={{
                    width: 18, height: 18, borderRadius: 999,
                    background: "var(--grad-1)",
                    display: "grid", placeItems: "center",
                    fontSize: 10, color: "#fff",
                  }}>✓</span>
                  <span style={{ fontSize: 14, color: "var(--text)" }}>{k}</span>
                  <span style={{ fontSize: 13.5, color: "var(--text-3)" }}>— {v}</span>
                </div>
              ))}
            </div>
          </div>

          <form
            onSubmit={handleSubmit}
            style={{
              position: "relative",
              padding: 28,
              border: "1px solid var(--line)",
              borderRadius: 14,
              background: "rgba(7,7,10,0.6)",
              backdropFilter: "blur(12px)",
              display: "flex", flexDirection: "column", gap: 14,
            }}
          >
            {submitted ? (
              <div style={{ padding: 40, textAlign: "center" }}>
                <div style={{ width: 56, height: 56, borderRadius: 999, margin: "0 auto 20px", background: "var(--grad-1)", display: "grid", placeItems: "center", fontSize: 26 }}>✓</div>
                <div style={{ fontSize: 22, color: "var(--text)", marginBottom: 8 }}>Request received.</div>
                <div style={{ fontSize: 14, color: "var(--text-3)" }}>You'll hear from a strategist within 24 hours, usually faster.</div>
              </div>
            ) : (
              <>
                <FormField label="Your name" value={form.name} onChange={v => setForm({ ...form, name: v })} placeholder="Alex Chen" />
                <FormField label="Company" value={form.company} onChange={v => setForm({ ...form, company: v })} placeholder="Acme.io" />
                <FormField label="Work email" value={form.email} onChange={v => setForm({ ...form, email: v })} placeholder="alex@acme.io" type="email" />
                <FormField label="Phone number" value={form.phone} onChange={v => setForm({ ...form, phone: v })} placeholder="(555) 123-4567" type="tel" />
                <FormField label="Website URL" value={form.url} onChange={v => setForm({ ...form, url: v })} placeholder="https://acme.io" type="url" />
                <div>
                  <label style={labelStyle}>Engagement scope</label>
                  <select value={form.scope} onChange={e => setForm({ ...form, scope: e.target.value })} style={{ ...inputStyle, appearance: "none" }}>
                    <option>GEO + AI visibility</option>
                    <option>Full-stack growth</option>
                    <option>Marketing automation</option>
                    <option>Analytics infrastructure</option>
                    <option>Not sure yet</option>
                  </select>
                </div>
                <div>
                  <label style={labelStyle}>What are you trying to win?</label>
                  <textarea value={form.message} onChange={e => setForm({ ...form, message: e.target.value })} rows={3} placeholder="A sentence on the category, current state, and the goal." style={{ ...inputStyle, resize: "vertical", minHeight: 70 }} />
                </div>
                <button type="submit" className="btn btn-glow" style={{ marginTop: 6, padding: "14px 20px", justifyContent: "center" }}>
                  {status.state === "sending" ? "Sending..." : <>Book strategy call <Arrow /></>}
                </button>
                {status.state === "error" && (
                  <div style={{ fontSize: 12, color: "var(--blue-2)", textAlign: "center", lineHeight: 1.4 }}>
                    {status.message}
                  </div>
                )}
                <div style={{ fontSize: 11, color: "var(--text-3)", textAlign: "center", marginTop: 4, fontFamily: "var(--font-mono)" }}>
                  ↳ 30 min · no decks · live tooling
                </div>
              </>
            )}
          </form>
        </div>
      </div>
    </section>
  );
};

const labelStyle = {
  display: "block",
  fontSize: 11,
  fontFamily: "var(--font-mono)",
  color: "var(--text-3)",
  textTransform: "uppercase",
  letterSpacing: "0.08em",
  marginBottom: 6,
};

const inputStyle = {
  width: "100%",
  padding: "11px 12px",
  background: "rgba(255,255,255,0.025)",
  border: "1px solid var(--line)",
  borderRadius: 8,
  color: "var(--text)",
  fontFamily: "var(--font-sans)",
  fontSize: 14,
  outline: "none",
  transition: "border-color 0.15s",
};

const FormField = ({ label, value, onChange, placeholder, type = "text" }) => (
  <div>
    <label style={labelStyle}>{label}</label>
    <input
      type={type}
      value={value}
      onChange={e => onChange(e.target.value)}
      placeholder={placeholder}
      style={inputStyle}
      onFocus={e => e.target.style.borderColor = "color-mix(in oklab, var(--blue) 50%, transparent)"}
      onBlur={e => e.target.style.borderColor = "var(--line)"}
    />
  </div>
);

// =============================================================
// Footer
// =============================================================
const Footer = () => (
  <footer className="footer">
    <div className="container">
      <div className="footer-grid" style={{ display: "grid", gridTemplateColumns: "2fr 1fr 1fr 1fr 1fr", gap: 40, marginBottom: 56 }}>
        <div>
          <Brand />
          <p style={{ fontSize: 13.5, color: "var(--text-3)", marginTop: 16, maxWidth: 320, lineHeight: 1.55 }}>
            AI-native growth infrastructure for the next generation of search and discovery.
          </p>
          <div className="row gap-3" style={{ marginTop: 20 }}>
            {["x", "ln", "gh", "rss"].map(s => (
              <a key={s} href="#" style={{
                width: 32, height: 32, borderRadius: 8,
                border: "1px solid var(--line)",
                display: "grid", placeItems: "center",
                fontSize: 11, fontFamily: "var(--font-mono)",
                color: "var(--text-3)",
              }}>{s}</a>
            ))}
          </div>
        </div>
        {[
          ["Services", ["GEO", "AI visibility", "Technical SEO", "Automation", "Content systems"]],
          ["Company", ["About", "Careers", "Manifesto", "Press"]],
          ["Resources", ["Blog", "GEO benchmarks", "AI search index", "Changelog"]],
          ["Legal", ["Privacy", "Terms", "SOC 2", "DPA"]],
        ].map(([k, items]) => (
          <div key={k}>
            <div style={{ fontSize: 11, fontFamily: "var(--font-mono)", color: "var(--text-3)", textTransform: "uppercase", letterSpacing: "0.08em", marginBottom: 14 }}>{k}</div>
            <div style={{ display: "flex", flexDirection: "column", gap: 9 }}>
              {items.map(i => (<a key={i} href="#">{i}</a>))}
            </div>
          </div>
        ))}
      </div>
      <div className="row" style={{ justifyContent: "space-between", paddingTop: 24, borderTop: "1px solid var(--line)" }}>
        <span style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--text-3)" }}>© 2026 Livingstone Marketing · All rights reserved</span>
        <span style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--text-3)" }}>
          <span style={{ color: "var(--green)" }}>●</span> All systems operational
        </span>
      </div>
    </div>
  </footer>
);

Object.assign(window, { ClientsStrip, About, Services, Geo, Analytics, CaseStudies, Stack, Contact, Footer });