const { useState, useEffect, useRef } = React;

const SERVICES = [
{
  n: "01",
  title: "Full Account Management",
  body: "End-to-end ownership of your Seller Central operation — inventory, cases, listings, A+ content, brand registry, and weekly performance reviews. You get your time back."
},
{
  n: "02",
  title: "Listing Optimization",
  body: "Keyword-engineered titles, conversion-tested copy, A+ modules, and creative briefs for product photography. The listing does the selling so the ads cost less."
},
{
  n: "03",
  title: "Amazon PPC",
  body: "Sponsored Products, Brands, and Display campaigns built around target ACOS. We harvest search terms weekly and rebuild bids with intent — not autopilot rules."
},
{
  n: "04",
  title: "Product Sourcing",
  body: "Vetted manufacturer relationships, sample reviews, and unit economics built backwards from Amazon's fee structure. We launch products that have margin to defend."
}];


const PROCESS = [
{
  n: "i",
  week: "WEEK 0",
  title: "Audit",
  body: "Full account teardown — listings, ads, inventory, suppressions, brand health. We come back with a 30-page diagnostic and a forecast."
},
{
  n: "ii",
  week: "WEEK 1—2",
  title: "Plan",
  body: "Together we lock the 90-day plan: launches, listing rebuilds, ad spend curves, and the KPIs we'll review every Monday."
},
{
  n: "iii",
  week: "WEEK 2—12",
  title: "Execute",
  body: "Daily operation, weekly reporting, monthly QBRs. Listings rebuilt, ads rebuilt, suppressions cleared, reviews monitored."
},
{
  n: "iv",
  week: "ONGOING",
  title: "Compound",
  body: "Once the engine runs, we scale it: new ASINs, new ad types, international expansion, and brand storefronts that convert."
}];


const QUOTES = [
{
  text: <>Jay and his team have done an amazing job keeping our products <strong style={{ fontWeight: 700 }}>front and center of Amazon</strong>. Amazing service with attentive and professional staff. If you want <strong style={{ fontWeight: 700 }}>legitimate results</strong> on Amazon, I highly recommend Jay.</>,
  name: "Jason C.",
  role: "Consulting Client",
  initial: "J",
  photo: "assets/jason.jpg"
},
{
  text: <>When I met Jay, we had an Amazon account that had been suspended for months. Jay not only helped us <strong style={{ fontWeight: 700 }}>reinstate our account</strong> but also helped us <strong style={{ fontWeight: 700 }}>launch a product from scratch</strong>. 12 months later, I can finally say that I'm actively selling products on Amazon. Today was the biggest day — <strong style={{ fontWeight: 700 }}>sold 28 units today!</strong> — which is honestly <strong style={{ fontWeight: 700 }}>unbelievable</strong>. It would have never happened if I had not decided to invest in Jay. Jay has been such a pleasure to deal with!</>,
  name: "Billy M.",
  role: "Consulting Client",
  initial: "B",
  photo: "assets/billy.jpg"
},
{
  text: <>My <strong style={{ fontWeight: 700 }}>sales for December were around £10,000</strong>. Really chuffed about it and thanks Jay for your guidance. I've <strong style={{ fontWeight: 700 }}>added a couple more products</strong> to launch in Feb–March.</>,
  name: "Waldek S.",
  role: "Consulting Client",
  initial: "W",
  photo: "assets/waldek.jpg"
}];


const FAQS = [
{
  q: "Who do you typically work with?",
  a: <>Brands doing $20k–$2M/mo, plus a smaller cohort of pre-launch DTC brands we help onboard from scratch. We have a soft spot for <strong style={{ fontWeight: 700 }}>unique, specialty, and category-defining products</strong> — things you haven't seen before, or done better than anyone else. We work best with founders who actually want a partner reviewing strategy, not just a vendor pulling levers.</>
},
{
  q: "What does engagement look like?",
  a: "Most clients run on a 90-day initial engagement followed by a month-to-month retainer. You get a dedicated account lead, a shared Slack channel, weekly performance reports, and a monthly strategy review."
},
{
  q: "Do you guarantee results?",
  a: "We guarantee execution and transparency, not numbers. Anyone promising guaranteed Amazon revenue is either lying or about to lose your account. What we do guarantee: a full audit, a written plan, and weekly reporting against it."
},
{
  q: "How is pricing structured?",
  a: "Three ways to work with us: a one-off launch project to get a brand live and selling, an ongoing monthly retainer for hands-on management, or a fully custom engagement for brands that fall outside the standard shapes — whether that's a smaller brand starting out or a larger account scaling hard. Every engagement is scoped to your size and stage — see the Engagement section for starting points, and book a call and we'll quote you within 24 hours."
},
{
  q: "Can you help us launch a brand new product?",
  a: "Yes. Sourcing, sampling, listing build, launch ads, and review velocity strategy. We've taken brands from zero ASINs to category top-100 — though it usually takes 3–6 months, not 6 weeks."
},
{
  q: "What about international marketplaces?",
  a: "We work across Amazon US, UK, EU, Australia, and Canada — and we'll help you decide where to start. A New Zealand brand might launch in Australia first, an Australian brand might leapfrog straight to the US, a UK brand might start at home and expand into the EU. There's no one right path. We handle marketplace selection, VAT and tax registration, listing localization, and FBA logistics through our partner network — wherever your buyers are."
}];


// little hand-drawn growth chart
function GrowthChart() {
  const points = [
  [0, 64], [10, 60], [20, 62], [30, 58], [40, 56],
  [50, 50], [55, 46], [60, 40], [66, 32], [72, 24],
  [80, 18], [88, 12], [95, 8], [100, 6]];

  const path = points.map((p, i) => i === 0 ? `M ${p[0]} ${p[1]}` : `L ${p[0]} ${p[1]}`).join(" ");
  const area = path + ` L 100 80 L 0 80 Z`;
  return (
    <svg viewBox="0 0 100 80" preserveAspectRatio="none">
      <defs>
        <linearGradient id="g" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="var(--accent)" stopOpacity="0.4" />
          <stop offset="100%" stopColor="var(--accent)" stopOpacity="0" />
        </linearGradient>
      </defs>
      <path d={area} fill="url(#g)" />
      <path d={path} fill="none" stroke="var(--accent)" strokeWidth="1.5" strokeLinejoin="round" strokeLinecap="round" />
      {points.filter((_, i) => i % 3 === 0).map((p, i) =>
      <circle key={i} cx={p[0]} cy={p[1]} r="0.8" fill="var(--accent)" />
      )}
      {/* dotted baseline marks */}
      <line x1="0" y1="64" x2="100" y2="64" stroke="rgba(244,239,230,0.15)" strokeWidth="0.4" strokeDasharray="2 2" />
      <text x="2" y="62" fontSize="3" fontFamily="JetBrains Mono" fill="rgba(244,239,230,0.45)">$4k baseline</text>
      <text x="80" y="6" fontSize="3" fontFamily="JetBrains Mono" fill="var(--accent)">$14k</text>
    </svg>);

}

/* ---- custom SVG flags (muted palette) — no emoji, render everywhere ---- */
const FLAG_DEFS = '<svg width="0" height="0" style="position:absolute" aria-hidden="true"><defs><symbol id="omStar" viewBox="-1 -1 2 2"><path d="M0,-1 L0.2245,-0.309 L0.9511,-0.309 L0.3633,0.118 L0.5878,0.809 L0,0.382 L-0.5878,0.809 L-0.3633,0.118 L-0.9511,-0.309 L-0.2245,-0.309 Z"/></symbol><clipPath id="omUjq"><path d="M15,10 L30,10 L30,20 Z M15,10 L15,20 L0,20 Z M15,10 L0,10 L0,0 Z M15,10 L15,0 L30,0 Z"/></clipPath></defs></svg>';

function omStar(cx, cy, r, fill) {
  return '<use href="#omStar" x="' + (cx - r) + '" y="' + (cy - r) + '" width="' + (2 * r) + '" height="' + (2 * r) + '" fill="' + fill + '"/>';
}
function omUnionJack(p) {
  return '<rect width="30" height="20" fill="' + p.blue + '"/>'
    + '<path d="M0,0 L30,20 M30,0 L0,20" stroke="' + p.white + '" stroke-width="4"/>'
    + '<g clip-path="url(#omUjq)"><path d="M0,0 L30,20 M30,0 L0,20" stroke="' + p.red + '" stroke-width="2.2"/></g>'
    + '<path d="M15,0 V20 M0,10 H30" stroke="' + p.white + '" stroke-width="6"/>'
    + '<path d="M15,0 V20 M0,10 H30" stroke="' + p.red + '" stroke-width="3.4"/>';
}
function omCanton(p) { return '<g transform="scale(0.5)">' + omUnionJack(p) + '</g>'; }
function omUK(p) { return '<svg class="mkt-flag" viewBox="0 0 30 20">' + omUnionJack(p) + '</svg>'; }
function omAU(p) {
  let s = omStar(7.5, 15.2, 2.6, p.white);
  const cross = [[22.5, 4.6], [26.2, 9], [25, 14.8], [20.3, 13], [23, 9.4]];
  const rs = [1.5, 1.5, 1.5, 1.5, 0.9];
  cross.forEach((pt, i) => { s += omStar(pt[0], pt[1], rs[i], p.white); });
  return '<svg class="mkt-flag" viewBox="0 0 30 20"><rect width="30" height="20" fill="' + p.blue + '"/>' + omCanton(p) + s + '</svg>';
}
function omUS(p) {
  let stripes = '';
  const h = 20 / 13;
  for (let i = 0; i < 13; i++) stripes += '<rect x="0" y="' + (i * h) + '" width="30" height="' + h + '" fill="' + (i % 2 === 0 ? p.red : p.white) + '"/>';
  let stars = '';
  for (let r = 0; r < 4; r++) for (let c = 0; c < 5; c++) {
    const x = 1.4 + c * 2.6 + (r % 2) * 1.3, y = 1.5 + r * 2.5;
    if (x < 12) stars += omStar(x, y, 0.85, p.white);
  }
  return '<svg class="mkt-flag" viewBox="0 0 30 20">' + stripes + '<rect width="13" height="' + (7 * h) + '" fill="' + p.blue + '"/>' + stars + '</svg>';
}
function omEU(p) {
  let s = '';
  const R = 6, cx = 15, cy = 10;
  for (let k = 0; k < 12; k++) { const a = k * Math.PI / 6; s += omStar(cx + R * Math.sin(a), cy - R * Math.cos(a), 1.15, p.gold); }
  return '<svg class="mkt-flag" viewBox="0 0 30 20"><rect width="30" height="20" fill="' + p.eublue + '"/>' + s + '</svg>';
}
const FLAG_MUTED = { blue: '#28406b', white: '#efe9dd', red: '#b5564a', eublue: '#2d4a7a', gold: '#d8b25a' };

function MarketFlags() {
  const flags = [['US', omUS], ['UK', omUK], ['EU', omEU], ['AU', omAU]];
  const html = FLAG_DEFS + flags.map(([code, fn]) =>
  '<span class="mkt-item">' + fn(FLAG_MUTED) + '<span class="mkt-cap">' + code + '</span></span>').join('');
  return <div className="mkt-flags" dangerouslySetInnerHTML={{ __html: html }} />;
}

function Brand() {
  return (
    <div className="brand">
      <span className="brand-badge"><span className="s">S<span className="brand-dot">.</span></span></span>
      <span className="brand-text">
        <span className="brand-name">Seller Central <span className="acc">Consulting</span></span>
        <span className="brand-tag">Amazon growth partner</span>
      </span>
    </div>);

}

function Nav() {
  return (
    <nav className="nav">
      <div className="container nav-inner">
        <Brand />
        <div className="nav-links">
          <a href="#services">Services</a>
          <a href="#process">Process</a>
          <a href="#case">Case study</a>
          <a href="#about">About</a>
          <a href="#pricing">Pricing</a>
          <a href="#faq">FAQ</a>
        </div>
        <a href="game-plan/index.html" className="nav-cta">Get your Amazon game plan →</a>
      </div>
    </nav>);

}

const HERO_PRODUCTS = [
{ name: "Milk Frother", brand: "SpecChef", stat: "+800%", label: "Growth in 12 months", image: "assets/product-specchef.webp" },
{ name: "SPF 30 Sungel", brand: "Skinnies", stat: "$32,000+", label: "Sales in 90 days", image: "assets/product-skinnies.webp" },
{ name: "Marine Engine Heater", brand: "Xtreme Heaters", stat: "$73,000+", label: "Monthly sales", image: "assets/product-xtreme.webp" },
{ name: "LibiGem", brand: "Nutrafirm", stat: "+600%", label: "Revenue growth in 12 months", image: "assets/product-libigem.webp" },
{ name: "Food Dehydrator", brand: "Kalahari Khabu", stat: "+700%", label: "Revenue growth in 12 months", image: "assets/product-khabu.jpg" }];


function ProductSilhouette({ kind }) {
  if (kind === "pump") {
    return (
      <svg viewBox="0 0 100 130" preserveAspectRatio="xMidYMax meet">
        <rect x="44" y="0" width="12" height="6" rx="1" fill="#2a1a10" />
        <rect x="38" y="6" width="24" height="6" rx="1" fill="#1a0f08" />
        <rect x="46" y="12" width="8" height="10" fill="#1a0f08" />
        <rect x="20" y="22" width="60" height="100" rx="6" fill="#5e3f28" />
        <rect x="20" y="22" width="60" height="100" rx="6" fill="url(#g-pump)" opacity="0.6" />
        <rect x="28" y="55" width="44" height="36" rx="2" fill="#f4e8d4" opacity="0.94" />
        <rect x="34" y="64" width="32" height="3" fill="#5e3f28" opacity="0.4" />
        <rect x="34" y="70" width="22" height="2" fill="#5e3f28" opacity="0.3" />
        <defs>
          <linearGradient id="g-pump" x1="0" y1="0" x2="1" y2="0">
            <stop offset="0" stopColor="#fff" stopOpacity="0.3" />
            <stop offset="0.4" stopColor="#fff" stopOpacity="0" />
            <stop offset="1" stopColor="#000" stopOpacity="0.2" />
          </linearGradient>
        </defs>
      </svg>);

  }
  if (kind === "headphones") {
    return (
      <svg viewBox="0 0 120 110" preserveAspectRatio="xMidYMax meet">
        <path d="M 22 70 Q 60 -6 98 70" stroke="#1a1a1a" strokeWidth="7" fill="none" strokeLinecap="round" />
        <rect x="6" y="54" width="34" height="50" rx="12" fill="#1a1a1a" />
        <rect x="80" y="54" width="34" height="50" rx="12" fill="#1a1a1a" />
        <ellipse cx="23" cy="79" rx="10" ry="14" fill="#3a3a3a" />
        <ellipse cx="97" cy="79" rx="10" ry="14" fill="#3a3a3a" />
        <circle cx="23" cy="79" r="3" fill="#5a5a5a" />
        <circle cx="97" cy="79" r="3" fill="#5a5a5a" />
      </svg>);

  }
  if (kind === "coffee") {
    return (
      <svg viewBox="0 0 100 130" preserveAspectRatio="xMidYMax meet">
        <rect x="22" y="0" width="56" height="10" rx="1" fill="#1f130a" />
        <path d="M 22 8 L 78 8 L 74 20 L 26 20 Z" fill="#2a1a10" />
        <path d="M 24 18 L 76 18 L 80 124 L 20 124 Z" fill="#4d2e1a" />
        <path d="M 24 18 L 76 18 L 80 124 L 20 124 Z" fill="url(#g-coff)" opacity="0.6" />
        <circle cx="50" cy="68" r="14" fill="#f4e8d4" opacity="0.94" />
        <path d="M 44 65 Q 50 58 56 65 Q 56 72 50 75 Q 44 72 44 65" fill="#4d2e1a" opacity="0.7" />
        <defs>
          <linearGradient id="g-coff" x1="0" y1="0" x2="1" y2="0">
            <stop offset="0" stopColor="#fff" stopOpacity="0.25" />
            <stop offset="0.5" stopColor="#fff" stopOpacity="0" />
            <stop offset="1" stopColor="#000" stopOpacity="0.25" />
          </linearGradient>
        </defs>
      </svg>);

  }
  if (kind === "dropper") {
    return (
      <svg viewBox="0 0 100 130" preserveAspectRatio="xMidYMax meet">
        <ellipse cx="50" cy="6" rx="11" ry="5" fill="#1a1a1a" />
        <rect x="40" y="6" width="20" height="22" rx="2" fill="#2a2a2a" />
        <rect x="22" y="28" width="56" height="92" rx="6" fill="#7a5230" />
        <rect x="22" y="28" width="56" height="92" rx="6" fill="url(#g-drop)" opacity="0.55" />
        <rect x="30" y="55" width="40" height="38" rx="2" fill="#f4e8d4" opacity="0.92" />
        <rect x="36" y="64" width="28" height="3" fill="#7a5230" opacity="0.4" />
        <rect x="36" y="71" width="18" height="2" fill="#7a5230" opacity="0.3" />
        <defs>
          <linearGradient id="g-drop" x1="0" y1="0" x2="1" y2="0">
            <stop offset="0" stopColor="#fff" stopOpacity="0.3" />
            <stop offset="0.4" stopColor="#fff" stopOpacity="0" />
            <stop offset="1" stopColor="#000" stopOpacity="0.2" />
          </linearGradient>
        </defs>
      </svg>);

  }
  // tin
  return (
    <svg viewBox="0 0 100 110" preserveAspectRatio="xMidYMax meet">
      <rect x="14" y="0" width="72" height="14" rx="2" fill="#2a2a2a" />
      <rect x="18" y="12" width="64" height="92" rx="4" fill="#8a7050" />
      <rect x="18" y="12" width="64" height="92" rx="4" fill="url(#g-tin)" opacity="0.55" />
      <rect x="26" y="38" width="48" height="40" rx="2" fill="#f4e8d4" opacity="0.94" />
      <rect x="32" y="48" width="36" height="3" fill="#8a7050" opacity="0.4" />
      <rect x="32" y="56" width="24" height="2" fill="#8a7050" opacity="0.3" />
      <defs>
        <linearGradient id="g-tin" x1="0" y1="0" x2="1" y2="0">
          <stop offset="0" stopColor="#fff" stopOpacity="0.3" />
          <stop offset="0.5" stopColor="#fff" stopOpacity="0" />
          <stop offset="1" stopColor="#000" stopOpacity="0.22" />
        </linearGradient>
      </defs>
    </svg>);

}

function MiniSpark() {
  const pts = "0,18 8,16 16,17 24,14 32,12 40,13 48,9 56,7 64,5 72,3 80,2";
  return (
    <svg viewBox="0 0 80 22" preserveAspectRatio="none" className="prod-spark-svg">
      <defs>
        <linearGradient id="spark-fill" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor="var(--accent)" stopOpacity="0.35" />
          <stop offset="1" stopColor="var(--accent)" stopOpacity="0" />
        </linearGradient>
      </defs>
      <polyline points={`${pts} 80,22 0,22`} fill="url(#spark-fill)" />
      <polyline points={pts} fill="none" stroke="var(--accent)" strokeWidth="1.5" strokeLinejoin="round" strokeLinecap="round" />
      <circle cx="80" cy="2" r="2" fill="var(--accent)" />
    </svg>);

}

function OrbitPath() {
  // Background growth-line: weaves across the stage like the original hero.
  return (
    <svg className="orbit-svg" viewBox="0 0 660 480" preserveAspectRatio="none" aria-hidden="true">
      <path className="orbit-path" vectorEffect="non-scaling-stroke"
      d="M 0 392 C 90 432, 150 300, 230 262 S 400 320, 470 232 S 600 280, 660 196" />
      <circle className="orbit-dot" cx="230" cy="262" r="4" vectorEffect="non-scaling-stroke" />
      <circle className="orbit-dot" cx="470" cy="232" r="4" vectorEffect="non-scaling-stroke" />
      <circle className="orbit-dot" cx="660" cy="196" r="4" vectorEffect="non-scaling-stroke" />
      <circle className="orbit-dot" cx="0" cy="392" r="4" vectorEffect="non-scaling-stroke" />
    </svg>);

}

function TrustBar() {
  return (
    <div className="hero-trust">
      <span className="trust-label mono">Trusted by growing brands</span>
      <div className="trust-logos">
        <span className="trust-logo logo-xtreme">
          <span className="x-stroke">Xtreme</span>
          <small>HEATERS</small>
        </span>
        <img className="trust-logo trust-img img-gratpak" src="logos/gratpak.png" alt="GratPak Aotearoa New Zealand" />
        <span className="trust-logo logo-nutrafirm">
          <span className="n-nutra">NUTRA</span><span className="n-firm">FIRM</span>
          <svg className="flame" viewBox="0 0 20 28" fill="currentColor" aria-hidden="true">
            <path d="M10 0 C 12 6, 16 8, 16 16 C 16 22, 13 26, 10 26 C 7 26, 4 22, 4 16 C 4 12, 7 10, 8 6 C 9 8, 9 11, 10 12 C 11 10, 10 6, 10 0 Z" />
          </svg>
        </span>
        <span className="trust-logo logo-skinnies">skinnies</span>
        <span className="trust-logo logo-insidehockey">
          <b>INSIDE</b>
          <small>HOCKEY</small>
        </span>
        <span className="trust-logo-more mono">and more</span>
      </div>
    </div>);

}

function ProdCard({ p }) {
  return (
    <div className="prod-card">
      <div className="prod-photo">
        {p.image ?
        <img src={p.image} alt={`${p.brand} — ${p.name}`} /> :
        <ProductSilhouette kind={p.svg} />}
      </div>
      <div className="prod-stat-row">
        <span className="prod-stat">{p.stat}</span>
        <span className="prod-stat-label">{p.label || "Revenue growth"}</span>
      </div>
      <div className="prod-spark"><MiniSpark /></div>
    </div>);
}

function TickerColumn({ items, dir }) {
  const list = [...items, ...items];
  return (
    <div className="tcol">
      <div className={`tcol-track ${dir}`}>
        {list.map((p, i) =>
        <div className="tcol-item" key={i}><ProdCard p={p} /></div>
        )}
      </div>
    </div>);
}

function HeroAnimation() {
  // Two columns, every product distinct across both — nothing repeats.
  const P = HERO_PRODUCTS;
  const colA = [P[0], P[2], P[4]]; // Frother, Xtreme, Khabu
  const colB = [P[3], P[1]];       // LibiGem, Skinnies
  return (
    <div className="hero-stage" aria-hidden="true">
      <OrbitPath />
      <div className="ticker2">
        <TickerColumn items={colA} dir="up" />
        <TickerColumn items={colB} dir="down" />
      </div>
    </div>);

}

function Hero() {
  return (
    <section className="hero">
      <div className="container">
        <div className="hero-grid">
          <div className="hero-text">
            <div className="hero-tag mono">
              <span className="dot"></span>
              <span>OPERATORS, NOT ADVISORS — TAKING 3 NEW BRANDS FOR Q3
</span>
            </div>
            <h1 className="display">
              We grow brands<br />
              on the world's<br />
              <em>hardest</em> store.
            </h1>
            <p className="hero-desc">
              We run your Amazon → Registration, listings, PPC, full account management — by operators who get results. A small, hands-on team for ambitious brands.
            </p>
            <div className="hero-cta">
              <a href="#case" className="btn">See the work</a>
              <a href="game-plan/index.html" className="btn btn-primary">
                Get your Amazon game plan
                <span className="btn-arrow">→</span>
              </a>
            </div>
            <div className="hero-proof">
              <div className="hero-proof-avatars">
                <img src="assets/jason.jpg" alt="" className="proof-av" />
                <img src="assets/billy.jpg" alt="" className="proof-av" />
                <img src="assets/waldek.jpg" alt="" className="proof-av" />
                <img src="assets/martha.jpg" alt="" className="proof-av" />
              </div>
              <div className="hero-proof-text">
                <div className="hero-proof-stars" aria-label="5 out of 5 stars">
                  <svg viewBox="0 0 20 20" width="16" height="16" fill="currentColor"><polygon points="10,1 12.5,7.5 19,8 14,12.5 15.5,19 10,15.5 4.5,19 6,12.5 1,8 7.5,7.5" /></svg>
                  <svg viewBox="0 0 20 20" width="16" height="16" fill="currentColor"><polygon points="10,1 12.5,7.5 19,8 14,12.5 15.5,19 10,15.5 4.5,19 6,12.5 1,8 7.5,7.5" /></svg>
                  <svg viewBox="0 0 20 20" width="16" height="16" fill="currentColor"><polygon points="10,1 12.5,7.5 19,8 14,12.5 15.5,19 10,15.5 4.5,19 6,12.5 1,8 7.5,7.5" /></svg>
                  <svg viewBox="0 0 20 20" width="16" height="16" fill="currentColor"><polygon points="10,1 12.5,7.5 19,8 14,12.5 15.5,19 10,15.5 4.5,19 6,12.5 1,8 7.5,7.5" /></svg>
                  <svg viewBox="0 0 20 20" width="16" height="16" fill="currentColor"><polygon points="10,1 12.5,7.5 19,8 14,12.5 15.5,19 10,15.5 4.5,19 6,12.5 1,8 7.5,7.5" /></svg>
                </div>
                <div className="hero-proof-label">50+ brands scaled</div>
              </div>
            </div>
            <div className="hero-recognition">
              <svg className="seal" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                <circle cx="12" cy="8" r="6" />
                <path d="M15.477 12.89 17 22l-5-3-5 3 1.523-9.11" />
              </svg>
              <span>Recognised by <strong>Amazon Global Selling</strong> as one of New Zealand&rsquo;s &ldquo;Amazon champions&rdquo;</span>
            </div>
          </div>
          <HeroAnimation />
        </div>
        <TrustBar />
      </div>
    </section>);
}

function Marquee({ show }) {
  const items = [
  { num: "12+ yrs", label: "Selling on Amazon" },
  { num: "$100k+", label: "In first 90 days" },
  { num: "412", label: "Meetup community members" },
  { num: "5.0★", label: "Rated across 37 reviews" },
  { num: "$32K", label: "In first 90 days" }];

  // duplicate for seamless scroll
  const all = [...items, ...items];
  return (
    <div className="marquee" data-show={show}>
      <div className="marquee-track">
        {all.map((it, i) =>
        <span className="marquee-item" key={i}>
            <span className="num">{it.num}</span>
            <span>{it.label}</span>
            <span className="sep">✦</span>
          </span>
        )}
      </div>
    </div>);

}

function Services() {
  return (
    <section id="services" data-section data-screen-label="Services">
      <div className="container">
        <div className="section-head">
          <div className="label mono">/ 01 — Services</div>
          <h2>Four things, done <em style={{ color: "rgb(17, 17, 16)" }}>properly</em>.</h2>
        </div>
        <div className="services-grid">
          {SERVICES.map((s) =>
          <div className="service" key={s.n}>
              <span className="num">{s.n}</span>
              <h3>{s.title}</h3>
              <p>{s.body}</p>
              <span className="more">→</span>
            </div>
          )}
        </div>
      </div>
    </section>);

}

function VideoCard() {
  const [playing, setPlaying] = useState(false);
  if (playing) {
    return (
      <div className="realwork-ig">
        <iframe
          src="https://www.instagram.com/p/Bu5CMZegleP/embed/"
          title="Jay at Skinnies — Instagram post"
          frameBorder="0"
          scrolling="no"
          allowtransparency="true"
          allow="encrypted-media; autoplay">
        </iframe>
      </div>);
  }
  return (
    <div className="realwork-video" role="button" aria-label="Play video" onClick={() => setPlaying(true)}>
      <div className="video-frame">
        {/* hint of video background — warehouse silhouettes */}
        <svg className="video-bg" viewBox="0 0 400 540" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
          <defs>
            <linearGradient id="vbg" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0" stopColor="#3a3128" stopOpacity="1" />
              <stop offset="0.5" stopColor="#1f1a14" stopOpacity="1" />
              <stop offset="1" stopColor="#0e0c0a" stopOpacity="1" />
            </linearGradient>
            <radialGradient id="vlight" cx="0.5" cy="0.35" r="0.6">
              <stop offset="0" stopColor="#E8A455" stopOpacity="0.5" />
              <stop offset="1" stopColor="#E8A455" stopOpacity="0" />
            </radialGradient>
          </defs>
          <rect width="400" height="540" fill="url(#vbg)" />
          <rect width="400" height="540" fill="url(#vlight)" />
          {/* warehouse shelving silhouettes */}
          <g opacity="0.18" fill="#000">
            <rect x="0" y="380" width="400" height="160" />
            <rect x="40" y="280" width="120" height="100" />
            <rect x="180" y="240" width="80" height="140" />
            <rect x="280" y="300" width="100" height="80" />
          </g>
          {/* person silhouette in center-foreground */}
          <g opacity="0.5" fill="#0a0807">
            <ellipse cx="200" cy="320" rx="22" ry="28" />
            <path d="M 165 540 L 165 380 Q 165 350 200 350 Q 235 350 235 380 L 235 540 Z" />
          </g>
          {/* film grain dots */}
          <g opacity="0.06" fill="#fff">
            {Array.from({ length: 60 }).map((_, i) => {
              const x = i * 37 % 400;
              const y = i * 71 % 540;
              const r = i % 3 * 0.3 + 0.3;
              return <circle key={i} cx={x} cy={y} r={r} />;
            })}
          </g>
          {/* subtle vignette */}
          <rect width="400" height="540" fill="black" opacity="0.0">
            <animate attributeName="opacity" values="0;0.04;0" dur="6s" repeatCount="indefinite" />
          </rect>
        </svg>
        <div className="video-meta mono">
          <span className="left"><span className="dot"></span>On location · Skinnies HQ</span>
          <span>00:54</span>
        </div>
        <div className="video-caption">
          <div className="title">Planning the next launch with Skinnies.</div>
          <div className="sub mono">Auckland warehouse · @amazonpreneur</div>
        </div>
      </div>
      <div className="play" aria-hidden="true">
        <svg viewBox="0 0 24 24" fill="currentColor"><polygon points="6,4 20,12 6,20" /></svg>
      </div>
    </div>);

}

function RealWork() {
  return (
    <section id="realwork" data-section className="realwork" data-screen-label="What working with us looks like">
      <div className="container">
        <div className="section-head">
          <div className="label mono">/ 04 — Behind the scenes</div>
          <h2>What working with us <em style={{ color: "rgb(232, 153, 64)" }}>actually</em> looks like.</h2>
        </div>
        <div className="realwork-grid">
          <div className="realwork-left">
            <span className="realwork-tag mono">On location with Skinnies — Auckland, NZ</span>
            <p className="realwork-italic">
              This is not a course or a framework. It's real hands-on work with brands launching and scaling on Amazon.
            </p>
            <ul className="realwork-bullets">
              <li>
                <span className="check">✓</span>
                <span>Strategy and launch planning</span>
              </li>
              <li>
                <span className="check">✓</span>
                <span>Store, listings, and ads execution</span>
              </li>
              <li>
                <span className="check">✓</span>
                <span>Ongoing optimisation and scaling support</span>
              </li>
            </ul>
            <div className="hero-cta">
              <a href="game-plan/index.html" className="btn btn-primary" style={{ borderColor: "var(--accent)", background: "var(--accent)", color: "var(--ink)" }}>
                Get your Amazon game plan
                <span className="btn-arrow">→</span>
              </a>
            </div>
            <div className="realwork-trust">
              <span className="pill">
                <span className="ic">
                  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.6">
                    <path d="M3 7V5a3 3 0 016 0v2" />
                    <rect x="2.5" y="7" width="11" height="7" rx="1.5" />
                  </svg>
                </span>
                Straight answers. No pitch. No obligation.
              </span>
              <span className="years"><span className="num">12+</span> years of Amazon experience</span>
            </div>
          </div>
          <div className="realwork-right">
            <VideoCard />
            <div className="realwork-quote">
              <blockquote>
                "We were overwhelmed by Amazon's complexity. After partnering with Jay at Seller Central Consulting, we finally gained momentum — now shipping products to US and UK customers every week."
              </blockquote>
              <div className="who">
                <div className="av" style={{ background: "url('assets/martha.jpg') center/cover", color: "transparent" }}>M</div>
                <div>
                  <div className="name">Martha V.</div>
                  <div className="role">Brand Owner</div>
                </div>
                <div className="client-badge">
                  <span className="brand-name">SKINNIES</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

function Process() {
  return (
    <section id="process" data-section data-screen-label="Process">
      <div className="container">
        <div className="section-head">
          <div className="label mono">/ 03 — How we work</div>
          <h2>A <strong style={{ fontWeight: 700 }}>90-day plan</strong>, <em>not a pitch deck</em>.</h2>
        </div>
        <div className="process">
          {PROCESS.map((p) =>
          <div className="step" key={p.n}>
              <div className="num-big">{p.n}.</div>
              <h4>{p.title}</h4>
              <p>{p.body}</p>
              <span className="week mono">{p.week}</span>
            </div>
          )}
        </div>
      </div>
    </section>);

}

const CASE_STUDIES = [
{
  id: "skinnies",
  brand: "SKINNIES",
  category: "SKINCARE",
  period: "United States",
  pill: "skinnies",
  fromAmount: "$0",
  toAmount: "$32,211",
  metricLabel: "Ordered product sales",
  proof: {
    type: "stack",
    caption: "Actual Seller Central — daily ordered sales",
    bar: "sellercentral.amazon.com · Skinnies",
    images: [
    { src: "proof/skinnies-chart-final-warm.png", alt: "Skinnies daily ordered product sales climbing toward $1K per day" },
    { src: "proof/skinnies-kpi-padded-warm.png", alt: "Skinnies sales snapshot: 1,949 units, $32,211.35 ordered product sales" }]

  },
  bodyHeadline: <>From launch to <strong style={{ fontWeight: 700 }}>$32k</strong> in <strong style={{ fontWeight: 700 }}>90 days</strong>.</>,
  body1: "Skinnies came to us pre-launch — strong brand, beautiful packaging, zero traction on Amazon. We rebuilt positioning around buyer intent, structured the PPC engine from day one, and managed the launch sequence end-to-end.",
  body2: "By month three the account had cleared $32k in ordered sales with reviews compounding weekly. The product never changed — the plumbing did.",
  bullets: [
  "Full Amazon launch sequence — positioning to PPC",
  "Listings rebuilt around buyer-intent keywords",
  "Ordered sales scaled to $32,000+ across 1,949 units"],

  stats: [
  { v: "$32.2k", l: "Ordered sales" },
  { v: "1,949", l: "Units ordered" },
  { v: "~$1k/day", l: "Peak run-rate" }]

},
{
  id: "xtreme",
  brand: "XTREME HEATERS",
  category: "AUTOMOTIVE",
  period: "United States",
  pill: "Xtreme Heaters",
  fromAmount: "$0",
  toAmount: "$73,567",
  metricLabel: "30-day ordered sales",
  proof: {
    type: "carousel",
    caption: "Actual Seller Central — sales summary",
    bar: "sellercentral.amazon.com · Xtreme Heaters",
    slides: [
    { src: "proof/xtreme-summary-58k-warm.png", cap: "Ramp month · $58,384 / 30 days", alt: "Xtreme Heaters sales summary: $58,384.67 over 30 days, 212 units" },
    { src: "proof/xtreme-summary-warm.png", cap: "Peak month · $73,567 / 30 days", alt: "Xtreme Heaters sales summary: $73,567.56 over 30 days, 254 units" }]

  },
  bodyHeadline: "Couldn't keep up with the sales!",
  body1: "Xtreme Heaters had product-market fit but no Amazon channel — and a seasonal window they were missing every year. We rebuilt the listing for the seasonal search spike, ran a 6-week pre-season PPC ramp, and synced FBA inventory to the demand curve.",
  body2: <>Starting from under $100/mo, sales climbed <strong style={{ fontWeight: 700 }}>month after month — $30k, $50k, then $73k+</strong>. The biggest challenge wasn't growth — it was <strong style={{ fontWeight: 700 }}>keeping inventory in stock</strong>.</>,
  bullets: [
  "Seasonal Amazon launch + FBA forecasting",
  "PPC ramp timed to the buying window",
  "Climbed from under $100 to $73k+/mo, month after month"],

  stats: [
  { v: "$73.5k", l: "Best 30 days" },
  { v: "<$100", l: "Where we started" },
  { v: "254", l: "Units / 30 days" }]

}];


function CaseProof({ proof }) {
  const [i, setI] = React.useState(0);
  const isCarousel = proof.type === "carousel";
  const slides = proof.slides || [];
  React.useEffect(() => {
    if (!isCarousel || slides.length < 2) return;
    const t = setInterval(() => setI((p) => (p + 1) % slides.length), 3500);
    return () => clearInterval(t);
  }, [isCarousel, slides.length, i]);

  if (isCarousel) {
    return (
      <>
        <div className="inset-cap"><span className="v"></span>{proof.caption}</div>
        <div className="shot">
          <div className="shot-bar"><i></i><i></i><i></i><span>{proof.bar}</span></div>
          <div className="carousel">
            <div className="carousel-track" style={{ transform: `translateX(-${i * 100}%)` }}>
              {slides.map((s, k) =>
              <img key={k} className="carousel-slide" src={s.src} alt={s.alt} />
              )}
            </div>
          </div>
          <div className="carousel-foot">
            <span className="carousel-cap">{slides[i].cap}</span>
            <div className="carousel-dots">
              {slides.map((s, k) =>
              <button key={k} className={`dot ${k === i ? "is-active" : ""}`} onClick={() => setI(k)} aria-label={s.cap}></button>
              )}
            </div>
          </div>
        </div>
      </>);

  }

  const images = proof.images || [];
  return (
    <>
      <div className="inset-cap"><span className="v"></span>{proof.caption}</div>
      <div className="shot">
        <div className="shot-bar"><i></i><i></i><i></i><span>{proof.bar}</span></div>
        <img src={images[0].src} alt={images[0].alt} />
      </div>
      {images.slice(1).map((im, k) =>
      <div className="shot" key={k}><img src={im.src} alt={im.alt} /></div>
      )}
    </>);

}

function CaseCard({ data, reverse }) {
  return (
    <div className={`case ${reverse ? "reverse" : ""}`}>
      <div className={`case-art ${data.proof ? "has-proof" : ""}`}>
        <div className="case-meta mono">
          <span>{data.brand} — {data.category}</span>
          <span className="accent">{data.period}</span>
        </div>
        <h3>{data.metricLabel}</h3>
        <div className="from-to">
          <span className="from">{data.fromAmount}</span>
          <span className="to">{data.toAmount}</span>
        </div>
        {data.proof ?
        <CaseProof proof={data.proof} /> :
        <div className="chart">
            <GrowthChart />
          </div>}
      </div>
      <div className="case-body">
        {data.pill && <span className="case-pill">{data.pill}</span>}
        <h3>{data.bodyHeadline}</h3>
        <p>{data.body1}</p>
        <p>{data.body2}</p>
        <div className="case-stats">
          {data.stats.map((s, i) =>
          <div className="stat" key={i}>
              <div className="v">{s.v}</div>
              <div className="l mono">{s.l}</div>
            </div>
          )}
        </div>
      </div>
    </div>);

}

function CaseStudy() {
  return (
    <section id="case" data-section data-screen-label="Case Studies">
      <div className="container">
        <div className="section-head">
          <div className="label mono">/ 05 — Case studies</div>
          <h2>Real brands. <em>Real numbers</em>.</h2>
        </div>
        {CASE_STUDIES.map((c, i) =>
        <CaseCard key={c.id} data={c} reverse={i % 2 === 1} />
        )}
      </div>
    </section>);

}

function Testimonials() {
  return (
    <section data-section data-screen-label="Testimonials">
      <div className="container">
        <div className="section-head">
          <div className="label mono">/ 07 — Words</div>
          <h2>What our brands <em>actually say</em>.</h2>
        </div>
        <div className="quotes">
          {QUOTES.map((q, i) =>
          <div className="quote" key={i}>
              <div className="mark">"</div>
              <blockquote>{q.text}</blockquote>
              <div className="who">
                <div
                className="av"
                style={q.photo ? { background: `url('${q.photo}') center/cover`, color: "transparent" } : undefined}>
                
                  {q.initial}
                </div>
                <div>
                  <div className="name">{q.name}</div>
                  <div className="role">{q.role}</div>
                </div>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

const WORK_ITEMS = [
{ src: "assets/work-skinnies-awards.webp", brand: "SKINNIES", type: "Award badges & hero" },
{ src: "assets/work-skinnies-kids.jpg", brand: "SKINNIES KIDS", type: "Lifestyle creative" },
{ src: "assets/work-libigem.webp", brand: "NUTRAFIRM", type: "Premium hero shot" },
{ src: "assets/work-khabu.webp", brand: "KHABU", type: "A+ infographic" },
{ src: "assets/work-hockey-shea.jpg", brand: "INSIDE HOCKEY", type: "Athlete endorsement" },
{ src: "assets/work-hockey-proslide.jpg", brand: "INSIDE HOCKEY", type: "Technical anatomy" },
{ src: "assets/work-skinnies-sungel.jpg", brand: "SKINNIES SUNGEL", type: "Main image listing" }];


function Work() {
  return (
    <section id="work" data-section data-screen-label="The Work">
      <div className="container">
        <div className="section-head">
          <div className="label mono">/ 02 — The Work</div>
          <h2>What we've <em>shipped</em>.</h2>
        </div>
        <p className="work-sub">
          Listings, ad creative, A+ content, athlete endorsements, and PR placements — shipped across skincare, supplements, automotive, sports, and homewares.
        </p>
      </div>
      <div className="work-strip" role="region" aria-label="Selected client work">
        <div className="work-track">
          {WORK_ITEMS.map((w, i) =>
          <div className="work-card" key={i}>
              <img src={w.src} alt={`${w.brand} — ${w.type}`} loading="lazy" />
              <div className="work-label">
                <span className="work-brand mono">{w.brand}</span>
                <span className="work-type">{w.type}</span>
              </div>
            </div>
          )}
          {WORK_ITEMS.map((w, i) =>
          <div className="work-card" key={`dup-${i}`} aria-hidden="true">
              <img src={w.src} alt="" loading="lazy" />
              <div className="work-label">
                <span className="work-brand mono">{w.brand}</span>
                <span className="work-type">{w.type}</span>
              </div>
            </div>
          )}
        </div>
      </div>
      <div className="container">
        <div className="work-foot mono">
          {WORK_ITEMS.length} of 40+ projects — hover to pause
        </div>
      </div>
    </section>);

}

function Rebrand() {
  const baRef = React.useRef(null);
  const beforeRef = React.useRef(null);
  const dividerRef = React.useRef(null);
  const gripRef = React.useRef(null);

  React.useEffect(() => {
    const ba = baRef.current;
    if (!ba) return;
    let dragging = false;
    let raf = null;
    let userTook = false;
    function setPct(p) {
      p = Math.max(0, Math.min(100, p));
      beforeRef.current.style.clipPath = 'inset(0 ' + (100 - p) + '% 0 0)';
      dividerRef.current.style.left = p + '%';
      gripRef.current.style.left = p + '%';
    }
    function fromEvent(e) {
      const r = ba.getBoundingClientRect();
      const x = (e.touches ? e.touches[0].clientX : e.clientX) - r.left;
      setPct((x / r.width) * 100);
    }
    function stopAuto() {
      userTook = true;
      if (raf) { cancelAnimationFrame(raf); raf = null; }
      ba.classList.remove('is-auto');
    }
    function start(e) { stopAuto(); dragging = true; fromEvent(e); }
    function move(e) { if (dragging) { fromEvent(e); e.preventDefault(); } }
    function end() { dragging = false; }
    ba.addEventListener('pointerdown', start);
    window.addEventListener('pointermove', move, { passive: false });
    window.addEventListener('pointerup', end);
    setPct(50);

    // Auto-sweep left→right once the slider scrolls into view; any tap/drag takes over.
    const easeInOut = (t) => t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
    // [time, pct] keyframes: settle left, sweep right, return to centre
    const keys = [[0, 50], [0.16, 8], [0.84, 92], [1, 50]];
    function runAuto() {
      if (userTook) return;
      ba.classList.add('is-auto');
      const dur = 3200;
      const t0 = performance.now();
      function frame(now) {
        if (userTook) return;
        const t = Math.min(1, (now - t0) / dur);
        let p = 50;
        for (let i = 1; i < keys.length; i++) {
          if (t <= keys[i][0]) {
            const seg = (t - keys[i - 1][0]) / (keys[i][0] - keys[i - 1][0]);
            p = keys[i - 1][1] + (keys[i][1] - keys[i - 1][1]) * easeInOut(seg);
            break;
          }
        }
        setPct(p);
        if (t < 1) { raf = requestAnimationFrame(frame); }
        else { raf = null; ba.classList.remove('is-auto'); }
      }
      raf = requestAnimationFrame(frame);
    }

    const reduced = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    let io = null;
    if (!reduced && 'IntersectionObserver' in window) {
      io = new IntersectionObserver((entries) => {
        entries.forEach((en) => {
          if (en.isIntersecting && !userTook && !raf) {
            setTimeout(runAuto, 350);
            if (io) { io.disconnect(); io = null; }
          }
        });
      }, { threshold: 0.55 });
      io.observe(ba);
    }

    return () => {
      ba.removeEventListener('pointerdown', start);
      window.removeEventListener('pointermove', move);
      window.removeEventListener('pointerup', end);
      if (raf) cancelAnimationFrame(raf);
      if (io) io.disconnect();
    };
  }, []);

  return (
    <section id="rebrand" data-section className="rebrand-sec" data-screen-label="Product & Packaging">
      <div className="container">
        <div className="rebrand-binner">
          <div className="label mono rb-label">/ 06 — Product &amp; Packaging</div>
          <h2 className="rb-h2">We rebrand the <em>product itself</em><br />— not just the listing.</h2>
          <p className="rb-lead">
            Tired formula, busy label, off-the-shelf clip-art? We rebuild it from the ground up — a new name, a new brand identity, and packaging that actually earns its place on the shelf. Drag to see one we took from generic to ready-to-sell.
          </p>
          <div className="rebrand-mid">
            <div className="side-stat side-left">
              <div className="v">Redesign</div>
              <div className="l">Look &amp; feel</div>
            </div>
            <div className="rebrand-slider">
              <div className="ba" ref={baRef}>
                <img className="after-layer" src="assets/rebrand-after-dark.png" alt="LibiGem — rebranded by Seller Central Consulting" />
                <div className="before-layer" ref={beforeRef} style={{ clipPath: "inset(0 50% 0 0)" }}>
                  <img src="assets/rebrand-before-dark.png" alt="EstroGem — original product" />
                </div>
                <div className="studio"></div>
                <span className="tag tag-before">Before</span>
                <span className="tag tag-after">After</span>
                <div className="divider" ref={dividerRef}></div>
                <div className="grip" ref={gripRef}></div>
              </div>
              <div className="ba-cap">EstroGem <span>→</span> LibiGem</div>
            </div>
            <div className="side-stat side-right">
              <div className="v">Reimagine</div>
              <div className="l">Shelf presence</div>
            </div>
          </div>
          <div className="rebrand-bullets">
            <ul className="rebrand-list">
              <li>Naming &amp; brand identity</li>
              <li>Label &amp; packaging design</li>
              <li>Product &amp; lifestyle photography</li>
              <li>Listing &amp; A+ content imagery</li>
            </ul>
          </div>
        </div>
      </div>
    </section>);

}

function CrossBorder() {
  const globeRef = React.useRef(null);
  React.useEffect(function () {
    if (globeRef.current && window.SCCGlobe) {
      return window.SCCGlobe(globeRef.current, { accent: "232,153,64" });
    }
  }, []);
  return (
    <section id="crossborder" data-section className="crossborder" data-screen-label="Cross-border">
      <div className="container">
        <div className="section-head">
          <div className="label mono">/ Global — Cross-border</div>
          <h2><span style={{ color: "rgb(232, 153, 64)" }}>Cross-border</span> isn't a bolt-on. It's <em>how we work</em>.</h2>
        </div>
        <div className="xb-grid">
          <div className="xb-globe-wrap">
            <div className="xb-globe">
              <canvas ref={globeRef} className="xb-globe-canvas" role="img" aria-label="Rotating globe showing the markets we sell across"></canvas>
            </div>
            <span className="xb-globe-cap mono">Amazon Global Selling Champion</span>
          </div>
          <div className="xb-body">
            <p className="xb-lead">A New Zealand base and an Amazon Global Selling champion.</p>
            <p className="xb-copy">
              Taking a brand beyond its home market is native to what we do — into the US, the world's largest marketplace, and wherever the demand is next.
            </p>
            <div className="xb-markets">
              <div className="xb-market">
                <span className="xb-market-k mono">Brands from</span>
                <span className="xb-market-v mono">NZ · AU · UK · EU · US · CA · IN</span>
              </div>
              <div className="xb-market">
                <span className="xb-market-k mono">Selling into</span>
                <span className="xb-market-v mono">US · CA · UK · EU · AU</span>
              </div>
              <div className="xb-market">
                <span className="xb-market-k mono">One account</span>
                <span className="xb-market-v mono">Run worldwide</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Community() {
  const [playing, setPlaying] = useState(false);
  const meetupPhotos = [
  { src: "assets/meetup-1.jpg", city: "Gold Coast, Australia" },
  { src: "assets/meetup-2.jpg", city: "Auckland, New Zealand" },
  { src: "assets/meetup-3.jpg", city: "Gold Coast, Australia" },
  { src: "assets/meetup-4.jpg", city: "Auckland, New Zealand" }];

  return (
    <section id="community" data-section data-screen-label="Community">
      <div className="container">
        <div className="section-head">
          <div className="label mono">/ In person — Community</div>
          <h2>We're out meeting brand owners <em>face to face</em>.</h2>
        </div>
        <div className="community-grid">
          <div>
            <span className="community-tag mono">New Zealand's largest open Amazon community</span>
            <p className="community-italic">
              We host <strong style={{ fontWeight: 700 }}>New Zealand's largest — and only open — in-person Amazon community</strong> — and work with brand owners and operators across the US, UK, EU &amp; Australia focused on <strong style={{ fontWeight: 700 }}>long-term growth</strong>.
            </p>
            <p className="community-line">Most operators stay behind a screen. We hold the door open.</p>
            <div className="community-stats">
              <div className="cstat">
                <div className="v">412</div>
                <div className="l">Members</div>
              </div>
              <div className="cstat">
                <div className="v">5.0★</div>
                <div className="l">Average rating</div>
              </div>
              <div className="cstat">
                <div className="v">37</div>
                <div className="l">Five-star reviews</div>
              </div>
            </div>
            <a href="https://www.meetup.com/selling-on-amazon/" target="_blank" rel="noopener noreferrer" className="community-meetup-link mono">
              See the group on Meetup
              <span aria-hidden="true">→</span>
            </a>
          </div>
          <div>
            {playing ?
            <div className="community-video" style={{ cursor: "default" }}>
                <iframe
                src="https://www.instagram.com/p/CIOsCrMhh0n/embed/"
                title="Amazon community meetup"
                frameBorder="0"
                scrolling="no"
                allowtransparency="true"
                allow="encrypted-media; autoplay"
                style={{ position: "absolute", inset: 0, width: "100%", height: "100%", border: 0, background: "#fff" }}>
              </iframe>
              </div> :

            <div className="community-video" role="button" aria-label="Play video" onClick={() => setPlaying(true)}>
                <div className="cv-frame"></div>
                <div className="cv-meta">
                  <span><span className="live-dot"></span>Meetup · Auckland CBD</span>
                  <span>@amazonpreneur</span>
                </div>
                <div className="cv-caption">
                  <div className="title">A panning walk through one of our meetups.</div>
                  <div className="sub">Tap to play</div>
                </div>
                <div className="cv-play">
                  <svg viewBox="0 0 24 24" fill="currentColor"><polygon points="6,4 20,12 6,20" /></svg>
                </div>
              </div>
            }
          </div>
        </div>
        <div className="community-gallery">
          {meetupPhotos.map((p, i) =>
          <div className="photo" key={i}>
              <img src={p.src} alt="Meetup" loading="lazy" />
              <span className="city">{p.city}</span>
            </div>
          )}
        </div>
      </div>
    </section>);

}

function Founder() {
  return (
    <section id="about" data-section data-screen-label="About">
      <div className="container">
        <div className="section-head">
          <div className="label mono">/ 09 — About</div>
          <h2>Run by an operator, <em>not an agency</em>.</h2>
        </div>
        <div className="founder">
          <div className="founder-img" style={{ backgroundPosition: "center center" }}>
            <img className="portrait" src="images/jay-portrait-v4.jpg" alt="Founder portrait" />
            <div className="badge">
              <span>est.</span>
              <span className="big">2016</span>
            </div>
          </div>
          <div className="founder-body">
            <h3>I'm Jay. I've been selling on Amazon for <strong style={{ fontWeight: 700 }}>12+ years, professionally</strong>.</h3>
            <p>
              I built multiple private-label brands to six figures, experimented, and spent the next coming years inside other people's accounts trying to figure out why some brands compound on Amazon and others stall. Seller Central Consulting is what I wish I'd been able to hire when I was starting.
            </p>
            <p>
              We <strong style={{ fontWeight: 700 }}>stay small on purpose</strong> — <strong style={{ fontWeight: 700 }}>three operators, ten clients max</strong>. If you want a hundred-person agency that funnels you through three layers of account managers, we're not it.
            </p>
            <div className="founder-meta">
              <div>
                <div className="l mono">Founded</div>
                <div className="v">2016 (consultancy)</div>
              </div>
              <div>
                <div className="l mono">Based</div>
                <div className="v">Auckland, New Zealand | Canberra, Australia | Tallinn, Estonia

                </div>
              </div>
              <div>
                <div className="l mono">Team</div>
                <div className="v">3 operators</div>
              </div>
              <div>
                <div className="l mono">Marketplaces</div>
                <MarketFlags />
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>);}

function Pricing() {
  const TYPEFORM = "game-plan/index.html";
  return (
    <section id="pricing" data-section data-screen-label="Pricing">
      <div className="container">
        <div className="section-head">
          <div className="label mono">/ 10 — Engagement</div>
          <h2>Clear pricing, <em>no games</em>.</h2>
        </div>
        <p className="pricing-lead">
          Most brands start with a launch project, then move into a retainer once the account is earning. No long lock-ins, no hidden fees. Prefer to pay on results? We can structure that too.
        </p>

        <div className="pricing-grid">
          <div className="tier">
            <div className="tier-top">
              <span className="tier-num">i — One-time</span>
            </div>
            <h3>Launch &amp; Setup</h3>
            <div className="tier-from">From</div>
            <div className="tier-price">
              <span className="amt">$6,000</span>
            </div>
            <div className="tier-cadence">One-off project</div>
            <p className="tier-desc">
              A full account build to launch or relaunch your brand the right way — listings, imagery, and positioning done properly.
            </p>
            <ul>
              <li><span className="tick">✓</span> Account setup &amp; positioning</li>
              <li><span className="tick">✓</span> Listing creation &amp; copywriting</li>
              <li><span className="tick">✓</span> Product imagery &amp; A+ content</li>
              <li><span className="tick">✓</span> Launch-ready in weeks, not months</li>
            </ul>
            <a className="tier-cta" href={TYPEFORM}>
              Scope a launch
            </a>
          </div>

          <div className="tier featured">
            <div className="tier-top">
              <span className="tier-num">ii — Monthly</span>
              <span className="tier-badge">Most chosen</span>
            </div>
            <h3>Ongoing Retainer</h3>
            <div className="tier-from">From</div>
            <div className="tier-price">
              <span className="amt">$2,500</span>
              <span className="per">/mo</span>
            </div>
            <div className="tier-cadence">Rolling · 30-day notice</div>
            <p className="tier-desc">
              Hands-on management once you're live — the levers that move revenue, run month to month.
            </p>
            <ul>
              <li><span className="tick">✓</span> Full Sponsored Products/Brands/Display</li>
              <li><span className="tick">✓</span> Listing &amp; A+ optimisation</li>
              <li><span className="tick">✓</span> Weekly reporting + monthly reviews</li>
              <li><span className="tick">✓</span> Direct line to your operator</li>
            </ul>
            <a className="tier-cta" href={TYPEFORM}>
              Get your Amazon game plan
            </a>
          </div>

          <div className="tier">
            <div className="tier-top">
              <span className="tier-num">iii — Bespoke</span>
            </div>
            <h3>Custom</h3>
            <div className="tier-from">&nbsp;</div>
            <div className="tier-price">
              <span className="amt">Let's talk</span>
            </div>
            <div className="tier-cadence">Built around your brand</div>
            <p className="tier-desc">
              Too small for a retainer, scaling hard, or you'd rather pay on results? We'll build an engagement that fits.
            </p>
            <ul>
              <li><span className="tick">✓</span> Start small, scale when ready</li>
              <li><span className="tick">✓</span> Flat fee, performance-based, or a blend</li>
              <li><span className="tick">✓</span> Sourcing, expansion &amp; bespoke scope</li>
              <li><span className="tick">✓</span> Priced to the value, not a template</li>
            </ul>
            <a className="tier-cta" href={TYPEFORM}>
              Tell us what you need
            </a>
          </div>
        </div>

        <div className="pricing-note">
          <span className="dot"></span>
          Every engagement is scoped to your account — these are starting points, not fixed packages. Prices in USD; ad spend is billed by Amazon, not us.
        </div>

        <p className="pricing-help">
          Questions? <a href="https://wa.me/64272255529?text=Hi%20Jay%2C%20I%27d%20like%20to%20talk%20about%20my%20brand%20on%20Amazon." target="_blank" rel="noopener noreferrer">WhatsApp us on +64 27 22 555 29</a>
        </p>
      </div>
    </section>);

}

function LeadMagnet() {
  const PACK_URL = "new-seller-launch-pack.pdf";
  const [sent, setSent] = useState(false);
  const [data, setData] = useState({ name: "", email: "" });
  const submit = async (e) => {
    e.preventDefault();
    try {
      const res = await fetch("https://formspree.io/f/xykvnkrb", {
        method: "POST",
        headers: { "Accept": "application/json", "Content-Type": "application/json" },
        body: JSON.stringify({
          name: data.name,
          email: data.email,
          _replyto: data.email,
          _subject: `Launch Pack request from ${data.name || data.email}`
        })
      });
      if (res.ok) {
        setSent(true);
        window.open(PACK_URL, "_blank", "noopener");
      }
      else { alert("Something went wrong. Please email hello@sellercentral.consulting and we'll send it over."); }
    } catch (err) {
      alert("Connection issue. Please email hello@sellercentral.consulting and we'll send it over.");
    }
  };
  return (
    <section id="launch-pack" className="leadmagnet" data-screen-label="Launch Pack">
      <div className="container leadmagnet-grid">
        <div className="lm-text">
          <div className="lm-eyebrow mono"><span className="dot"></span> Free · for new sellers</div>
          <h2 className="lm-title">The <em>New Seller</em> Launch Pack</h2>
          <p className="lm-sub">
            Launch-ready: everything you need before you sell on Amazon — the accounts, documents, and step-by-step checklist we use to get a brand off the ground.
          </p>
          {sent ?
          <div className="lm-done">
              <h4>Here's your Launch Pack.</h4>
              <p>It just opened in a new tab. If your browser blocked it, grab it here:</p>
              <a className="lm-done-btn" href={PACK_URL} target="_blank" rel="noopener">Open your Launch Pack <span aria-hidden="true">→</span></a>
            </div> :
          <form className="lm-form" onSubmit={submit}>
              <div className="lm-field">
                <label>Name</label>
                <input required value={data.name} onChange={(e) => setData({ ...data, name: e.target.value })} placeholder="Your name" />
              </div>
              <div className="lm-field">
                <label>Email</label>
                <input required type="email" value={data.email} onChange={(e) => setData({ ...data, email: e.target.value })} placeholder="you@brand.com" />
              </div>
              <button type="submit" className="lm-submit">Send me the pack <span aria-hidden="true">→</span></button>
            </form>
          }
          {!sent &&
          <div className="lm-note">No spam — just the pack. Unsubscribe anytime. <a href="legal/privacy-policy.html">Privacy</a>.</div>
          }
        </div>
        <div className="lm-cover">
          <div className="lm-cover-card">
            <div className="lm-cover-top">Seller Central Consulting · Guide</div>
            <div className="lm-cover-title">The New Seller Launch Pack</div>
            <ul className="lm-cover-list">
              <li><span className="tick">✓</span> Accounts &amp; registrations</li>
              <li><span className="tick">✓</span> Verification documents</li>
              <li><span className="tick">✓</span> Listing &amp; imagery prep</li>
              <li><span className="tick">✓</span> First FBA shipment</li>
              <li><span className="tick">✓</span> 90-day launch timeline</li>
            </ul>
            <div className="lm-cover-foot">PDF · Free download</div>
          </div>
        </div>
      </div>
    </section>);

}

function FAQ() {
  const [open, setOpen] = useState(0);
  return (
    <section id="faq" data-section data-screen-label="FAQ">
      <div className="container">
        <div className="section-head">
          <div className="label mono">/ 11 — FAQ</div>
          <h2>Things we get <em>asked</em>.</h2>
        </div>
        <div className="faq-grid">
          {FAQS.map((f, i) =>
          <div
            key={i}
            className="faq"
            data-open={open === i}
            onClick={() => setOpen(open === i ? -1 : i)}>
            
              <div className="num mono">{String(i + 1).padStart(2, "0")}</div>
              <div>
                <div className="q">{f.q}</div>
                <div className="a">{f.a}</div>
              </div>
              <div className="toggle">+</div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

function Contact() {
  const [submitted, setSubmitted] = useState(false);
  const [form, setForm] = useState({
    name: "", email: "", brand: "", revenue: "<25k", message: ""
  });
  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      const res = await fetch("https://formspree.io/f/xykvnkrb", {
        method: "POST",
        headers: { "Accept": "application/json", "Content-Type": "application/json" },
        body: JSON.stringify({
          name: form.name,
          email: form.email,
          brand: form.brand,
          revenue: form.revenue,
          message: form.message,
          _subject: `Audit request from ${form.brand || form.name}`
        })
      });
      if (res.ok) {
        setSubmitted(true);
      } else {
        alert("Something went wrong sending your message. Please email hello@sellercentral.consulting directly.");
      }
    } catch (err) {
      alert("Connection issue. Please email hello@sellercentral.consulting directly.");
    }
  };
  const update = (k) => (e) => setForm({ ...form, [k]: e.target.value });
  return (
    <section id="contact" className="contact" data-screen-label="Contact">
      <div className="container">
        <div>
          <div className="mono" style={{ color: "rgba(244,239,230,0.5)", marginBottom: 24 }}>/ 11 — Contact</div>
          <h2>Let's see what your <em>account</em> can do.</h2>
          <p>
            Drop your details and we'll send back a free growth plan within 48 hours. No pitch, no pressure — just a clear read on where the leverage is.
          </p>
          <div style={{ marginTop: 40 }}>
            <div className="mono" style={{ color: "rgba(244,239,230,0.5)", marginBottom: 8 }}>Or email</div>
            <a href="mailto:hello@sellercentral.consulting" style={{ fontFamily: "var(--display)", fontSize: 28, textDecoration: "none", color: "var(--bg)", borderBottom: "1px solid var(--accent)" }}>hello@sellercentral.consulting

            </a>
          </div>
          <div className="fit-grid">
            <div className="fit-col">
              <div className="fit-label mono">Best fit for</div>
              <ul>
                <li>Brands doing $25k+/mo, or serious about launching</li>
                <li>Owners who want one operator, not layers of account managers</li>
                <li>People in it for long-term, compounding growth</li>
              </ul>
            </div>
            <div className="fit-col">
              <div className="fit-label mono">Not a fit if</div>
              <ul>
                <li>You want guaranteed overnight revenue</li>
                <li>You're after the cheapest VA on the market</li>
                <li>You'd rather not be involved at all</li>
              </ul>
            </div>
          </div>
        </div>
        <div>
          <div className="submitted-message" data-show={submitted}>
            <h4>Got it — thanks.</h4>
            <p>We'll be in touch within 48 hours with your audit slot. Talk soon.</p>
          </div>
          {!submitted &&
          <form className="form" onSubmit={handleSubmit}>
              <div className="form-row">
                <div className="field">
                  <label>Name</label>
                  <input required value={form.name} onChange={update("name")} placeholder="Your full name" />
                </div>
                <div className="field">
                  <label>Email</label>
                  <input required type="email" value={form.email} onChange={update("email")} placeholder="you@brand.com" />
                </div>
              </div>
              <div className="form-row">
                <div className="field">
                  <label>Brand</label>
                  <input required value={form.brand} onChange={update("brand")} placeholder="Brand name" />
                </div>
                <div className="field">
                  <label>Monthly Amazon revenue</label>
                  <select value={form.revenue} onChange={update("revenue")}>
                    <option value="<25k">Under $25k</option>
                    <option value="25k-100k">$25k — $100k</option>
                    <option value="100k-500k">$100k — $500k</option>
                    <option value="500k+">$500k+</option>
                    <option value="pre">Pre-launch</option>
                  </select>
                </div>
              </div>
              <div className="field">
                <label>What's the one thing you want to fix?</label>
                <textarea value={form.message} onChange={update("message")} placeholder="The shorter the better." />
              </div>
              <button type="submit" className="btn btn-primary">
                Get my Amazon game plan <span className="btn-arrow">→</span>
              </button>
              <div className="form-reassure mono">You'll hear back within 48 hours — straight from Jay, not a bot.</div>
            </form>
          }
        </div>
      </div>
    </section>);

}

function StickyCTA() {
  const [visible, setVisible] = useState(false);
  const [atFooter, setAtFooter] = useState(false);
  const [isMobile, setIsMobile] = useState(false);
  useEffect(() => {
    const mq = window.matchMedia("(max-width: 720px)");
    const update = () => setIsMobile(mq.matches);
    update();
    mq.addEventListener("change", update);
    return () => mq.removeEventListener("change", update);
  }, []);
  useEffect(() => {
    const onScroll = () => {
      setVisible(window.scrollY > 600);
    };
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  useEffect(() => {
    const footer = document.querySelector("footer");
    if (!footer || !("IntersectionObserver" in window)) return;
    const io = new IntersectionObserver(
      (entries) => setAtFooter(entries[0].isIntersecting),
      { rootMargin: "0px 0px -40px 0px" }
    );
    io.observe(footer);
    return () => io.disconnect();
  }, []);
  return (
    <div className={`sticky-cta ${visible ? "is-visible" : ""} ${atFooter ? "is-hidden" : ""}`}>
      <div className="sticky-cta-pill">
        <div className="sticky-cta-av">
          <img src="images/jay-portrait-v4.jpg" alt="Jay" />
        </div>
        <div className="sticky-cta-text">
          <div className="sticky-cta-top">TALK TO JAY DIRECTLY</div>
          <div className="sticky-cta-bot">30-MIN AUDIT · NO PITCH</div>
        </div>
        <a href={isMobile ? "https://wa.me/64272255529?text=Hi%20Jay%2C%20I%27d%20like%20to%20talk%20about%20my%20brand%20on%20Amazon." : "game-plan/index.html"} target="_blank" rel="noopener noreferrer" className="sticky-cta-btn">
          {isMobile ? "Message Jay on WhatsApp" : "Get your Amazon game plan"} <span aria-hidden="true">→</span>
        </a>
      </div>
    </div>);

}

function CookieBanner() {
  const [decision, setDecision] = useState(() => {
    try { return localStorage.getItem("scc-cookie-consent"); } catch (e) { return null; }
  });

  const choose = (value) => {
    try { localStorage.setItem("scc-cookie-consent", value); } catch (e) {}
    setDecision(value);
    // Hook point: load Google Analytics here only when value === "accepted".
    // e.g. if (value === "accepted") initGoogleAnalytics();
    window.dispatchEvent(new CustomEvent("scc-cookie-consent", { detail: value }));
  };

  if (decision) return null;

  return (
    <div className="cookie-banner" role="dialog" aria-live="polite" aria-label="Cookie consent">
      <div className="cookie-banner-inner">
        <div className="cookie-banner-text">
          <div className="cookie-banner-title">We use cookies</div>
          <p>
            We use essential cookies to run this site and, with your consent, Google Analytics to
            understand how it's used. See our <a href="legal/privacy-policy.html">Privacy Policy</a>.
          </p>
        </div>
        <div className="cookie-banner-actions">
          <button className="cookie-btn cookie-btn-ghost" onClick={() => choose("rejected")}>
            Reject non-essential
          </button>
          <button className="cookie-btn cookie-btn-solid" onClick={() => choose("accepted")}>
            Accept all
          </button>
        </div>
      </div>
    </div>);

}

function Footer() {
  return (
    <footer>
      <div className="container foot-brand">
        <span className="brand-badge"><span className="s">S<span className="brand-dot">.</span></span></span>
        <span className="foot-brand-text">
          <span className="foot-brand-name">Seller Central <span className="acc">Consulting</span></span>
          <span className="foot-brand-tag">Amazon growth partner</span>
        </span>
      </div>
      <div className="container foot-inner">
        <div>© 2026 Seller Central Consulting</div>
        <div className="foot-links">
          <a href="legal/privacy-policy.html">Privacy</a>
          <a href="legal/terms-of-service.html">Terms</a>
          <a href="legal/disclaimer.html">Disclaimer</a>
        </div>
        <div>New Zealand | Australia | Europe</div>
        <div>hello@sellercentral.consulting</div>
      </div>
      <div className="container foot-note">
        Seller Central Consulting is a trading name of Bansal International OÜ (registry code 17445166), registered in Tallinn, Estonia. Results shown reflect specific past client engagements and are not a guarantee of future performance; outcomes vary. We are an independent consultancy and are not affiliated with, endorsed by, or sponsored by Amazon.com, Inc. "Amazon" and "Seller Central" are trademarks of Amazon.com, Inc.
      </div>
    </footer>);

}

// Tweaks
const FONT_OPTIONS = [
{ value: "Instrument Serif", label: "Instrument" },
{ value: "Fraunces", label: "Fraunces" },
{ value: "Space Grotesk", label: "Grotesk" }];

const THEME_OPTIONS = [
{ value: "warm", label: "Warm" },
{ value: "paper", label: "Paper" },
{ value: "cool", label: "Cool" },
{ value: "dark", label: "Dark" }];

const DENSITY_OPTIONS = [
{ value: "comfortable", label: "Airy" },
{ value: "compact", label: "Compact" }];


function FitForProducts() {
  const FITS = [
    { i: "01", k: "Design", t: "A form people notice", d: "Distinctive enough to own the shelf." },
    { i: "02", k: "Material", t: "Something better made", d: "Quality buyers can feel and see." },
    { i: "03", k: "Function", t: "A job done better", d: "Solves a problem the rest don't." },
    { i: "04", k: "Formulation", t: "A formula that's yours", d: "Proprietary, defensible, repeat-buy." }
  ];
  return (
    <section id="builtfor" data-section className="bfup" data-screen-label="Built for unique products">
      <div className="container">
        <div className="section-head">
          <div className="label mono bfup-eyebrow"><span className="dot"></span>Built for unique products</div>
          <div className="bfup-intro">
            <h2>If your product has a real <em>edge</em>, we turn it into ranking, conversion, and revenue.</h2>
            <p>Category doesn't matter to us — the edge does. We work with brands that have a genuine point of difference, because those are the products that hold margin and survive a price war on Amazon.</p>
          </div>
        </div>
        <div className="bfup-grid">
          {FITS.map((f) =>
          <div className="bfup-cell" key={f.i}>
              <span className="bfup-index">{f.i}</span>
              <span className="bfup-num mono">{f.k}</span>
              <h3>{f.t}</h3>
              <p>{f.d}</p>
            </div>
          )}
        </div>
        <p className="bfup-close"><strong>What's not a fit:</strong> commodity and me-too products. They can't hold margin on Amazon — it just turns them into a race to the bottom.</p>
      </div>
    </section>
  );
}

function App() {
  const [tweaks, setTweak] = useTweaks(window.TWEAK_DEFAULTS || {
    theme: "warm",
    accent: "#E89940",
    displayFont: "Instrument Serif",
    density: "comfortable",
    showStats: true
  });

  useEffect(() => {
    document.body.dataset.theme = tweaks.theme || "warm";
    document.documentElement.style.setProperty("--accent", tweaks.accent || "#E89940");
    document.documentElement.style.setProperty("--display", `'${tweaks.displayFont}', Georgia, serif`);
    document.documentElement.style.setProperty("--pad", tweaks.density === "compact" ? "0.7" : "1");
  }, [tweaks]);

  return (
    <>
      <Nav />
      <Hero />
      <Marquee show={tweaks.showStats !== false} />
      <Services />
      <FitForProducts />
      <Work />
      <Process />
      <RealWork />
      <CaseStudy />
      <Rebrand />
      <Testimonials />
      <CrossBorder />
      <Founder />
      <Community />
      <Pricing />
      <LeadMagnet />
      <FAQ />
      <Contact />
      <Footer />
      <StickyCTA />
      <CookieBanner />

      <TweaksPanel title="Tweaks">
        <TweakSection title="Theme">
          <TweakRadio
            label="Background"
            value={tweaks.theme}
            options={THEME_OPTIONS}
            onChange={(v) => setTweak("theme", v)} />
          
          <TweakColor
            label="Accent"
            value={tweaks.accent}
            onChange={(v) => setTweak("accent", v)} />
          
        </TweakSection>
        <TweakSection title="Type">
          <TweakRadio
            label="Display font"
            value={tweaks.displayFont}
            options={FONT_OPTIONS}
            onChange={(v) => setTweak("displayFont", v)} />
          
        </TweakSection>
        <TweakSection title="Layout">
          <TweakRadio
            label="Density"
            value={tweaks.density}
            options={DENSITY_OPTIONS}
            onChange={(v) => setTweak("density", v)} />
          
          <TweakToggle
            label="Show stats marquee"
            value={tweaks.showStats !== false}
            onChange={(v) => setTweak("showStats", v)} />
          
        </TweakSection>
      </TweaksPanel>
    </>);

}

// Make defaults accessible
window.TWEAK_DEFAULTS = window.TWEAK_DEFAULTS || {
  theme: "warm",
  accent: "#E89940",
  displayFont: "Instrument Serif",
  density: "comfortable",
  showStats: true
};

ReactDOM.createRoot(document.getElementById("root")).render(<App />);