04 · Budget/* global React */
const { useEffect, useRef, useState } = React;

/* ───────────────────────────────────────────────────────────
   Shared atoms
   ─────────────────────────────────────────────────────────── */

const Arrow = ({ size = 12 }) => (
  <svg width={size} height={size} viewBox="0 0 12 12" fill="none" aria-hidden="true">
    <path d="M2.5 9.5L9.5 2.5M9.5 2.5H4M9.5 2.5V8" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"/>
  </svg>
);

const Logo = () => (
  <a href="#top" className="flex items-center gap-2 group" aria-label="Adspider home">
    <span className="relative inline-flex items-center justify-center w-8 h-8 rounded-full bg-[var(--ink)] text-[var(--bg)] overflow-hidden">
      <span className="mark-glyph text-[20px] -mt-[1px] -ml-[1px]">a</span>
      <span className="absolute -right-1 -bottom-1 w-2.5 h-2.5 rounded-full bg-[var(--accent)] border border-[var(--bg)]"></span>
    </span>
    <span className="font-display text-[22px] leading-none tracking-tight">
      Adspider<span className="text-[var(--accent)]">.</span>
    </span>
  </a>
);

const Kicker = ({ children, className = "" }) => (
  <div className={`kicker flex items-center gap-2 ${className}`}>
    <span className="dot" /> {children}
  </div>
);

const SectionLabel = ({ index, label }) => (
  <div className="flex items-baseline gap-3 kicker">
    <span>{index}</span>
    <span className="inline-block w-6 h-px bg-[var(--line-2)]" />
    <span>{label}</span>
  </div>
);

/* ───────────────────────────────────────────────────────────
   1. Header
   ─────────────────────────────────────────────────────────── */

function Header() {
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const nav = [
    ["Services", "#services"],
    ["Results", "#results"],
    ["Workflow", "#workflow"],
    ["Testimonials", "#testimonials"],
    ["Founder", "#founder"],
    ["Contact", "#contact"],
  ];

  return (
    <header
      className={`fixed top-0 inset-x-0 z-40 transition-all duration-300 ${
        scrolled ? "py-3" : "py-5"
      }`}
    >
      <div className="container-page">
        <div
          className={`flex items-center justify-between rounded-full transition-all duration-300 ${
            scrolled
              ? "bg-[var(--bg)]/85 backdrop-blur-md border border-[var(--line)] px-4 py-2.5 shadow-[0_1px_0_rgba(255,255,255,.4)_inset,0_10px_30px_rgba(0,0,0,.05)]"
              : "px-2 py-1"
          }`}
        >
          <Logo />

          <nav className="hidden lg:flex items-center gap-7 text-[14px]">
            {nav.map(([l, h]) => (
              <a key={l} href={h} className="nav-link">
                {l}
              </a>
            ))}
          </nav>

          <div className="flex items-center gap-2">
            <a href="#contact" className="btn btn-primary !py-2.5 !px-4 hidden sm:inline-flex">
              Let's Talk
              <span className="arrow"><Arrow /></span>
            </a>
            <button
              onClick={() => setOpen((o) => !o)}
              className="lg:hidden w-10 h-10 rounded-full border hairline-2 flex items-center justify-center"
              aria-label="Toggle menu"
            >
              <span className="flex flex-col gap-1">
                <span className="w-4 h-px bg-[var(--ink)]" />
                <span className="w-4 h-px bg-[var(--ink)]" />
              </span>
            </button>
          </div>
        </div>

        {open && (
          <div className="lg:hidden mt-2 rounded-2xl bg-[var(--card)] border hairline px-5 py-4">
            <ul className="flex flex-col gap-3 text-[15px]">
              {nav.map(([l, h]) => (
                <li key={l}>
                  <a href={h} onClick={() => setOpen(false)} className="block py-1.5">{l}</a>
                </li>
              ))}
            </ul>
          </div>
        )}
      </div>
    </header>
  );
}

/* ───────────────────────────────────────────────────────────
   2. Hero
   ─────────────────────────────────────────────────────────── */

function HeroVisual() {
  // Abstract premium composition — orbital rings + soft serif glyph
  return (
    <div className="relative aspect-[5/6] md:aspect-[4/5] lg:aspect-square w-full rounded-[28px] overflow-hidden bg-[var(--bg-2)] border hairline">
      {/* faint grid */}
      <svg className="absolute inset-0 w-full h-full opacity-[0.5]" aria-hidden="true">
        <defs>
          <pattern id="grid" width="32" height="32" patternUnits="userSpaceOnUse">
            <path d="M 32 0 L 0 0 0 32" fill="none" stroke="var(--line)" strokeWidth="1" />
          </pattern>
        </defs>
        <rect width="100%" height="100%" fill="url(#grid)" />
      </svg>

      {/* orbital arcs */}
      <svg className="absolute inset-0 w-full h-full" viewBox="0 0 600 600" aria-hidden="true">
        <defs>
          <radialGradient id="halo" cx="50%" cy="50%" r="50%">
            <stop offset="0%" stopColor="var(--accent)" stopOpacity="0.22" />
            <stop offset="60%" stopColor="var(--accent)" stopOpacity="0" />
          </radialGradient>
        </defs>
        <circle cx="300" cy="320" r="240" fill="url(#halo)" />
        <g stroke="var(--ink)" strokeOpacity=".25" fill="none" strokeWidth="1">
          <ellipse cx="300" cy="320" rx="240" ry="80" />
          <ellipse cx="300" cy="320" rx="180" ry="60" transform="rotate(35 300 320)" />
          <ellipse cx="300" cy="320" rx="120" ry="40" transform="rotate(-25 300 320)" />
        </g>
        {/* nodes along orbits */}
        <g fill="var(--ink)">
          <circle cx="60"  cy="320" r="4" />
          <circle cx="540" cy="320" r="4" />
          <circle cx="430" cy="200" r="3" />
          <circle cx="170" cy="440" r="3" />
        </g>
        <circle cx="430" cy="200" r="6" fill="var(--accent)" />
      </svg>

      {/* central serif glyph */}
      <div className="absolute inset-0 flex items-center justify-center">
        <div className="font-display text-[clamp(160px,28vw,360px)] leading-none text-[var(--ink)]/90 select-none">
          a<span className="font-display-i text-[var(--accent)]">.</span>
        </div>
      </div>

      {/* corner stat */}
      <div className="absolute left-5 top-5 right-5 flex items-center justify-between text-[11px] font-mono uppercase tracking-[0.18em] text-[var(--muted)]">
        <span className="flex items-center gap-2"><span className="live-dot" /> Studio · Live</span>
        <span>EST 2019</span>
      </div>
      <div className="absolute left-5 bottom-5 right-5 flex items-end justify-between gap-4">
        <div>
          <div className="kicker mb-1">Now booking</div>
          <div className="font-display text-[26px] leading-none">Q3 — Q4 / 2026</div>
        </div>
        <div className="text-right">
          <div className="kicker mb-1">Avg. lift</div>
          <div className="font-display text-[26px] leading-none">+312<span className="text-[var(--accent)]">%</span></div>
        </div>
      </div>
    </div>
  );
}

function Hero() {
  return (
    <section id="top" className="relative pt-28 md:pt-32 lg:pt-36">
      <div className="container-page">
        <div className="grid lg:grid-cols-12 gap-8 lg:gap-12 items-end">
          <div className="lg:col-span-7">
            <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full border hairline-2 bg-[var(--card)]/60 mb-8 md:mb-10">
              <span className="live-dot" />
              <span className="kicker !text-[var(--ink-2)]">A creative & growth studio</span>
            </div>

            <h1 className="font-display text-[clamp(56px,9vw,140px)] leading-[0.92] tracking-[-0.02em]">
              We grow brands<br />
              that refuse to<br />
              be <span className="font-display-i">forgettable</span><span className="text-[var(--accent)]">.</span>
            </h1>

            <p className="mt-8 md:mt-10 max-w-xl text-[17px] md:text-[19px] leading-[1.5] text-[var(--ink-2)]">
              Adspider is an independent studio for strategy, branding, design, performance
              marketing and development. We build the work — then make it pay back.
            </p>

            <div className="mt-10 flex flex-wrap items-center gap-3">
              <a href="#contact" className="btn btn-primary">
                Start a Project
                <span className="arrow"><Arrow /></span>
              </a>
              <a href="#results" className="btn btn-ghost">
                View Work
                <span className="arrow"><Arrow /></span>
              </a>
            </div>

            {/* trust strip */}
            <div className="mt-12 md:mt-16 pt-8 border-t hairline grid grid-cols-3 max-w-md gap-6">
              <div>
                <div className="font-display text-[40px] leading-none">100<span className="text-[var(--accent)]">+</span></div>
                <div className="kicker mt-1">Clients shipped</div>
              </div>
              <div>
                <div className="font-display text-[40px] leading-none">$500m<span className="text-[var(--accent)]">+</span></div>
                <div className="kicker mt-1">Ad spend managed</div>
              </div>
              <div>
                <div className="font-display text-[40px] leading-none">7y<span className="text-[var(--accent)]">.</span></div>
                <div className="kicker mt-1">Independent</div>
              </div>
            </div>
          </div>

          <div className="lg:col-span-5">
            <HeroVisual />
          </div>
        </div>

        {/* Marquee */}
        <div className="mt-20 md:mt-28 -mx-6 md:-mx-10">
          <div className="marquee">
            <Track />
            <Track />
          </div>
        </div>
      </div>
    </section>
  );
}

function Track() {
  const items = ["Branding", "Performance", "Development", "Design", "Strategy", "Identity", "Web", "Growth"];
  return (
    <div className="marquee-track items-center gap-12 px-6 font-display text-[clamp(48px,7vw,96px)] leading-none whitespace-nowrap">
      {items.map((i, idx) => (
        <span key={idx} className="flex items-center gap-12">
          <span>{i}</span>
          <span className="text-[var(--accent)]">✦</span>
        </span>
      ))}
    </div>
  );
}

/* ───────────────────────────────────────────────────────────
   3. Services
   ─────────────────────────────────────────────────────────── */

const SERVICES = [
  {
    n: "01",
    title: "Branding",
    desc: "Identity systems, naming, voice and positioning. We build brands with a backbone — distinct, durable, and dangerously consistent.",
    tags: ["Identity", "Naming", "Voice", "Guidelines"],
    icon: <BrandingIcon />,
  },
  {
    n: "02",
    title: "Performance Marketing",
    desc: "Full-funnel paid media on Meta, Google, TikTok and beyond. Creative, data and media buying under one roof — measured to the dollar.",
    tags: ["Paid Social", "Search", "CRO", "Lifecycle"],
    icon: <PerfIcon />,
  },
  {
    n: "03",
    title: "Development",
    desc: "Production-grade websites, ecommerce and product surfaces. Built fast on Next.js, Webflow and Shopify — engineered to scale.",
    tags: ["Web", "Shopify", "Headless", "Mobile"],
    icon: <DevIcon />,
  },
  {
    n: "04",
    title: "Design",
    desc: "Product, web and campaign design. Pixel-perfect interfaces, motion, and art direction that reads premium on every screen.",
    tags: ["Product", "Web", "Motion", "Art Direction"],
    icon: <DesignIcon />,
  },
];

function BrandingIcon() {
  return (
    <svg viewBox="0 0 64 64" className="w-full h-full" fill="none">
      <circle cx="32" cy="32" r="26" stroke="currentColor" strokeWidth="1.4"/>
      <circle cx="32" cy="32" r="14" stroke="currentColor" strokeWidth="1.4"/>
      <circle cx="32" cy="32" r="3" fill="currentColor"/>
      <path d="M32 6v52M6 32h52" stroke="currentColor" strokeWidth="1" strokeDasharray="2 3"/>
    </svg>
  );
}
function PerfIcon() {
  return (
    <svg viewBox="0 0 64 64" className="w-full h-full" fill="none">
      <path d="M8 48L22 34L32 42L56 14" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
      <path d="M44 14H56V26" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
      <circle cx="22" cy="34" r="2.5" fill="currentColor"/>
      <circle cx="32" cy="42" r="2.5" fill="currentColor"/>
      <line x1="8" y1="56" x2="56" y2="56" stroke="currentColor" strokeWidth="1" opacity=".4"/>
    </svg>
  );
}
function DevIcon() {
  return (
    <svg viewBox="0 0 64 64" className="w-full h-full" fill="none">
      <rect x="8" y="12" width="48" height="36" rx="3" stroke="currentColor" strokeWidth="1.4"/>
      <path d="M8 20H56" stroke="currentColor" strokeWidth="1"/>
      <circle cx="14" cy="16" r="1.2" fill="currentColor"/>
      <circle cx="19" cy="16" r="1.2" fill="currentColor"/>
      <circle cx="24" cy="16" r="1.2" fill="currentColor"/>
      <path d="M22 30L16 36L22 42M42 30L48 36L42 42M34 28L30 44" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}
function DesignIcon() {
  return (
    <svg viewBox="0 0 64 64" className="w-full h-full" fill="none">
      <path d="M32 6L54 56H10L32 6Z" stroke="currentColor" strokeWidth="1.4" strokeLinejoin="round"/>
      <circle cx="32" cy="36" r="10" stroke="currentColor" strokeWidth="1.4"/>
      <rect x="22" y="44" width="20" height="6" stroke="currentColor" strokeWidth="1.4"/>
    </svg>
  );
}

function ServiceCard({ s }) {
  return (
    <article className="svc-card border-t hairline group cursor-pointer">
      <div className="svc-bg" />
      <div className="p-6 md:p-8 lg:p-10 flex flex-col gap-8 md:flex-row md:items-start md:justify-between">
        <div className="flex items-start gap-6 md:gap-8 max-w-3xl">
          <div className="svc-num kicker mt-2 shrink-0 text-[var(--muted)]">{s.n}</div>
          <div>
            <h3 className="svc-title font-display text-[40px] md:text-[56px] leading-[0.95] tracking-tight text-[var(--ink)]">
              {s.title}
            </h3>
            <p className="svc-desc mt-4 max-w-lg text-[15.5px] leading-[1.55] text-[var(--ink-2)]">
              {s.desc}
            </p>
            <div className="svc-meta mt-5 flex flex-wrap gap-x-4 gap-y-1 text-[12px] font-mono uppercase tracking-[0.14em] text-[var(--muted)]">
              {s.tags.map((t, i) => (
                <span key={t} className="flex items-center gap-2">
                  {i > 0 && <span className="w-1 h-1 rounded-full bg-current opacity-60"/>}
                  {t}
                </span>
              ))}
            </div>
          </div>
        </div>
        <div className="svc-mark shrink-0 w-20 h-20 md:w-24 md:h-24 border hairline-2 rounded-full p-5 text-[var(--ink)] transition-colors">
          {s.icon}
        </div>
      </div>
    </article>
  );
}

function Services() {
  return (
    <section id="services" className="pt-32 md:pt-40">
      <div className="container-page">
        <div className="flex items-end justify-between gap-8 mb-10 md:mb-16">
          <div>
            <SectionLabel index="( 01 )" label="Our Services" />
            <h2 className="mt-4 font-display text-[clamp(52px,8vw,120px)] leading-[0.92] tracking-[-0.02em] max-w-4xl">
              Four disciplines.<br />
              <span className="font-display-i">One</span> integrated team.
            </h2>
          </div>
          <a href="#contact" className="hidden md:inline-flex btn btn-ghost">
            Start a project <span className="arrow"><Arrow /></span>
          </a>
        </div>

        <div>
          {SERVICES.map((s) => <ServiceCard key={s.n} s={s} />)}
          <div className="border-t hairline" />
        </div>
      </div>
    </section>
  );
}

/* ───────────────────────────────────────────────────────────
   4. Proven Results
   ─────────────────────────────────────────────────────────── */

function Counter({ to, suffix = "", duration = 1600 }) {
  const [v, setV] = useState(0);
  const ref = useRef(null);
  const started = useRef(false);

  useEffect(() => {
    const obs = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting && !started.current) {
          started.current = true;
          const start = performance.now();
          const tick = (t) => {
            const p = Math.min(1, (t - start) / duration);
            const eased = 1 - Math.pow(1 - p, 3);
            setV(Math.round(to * eased));
            if (p < 1) requestAnimationFrame(tick);
          };
          requestAnimationFrame(tick);
        }
      });
    }, { threshold: 0.4 });
    if (ref.current) obs.observe(ref.current);
    return () => obs.disconnect();
  }, [to, duration]);

  return <span ref={ref}>{v.toLocaleString()}{suffix}</span>;
}

function Results() {
  const stats = [
    { value: 100, suffix: "+", label: "Clients worldwide", note: "From early-stage challengers to listed brands." },
    { value: 25,  suffix: "+", label: "Ninja team members", note: "Strategists, designers, engineers, media buyers." },
    { value: 500, prefix: "$", suffix: "M+", label: "Ad spend for clients", note: "Across Meta, Google, TikTok and programmatic." },
  ];

  return (
    <section id="results" className="pt-32 md:pt-40">
      <div className="container-page">
        <div className="bg-[var(--ink)] text-[var(--bg)] rounded-[28px] md:rounded-[40px] p-8 md:p-14 lg:p-20 relative overflow-hidden">
          {/* deco corner mark */}
          <div className="absolute -right-10 -bottom-16 font-display text-[clamp(180px,30vw,420px)] leading-none opacity-[0.06] select-none">
            +
          </div>

          <div className="flex items-end justify-between gap-8 mb-12 md:mb-20 relative">
            <div>
              <div className="kicker !text-[var(--bg)]/70 flex items-center gap-2">
                <span className="dot" /> ( 02 ) — Proven Results
              </div>
              <h2 className="mt-4 font-display text-[clamp(48px,7vw,108px)] leading-[0.92] tracking-[-0.02em] max-w-3xl">
                Numbers that <span className="font-display-i text-[var(--accent)]">don't lie</span>.
              </h2>
            </div>
            <div className="hidden md:block max-w-[260px] text-[14px] leading-[1.5] text-[var(--bg)]/70">
              Built quietly. Measured loudly. Every engagement is tied to a number we share — and beat.
            </div>
          </div>

          <div className="grid md:grid-cols-3 gap-10 md:gap-6 relative">
            {stats.map((s, i) => (
              <div key={i} className={`pt-8 md:pt-10 ${i > 0 ? "md:border-l md:border-[var(--bg)]/14 md:pl-8" : ""} border-t border-[var(--bg)]/14`}>
                <div className="font-display text-[clamp(72px,11vw,160px)] leading-[0.9] tracking-[-0.03em]">
                  {s.prefix || ""}
                  <Counter to={s.value} suffix={s.suffix} />
                </div>
                <div className="mt-4 font-display text-[22px] leading-tight">{s.label}</div>
                <div className="mt-2 text-[13.5px] leading-[1.55] text-[var(--bg)]/65 max-w-[28ch]">{s.note}</div>
              </div>
            ))}
          </div>

          {/* footer logo strip */}
          <div className="mt-14 pt-8 border-t border-[var(--bg)]/14 grid grid-cols-2 md:grid-cols-6 gap-6 items-center text-[var(--bg)]/55">
            {["Lumen", "Northbeam", "Verdant", "Helio", "Halcyon", "Atlas&Co"].map((n) => (
              <div key={n} className="font-display text-[20px] md:text-[22px] tracking-tight">{n}<span className="text-[var(--accent)]">.</span></div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ───────────────────────────────────────────────────────────
   5. Workflow
   ─────────────────────────────────────────────────────────── */

const STEPS = [
  {
    n: "01",
    title: "Free Strategy",
    short: "We listen, then map.",
    points: [
      "Initial consultation to understand your vision.",
      "Analysis of your market and competitors.",
      "Outline of a tailored strategic approach.",
    ],
    days: "Days 1–3",
  },
  {
    n: "02",
    title: "Onboarding",
    short: "Kickoff, calibrated.",
    points: [
      "Formal project kickoff and team introduction.",
      "Setup of communication channels and tools.",
      "Deep dive into project requirements and goals.",
    ],
    days: "Week 1",
  },
  {
    n: "03",
    title: "Execution",
    short: "Build in sprints.",
    points: [
      "Agile sprints for design and development.",
      "Regular check-ins and progress reports.",
      "Iterative feedback and refinement cycles.",
    ],
    days: "Weeks 2–8",
  },
  {
    n: "04",
    title: "Delivery & Growth",
    short: "Ship. Then compound.",
    points: [
      "Final project delivery and launch.",
      "Training and documentation handover.",
      "Ongoing support and growth strategy.",
    ],
    days: "Week 8 →",
  },
];

function WorkflowRow({ s, last }) {
  const [open, setOpen] = useState(false);
  return (
    <div
      className="wf-row group cursor-pointer transition-colors"
      onMouseEnter={() => setOpen(true)}
      onMouseLeave={() => setOpen(false)}
      onClick={() => setOpen((o) => !o)}
    >
      <div className="py-7 md:py-10 grid md:grid-cols-12 gap-4 md:gap-8 items-start">
        <div className="md:col-span-1 kicker text-[var(--muted)]">{s.n}</div>
        <div className="md:col-span-3">
          <h3 className="font-display text-[34px] md:text-[44px] leading-[0.95] tracking-tight">
            {s.title}
          </h3>
          <div className="mt-2 kicker">{s.days}</div>
        </div>
        <div className="md:col-span-5 text-[16px] md:text-[18px] text-[var(--ink-2)] leading-[1.55]">
          <span className="font-display-i text-[var(--accent)]">— </span>{s.short}
          <div
            className="grid transition-all duration-500 ease-out"
            style={{ gridTemplateRows: open ? "1fr" : "0fr", marginTop: open ? "16px" : "0px" }}
          >
            <ul className="overflow-hidden space-y-2 text-[14.5px] text-[var(--muted)]">
              {s.points.map((p) => (
                <li key={p} className="flex gap-3">
                  <span className="mt-2 w-1.5 h-1.5 rounded-full bg-[var(--accent)] shrink-0" />
                  {p}
                </li>
              ))}
            </ul>
          </div>
        </div>
        <div className="md:col-span-3 flex md:justify-end items-start">
          <div className={`w-11 h-11 rounded-full border hairline-2 flex items-center justify-center transition-all duration-300 ${open ? "bg-[var(--ink)] text-[var(--bg)] rotate-45" : "text-[var(--ink)]"}`}>
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M7 1V13M1 7H13" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/></svg>
          </div>
        </div>
      </div>
    </div>
  );
}

function Workflow() {
  return (
    <section id="workflow" className="pt-32 md:pt-40">
      <div className="container-page">
        <div className="grid lg:grid-cols-12 gap-8 mb-10 md:mb-14">
          <div className="lg:col-span-7">
            <SectionLabel index="( 03 )" label="Our Workflow" />
            <h2 className="mt-4 font-display text-[clamp(52px,8vw,120px)] leading-[0.92] tracking-[-0.02em]">
              A four-step path<br />
              from <span className="font-display-i">first call</span> to compounding growth.
            </h2>
          </div>
          <div className="lg:col-span-5 lg:pt-8 max-w-md text-[15.5px] text-[var(--ink-2)] leading-[1.55]">
            Same process for a series-A SaaS as for a heritage CPG. We've refined it across 100+
            engagements — predictable timelines, visible progress, no surprises.
          </div>
        </div>

        <div>
          {STEPS.map((s, i) => <WorkflowRow key={s.n} s={s} last={i === STEPS.length - 1} />)}
        </div>
      </div>
    </section>
  );
}

/* ───────────────────────────────────────────────────────────
   6. Testimonials
   ─────────────────────────────────────────────────────────── */

const TESTIMONIALS = [
  { n: "Muzammil Ahmad",   r: "Performance Marketing & Growth",    av: "av-1", in: "MO",
    q: "I'd been running Meta ads myself for a year. Spending money, getting some sales, never really knowing why. AdSpider fixed three things in the first week I didn't even know were problems. Two months later my ROAS went from 1.8x to 4.3x. Don't fully understand everything they do — don't need to anymore."},
  { n: "Anwar Ali",  r: "Shopify development",            av: "av-2", in: "DR",
    q: "I Had a product, had a supplier, but no idea how to sell it online. AdSpider built my store from scratch — not just functional, but actually looked like a real brand. First month I did Rs. 180,000 in sales. Was expecting maybe half that." },
  { n: "Hassan Ramzan", r: "Landing Page Optimization",   av: "av-5", in: "PS",
    q: "My conversions were terrible so I kept changing creatives, wasting money. AdSpider said the landing page was the problem, not the ads. They rebuilt it. Conversion rate went from 1.1% to 3.8%. Same traffic, completely different results." },
  { n: "Ayesha Omer",r: "Website Development",              av: "av-6", in: "JL",
    q: "Needed a proper website for my clothing brand, not a template with my logo on it. AdSpider really helped us!" },
  { n: "Aisha Caldwell", r: "Marketing Lead, Halcyon",      av: "av-3", in: "AC",
    q: "They rebuilt our funnel end-to-end. Revenue from paid social is up 3.2× and the brand feels finally finished." },
  { n: "Kashif Nadeem", r: "Shopify Growth",            av: "av-4", in: "TM",
    q: "AdSpider audited everything and gave me a priority list — didn't change everything at once, just worked through it. By month three, revenue was up 60% and ad spend had barely moved." },
];

function TestimonialCard({ t, big }) {
  return (
    <figure
      className={`rounded-2xl bg-[var(--card)] border hairline p-6 md:p-7 flex flex-col gap-6 ${big ? "md:row-span-2" : ""}`}
    >
      <svg className="w-7 h-7 text-[var(--accent)]" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
        <path d="M9 7H5C5 11 5 13 5 17H9C9 13 9 11 9 7ZM19 7H15C15 11 15 13 15 17H19C19 13 19 11 19 7Z" transform="scale(-1,1) translate(-24,0)"/>
      </svg>
      <blockquote className={`font-display ${big ? "text-[28px] md:text-[34px] leading-[1.1]" : "text-[20px] md:text-[22px] leading-[1.25]"} tracking-tight text-[var(--ink)]`}>
        <span className="font-display-i text-[var(--accent)]">"</span>{t.q}<span className="font-display-i text-[var(--accent)]">"</span>
      </blockquote>
      <figcaption className="mt-auto flex items-center gap-3">
        <span className={`av ${t.av} w-10 h-10`}>{t.in}</span>
        <div>
          <div className="text-[14px] font-medium text-[var(--ink)]">{t.n}</div>
          <div className="text-[12.5px] text-[var(--muted)]">{t.r}</div>
        </div>
      </figcaption>
    </figure>
  );
}

function Testimonials() {
  return (
    <section id="testimonials" className="pt-32 md:pt-40">
      <div className="container-page">
        <div className="flex items-end justify-between gap-8 mb-10 md:mb-14">
          <div>
            <SectionLabel index="( 04 )" label="What clients say" />
            <h2 className="mt-4 font-display text-[clamp(52px,8vw,120px)] leading-[0.92] tracking-[-0.02em] max-w-4xl">
              The receipts<span className="font-display-i text-[var(--accent)]">,</span><br />
              in their own words.
            </h2>
          </div>
          <div className="hidden md:flex items-center gap-2 kicker">
            <span className="dot" /> 4.9 / 5 · 80+ reviews
          </div>
        </div>

        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-5">
          <TestimonialCard t={TESTIMONIALS[0]} big />
          <TestimonialCard t={TESTIMONIALS[1]} />
          <TestimonialCard t={TESTIMONIALS[2]} />
          <TestimonialCard t={TESTIMONIALS[3]} />
          <TestimonialCard t={TESTIMONIALS[4]} big />
          <TestimonialCard t={TESTIMONIALS[5]} />
        </div>
      </div>
    </section>
  );
}

/* ───────────────────────────────────────────────────────────
   7. Founder
   ─────────────────────────────────────────────────────────── */

function FounderPortrait() {
  // Refined SVG portrait placeholder — abstract silhouette + frame
  return (
    <div className="relative aspect-[4/5] w-full rounded-[24px] overflow-hidden border hairline">
      <div className="absolute inset-0" style={{ background: "linear-gradient(180deg, var(--bg-2), var(--bg))" }} />
      <svg className="absolute inset-0 w-full h-full" viewBox="0 0 400 500" aria-hidden="true">
        <defs>
          <linearGradient id="skin" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor="#E8C9AC"/>
            <stop offset="100%" stopColor="#A47150"/>
          </linearGradient>
          <linearGradient id="jacket" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor="#1d1a14"/>
            <stop offset="100%" stopColor="#0e0c08"/>
          </linearGradient>
        </defs>
        <rect width="400" height="500" fill="var(--bg-2)"/>
        {/* shoulders / jacket */}
        <path d="M 30 500 C 80 400 120 380 160 360 L 240 360 C 280 380 320 400 370 500 Z" fill="url(#jacket)"/>
        {/* collar accent */}
        <path d="M 175 360 L 200 410 L 225 360" stroke="var(--bg)" strokeWidth="2" fill="none" opacity=".5"/>
        {/* neck */}
        <path d="M 180 340 L 180 380 L 220 380 L 220 340 Z" fill="url(#skin)"/>
        {/* head */}
        <ellipse cx="200" cy="240" rx="78" ry="98" fill="url(#skin)"/>
        {/* hair */}
        <path d="M 122 230 C 122 160 160 130 200 130 C 248 130 278 168 278 220 C 278 218 268 198 252 196 C 240 200 220 190 200 192 C 178 194 158 200 142 218 C 132 226 122 230 122 230 Z" fill="#1a1813"/>
        {/* glasses */}
        <circle cx="178" cy="240" r="14" stroke="#0e0c08" strokeWidth="2.5" fill="none"/>
        <circle cx="222" cy="240" r="14" stroke="#0e0c08" strokeWidth="2.5" fill="none"/>
        <path d="M 192 240 L 208 240" stroke="#0e0c08" strokeWidth="2"/>
        {/* face details */}
        <path d="M 192 268 Q 200 274 208 268" stroke="#7a4f33" strokeWidth="1.6" fill="none" strokeLinecap="round"/>
        <path d="M 188 290 Q 200 298 212 290" stroke="#7a4f33" strokeWidth="1.6" fill="none" strokeLinecap="round"/>
        {/* highlight */}
        <ellipse cx="170" cy="210" rx="22" ry="30" fill="#fff" opacity=".07"/>
      </svg>
      {/* tag */}
      <div className="absolute left-5 top-5 right-5 flex items-center justify-between text-[11px] font-mono uppercase tracking-[0.18em] text-[var(--ink-2)]">
        <span>Founder · CEO</span>
        <span className="px-2 py-0.5 rounded-full border hairline-2 bg-[var(--bg)]/60">Since 2019</span>
      </div>
    </div>
  );
}

function Founder() {
  return (
    <section id="founder" className="pt-32 md:pt-40">
      <div className="container-page">
        <SectionLabel index="( 05 )" label="Meet the Founder" />
        <div className="grid lg:grid-cols-12 gap-10 lg:gap-16 mt-8 items-start">
          <div className="lg:col-span-5">
            <FounderPortrait />
          </div>
          <div className="lg:col-span-7 lg:pt-2">
            <h2 className="font-display text-[clamp(48px,7vw,108px)] leading-[0.92] tracking-[-0.02em]">
              Hi, I'm ADIL BAIGH<span className="text-[var(--accent)]">.</span><br />
              <span className="font-display-i">I run Adspider.</span>
            </h2>

            <p className="mt-8 max-w-xl text-[18px] leading-[1.55] text-[var(--ink-2)]">
              I started Adspider in 2023 after a decade between an agency in Lahore, Pakistan and an
              in-house growth team at a Series-C SaaS. I was tired of decks that didn't ship —
              and ads that didn't sell. So we built a studio where strategy, design and media
              live in the same room.
            </p>
            <p className="mt-5 max-w-xl text-[15px] leading-[1.6] text-[var(--muted)]">
              Today, twenty-five operators run engagements across three continents. I still take
              every first call personally — it's the part of the job I refuse to delegate.
            </p>

            <div className="mt-10 grid grid-cols-3 gap-6 max-w-lg">
              <div className="border-t hairline pt-4">
                <div className="font-display text-[44px] leading-none">12y<span className="text-[var(--accent)]">.</span></div>
                <div className="kicker mt-1">In the trade</div>
              </div>
              <div className="border-t hairline pt-4">
                <div className="font-display text-[44px] leading-none">3x</div>
                <div className="kicker mt-1">Cannes shortlist</div>
              </div>
              <div className="border-t hairline pt-4">
                <div className="font-display text-[44px] leading-none">100<span className="text-[var(--accent)]">+</span></div>
                <div className="kicker mt-1">Brands shipped</div>
              </div>
            </div>

            <div className="mt-10 flex items-center gap-3">
              <a href="#contact" className="btn btn-primary">
                Book a call with me
                <span className="arrow"><Arrow /></span>
              </a>
              <a href="#" className="btn btn-ghost">
                LinkedIn
                <span className="arrow"><Arrow /></span>
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ───────────────────────────────────────────────────────────
   8. Contact
   ─────────────────────────────────────────────────────────── */

import React, { useState } from 'react';

function Contact() {
  // FIXED: Initial value synchronized perfectly to avoid render initialization crashes
  const [form, setForm] = useState({ 
    name: "", 
    email: "", 
    company: "", 
    service: "Branding", 
    details: "", 
    budget: "$50k–$100k" 
  });
  const [sent, setSent] = useState(false);
  const [submitting, setSubmitting] = useState(false);

  const onSubmit = async (e) => {
    e.preventDefault();
    setSubmitting(true);
    
    const formData = new FormData();
    formData.append('name', form.name);
    formData.append('_replyto', form.email); 
    formData.append('company', form.company || 'N/A');
    formData.append('service', form.service);
    formData.append('budget', form.budget);
    formData.append('message', form.details || 'No details');
    formData.append('_subject', `New Inquiry: ${form.company || 'Visitor'} | ${form.service}`);

    try {
      const response = await fetch('https://formspree.io/f/xvgwnldd', {
        method: 'POST',
        body: formData,
        headers: {
          'Accept': 'application/json'
        }
      });

      if (response.ok) {
        setSent(true);
        // FIXED: Safe dynamic state cleanup loop without disruptive layouts
        setForm({ 
          name: "", 
          email: "", 
          company: "", 
          service: "Branding", 
          details: "", 
          budget: "$50k–$100k" 
        });
      } else {
        alert('Submission failed—try again or email hello@growwithadspider.com');
      }
    } catch (error) {
      alert('Network error—please email hello@growwithadspider.com');
    } finally {
      setSubmitting(false);
    }
  };

  const set = (k) => (e) => setForm((f) => ({ ...f, [k]: e.target.value }));

  return (
    <section id="contact" className="pt-32 md:pt-40">
      <div className="container-page">
        <div className="grid lg:grid-cols-12 gap-12 lg:gap-16">
          <div className="lg:col-span-5">
            <SectionLabel index="( 06 )" label="Contact Us" />
            <h2 className="mt-4 font-display text-[clamp(48px,7vw,108px)] leading-[0.92] tracking-[-0.02em]">
              Let's make<br />
              something <span className="font-display-i">worth</span> shipping<span className="text-[var(--accent)]">.</span>
            </h2>
            <p className="mt-8 max-w-md text-[17px] text-[var(--ink-2)] leading-[1.5]">
              Tell us about your project, and we'll get back to you within one business day.
              First call is on us — strategy, not sales.
            </p>

            <div className="mt-12 space-y-6">
              <div>
                <div className="kicker mb-1">Email</div>
                <a href="mailto:hello@growwithadspider.com" className="font-display text-[26px] leading-none hover:text-[var(--accent)] transition-colors">
                  hello@growwithadspider.com
                </a>
              </div>
              <div>
                <div className="kicker mb-1">Studio</div>
                <div className="font-display text-[22px] leading-tight">Johar Town<br/>Lahore, Pakistan -54000</div>
              </div>
              <div>
                <div className="kicker mb-1">Hours</div>
                <div className="font-display text-[22px] leading-tight">Mon — Fri · 9:00 — 18:00 GMT</div>
              </div>
            </div>
          </div>

          <div className="lg:col-span-7">
            <form onSubmit={onSubmit} className="rounded-[24px] bg-[var(--card)] border hairline p-6 md:p-10">
              <div className="flex items-center justify-between mb-6 md:mb-8">
                <div className="kicker flex items-center gap-2">
                  <span className="live-dot"/> Booking · Q3 — Q4 2026
                </div>
                <div className="kicker">/ inquiry · 01</div>
              </div>

              <div className="grid md:grid-cols-2 gap-x-8 gap-y-2">
                <div>
                  <label className="field-label">01 · Full name</label>
                  <input className="field" placeholder="Jane Doe" value={form.name} onChange={set("name")} required/>
                </div>
                <div>
                  <label className="field-label">02 · Email</label>
                  <input className="field" type="email" placeholder="jane@company.com" value={form.email} onChange={set("email")} required/>
                </div>
                <div>
                  <label className="field-label">03 · Company</label>
                  <input className="field" placeholder="Northbeam Co." value={form.company} onChange={set("company")}/>
                </div>
                <div>
                  <label className="field-label">04 · Budget</label>
                  {/* FIXED: Formatted the collection array securely with accurate currency options */}
                  <select className="field appearance-none" value={form.budget} onChange={set("budget")}>
                    {[
                      "$50k–$100k",
                      "$100k–$500k",
                      "$500k–$1M",
                      "$1M+"
                    ].map((b) => (
                      <option key={b} value={b}>
                        {b}
                      </option>
                    ))}
                  </select>
                </div>
              </div>

              <div className="mt-6">
                <label className="field-label">05 · Service needed</label>
                <div className="mt-3 flex flex-wrap gap-2">
                  {["Branding","Performance Marketing","Development","Design","Not sure yet"].map((s) => (
                    <button
                      type="button"
                      key={s}
                      onClick={() => setForm((f) => ({ ...f, service: s }))}
                      className={`px-4 py-2 rounded-full border text-[13.5px] transition-all ${
                        form.service === s
                          ? "bg-[var(--ink)] text-[var(--bg)] border-[var(--ink)]"
                          : "hairline-2 hover:border-[var(--ink)]"
                      }`}
                    >
                      {s}
                    </button>
                  ))}
                </div>
              </div>

              <div className="mt-8">
                <label className="field-label">06 · Project details</label>
                <textarea
                  className="field !pt-3"
                  rows={4}
                  placeholder="Tell us about the brand, the goal, and the timeline…"
                  value={form.details}
                  onChange={set("details")}
                />
              </div>

              <div className="mt-10 flex items-center justify-between gap-4 flex-wrap">
                <div className="text-[12.5px] text-[var(--muted)] max-w-sm">
                  By submitting you agree to our Privacy Policy. We never share inquiries.
                </div>
                <button 
                  className="btn btn-primary" 
                  type="submit" 
                  disabled={submitting || sent}
                >
                  {sent ? "Sent — talk soon ✦" : submitting ? "Sending..." : "Send Inquiry"}
                  <span className="arrow"><Arrow /></span>
                </button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </section>
  );
}

export default Contact;import React, { useState } from 'react';

function Contact() {
  // FIXED: Initial value synchronized perfectly to avoid render initialization crashes
  const [form, setForm] = useState({ 
    name: "", 
    email: "", 
    company: "", 
    service: "Branding", 
    details: "", 
    budget: "$50k–$100k" 
  });
  const [sent, setSent] = useState(false);
  const [submitting, setSubmitting] = useState(false);

  const onSubmit = async (e) => {
    e.preventDefault();
    setSubmitting(true);
    
    const formData = new FormData();
    formData.append('name', form.name);
    formData.append('_replyto', form.email); 
    formData.append('company', form.company || 'N/A');
    formData.append('service', form.service);
    formData.append('budget', form.budget);
    formData.append('message', form.details || 'No details');
    formData.append('_subject', `New Inquiry: ${form.company || 'Visitor'} | ${form.service}`);

    try {
      const response = await fetch('https://formspree.io/f/xvgwnldd', {
        method: 'POST',
        body: formData,
        headers: {
          'Accept': 'application/json'
        }
      });

      if (response.ok) {
        setSent(true);
        // FIXED: Safe dynamic state cleanup loop without disruptive layouts
        setForm({ 
          name: "", 
          email: "", 
          company: "", 
          service: "Branding", 
          details: "", 
          budget: "$50k–$100k" 
        });
      } else {
        alert('Submission failed—try again or email hello@growwithadspider.com');
      }
    } catch (error) {
      alert('Network error—please email hello@growwithadspider.com');
    } finally {
      setSubmitting(false);
    }
  };

  const set = (k) => (e) => setForm((f) => ({ ...f, [k]: e.target.value }));

  return (
    <section id="contact" className="pt-32 md:pt-40">
      <div className="container-page">
        <div className="grid lg:grid-cols-12 gap-12 lg:gap-16">
          <div className="lg:col-span-5">
            <SectionLabel index="( 06 )" label="Contact Us" />
            <h2 className="mt-4 font-display text-[clamp(48px,7vw,108px)] leading-[0.92] tracking-[-0.02em]">
              Let's make<br />
              something <span className="font-display-i">worth</span> shipping<span className="text-[var(--accent)]">.</span>
            </h2>
            <p className="mt-8 max-w-md text-[17px] text-[var(--ink-2)] leading-[1.5]">
              Tell us about your project, and we'll get back to you within one business day.
              First call is on us — strategy, not sales.
            </p>

            <div className="mt-12 space-y-6">
              <div>
                <div className="kicker mb-1">Email</div>
                <a href="mailto:hello@growwithadspider.com" className="font-display text-[26px] leading-none hover:text-[var(--accent)] transition-colors">
                  hello@growwithadspider.com
                </a>
              </div>
              <div>
                <div className="kicker mb-1">Studio</div>
                <div className="font-display text-[22px] leading-tight">Johar Town<br/>Lahore, Pakistan -54000</div>
              </div>
              <div>
                <div className="kicker mb-1">Hours</div>
                <div className="font-display text-[22px] leading-tight">Mon — Fri · 9:00 — 18:00 GMT</div>
              </div>
            </div>
          </div>

          <div className="lg:col-span-7">
            <form onSubmit={onSubmit} className="rounded-[24px] bg-[var(--card)] border hairline p-6 md:p-10">
              <div className="flex items-center justify-between mb-6 md:mb-8">
                <div className="kicker flex items-center gap-2">
                  <span className="live-dot"/> Booking · Q3 — Q4 2026
                </div>
                <div className="kicker">/ inquiry · 01</div>
              </div>

              <div className="grid md:grid-cols-2 gap-x-8 gap-y-2">
                <div>
                  <label className="field-label">01 · Full name</label>
                  <input className="field" placeholder="Jane Doe" value={form.name} onChange={set("name")} required/>
                </div>
                <div>
                  <label className="field-label">02 · Email</label>
                  <input className="field" type="email" placeholder="jane@company.com" value={form.email} onChange={set("email")} required/>
                </div>
                <div>
                  <label className="field-label">03 · Company</label>
                  <input className="field" placeholder="Northbeam Co." value={form.company} onChange={set("company")}/>
                </div>
                <div>
                  <label className="field-label">04 · Budget</label>
                  {/* FIXED: Formatted the collection array securely with accurate currency options */}
                  <select className="field appearance-none" value={form.budget} onChange={set("budget")}>
                    {[
                      "$50k–$100k",
                      "$100k–$500k",
                      "$500k–$1M",
                      "$1M+"
                    ].map((b) => (
                      <option key={b} value={b}>
                        {b}
                      </option>
                    ))}
                  </select>
                </div>
              </div>

              <div className="mt-6">
                <label className="field-label">05 · Service needed</label>
                <div className="mt-3 flex flex-wrap gap-2">
                  {["Branding","Performance Marketing","Development","Design","Not sure yet"].map((s) => (
                    <button
                      type="button"
                      key={s}
                      onClick={() => setForm((f) => ({ ...f, service: s }))}
                      className={`px-4 py-2 rounded-full border text-[13.5px] transition-all ${
                        form.service === s
                          ? "bg-[var(--ink)] text-[var(--bg)] border-[var(--ink)]"
                          : "hairline-2 hover:border-[var(--ink)]"
                      }`}
                    >
                      {s}
                    </button>
                  ))}
                </div>
              </div>

              <div className="mt-8">
                <label className="field-label">06 · Project details</label>
                <textarea
                  className="field !pt-3"
                  rows={4}
                  placeholder="Tell us about the brand, the goal, and the timeline…"
                  value={form.details}
                  onChange={set("details")}
                />
              </div>

              <div className="mt-10 flex items-center justify-between gap-4 flex-wrap">
                <div className="text-[12.5px] text-[var(--muted)] max-w-sm">
                  By submitting you agree to our Privacy Policy. We never share inquiries.
                </div>
                <button 
                  className="btn btn-primary" 
                  type="submit" 
                  disabled={submitting || sent}
                >
                  {sent ? "Sent — talk soon ✦" : submitting ? "Sending..." : "Send Inquiry"}
                  <span className="arrow"><Arrow /></span>
                </button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </section>
  );
}

export default Contact;

/* ───────────────────────────────────────────────────────────
   9. Footer
   ─────────────────────────────────────────────────────────── */

function Footer() {
  return (
    <footer className="mt-32 md:mt-40 pb-10">
      <div className="container-page">
        <div className="bg-[var(--ink)] text-[var(--bg)] rounded-[28px] md:rounded-[40px] p-8 md:p-14 lg:p-20 relative overflow-hidden">
          <div className="grid lg:grid-cols-12 gap-10">
            <div className="lg:col-span-5">
              <div className="flex items-center gap-2">
                <span className="relative inline-flex items-center justify-center w-9 h-9 rounded-full bg-[var(--bg)] text-[var(--ink)]">
                  <span className="mark-glyph text-[22px]">a</span>
                  <span className="absolute -right-1 -bottom-1 w-2.5 h-2.5 rounded-full bg-[var(--accent)] border border-[var(--ink)]"></span>
                </span>
                <span className="font-display text-[24px]">Adspider<span className="text-[var(--accent)]">.</span></span>
              </div>
              <p className="mt-6 max-w-sm font-display text-[28px] md:text-[34px] leading-[1.1]">
                A creative & growth studio. Helping brands ship work that pays back<span className="text-[var(--accent)]">.</span>
              </p>
             <div class="mt-8 flex items-center gap-3">
                 <a href="https://www.instagram.com/growwithadspider/" target="_blank" rel="noopener noreferrer" class="w-10 h-10 rounded-full border border-[var(--bg)]/20 hover:bg-[var(--accent)] hover:border-[var(--accent)] hover:text-[var(--accent-ink)] flex items-center justify-center text-[11px] font-mono tracking-wider transition-colors">IG</a>

                 <a href="https://www.facebook.com/growwithadspider" target="_blank" rel="noopener noreferrer" class="w-10 h-10 rounded-full border border-[var(--bg)]/20 hover:bg-[var(--accent)] hover:border-[var(--accent)] hover:text-[var(--accent-ink)] flex items-center justify-center text-[11px] font-mono tracking-wider transition-colors">FB</a>

                <a href="https://www.linkedin.com/company/growwithadspider" target="_blank" rel="noopener noreferrer" class="w-10 h-10 rounded-full border border-[var(--bg)]/20 hover:bg-[var(--accent)] hover:border-[var(--accent)] hover:text-[var(--accent-ink)] flex items-center justify-center text-[11px] font-mono tracking-wider transition-colors">LI</a>

                <a href="https://www.youtube.com/@growwithadspider/" target="_blank" rel="noopener noreferrer" class="w-10 h-10 rounded-full border border-[var(--bg)]/20 hover:bg-[var(--accent)] hover:border-[var(--accent)] hover:text-[var(--accent-ink)] flex items-center justify-center text-[11px] font-mono tracking-wider transition-colors">YT</a>
            </div>
            </div>

            <div className="lg:col-span-7 grid grid-cols-2 sm:grid-cols-3 gap-8">
              <div>
                <div className="kicker !text-[var(--bg)]/60 mb-4">Services</div>
                <ul className="space-y-2.5 text-[15px]">
                  {["Branding","Performance Marketing","Development","Design"].map((s) => (
                    <li key={s}><a href="#services" className="hover:text-[var(--accent)] transition-colors">{s}</a></li>
                  ))}
                </ul>
              </div>
              <div>
                <div className="kicker !text-[var(--bg)]/60 mb-4">Studio</div>
                <ul className="space-y-2.5 text-[15px]">
                  <li><a href="#founder" className="hover:text-[var(--accent)] transition-colors">About</a></li>
                  <li><a href="#workflow" className="hover:text-[var(--accent)] transition-colors">Workflow</a></li>
                  <li><a href="#results" className="hover:text-[var(--accent)] transition-colors">Results</a></li>
                  <li><a href="#contact" className="hover:text-[var(--accent)] transition-colors">Contact</a></li>
                </ul>
              </div>
              <div>
                <div className="kicker !text-[var(--bg)]/60 mb-4">Legal</div>
                <ul className="space-y-2.5 text-[15px]">
                  <li><a href="#" className="hover:text-[var(--accent)] transition-colors">Privacy Policy</a></li>
                  <li><a href="#" className="hover:text-[var(--accent)] transition-colors">Terms of Service</a></li>
                  <li><a href="#" className="hover:text-[var(--accent)] transition-colors">Cookies</a></li>
                </ul>
              </div>
            </div>
          </div>

          {/* Giant wordmark */}
          <div className="mt-14 md:mt-20 -mb-2 md:-mb-4 overflow-hidden">
            <div className="font-display text-[clamp(80px,18vw,260px)] leading-[0.85] tracking-[-0.03em] whitespace-nowrap">
              ADSPIDER<span className="text-[var(--accent)] font-display-i">.</span>
            </div>
          </div>

          <div className="mt-8 pt-6 border-t border-[var(--bg)]/14 flex flex-wrap items-center justify-between gap-4 text-[12.5px] text-[var(--bg)]/55 font-mono">
            <div>© 2019 — 2026 Adspider Studio Ltd. — All rights reserved.</div>
            <div className="flex items-center gap-2"><span className="live-dot"/> Now booking Q3 — Q4 / 2026</div>
          </div>
        </div>
      </div>
    </footer>
  );
}

/* Make sections globally available */
Object.assign(window, {
  Header, Hero, Services, Results, Workflow, Testimonials, Founder, Contact, Footer
});
