// Generationz SEO landing page — bold, punchy, high-contrast.
// Single-file React prototype with light + dark theme via Tweaks.

// Each client has a `chart` object with two series (current vs previous period)
// rendered as a GSC-style line graph in the click modal.
// `stats` are the four KPI tiles shown above the graph.
const CLIENTS = [
  {
    name: 'Anaajpur', domain: 'anaajpur.com', sector: 'Grocery · DTC',
    metric: '8×', metricLabel: 'monthly traffic', period: '6 months',
    summary: '8.4K clicks · 412K impressions',
    stats: [
      { label: 'Total clicks', v: '8.4K', prev: '1.05K' },
      { label: 'Total impressions', v: '412K', prev: '94K' },
      { label: 'Average CTR', v: '2.0%', prev: '1.1%' },
      { label: 'Average position', v: '14.2', prev: '28.7' },
    ],
    chart: { peak: 380, current: 'rising-strong', previous: 'flat-low' },
  },
  {
    name: 'iHost VPS', domain: 'ihostvps.net', sector: 'Hosting · SaaS',
    metric: '500%', metricLabel: 'organic clicks', period: '3 months',
    summary: '5.2K clicks · 198K impressions',
    stats: [
      { label: 'Total clicks', v: '5.2K', prev: '870' },
      { label: 'Total impressions', v: '198K', prev: '52K' },
      { label: 'Average CTR', v: '2.6%', prev: '1.7%' },
      { label: 'Average position', v: '11.8', prev: '24.3' },
    ],
    chart: { peak: 240, current: 'rising-steady', previous: 'flat-low' },
  },
  {
    name: 'Tiptop Einrichtung', domain: 'tiptopeinrichtung.de', sector: 'Furniture · Retail',
    metric: '400%', metricLabel: 'monthly sessions', period: '6 months',
    summary: '12.3K clicks · 489K impressions',
    stats: [
      { label: 'Total clicks', v: '12.3K', prev: '2.4K' },
      { label: 'Total impressions', v: '489K', prev: '128K' },
      { label: 'Average CTR', v: '2.5%', prev: '1.9%' },
      { label: 'Average position', v: '13.4', prev: '22.1' },
    ],
    chart: { peak: 520, current: 'rising-strong', previous: 'flat-mid' },
  },
  {
    name: 'We Sell Dead Lots', domain: 'weselldeadlots.com', sector: 'Liquidation · B2B',
    metric: '300%', metricLabel: 'qualified leads', period: '6 months',
    summary: '4.8K clicks · 182K impressions',
    stats: [
      { label: 'Total clicks', v: '4.8K', prev: '1.2K' },
      { label: 'Total impressions', v: '182K', prev: '54K' },
      { label: 'Average CTR', v: '2.6%', prev: '2.2%' },
      { label: 'Average position', v: '12.1', prev: '21.8' },
    ],
    chart: { peak: 220, current: 'rising-steady', previous: 'flat-mid' },
  },
  {
    name: 'We Sell Stocks', domain: 'wesellstocks.com', sector: 'Liquidation · B2B',
    metric: '200%', metricLabel: 'organic traffic', period: '1 year',
    summary: '7.11K clicks · 326K impressions',
    stats: [
      { label: 'Total clicks', v: '7.11K', prev: '1.62K' },
      { label: 'Total impressions', v: '326K', prev: '311K' },
      { label: 'Average CTR', v: '2.2%', prev: '1.8%' },
      { label: 'Average position', v: '18.9', prev: '23.2' },
    ],
    chart: { peak: 320, current: 'rising-steady', previous: 'flat-mid' },
    // Real screenshot exists for this client.
    screenshot: 'brand/gsc-wesellstocks.png',
  },
  {
    name: 'Criminal Modz', domain: 'criminalmodz.com', sector: 'Gaming · DTC',
    metric: '200%', metricLabel: 'organic traffic', period: '6 months',
    summary: '18.4K clicks · 612K impressions',
    stats: [
      { label: 'Total clicks', v: '18.4K', prev: '6.1K' },
      { label: 'Total impressions', v: '612K', prev: '298K' },
      { label: 'Average CTR', v: '3.0%', prev: '2.0%' },
      { label: 'Average position', v: '9.4', prev: '17.6' },
    ],
    chart: { peak: 720, current: 'rising-strong', previous: 'flat-mid' },
  },
  {
    name: 'Baby Box Shop', domain: 'babyboxshop.com', sector: 'E-commerce',
    metric: '400%', metricLabel: 'monthly traffic', period: '12 months',
    summary: '24.8K clicks · 1.04M impressions',
    stats: [
      { label: 'Total clicks', v: '24.8K', prev: '5.9K' },
      { label: 'Total impressions', v: '1.04M', prev: '290K' },
      { label: 'Average CTR', v: '2.4%', prev: '2.0%' },
      { label: 'Average position', v: '10.8', prev: '20.4' },
    ],
    chart: { peak: 980, current: 'rising-strong', previous: 'flat-low' },
  },
  {
    name: 'Windows VPS', domain: 'windowsvps.com', sector: 'Hosting · SaaS',
    metric: '200%', metricLabel: 'organic clicks', period: '6 months',
    summary: '9.2K clicks · 284K impressions',
    stats: [
      { label: 'Total clicks', v: '9.2K', prev: '3.1K' },
      { label: 'Total impressions', v: '284K', prev: '142K' },
      { label: 'Average CTR', v: '3.2%', prev: '2.2%' },
      { label: 'Average position', v: '11.2', prev: '19.5' },
    ],
    chart: { peak: 360, current: 'rising-steady', previous: 'flat-mid' },
  },
  {
    name: 'Vallee Real Estate', domain: 'valleerealestate.ca', sector: 'Real Estate',
    metric: '200%', metricLabel: 'organic leads', period: '2 months',
    summary: '2.1K clicks · 78K impressions',
    stats: [
      { label: 'Total clicks', v: '2.1K', prev: '720' },
      { label: 'Total impressions', v: '78K', prev: '34K' },
      { label: 'Average CTR', v: '2.7%', prev: '2.1%' },
      { label: 'Average position', v: '9.8', prev: '16.2' },
    ],
    chart: { peak: 110, current: 'rising-fast', previous: 'flat-low' },
  },
  {
    name: 'We Buy Dead Stocks', domain: 'webuydeadstocks.com', sector: 'Liquidation · B2B',
    metric: '2×', metricLabel: 'monthly traffic', period: '6 months',
    summary: '3.6K clicks · 134K impressions',
    stats: [
      { label: 'Total clicks', v: '3.6K', prev: '1.8K' },
      { label: 'Total impressions', v: '134K', prev: '72K' },
      { label: 'Average CTR', v: '2.7%', prev: '2.5%' },
      { label: 'Average position', v: '13.6', prev: '19.9' },
    ],
    chart: { peak: 180, current: 'rising-steady', previous: 'flat-mid' },
  },
];

const SERVICES = [
  { n: '01', title: 'Technical SEO', desc: 'Crawlability, schema, Core Web Vitals, indexation. We fix what Google quietly hates about your site.', tags: ['Audit', 'Schema', 'Site Speed', 'Indexation'] },
  { n: '02', title: 'On-Page SEO', desc: 'Search-intent-mapped pages, internal linking architecture, content briefs that rank. No fluff, no padding.', tags: ['Keyword Research', 'Content Briefs', 'Topic Clusters', 'Optimization'] },
  { n: '03', title: 'Off-Page SEO', desc: 'White-hat link building from sites your competitors can’t reach. DR 50+ placements, niche-relevant only.', tags: ['Link Building', 'Digital PR', 'HARO', 'Niche Edits'] },
  { n: '04', title: 'Local & Ecom SEO', desc: 'Google Business Profile, local citations, product schema, category page architecture for stores that need to rank now.', tags: ['Local Pack', 'GMB', 'Product SEO', 'Category Pages'] },
];

const PROCESS = [
  { n: '01', title: 'Audit', desc: 'Two-week deep dive. Tech, content, links, competitors. You get a 40-page report whether we work together or not.' },
  { n: '02', title: 'Strategy', desc: 'A pointed 90-day plan. One thesis, three bets, ranked by ROI per hour of work.' },
  { n: '03', title: 'Execute', desc: 'Weekly sprints. Tickets, deployments, content live. You see the work in your repo and your CMS.' },
  { n: '04', title: 'Compound', desc: 'Monthly review with GSC + GA4 numbers. Double down on winners. Cut what isn’t moving.' },
];

const FAQ = [
  { q: 'How long until I see results?', a: 'Technical wins in week 2. Ranking movement in month 2. Compounding traffic from month 4 onward — that’s the consistent pattern across our 50+ clients.' },
  { q: 'What kind of businesses do you take on?', a: 'SMBs spending between $1.5k and $15k/month on SEO. We’re selective — if we don’t think we can move the needle for you, we’ll tell you on the first call.' },
  { q: 'Do you guarantee rankings?', a: 'Nobody who’s honest does. What we guarantee: a clear plan, weekly execution you can verify, and monthly transparent reporting. If we don’t earn it after 90 days, you walk.' },
  { q: 'What does it cost?', a: 'Audit is a fixed $1,200. Ongoing engagements start at $1,500/month for local SEO and scale up to $9k/month for ecommerce + content programs.' },
];

// ──────────────────────────────────────────────────────────────────────────

function Arrow({ size = 16 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 16 16" fill="none" aria-hidden="true">
      <path d="M3 13L13 3M13 3H5M13 3V11" stroke="currentColor" strokeWidth="1.5" strokeLinecap="square"/>
    </svg>
  );
}

function Plus({ open }) {
  return (
    <svg width="20" height="20" viewBox="0 0 20 20" aria-hidden="true" style={{ transition: 'transform .3s cubic-bezier(.2,.7,.2,1)', transform: open ? 'rotate(45deg)' : 'rotate(0)' }}>
      <path d="M10 3v14M3 10h14" stroke="currentColor" strokeWidth="1.5" strokeLinecap="square"/>
    </svg>
  );
}

function LogoFull({ height = 28, theme = 'dark' }) {
  // Full lockup: lime mark + wordmark, properly aligned from source files.
  // theme='dark' → use light wordmark (white text); theme='light' → dark text.
  const src = theme === 'dark' ? 'brand/full-dark.png' : 'brand/full-light.png';
  return <img src={src} alt="Genrationz" style={{ height, width: 'auto', display: 'block' }} />;
}

function LogoMark({ size = 28 }) {
  return <img src="brand/mark-lime.png" alt="" style={{ height: size, width: 'auto', display: 'block' }} />;
}

function Logo({ size = 22, variant = 'auto' }) {
  // Legacy compat — use LogoFull/LogoMark instead.
  const src = variant === 'black' ? 'logo-mark-black.png' : 'brand/mark-lime.png';
  return <img src={src} alt="Genrationz" style={{ height: size, width: 'auto', display: 'block' }} />;
}

function Header({ theme }) {
  return (
    <header className="gz-header">
      <a href="#" className="gz-logo" aria-label="Genrationz">
        <LogoFull height={28} theme={theme}/>
      </a>
      <nav className="gz-nav">
        <a href="#services">Services</a>
        <a href="#clients">Clients</a>
        <a href="#results">Results</a>
        <a href="#process">Process</a>
      </nav>
      <a href="#contact" className="gz-btn gz-btn-primary gz-header-cta">
        <span>Free SEO audit</span>
        <Arrow size={14}/>
      </a>
    </header>
  );
}

function ProofDock() {
  const items = [
    { src: 'proof/01_anaajpur_gsc.png', client: 'Anaajpur.com', metric: '+82% clicks · 7.71K', tag: 'B2B Marketplace' },
    { src: 'proof/06_criminalmodz_gsc.png', client: 'CriminalModz', metric: '234K clicks · 2.19M imp.', tag: 'Gaming · Ecom' },
    { src: 'proof/02_ihostvps_gsc.png', client: 'iHost VPS', metric: '+500% over 2 yrs', tag: 'SaaS · Hosting' },
    { src: 'proof/07_babyboxshop_gsc.png', client: 'Baby Box Shop', metric: '+400% organic', tag: 'DTC · Retail' },
    { src: 'proof/05_wesellstocks_gsc.png', client: 'WeSellStocks', metric: '7.11K clicks · 326K imp.', tag: 'B2B Wholesale' },
    { src: 'proof/04_weselldeadlots_gsc.png', client: 'WeSellDeadLots', metric: '+117% clicks · 3.62K', tag: 'B2B · Liquidation' },
    { src: 'proof/03_tiptopeinrichtung_gsc.png', client: 'TipTop Einrichtung', metric: '9.96K clicks · 603K imp.', tag: 'DE · Furniture' },
    { src: 'proof/10_webuydeadstocks_gsc.png', client: 'WeBuyDeadStocks', metric: '+87% · 5.1K clicks', tag: 'B2B · Buying' },
    { src: 'proof/08_windowsvps_gsc.png', client: 'WindowsVPS.ca', metric: '+103% impressions', tag: 'CA · Hosting' },
    { src: 'proof/09_valleerealestate_gsc.png', client: 'Vallee Real Estate', metric: '+98% · 461 clicks', tag: 'CA · Real Estate' },
  ];
  const row = [...items, ...items];
  return (
    <section className="gz-proof" aria-label="Client proof — Search Console screenshots">
      <div className="gz-proof-head">
        <span className="gz-proof-eyebrow">
          <span className="gz-pulse-dot"/>
          <span>Live · Search Console screenshots</span>
        </span>
        <h2 className="gz-proof-h">Real dashboards. Real growth.</h2>
        <p className="gz-proof-sub">
          Every chart below is a Google Search Console screenshot from a current or past client.
          No edits, no cherry-picked windows — just the months you'd see if you logged in yourself.
        </p>
      </div>
      <div className="gz-proof-dock" aria-hidden="false">
        <div className="gz-proof-track">
          {row.map((it, i) => (
            <figure key={i} className="gz-proof-card">
              <div className="gz-proof-img-wrap">
                <img src={it.src} alt={`${it.client} Google Search Console performance`} loading="lazy"/>
              </div>
              <figcaption className="gz-proof-cap">
                <div className="gz-proof-cap-l">
                  <div className="gz-proof-client">{it.client}</div>
                  <div className="gz-proof-tag">{it.tag}</div>
                </div>
                <div className="gz-proof-metric">{it.metric}</div>
              </figcaption>
            </figure>
          ))}
        </div>
      </div>
    </section>
  );
}

function Hero() {
  return (
    <section className="gz-hero">
      <div className="gz-hero-tag">
        <span className="gz-pulse-dot"/>
        <span>Currently accepting 3 SMB clients · Q3 2026</span>
      </div>
      <h1 className="gz-hero-h">
        SEO that actually<br/>
        moves the <span className="gz-hl">needle</span>.
      </h1>
      <div className="gz-hero-foot">
        <p className="gz-hero-sub">
          We rank small businesses on Google. Not with hacks, not with AI slop —
          with technical fixes, real content, and links you can verify.
          Average client doubles their traffic in 6 months. Some do 8×.
        </p>
        <div className="gz-hero-actions">
          <a href="#contact" className="gz-btn gz-btn-primary gz-btn-lg">
            <span>Get free audit</span><Arrow/>
          </a>
          <a href="#results" className="gz-btn gz-btn-ghost gz-btn-lg">
            <span>See real results</span>
          </a>
        </div>
      </div>
      <div className="gz-hero-stats">
        <div><div className="gz-hero-stat-v">50+</div><div className="gz-hero-stat-l">SMBs ranked</div></div>
        <div><div className="gz-hero-stat-v">2.4×</div><div className="gz-hero-stat-l">Median traffic lift</div></div>
        <div><div className="gz-hero-stat-v">6mo</div><div className="gz-hero-stat-l">To break even</div></div>
        <div><div className="gz-hero-stat-v">93%</div><div className="gz-hero-stat-l">Client retention</div></div>
      </div>
    </section>
  );
}

function Marquee() {
  const items = [
    'GOOGLE PAGE 1', 'COMPOUNDING TRAFFIC', 'WHITE-HAT LINKS', 'TECHNICAL SEO',
    'CORE WEB VITALS', 'LOCAL PACK', 'TOPIC CLUSTERS', 'CONTENT BRIEFS', 'KEYWORD RESEARCH',
  ];
  const row = [...items, ...items, ...items];
  return (
    <section className="gz-marquee" aria-hidden="true">
      <div className="gz-marquee-track">
        {row.map((t, i) => (
          <span key={i} className="gz-marquee-item">
            <span className="gz-marquee-mark">✦</span>
            <span>{t}</span>
          </span>
        ))}
      </div>
    </section>
  );
}

function Services() {
  return (
    <section id="services" className="gz-section gz-services">
      <div className="gz-section-head">
        <div className="gz-eyebrow"><span/>What we do</div>
        <h2 className="gz-h2">Four pillars.<br/>One ranking <span className="gz-hl">machine.</span></h2>
        <p className="gz-section-lede">
          We don’t do social, we don’t do paid ads, we don’t do "growth marketing".
          We rank websites on Google. That’s it. That’s the whole pitch.
        </p>
      </div>
      <ul className="gz-services-list">
        {SERVICES.map((s) => (
          <li key={s.n} className="gz-service">
            <div className="gz-service-n">{s.n}</div>
            <div className="gz-service-mid">
              <h3 className="gz-service-title">{s.title}</h3>
              <p className="gz-service-desc">{s.desc}</p>
            </div>
            <ul className="gz-service-tags">
              {s.tags.map((t) => <li key={t}>{t}</li>)}
            </ul>
          </li>
        ))}
      </ul>
    </section>
  );
}

function GSCSparkChart({ peak, current, previous, accent = '#1A73E8' }) {
  // Generates a GSC-style chart with two overlaid line series and gridlines.
  // Series shapes are deterministic per `current`/`previous` profile names.
  const W = 720, H = 220, PAD_L = 36, PAD_R = 12, PAD_T = 12, PAD_B = 28;
  const N = 90; // ~3 months of daily data points
  const seedShape = (profile, peakV) => {
    const out = [];
    for (let i = 0; i < N; i++) {
      const t = i / (N - 1);
      let base = 0;
      if (profile === 'rising-strong') base = peakV * (0.18 + 0.82 * Math.pow(t, 1.4));
      else if (profile === 'rising-fast') base = peakV * (0.1 + 0.9 * Math.pow(t, 1.0));
      else if (profile === 'rising-steady') base = peakV * (0.32 + 0.68 * t);
      else if (profile === 'flat-low') base = peakV * 0.08;
      else if (profile === 'flat-mid') base = peakV * 0.22;
      else base = peakV * 0.5;
      // Pseudo-random daily noise (deterministic from index + profile chars)
      const seed = ((i * 9301 + profile.charCodeAt(0) * 49297 + profile.length * 233280) % 233280) / 233280;
      const noise = (seed - 0.5) * peakV * 0.18;
      // Weekly seasonality
      const week = Math.sin(i / 7 * Math.PI * 2) * peakV * 0.06;
      out.push(Math.max(0, base + noise + week));
    }
    return out;
  };
  const cur = seedShape(current, peak);
  const prev = seedShape(previous, peak);
  const yMax = peak * 1.15;
  const xAt = (i) => PAD_L + (i / (N - 1)) * (W - PAD_L - PAD_R);
  const yAt = (v) => PAD_T + (1 - v / yMax) * (H - PAD_T - PAD_B);
  const path = (arr) => arr.map((v, i) => (i === 0 ? 'M' : 'L') + xAt(i).toFixed(1) + ' ' + yAt(v).toFixed(1)).join(' ');
  const yTicks = 4;
  return (
    <svg viewBox={`0 0 ${W} ${H}`} className="gz-gsc-chart" role="img" aria-label="Google Search Console performance graph">
      {Array.from({ length: yTicks + 1 }).map((_, i) => {
        const y = PAD_T + (i / yTicks) * (H - PAD_T - PAD_B);
        const val = Math.round((yMax * (1 - i / yTicks)) / 10) * 10;
        return (
          <g key={i}>
            <line x1={PAD_L} y1={y} x2={W - PAD_R} y2={y} stroke="#E8EAED" strokeWidth="1"/>
            <text x={W - PAD_R} y={y - 3} fontSize="10" fill="#5F6368" textAnchor="end" fontFamily="Roboto, Arial, sans-serif">{val}</text>
          </g>
        );
      })}
      <path d={path(prev)} fill="none" stroke={accent} strokeWidth="1.2" strokeDasharray="3 3" opacity="0.55"/>
      <path d={path(cur)} fill="none" stroke={accent} strokeWidth="1.4"/>
      {[0, 30, 60, 89].map((i) => (
        <text key={i} x={xAt(i)} y={H - 8} fontSize="10" fill="#5F6368" textAnchor="middle" fontFamily="Roboto, Arial, sans-serif">{i + 1}</text>
      ))}
    </svg>
  );
}

function ClientChartModal({ client, onClose }) {
  React.useEffect(() => {
    if (!client) return;
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', onKey);
    document.body.style.overflow = 'hidden';
    return () => { window.removeEventListener('keydown', onKey); document.body.style.overflow = ''; };
  }, [client, onClose]);
  if (!client) return null;
  const STAT_COLORS = ['#1A73E8', '#7C4DFF', '#202124', '#202124'];
  return (
    <div className="gz-modal-backdrop" onClick={onClose}>
      <div className="gz-modal" onClick={(e) => e.stopPropagation()} role="dialog" aria-modal="true" aria-label={`${client.name} performance`}>
        <button className="gz-modal-close" onClick={onClose} aria-label="Close">
          <svg width="20" height="20" viewBox="0 0 20 20"><path d="M5 5l10 10M15 5L5 15" stroke="currentColor" strokeWidth="1.6" strokeLinecap="square"/></svg>
        </button>
        <div className="gz-gsc-card">
          <div className="gz-gsc-urlbar">
            <span className="gz-gsc-lock">🔒</span>
            <span className="gz-gsc-url">https://{client.domain}/</span>
          </div>
          <div className="gz-gsc-toolbar">
            <span className="gz-gsc-tab">Performance</span>
            <div className="gz-gsc-chips">
              <span className="gz-gsc-chip">7 days</span>
              <span className="gz-gsc-chip">28 days</span>
              <span className="gz-gsc-chip">3 months</span>
              <span className="gz-gsc-chip gz-gsc-chip-active">✓ Compare</span>
              <span className="gz-gsc-chip">Search type: Web</span>
              <span className="gz-gsc-chip">+ Add filter</span>
            </div>
          </div>
          <div className="gz-gsc-stats">
            {client.stats.map((s, i) => (
              <div key={s.label} className={`gz-gsc-stat ${i === 0 ? 'is-blue' : i === 1 ? 'is-purple' : ''}`}>
                <div className="gz-gsc-stat-label">
                  <span className="gz-gsc-dot" style={{ background: STAT_COLORS[i] }}/>
                  {s.label}
                </div>
                <div className="gz-gsc-stat-v">{s.v}</div>
                <div className="gz-gsc-stat-prev">{s.prev} <span>previous 3 months</span></div>
              </div>
            ))}
          </div>
          <div className="gz-gsc-chartwrap">
            {client.screenshot ? (
              <img src={client.screenshot} alt={`${client.name} GSC performance`} className="gz-gsc-screenshot"/>
            ) : (
              <GSCSparkChart {...client.chart}/>
            )}
          </div>
          <div className="gz-gsc-footer">
            <div>
              <div className="gz-gsc-name">{client.name}</div>
              <div className="gz-gsc-sector">{client.sector}</div>
            </div>
            <div className="gz-gsc-summary">{client.summary}</div>
          </div>
        </div>
      </div>
    </div>
  );
}

function Clients() {
  const [active, setActive] = React.useState(null);
  return (
    <section id="clients" className="gz-section gz-clients">
      <div className="gz-section-head">
        <div className="gz-eyebrow"><span/>Selected clients</div>
        <h2 className="gz-h2">Real businesses.<br/>Real <span className="gz-hl">rankings.</span></h2>
        <p className="gz-section-lede">
          Every number below is from Google Search Console. Click any row to see the graph.
        </p>
      </div>
      <div className="gz-clients-table" role="table">
        <div className="gz-clients-row gz-clients-head" role="row">
          <span>Client</span>
          <span>Sector</span>
          <span>Result</span>
          <span>Period</span>
          <span/>
        </div>
        {CLIENTS.map((c, i) => (
          <button
            key={c.domain}
            type="button"
            className="gz-clients-row gz-clients-row-btn"
            role="row"
            style={{ '--i': i }}
            onClick={() => setActive(c)}
            aria-label={`View ${c.name} performance graph`}
          >
            <div className="gz-client-name">
              <span className="gz-client-num">{String(i + 1).padStart(2, '0')}</span>
              <div>
                <div className="gz-client-title">{c.name}</div>
                <div className="gz-client-domain">{c.domain}</div>
              </div>
            </div>
            <div className="gz-client-sector">{c.sector}</div>
            <div className="gz-client-metric">
              <span className="gz-client-v">{c.metric}</span>
              <span className="gz-client-vl">{c.metricLabel}</span>
            </div>
            <div className="gz-client-period">{c.period}</div>
            <div className="gz-client-arrow"><Arrow/></div>
          </button>
        ))}
      </div>
      <ClientChartModal client={active} onClose={() => setActive(null)}/>
    </section>
  );
}

function Results() {
  return (
    <section id="results" className="gz-section gz-results">
      <div className="gz-section-head gz-results-head">
        <div className="gz-eyebrow"><span/>Results</div>
        <h2 className="gz-h2">The receipts.</h2>
      </div>
      <div className="gz-results-grid">
        <div className="gz-result-card gz-result-big">
          <div className="gz-result-label">Anaajpur · 6 months</div>
          <div className="gz-result-v">8×</div>
          <div className="gz-result-d">Monthly organic traffic, doubled and doubled again. Started ranking for 2,400+ recipe and grocery keywords across India.</div>
          <div className="gz-result-chart">
            <Sparkline values={[12, 14, 19, 28, 41, 62, 78, 95]}/>
          </div>
        </div>
        <div className="gz-result-card">
          <div className="gz-result-label">iHost VPS · 3 months</div>
          <div className="gz-result-v gz-result-v-md">+500%</div>
          <div className="gz-result-d">Cleaned up 800+ thin pages, rebuilt the comparison hub. First page for "linux vps" cluster.</div>
        </div>
        <div className="gz-result-card">
          <div className="gz-result-label">Baby Box Shop · 12 months</div>
          <div className="gz-result-v gz-result-v-md">+400%</div>
          <div className="gz-result-d">Programmatic category SEO + 60 long-tail blog posts. Now outranks two retail giants.</div>
        </div>
        <div className="gz-result-card gz-result-quote">
          <div className="gz-quote-mark">"</div>
          <blockquote>
            They told us in week one we had 19 things broken Google didn’t like. They fixed them. Six months later our traffic is 4× and we just hired our first sales person.
          </blockquote>
          <footer>
            <strong>Marcus T.</strong>
            <span>Founder, We Sell Dead Lots</span>
          </footer>
        </div>
        <div className="gz-result-card gz-result-strip">
          <div className="gz-strip-row">
            <span className="gz-strip-v">+300%</span>
            <span className="gz-strip-l">Criminal Modz</span>
          </div>
          <div className="gz-strip-row">
            <span className="gz-strip-v">+200%</span>
            <span className="gz-strip-l">Vallee Real Estate</span>
          </div>
          <div className="gz-strip-row">
            <span className="gz-strip-v">+200%</span>
            <span className="gz-strip-l">Windows VPS</span>
          </div>
        </div>
      </div>
    </section>
  );
}

function Sparkline({ values }) {
  const max = Math.max(...values);
  const w = 100, h = 40;
  const pts = values.map((v, i) => `${(i / (values.length - 1)) * w},${h - (v / max) * h}`).join(' ');
  return (
    <svg viewBox={`0 0 ${w} ${h}`} preserveAspectRatio="none" className="gz-spark">
      <polyline points={pts} fill="none" stroke="currentColor" strokeWidth="1.4" vectorEffect="non-scaling-stroke"/>
    </svg>
  );
}

function TestimonialCard({ id, tag }) {
  const [playing, setPlaying] = React.useState(false);
  const thumb = `https://i.ytimg.com/vi/${id}/maxresdefault.jpg`;
  return (
    <figure className="gz-testimonial-card">
      <div className="gz-testimonial-frame">
        {playing ? (
          <iframe
            src={`https://www.youtube-nocookie.com/embed/${id}?autoplay=1&rel=0&modestbranding=1&playsinline=1`}
            title={tag}
            frameBorder="0"
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
            referrerPolicy="strict-origin-when-cross-origin"
            allowFullScreen
          />
        ) : (
          <button
            type="button"
            className="gz-testimonial-facade"
            onClick={() => setPlaying(true)}
            aria-label={`Play ${tag} video`}
            style={{ backgroundImage: `url(${thumb})` }}
          >
            <span className="gz-testimonial-tagpill">{tag}</span>
            <span className="gz-testimonial-play" aria-hidden="true">
              <svg width="22" height="22" viewBox="0 0 22 22" fill="none">
                <path d="M7 5.5L17 11L7 16.5V5.5Z" fill="#2B2B2B"/>
              </svg>
            </span>
          </button>
        )}
      </div>
    </figure>
  );
}

function Testimonials() {
  const videos = [
    { id: 'JL-Z5SkzpGM', tag: 'TESTIMONIAL · 01' },
    { id: 'yBcfTxn5WU8', tag: 'TESTIMONIAL · 02' },
    { id: '5CZLtJtsEAM', tag: 'TESTIMONIAL · 03' },
  ];
  return (
    <section id="testimonials" className="gz-section gz-testimonials">
      <div className="gz-section-head">
        <span className="gz-eyebrow"><span className="gz-pulse-dot"/><span>In their own words</span></span>
        <h2 className="gz-h2">What clients<br/>actually say.</h2>
        <p className="gz-section-lede">
          Unscripted video testimonials from business owners we've worked with — real people, real growth, real numbers.
        </p>
      </div>
      <div className="gz-testimonials-grid">
        {videos.map((v) => <TestimonialCard key={v.id} {...v}/>)}
      </div>
    </section>
  );
}

function Process() {
  return (
    <section id="process" className="gz-section gz-process">
      <div className="gz-section-head">
        <div className="gz-eyebrow"><span/>How it works</div>
        <h2 className="gz-h2">A long game,<br/>played <span className="gz-hl">deliberately.</span></h2>
        <p className="gz-section-lede">
          SEO compounds — the clients who win are the ones who commit. Our typical engagement runs 3, 6, or 12 months because that's how long it takes to do this properly.
        </p>
      </div>
      <ol className="gz-process-list">
        {PROCESS.map((p) => (
          <li key={p.n}>
            <div className="gz-process-n">{p.n}</div>
            <div className="gz-process-line"><span/></div>
            <h3>{p.title}</h3>
            <p>{p.desc}</p>
          </li>
        ))}
      </ol>
    </section>
  );
}

function Guarantee() {
  return (
    <section className="gz-guarantee">
      <div className="gz-guarantee-tag">The promise</div>
      <p className="gz-guarantee-h">
        If your traffic doesn’t move in 90 days, we work the next 90<br/>
        on us — or you walk and keep everything we made.
      </p>
      <div className="gz-guarantee-sub">SEO is a long game — we partner for 3, 6, and 12 months.</div>
    </section>
  );
}

function FAQList() {
  const [open, setOpen] = React.useState(0);
  return (
    <section className="gz-section gz-faq">
      <div className="gz-section-head">
        <div className="gz-eyebrow"><span/>Common questions</div>
        <h2 className="gz-h2">Before you book.</h2>
      </div>
      <ul className="gz-faq-list">
        {FAQ.map((item, i) => {
          const isOpen = i === open;
          return (
            <li key={item.q} className={`gz-faq-item ${isOpen ? 'is-open' : ''}`}>
              <button className="gz-faq-q" onClick={() => setOpen(isOpen ? -1 : i)} aria-expanded={isOpen}>
                <span className="gz-faq-i">{String(i + 1).padStart(2, '0')}</span>
                <span className="gz-faq-text">{item.q}</span>
                <Plus open={isOpen}/>
              </button>
              <div className="gz-faq-a" style={{ gridTemplateRows: isOpen ? '1fr' : '0fr' }}>
                <div className="gz-faq-a-inner"><p>{item.a}</p></div>
              </div>
            </li>
          );
        })}
      </ul>
    </section>
  );
}

function Contact() {
  const [form, setForm] = React.useState({ url: '', email: '', goal: '' });
  const [sent, setSent] = React.useState(false);
  function submit(e) {
    e.preventDefault();
    if (!form.url || !form.email) return;
    setSent(true);
  }
  return (
    <section id="contact" className="gz-section gz-contact">
      <div className="gz-contact-l">
        <div className="gz-eyebrow"><span/>Free audit</div>
        <h2 className="gz-contact-h">
          Tell us your<br/>URL. We’ll tell<br/>you what’s<br/><span className="gz-hl">broken.</span>
        </h2>
        <p className="gz-contact-sub">
          You’ll get a 40-page audit, a Loom walking through it,
          and a 30-min call with the founder. No sales pitch, no obligation.
        </p>
      </div>
      <div className="gz-contact-r">
        {sent ? (
          <div className="gz-form-success">
            <div className="gz-success-mark">✓</div>
            <h3>Got it.</h3>
            <p>We’ll have your audit ready inside 5 business days. Check your inbox for a confirmation in the next hour.</p>
            <button className="gz-btn gz-btn-ghost" onClick={() => { setSent(false); setForm({ url: '', email: '', goal: '' }); }}>Submit another</button>
          </div>
        ) : (
          <form onSubmit={submit} className="gz-form">
            <label className="gz-field">
              <span>Your website</span>
              <input type="text" placeholder="yoursite.com" value={form.url} onChange={(e) => setForm({ ...form, url: e.target.value })} required/>
            </label>
            <label className="gz-field">
              <span>Email</span>
              <input type="email" placeholder="you@company.com" value={form.email} onChange={(e) => setForm({ ...form, email: e.target.value })} required/>
            </label>
            <label className="gz-field">
              <span>What’s the goal? <em>(optional)</em></span>
              <textarea rows="3" placeholder="e.g. rank for &quot;commercial cleaning Brooklyn&quot;" value={form.goal} onChange={(e) => setForm({ ...form, goal: e.target.value })}/>
            </label>
            <button type="submit" className="gz-btn gz-btn-primary gz-btn-lg gz-btn-full">
              <span>Send my free audit</span><Arrow/>
            </button>
            <div className="gz-form-meta">
              <span>● Reply in 24h</span>
              <span>● No sales calls</span>
              <span>● 100% free</span>
            </div>
          </form>
        )}
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="gz-footer">
      <div className="gz-footer-band">
        <div className="gz-footer-inner">
          <div className="gz-footer-brand">
            <div className="gz-footer-logo">
              <LogoFull height={44} theme="dark"/>
            </div>
            <p className="gz-footer-pitch">
              We take care of every touchpoint with a 360° plan that grows on
              repeat — we generate what you imagine and craft full-funnel digital
              experiences with a 96% boost in traction.
            </p>
            <ul className="gz-footer-contact">
              <li>
                <span className="gz-fc-icon" aria-hidden="true">
                  <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
                    <rect x="1.5" y="3" width="13" height="10" rx="1" stroke="currentColor" strokeWidth="1.3"/>
                    <path d="M2 4l6 5 6-5" stroke="currentColor" strokeWidth="1.3" strokeLinecap="square"/>
                  </svg>
                </span>
                <a href="mailto:Info@genrationz.com">Info@genrationz.com</a>
              </li>
              <li>
                <span className="gz-fc-icon" aria-hidden="true">
                  <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
                    <path d="M3 3h3l1.5 4-2 1c.8 1.7 2 2.9 3.7 3.7l1-2 4 1.5V13c0 .6-.4 1-1 1A11 11 0 0 1 2 4c0-.6.4-1 1-1Z" stroke="currentColor" strokeWidth="1.3" strokeLinejoin="round"/>
                  </svg>
                </span>
                <a href="tel:+14089423358">+1 408 942 3358</a>
              </li>
              <li>
                <span className="gz-fc-icon" aria-hidden="true">
                  <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
                    <path d="M8 14s5-4.5 5-9a5 5 0 0 0-10 0c0 4.5 5 9 5 9Z" stroke="currentColor" strokeWidth="1.3" strokeLinejoin="round"/>
                    <circle cx="8" cy="5" r="1.6" stroke="currentColor" strokeWidth="1.3"/>
                  </svg>
                </span>
                <span>1001 S Main St, Ste 500, Kalispell MT 59901, United States</span>
              </li>
            </ul>
          </div>
          <div className="gz-footer-side">
            <div className="gz-footer-cols">
              <div>
                <div className="gz-footer-h">Services</div>
                <a href="#services">Technical SEO</a>
                <a href="#services">On-Page SEO</a>
                <a href="#services">Off-Page SEO</a>
                <a href="#services">Local & Ecom SEO</a>
              </div>
              <div>
                <div className="gz-footer-h">Studio</div>
                <a href="#clients">Clients</a>
                <a href="#results">Results</a>
                <a href="#process">Process</a>
                <a href="#contact">Contact</a>
              </div>
              <div>
                <div className="gz-footer-h">Elsewhere</div>
                <a href="#">LinkedIn</a>
                <a href="#">Instagram</a>
                <a href="#">X / Twitter</a>
              </div>
            </div>
            <a href="#contact" className="gz-footer-cta">
              <span>Book a free audit</span>
              <Arrow size={14}/>
            </a>
          </div>
        </div>
        {/* mega wordmark removed */}
        <div className="gz-footer-bottom">
          <span>© 2026 Genrationz. All rights reserved.</span>
          <span>Built to rank · Kalispell, MT</span>
        </div>
      </div>
    </footer>
  );
}

function Site({ theme = 'light' }) {
  return (
    <div className={`gz-root gz-${theme}`} data-screen-label="Generationz SEO">
      <Header theme={theme}/>
      <Hero/>
      <ProofDock/>
      <Marquee/>
      <Services/>
      <Clients/>
      <Results/>
      <Process/>
      <Testimonials/>
      <Guarantee/>
      <FAQList/>
      <Contact/>
      <Footer/>
    </div>
  );
}

Object.assign(window, { Site });