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 on Amazon, 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: "Two ways to work with us: a fixed-fee launch package to get a new brand or product live and selling on Amazon, or a monthly retainer for ongoing account management — scaled to your size and stage. We keep it flexible because every brand is different. 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>);

}

function Brand() {
  return (
    <div className="brand">
      <span className="brand-scc">scc<span className="brand-dot">.</span></span>
      <span className="brand-divider"></span>
      <span className="brand-text">
        <span className="brand-name">Seller Central Consulting</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="#faq">FAQ</a>
        </div>
        <a href="https://09hew48h9rz.typeform.com/to/f9y42rHS" target="_blank" rel="noopener noreferrer" className="nav-cta">Book a call →</a>
      </div>
    </nav>);

}

const HERO_PRODUCTS = [
{ name: "Glow Serum", brand: "Skinnies", stat: "+312%", svg: "pump" },
{ name: "Studio Cans", brand: "Audion", stat: "+167%", svg: "headphones" },
{ name: "Single Origin", brand: "Khabu", stat: "+214%", svg: "coffee" },
{ name: "Sleep Drops", brand: "Nutrafirm", stat: "+189%", svg: "dropper" },
{ name: "Calm Tea", brand: "Halow", stat: "+241%", svg: "tin" }];


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() {
  // Matches the offset-path used in CSS so the visible dotted line tracks the cards' motion.
  return (
    <svg className="orbit-svg" viewBox="0 0 1100 480" preserveAspectRatio="none" aria-hidden="true">
      <path className="orbit-path"
      d="M 0 320 C 120 380, 220 260, 360 220 S 600 280, 760 200 S 980 240, 1100 180" />
      <circle className="orbit-dot" cx="360" cy="220" r="3.5" />
      <circle className="orbit-dot" cx="760" cy="200" r="3.5" />
      <circle className="orbit-dot" cx="1100" cy="180" r="3.5" />
      <circle className="orbit-dot" cx="0" cy="320" r="3.5" />
    </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>
        <span className="trust-logo logo-gratpak">
          <svg className="leaf" viewBox="0 0 24 32" fill="currentColor" aria-hidden="true">
            <path d="M12 0 C 12 6, 10 12, 6 16 C 9 14, 11 14, 12 16 L 12 32 L 13 32 L 13 16 C 14 14, 16 14, 19 16 C 14 12, 12 6, 12 0 Z" />
            <rect x="12" y="14" width="0.8" height="18" />
          </svg>
          <span className="g-text"><b>Grat</b>Pak</span>
        </span>
        <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-khabu">
          <svg className="palm" viewBox="0 0 22 28" fill="currentColor" aria-hidden="true">
            <path d="M11 26 L 11 14" stroke="currentColor" strokeWidth="1.4" fill="none" />
            <path d="M11 14 C 6 12, 2 14, 0 16 C 3 11, 7 10, 11 12 Z" />
            <path d="M11 14 C 16 12, 20 14, 22 16 C 19 11, 15 10, 11 12 Z" />
            <path d="M11 14 C 9 9, 6 5, 3 4 C 8 4, 11 8, 11 12 Z" />
            <path d="M11 14 C 13 9, 16 5, 19 4 C 14 4, 11 8, 11 12 Z" />
            <path d="M11 12 C 11 8, 11 4, 11 0 C 12 4, 12 8, 11 12 Z" />
          </svg>
          <span className="k-text"><small>KALAHARI</small><b>KHABU</b></span>
        </span>
        <span className="trust-logo-more mono">and more</span>
      </div>
    </div>);

}

function HeroAnimation() {
  return (
    <div className="hero-stage" aria-hidden="true">
      <OrbitPath />
      {HERO_PRODUCTS.map((p, i) =>
      <div className="prod-wrap" key={i}>
          <div className="prod-card">
            <div className="prod-photo">
              <ProductSilhouette kind={p.svg} />
            </div>
            <div className="prod-stat-row">
              <span className="prod-stat">{p.stat}</span>
              <span className="prod-stat-label">Revenue growth</span>
            </div>
            <div className="prod-spark"><MiniSpark /></div>
          </div>
        </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>AMAZON GROWTH PARTNER — 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">
              Listings, PPC, sourcing, full account management — done by operators who get results. A small team running Amazon channels for ambitious brands.
            </p>
            <div className="hero-cta">
              <a href="#case" className="btn">See the work</a>
              <a href="https://09hew48h9rz.typeform.com/to/f9y42rHS" target="_blank" rel="noopener noreferrer" className="btn btn-primary">
                Book a free audit
                <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">110+ brands scaled</div>
              </div>
            </div>
          </div>
          <HeroAnimation />
        </div>
        <TrustBar />
      </div>
    </section>);
}

function Marquee({ show }) {
  const items = [
  { num: "12+ yrs", label: "Selling on Amazon" },
  { num: "$0 → $100k/mo", label: "Fastest brand launch" },
  { num: "30+", label: "Meetups hosted globally" },
  { num: "5 countries", label: "Active brands" },
  { num: "<7 days", label: "To first $3k in sales" }];

  // 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="https://09hew48h9rz.typeform.com/to/f9y42rHS" target="_blank" rel="noopener noreferrer" className="btn btn-primary" style={{ borderColor: "var(--accent)", background: "var(--accent)", color: "var(--ink)" }}>
                Book a strategy call
                <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: "$40,000+",
  metricLabel: "Monthly revenue",
  bodyHeadline: <>From launch to <strong style={{fontWeight:700}}>$40k</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 was clearing $40k 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",
  "Monthly revenue scaled past $40,000+"],

  stats: [
  { v: "$40k+", l: "MRR by mo. 3" },
  { v: "<7d", l: "To first $1k" },
  { v: "12wk", l: "To target" }]

},
{
  id: "xtreme",
  brand: "XTREME HEATERS",
  category: "AUTOMOTIVE",
  period: "United States",
  pill: "Xtreme Heaters",
  fromAmount: "$0",
  toAmount: "$100,000+",
  metricLabel: "Monthly revenue",
  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: <>Inside three months <strong style={{fontWeight:700}}>the account cleared $100k/mo</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",
  "Monthly revenue scaled past $100,000+"],

  stats: [
  { v: "$100k+", l: "MRR by mo. 3" },
  { v: "6wk", l: "PPC ramp" },
  { v: "+1,400%", l: "vs. baseline" }]

}];


function CaseCard({ data, reverse }) {
  return (
    <div className={`case ${reverse ? "reverse" : ""}`}>
      <div className="case-art">
        <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>
        <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">/ 06 — 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 Community() {
  const [playing, setPlaying] = useState(false);
  const meetupPhotos = [
  { src: "assets/meetup-1.jpg", city: "Auckland · 2024" },
  { src: "assets/meetup-2.jpg", city: "London · 2023" },
  { src: "assets/meetup-3.jpg", city: "Sydney · 2023" },
  { src: "assets/meetup-4.jpg", city: "Auckland · 2022" }];

  return (
    <section id="community" data-section data-screen-label="Community">
      <div className="container">
        <div className="section-head">
          <div className="label mono">/ 07 — Community</div>
          <h2>Trusted by the <em>international</em> Amazon community since 2017.</h2>
        </div>
        <div className="community-grid">
          <div>
            <span className="community-tag mono">Hosted in NZ · AUS · US · UK · EU</span>
            <p className="community-italic">
              We <strong style={{fontWeight:700}}>host in-person Amazon seller meetups around the world</strong> — connecting brand owners and operators focused on <strong style={{fontWeight:700}}>long-term growth</strong>.
            </p>
            <div className="community-stats">
              <div className="cstat">
                <div className="v">30+</div>
                <div className="l">Meetups hosted</div>
              </div>
              <div className="cstat">
                <div className="v">6</div>
                <div className="l">Countries</div>
              </div>
              <div className="cstat">
                <div className="v">2017</div>
                <div className="l">Since</div>
              </div>
            </div>
            <div className="hero-cta">
              <a href="https://09hew48h9rz.typeform.com/to/f9y42rHS" target="_blank" rel="noopener noreferrer" className="btn btn-primary">
                Talk to us about your Amazon goals
                <span className="btn-arrow">→</span>
              </a>
            </div>
            <div className="community-trust">
              <span className="pill">
                <span className="ic">
                  <svg width="14" height="14" 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 sales pitch. No obligation.
              </span>
            </div>
          </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">/ 08 — 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.png" 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">Active clients</div>
                <div className="v">8 of 10</div>
              </div>
            </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">/ 09 — 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 }}>/ 10 — 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 30-minute audit 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@sellercentralconsulting.com" style={{ fontFamily: "var(--display)", fontSize: 28, textDecoration: "none", color: "var(--bg)", borderBottom: "1px solid var(--accent)" }}>hello@sellercentral.consulting

            </a>
          </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">
                Request my audit <span className="btn-arrow">→</span>
              </button>
            </form>
          }
        </div>
      </div>
    </section>);

}

function StickyCTA() {
  const [visible, setVisible] = useState(false);
  useEffect(() => {
    const onScroll = () => {
      setVisible(window.scrollY > 600);
    };
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <div className={`sticky-cta ${visible ? "is-visible" : ""}`}>
      <div className="sticky-cta-pill">
        <div className="sticky-cta-av">
          <img src="images/jay-portrait.png" 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="https://09hew48h9rz.typeform.com/to/f9y42rHS" target="_blank" rel="noopener noreferrer" className="sticky-cta-btn">
          Book a call <span aria-hidden="true">→</span>
        </a>
      </div>
    </div>);

}

function Footer() {
  return (
    <footer>
      <div className="container foot-inner">
        <div>© 2026 Seller Central Consulting</div>
        <div>New Zealand | Australia | Europe</div>
        <div>hello@sellercentral.consulting</div>
      </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 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 />
      <Work />
      <Process />
      <RealWork />
      <CaseStudy />
      <Testimonials />
      <Community />
      <Founder />
      <FAQ />
      <Contact />
      <Footer />
      <StickyCTA />

      <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 />);