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

/* ============================================================
   Glidzy wordmark — image-based, swaps with theme
   ============================================================ */
function Wordmark({ height = 32, forceVariant = null }) {
  // forceVariant: 'light' | 'dark' | null (auto via body[data-theme])
  const cls = forceVariant ? `brand-logo brand-logo--${forceVariant}` : 'brand-logo';
  return (
    <span className={cls} style={{ height }} aria-label="Glidzy">
      <img className="brand-logo-img brand-logo-img--light" src="assets/logo-light.png" alt="" />
      <img className="brand-logo-img brand-logo-img--dark"  src="assets/logo-dark.png"  alt="" />
    </span>
  );
}

/* ============================================================
   Top nav
   ============================================================ */
function Nav() {
  return (
    <header className="nav">
      <div className="shell nav-inner">
        <a href="#top" aria-label="Glidzy home"><Wordmark/></a>
        <nav className="nav-tabs">
          <a href="#how">How it works</a>
          <a href="#coverage">Coverage</a>
        </nav>
        <a href="#waitlist" className="nav-cta">
          Join waitlist
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
        </a>
      </div>
    </header>
  );
}

/* ============================================================
   Hero — giant 59 with rolling digits
   ============================================================ */
function HeroBigNum() {
  // animate digit roll on mount via key change
  const [key, setKey] = useState(0);
  useEffect(() => {
    const t = setInterval(() => setKey(k => k + 1), 8000);
    return () => clearInterval(t);
  }, []);
  const digits = ['5', '9'];
  return (
    <span className="bignum" aria-label="59 minutes" key={key}>
      {digits.map((d, i) => (
        <span className="digit" key={i}>
          <span className="roll" style={{ animationDelay: `${i * 120}ms` }}>
            {Array.from({ length: 10 }).map((_, n) => <span key={n}>{(n) % 10}</span>)}
            <span>{d}</span>
          </span>
        </span>
      ))}
    </span>
  );
}

/* ============================================================
   Hero — product showcase animation
   ============================================================ */
function ProductIcon({ kind, color = 'var(--ink)', accent = 'var(--ember)' }) {
  // Flat silhouette SVGs of catalog categories
  const c = color, a = accent;
  if (kind === 'tee') return (
    <svg viewBox="0 0 80 80" width="58%" height="58%">
      <path d="M14 26 L26 14 L34 14 Q34 20 40 20 Q46 20 46 14 L54 14 L66 26 L60 32 L54 28 L54 64 L26 64 L26 28 L20 32 Z" fill={c}/>
    </svg>
  );
  if (kind === 'shoe') return (
    <svg viewBox="0 0 80 80" width="66%" height="66%">
      <path d="M6 50 L14 42 L24 38 L28 30 L34 28 L38 36 L48 38 L62 42 Q72 44 72 50 L72 56 L6 56 Z" fill={c}/>
      <line x1="30" y1="40" x2="34" y2="32" stroke={a} strokeWidth="2" strokeLinecap="round"/>
    </svg>
  );
  if (kind === 'bag') return (
    <svg viewBox="0 0 80 80" width="54%" height="54%">
      <path d="M28 24 Q28 12 40 12 Q52 12 52 24" stroke={c} strokeWidth="3" fill="none" strokeLinecap="round"/>
      <rect x="18" y="24" width="44" height="42" rx="4" fill={c}/>
      <rect x="26" y="34" width="28" height="3" rx="1.5" fill={a} opacity="0.8"/>
    </svg>
  );
  if (kind === 'dress') return (
    <svg viewBox="0 0 80 80" width="58%" height="58%">
      <path d="M30 14 L50 14 L54 24 L48 28 L48 36 L62 68 L18 68 L32 36 L32 28 L26 24 Z" fill={c}/>
      <circle cx="40" cy="36" r="2" fill={a}/>
    </svg>
  );
  if (kind === 'jeans') return (
    <svg viewBox="0 0 80 80" width="54%" height="54%">
      <path d="M22 12 L58 12 L60 28 L56 68 L46 68 L42 36 L38 36 L34 68 L24 68 L20 28 Z" fill={c}/>
      <line x1="40" y1="14" x2="40" y2="34" stroke={a} strokeWidth="1.5" strokeDasharray="2 2"/>
    </svg>
  );
  if (kind === 'sunglasses') return (
    <svg viewBox="0 0 80 80" width="68%" height="68%">
      <circle cx="24" cy="42" r="14" fill={c}/>
      <circle cx="56" cy="42" r="14" fill={c}/>
      <path d="M38 38 L42 38" stroke={c} strokeWidth="3"/>
      <path d="M10 36 L18 30 M70 36 L62 30" stroke={c} strokeWidth="2.5" strokeLinecap="round"/>
    </svg>
  );
  if (kind === 'jacket') return (
    <svg viewBox="0 0 80 80" width="58%" height="58%">
      <path d="M16 24 L28 14 L36 18 L40 24 L44 18 L52 14 L64 24 L60 32 L56 30 L56 66 L24 66 L24 30 L20 32 Z" fill={c}/>
      <line x1="40" y1="24" x2="40" y2="66" stroke={a} strokeWidth="2" strokeDasharray="3 2"/>
    </svg>
  );
  if (kind === 'cap') return (
    <svg viewBox="0 0 80 80" width="66%" height="66%">
      <path d="M14 50 Q14 22 40 22 Q66 22 66 50 L66 54 L14 54 Z" fill={c}/>
      <path d="M14 54 L72 54 L72 60 L14 60 Z" fill={c}/>
      <circle cx="40" cy="38" r="3" fill={a}/>
    </svg>
  );
  if (kind === 'watch') return (
    <svg viewBox="0 0 80 80" width="58%" height="58%">
      <rect x="32" y="10" width="16" height="12" fill={c}/>
      <rect x="32" y="58" width="16" height="12" fill={c}/>
      <rect x="24" y="22" width="32" height="36" rx="6" fill={c}/>
      <circle cx="40" cy="40" r="10" fill={a}/>
      <line x1="40" y1="40" x2="40" y2="33" stroke="var(--cream)" strokeWidth="1.8"/>
      <line x1="40" y1="40" x2="45" y2="40" stroke="var(--cream)" strokeWidth="1.8"/>
    </svg>
  );
  if (kind === 'skirt') return (
    <svg viewBox="0 0 80 80" width="58%" height="58%">
      <path d="M24 16 L56 16 L58 28 L68 68 L12 68 L22 28 Z" fill={c}/>
      <line x1="40" y1="16" x2="40" y2="68" stroke={a} strokeWidth="1.5" opacity="0.5"/>
    </svg>
  );
  return null;
}

function HeroProductShowcase() {
  // Three columns of product silhouette cards scrolling vertically at
  // different speeds and directions. Center badge shows the 59 MIN promise.
  const palettes = {
    cream:   { bg: 'var(--cream)',      fg: 'var(--ink)',   accent: 'var(--ember)' },
    ember:   { bg: 'var(--ember)',      fg: '#fff',         accent: 'var(--ink)'   },
    bone:    { bg: 'var(--bone)',       fg: 'var(--ink)',   accent: 'var(--ember)' },
    ink:     { bg: 'var(--ink)',        fg: 'var(--cream)', accent: 'var(--ember)' },
    plum:    { bg: 'var(--plum)',       fg: 'var(--cream)', accent: 'var(--ember-soft)' },
    softember:{ bg: 'var(--ember-soft)',fg: 'var(--ember-ink)', accent: 'var(--ember)' },
  };
  const items = [
    { kind: 'tee',        label: 'Tee',        p: 'ember'    },
    { kind: 'shoe',       label: 'Shoe',       p: 'cream'    },
    { kind: 'bag',        label: 'Bag',        p: 'ink'      },
    { kind: 'dress',      label: 'Dress',      p: 'softember'},
    { kind: 'jeans',      label: 'Jeans',      p: 'cream'    },
    { kind: 'sunglasses', label: 'Shades',     p: 'plum'     },
    { kind: 'jacket',     label: 'Jacket',     p: 'ink'      },
    { kind: 'cap',        label: 'Cap',        p: 'ember'    },
    { kind: 'watch',      label: 'Watch',      p: 'bone'     },
    { kind: 'skirt',      label: 'Skirt',      p: 'cream'    },
  ];
  // Distribute across 3 columns
  const cols = [
    items.filter((_, i) => i % 3 === 0),
    items.filter((_, i) => i % 3 === 1),
    items.filter((_, i) => i % 3 === 2),
  ];
  return (
    <div className="showcase">
      {cols.map((col, ci) => (
        <div key={ci} className={`showcase-col showcase-col-${ci}`}>
          {/* duplicate the track for seamless loop */}
          <div className="showcase-track">
            {[...col, ...col].map((item, i) => {
              const pal = palettes[item.p];
              return (
                <div key={i} className="product-card" style={{ background: pal.bg, color: pal.fg, borderColor: 'var(--line)' }}>
                  <ProductIcon kind={item.kind} color={pal.fg} accent={pal.accent}/>
                  <div className="product-tag" style={{ color: pal.accent }}>{item.label.toUpperCase()}</div>
                </div>
              );
            })}
          </div>
        </div>
      ))}
      <div className="showcase-badge" aria-hidden="true">
        <span className="showcase-badge-num">59</span>
        <span className="showcase-badge-sub">min &middot; store to door</span>
      </div>
      <div className="showcase-fade showcase-fade-top"></div>
      <div className="showcase-fade showcase-fade-bot"></div>
    </div>
  );
}

function Hero() {
  return (
    <section className="hero" id="top" data-screen-label="01 Hero">
      <div className="shell hero-grid">
        <div>
          <span className="hero-eyebrow">
            <span className="live-dot"></span>
            Coming soon to Gurugram
          </span>
          <h1>
            Fashion.<br/>
            In <span className="ember">59</span> minutes.
          </h1>
          <p className="hero-sub">
            Style from nearby stores, delivered in under an hour.
            Discover apparel, footwear, and accessories on demand.
          </p>
          <div className="hero-ctas">
            <a href="#waitlist" className="btn btn-primary">
              Join the waitlist
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
            </a>
          </div>
        </div>
        <div className="hero-stage" aria-hidden="true">
          <HeroProductShowcase/>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   How it works — animated 4-step timeline
   ============================================================ */
const STEPS = [
  {
    no: '01',
    title: 'Pick your fit',
    body: 'Browse showrooms within a 7 km radius. Swipe through fits like a feed.',
    glyph: 'browse',
  },
  {
    no: '02',
    title: 'Tap to order',
    body: 'One screen. Size, payment, address. UPI in two taps.',
    glyph: 'tap',
  },
  {
    no: '03',
    title: 'We pick it up',
    body: 'A Glider rides to the fashion store you bought from. Pulls your size from the shelf. Quality-checked before it leaves.',
    glyph: 'pick',
  },
  {
    no: '04',
    title: 'On you. 59 min.',
    body: 'Tracked door-to-door. Try it on. Return on the spot.',
    glyph: 'deliver',
  },
];

function StepGlyph({ kind, active }) {
  if (kind === 'browse') {
    // side-scrolling product carousel — cards slide horizontally
    const cards = [
      { fill: 'var(--ember)',     tagFill: 'var(--cream)',  txt: 'TEE'    },
      { fill: 'var(--ink)',       tagFill: 'var(--ember)',  txt: 'SHOE'   },
      { fill: 'var(--plum)',      tagFill: 'var(--cream)',  txt: 'BAG'    },
      { fill: 'var(--ember-soft)',tagFill: 'var(--ink)',    txt: 'DRESS'  },
      { fill: 'var(--ink)',       tagFill: 'var(--ember)',  txt: 'JEANS'  },
    ];
    const cardW = 56, gap = 12, step = cardW + gap;
    // Build a 2x looped track so translation can scroll seamlessly.
    const track = [...cards, ...cards];
    const trackW = track.length * step;
    return (
      <svg viewBox="0 0 200 120" width="92%" height="92%">
        <defs>
          <clipPath id="browseClip">
            <rect x="10" y="14" width="180" height="92" rx="12"/>
          </clipPath>
          <linearGradient id="browseFadeL" x1="0" x2="1" y1="0" y2="0">
            <stop offset="0" stopColor="var(--bone)" stopOpacity="1"/>
            <stop offset="1" stopColor="var(--bone)" stopOpacity="0"/>
          </linearGradient>
          <linearGradient id="browseFadeR" x1="0" x2="1" y1="0" y2="0">
            <stop offset="0" stopColor="var(--bone)" stopOpacity="0"/>
            <stop offset="1" stopColor="var(--bone)" stopOpacity="1"/>
          </linearGradient>
        </defs>
        <g clipPath="url(#browseClip)">
          <g transform="translate(14, 30)">
            <g>
              {track.map((c, i) => (
                <g key={i} transform={`translate(${i * step}, 0)`}>
                  <rect width={cardW} height={68} rx="10" fill={c.fill}/>
                  <rect x="8" y="8" width="22" height="10" rx="5" fill={c.tagFill} opacity="0.92"/>
                  <text x="19" y="15.5" textAnchor="middle" fontFamily="Inter Tight" fontWeight="700" fontSize="6" letterSpacing="0.8" fill={c.fill}>{c.txt}</text>
                  {/* tiny price chip */}
                  <rect x="8" y={68 - 18} width={cardW - 16} height="10" rx="3" fill="#fff" opacity="0.25"/>
                </g>
              ))}
              {active && (
                <animateTransform attributeName="transform" type="translate"
                  from="0 0" to={`-${trackW / 2} 0`} dur="8s" repeatCount="indefinite"/>
              )}
            </g>
          </g>
        </g>
        {/* edge fades */}
        <rect x="10" y="14" width="18" height="92" fill="url(#browseFadeL)"/>
        <rect x="172" y="14" width="18" height="92" fill="url(#browseFadeR)"/>
        {/* swipe hint dots */}
        <g transform="translate(100, 100)">
          <circle cx="-10" cy="0" r="1.8" fill="var(--fg3)" opacity="0.4"/>
          <circle cx="0" cy="0" r="2.2" fill={active ? 'var(--ember)' : 'var(--fg2)'}/>
          <circle cx="10" cy="0" r="1.8" fill="var(--fg3)" opacity="0.4"/>
        </g>
      </svg>
    );
  }
  if (kind === 'tap') {
    return (
      <svg viewBox="0 0 200 120" width="80%" height="80%">
        <rect x="56" y="14" width="88" height="92" rx="14" fill="var(--ink)"/>
        <rect x="68" y="32" width="64" height="10" rx="3" fill="var(--cream)" opacity="0.4"/>
        <rect x="68" y="48" width="40" height="10" rx="3" fill="var(--cream)" opacity="0.25"/>
        <rect x="68" y="76" width="64" height="14" rx="7" fill={active ? 'var(--ember)' : '#FF5A1F'}/>
        <circle cx={active ? '110' : '128'} cy="83" r="14" fill="var(--cream)" opacity="0.18">
          {active && <animate attributeName="r" values="6;18;6" dur="1.2s" repeatCount="indefinite"/>}
        </circle>
      </svg>
    );
  }
  if (kind === 'pick') {
    // Glider on a scooter — leaves a storefront and rides off with a bag.
    return (
      <svg viewBox="0 0 200 120" width="92%" height="92%">
        {/* road */}
        <line x1="0" y1="94" x2="200" y2="94" stroke="var(--line-strong)" strokeWidth="1.2"/>
        <g stroke="var(--line-strong)" strokeWidth="1.4" strokeDasharray="6 8" opacity="0.7">
          <line x1="0" y1="100" x2="200" y2="100">
            {active && <animate attributeName="stroke-dashoffset" values="0;-28" dur="0.5s" repeatCount="indefinite"/>}
          </line>
        </g>

        {/* storefront (left) */}
        <g transform="translate(8, 32)">
          <rect x="0" y="0" width="42" height="62" rx="3" fill="var(--ink)"/>
          <path d="M-2 0 L21 -10 L44 0 Z" fill="var(--ember)"/>
          <rect x="6" y="10" width="30" height="4" rx="1" fill="var(--cream)" opacity="0.6"/>
          <rect x="6" y="22" width="12" height="22" rx="1" fill="var(--cream)" opacity="0.18"/>
          <rect x="24" y="22" width="12" height="22" rx="1" fill="var(--cream)" opacity="0.18"/>
          <rect x="14" y="50" width="14" height="12" fill="var(--cream)" opacity="0.5"/>
        </g>

        {/* scooter + glider — rides from store to right edge */}
        <g>
          <g transform="translate(64, 58)">
            {active && (
              <animateTransform attributeName="transform" type="translate"
                values="64,58; 130,58; 64,58" dur="3.6s" repeatCount="indefinite"/>
            )}
            {/* shadow */}
            <ellipse cx="22" cy="40" rx="22" ry="2.5" fill="var(--ink)" opacity="0.18"/>
            {/* scooter body */}
            <path d="M4 30 L18 30 L24 18 L32 18 L36 30 L40 30" stroke="var(--ember)" strokeWidth="3" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
            {/* wheels */}
            <circle cx="6" cy="34" r="5.5" fill="var(--ink)"/>
            <circle cx="6" cy="34" r="2" fill="var(--cream)"/>
            <circle cx="38" cy="34" r="5.5" fill="var(--ink)"/>
            <circle cx="38" cy="34" r="2" fill="var(--cream)"/>
            {/* rider torso */}
            <path d="M22 22 L28 8 L34 8 L36 22 Z" fill="var(--ink)"/>
            {/* helmet */}
            <circle cx="31" cy="4" r="5" fill="var(--ink)"/>
            <rect x="27" y="3" width="7" height="2.4" fill="var(--ember)"/>
            {/* delivery bag */}
            <rect x="4" y="12" width="16" height="14" rx="2" fill="var(--ember)"/>
            <rect x="7" y="15" width="10" height="2" rx="1" fill="var(--cream)" opacity="0.7"/>
            <rect x="7" y="19" width="6" height="2" rx="1" fill="var(--cream)" opacity="0.5"/>
          </g>
        </g>

        {/* speed marks */}
        {active && (
          <g stroke="var(--ember)" strokeWidth="1.5" strokeLinecap="round" opacity="0.85">
            <line x1="54" y1="66" x2="66" y2="66">
              <animate attributeName="opacity" values="0;0.9;0" dur="0.6s" repeatCount="indefinite"/>
            </line>
            <line x1="58" y1="74" x2="68" y2="74">
              <animate attributeName="opacity" values="0;0.7;0" dur="0.6s" begin="0.15s" repeatCount="indefinite"/>
            </line>
            <line x1="52" y1="82" x2="62" y2="82">
              <animate attributeName="opacity" values="0;0.5;0" dur="0.6s" begin="0.3s" repeatCount="indefinite"/>
            </line>
          </g>
        )}
      </svg>
    );
  }
  if (kind === 'deliver') {
    return (
      <svg viewBox="0 0 200 120" width="80%" height="80%">
        <circle cx="100" cy="60" r="42" fill="none" stroke="var(--line-strong)" strokeWidth="2"/>
        <circle cx="100" cy="60" r="42" fill="none" stroke="var(--ember)" strokeWidth="3" strokeLinecap="round" strokeDasharray="264" strokeDashoffset={active ? '60' : '180'} transform="rotate(-90 100 60)" style={{ transition: 'stroke-dashoffset 1.2s var(--ease)' }}/>
        <text x="100" y="68" textAnchor="middle" fontFamily="Space Grotesk" fontWeight="600" fontSize="28" letterSpacing="-1" fill="var(--fg1)">59</text>
        <text x="100" y="84" textAnchor="middle" fontFamily="Inter Tight" fontSize="9" letterSpacing="2" fill="var(--fg3)">MIN</text>
      </svg>
    );
  }
  return null;
}

function HowItWorks() {
  const [active, setActive] = useState(0);
  const containerRef = useRef(null);
  const pinRefs = useRef([]);
  const [geom, setGeom] = useState({ start: 0, end: 0, centers: [], yLine: 64 });

  // auto-advance
  useEffect(() => {
    const t = setInterval(() => setActive(a => (a + 1) % STEPS.length), 2400);
    return () => clearInterval(t);
  }, []);

  // Measure real pin centers so the line + traveling dot align exactly with each pin.
  useEffect(() => {
    const measure = () => {
      const container = containerRef.current;
      if (!container) return;
      const cBox = container.getBoundingClientRect();
      let yLine = 64;
      const centers = pinRefs.current.map((el, i) => {
        if (!el) return 0;
        const r = el.getBoundingClientRect();
        if (i === 0) yLine = r.top + r.height / 2 - cBox.top;
        return r.left + r.width / 2 - cBox.left;
      });
      if (centers.length && centers[0] && centers[centers.length - 1]) {
        setGeom({ start: centers[0], end: centers[centers.length - 1], centers, yLine });
      }
    };
    measure();
    const ro = new ResizeObserver(measure);
    if (containerRef.current) ro.observe(containerRef.current);
    window.addEventListener('resize', measure);
    return () => { ro.disconnect(); window.removeEventListener('resize', measure); };
  }, []);

  const lineLeft   = geom.start;
  const lineWidth  = Math.max(0, geom.end - geom.start);
  const dotCenter  = geom.centers[active] ?? geom.start;
  const fillWidth  = Math.max(0, dotCenter - geom.start);
  const trackY     = geom.yLine;

  return (
    <section className="how" id="how" data-screen-label="02 How it works">
      <div className="shell">
        <div className="section-head">
          <div>
            <div className="eyebrow">How it works</div>
            <h2>From tap to try-on in under an hour.</h2>
          </div>
        </div>
        <div className="timeline" ref={containerRef}>
          {/* Static dashed road + a short comet trail that follows the scooter */}
          <div className="timeline-track"    style={{ top: `${trackY}px`, left: `${lineLeft}px`, width: `${lineWidth}px` }}></div>
          <div className="timeline-progress" style={{ top: `${trackY}px`, left: `${dotCenter}px` }}></div>
          <div className="timeline-scooter"  style={{ top: `${trackY}px`, left: `${dotCenter}px` }}>
            <svg viewBox="-2 -6 48 32" width="44" height="30" aria-hidden="true">
              <ellipse cx="22" cy="25" rx="18" ry="2" fill="var(--fg1)" opacity="0.2"/>
              <path d="M4 20 L18 20 L24 8 L32 8 L36 20 L40 20" stroke="var(--ember)" strokeWidth="2.6" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
              <circle cx="6"  cy="22" r="4"   fill="var(--fg1)"/>
              <circle cx="6"  cy="22" r="1.4" fill="var(--bg)"/>
              <circle cx="38" cy="22" r="4"   fill="var(--fg1)"/>
              <circle cx="38" cy="22" r="1.4" fill="var(--bg)"/>
              <path d="M22 12 L28 0 L34 0 L36 12 Z" fill="var(--fg1)"/>
              <circle cx="31" cy="-2" r="3.8" fill="var(--fg1)"/>
              <rect x="4" y="3" width="14" height="12" rx="2" fill="var(--ember)"/>
              <rect x="7" y="6" width="8"  height="1.5" rx="0.5" fill="var(--bg)" opacity="0.8"/>
            </svg>
          </div>
          {STEPS.map((s, i) => (
            <div className={`tstep ${i <= active ? 'active' : ''} ${i === active ? 'current' : ''}`} key={s.no} onMouseEnter={() => setActive(i)}>
              <div className="pin" ref={el => pinRefs.current[i] = el}></div>
              <div className="glyph"><StepGlyph kind={s.glyph} active={i === active}/></div>
              <div className="stepno">Step {s.no}</div>
              <h3>{s.title}</h3>
              <p>{s.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   Coverage — animated 59-min radius
   ============================================================ */
function CoverageMap() {
  return (
    <div className="coverage-stage">
      <svg viewBox="0 0 400 400" preserveAspectRatio="xMidYMid slice">
        <defs>
          <pattern id="grid" width="20" height="20" patternUnits="userSpaceOnUse">
            <path d="M 20 0 L 0 0 0 20" fill="none" stroke="var(--line)" strokeWidth="0.6"/>
          </pattern>
          <radialGradient id="fadeOut" cx="50%" cy="50%" r="50%">
            <stop offset="0%" stopColor="var(--bg)" stopOpacity="0"/>
            <stop offset="80%" stopColor="var(--bg)" stopOpacity="0"/>
            <stop offset="100%" stopColor="var(--bg)" stopOpacity="1"/>
          </radialGradient>
        </defs>
        <rect width="400" height="400" fill="url(#grid)"/>

        {/* abstract road / highway lines */}
        <g stroke="var(--line-strong)" strokeWidth="1.2" fill="none" opacity="0.55">
          <path d="M0,220 Q120,200 200,210 T400,200"/>
          <path d="M0,160 Q140,150 200,165 T400,150"/>
          <path d="M0,280 Q120,260 200,270 T400,260"/>
          <path d="M80,0 Q90,120 100,210 T130,400"/>
          <path d="M260,0 Q280,120 290,210 T280,400"/>
          <path d="M340,0 L360,400" strokeDasharray="3 6"/>
        </g>

        {/* radius rings - pulsing */}
        <g style={{ transformOrigin: '200px 210px' }}>
          {[0, 1, 2].map(i => (
            <circle key={i} cx="200" cy="210" r="40" fill="none" stroke="var(--ember)" strokeWidth="1.8" opacity="0.5">
              <animate attributeName="r" values="40;160;40" dur={`${4 + i * 0.4}s`} begin={`${i * 1.2}s`} repeatCount="indefinite"/>
              <animate attributeName="opacity" values="0.55;0;0.55" dur={`${4 + i * 0.4}s`} begin={`${i * 1.2}s`} repeatCount="indefinite"/>
            </circle>
          ))}
        </g>

        {/* filled radius */}
        <circle cx="200" cy="210" r="140" fill="var(--ember)" opacity="0.07"/>
        <circle cx="200" cy="210" r="140" fill="none" stroke="var(--ember)" strokeWidth="1.8" strokeDasharray="4 6" opacity="0.7">
          <animateTransform attributeName="transform" type="rotate" from="0 200 210" to="360 200 210" dur="60s" repeatCount="indefinite"/>
        </circle>

        {/* delivery routes — curved paths from store locations TO the customer (center) */}
        <g fill="none" stroke="var(--ember)" strokeWidth="1.4" strokeDasharray="2 4" opacity="0.7" strokeLinecap="round">
          <path id="route1" d="M140,160 Q175,190 200,210"/>
          <path id="route2" d="M240,145 Q230,180 200,210"/>
          <path id="route3" d="M290,220 Q255,215 200,210"/>
          <path id="route4" d="M130,265 Q160,240 200,210"/>
          <path id="route5" d="M245,290 Q225,255 200,210"/>
          <path id="route6" d="M170,115 Q190,160 200,210"/>
        </g>

        {/* scooter dots travelling along the routes */}
        <g>
          {['route1', 'route2', 'route3', 'route4', 'route5', 'route6'].map((id, i) => (
            <g key={id}>
              <circle r="4.5" fill="var(--ember)">
                <animateMotion dur={`${3.6 + i * 0.4}s`} begin={`${i * 0.5}s`} repeatCount="indefinite" rotate="auto">
                  <mpath href={`#${id}`}/>
                </animateMotion>
              </circle>
              <circle r="2" fill="#fff">
                <animateMotion dur={`${3.6 + i * 0.4}s`} begin={`${i * 0.5}s`} repeatCount="indefinite" rotate="auto">
                  <mpath href={`#${id}`}/>
                </animateMotion>
              </circle>
            </g>
          ))}
        </g>

        {/* label dots for areas */}
        <g fontFamily="Inter Tight" fontSize="9" fill="var(--fg2)">
          <circle cx="140" cy="160" r="3" fill="var(--ink)"/><text x="150" y="163">DLF Phase 3</text>
          <circle cx="240" cy="145" r="3" fill="var(--ink)"/><text x="250" y="148">Sector 29</text>
          <circle cx="290" cy="220" r="3" fill="var(--ink)"/><text x="298" y="223">Golf Course</text>
          <circle cx="130" cy="265" r="3" fill="var(--ink)"/><text x="80" y="268">Cyber Hub</text>
          <circle cx="245" cy="290" r="3" fill="var(--ink)"/><text x="254" y="293">Sushant Lok</text>
          <circle cx="170" cy="115" r="3" fill="var(--ink)"/><text x="180" y="118">MG Road</text>
        </g>

        {/* center pin */}
        <g>
          <circle cx="200" cy="210" r="14" fill="var(--ember)"/>
          <circle cx="200" cy="210" r="14" fill="none" stroke="var(--ember)" strokeWidth="2">
            <animate attributeName="r" values="14;28;14" dur="2.4s" repeatCount="indefinite"/>
            <animate attributeName="opacity" values="0.8;0;0.8" dur="2.4s" repeatCount="indefinite"/>
          </circle>
          <text x="200" y="214" textAnchor="middle" fontFamily="Space Grotesk" fontWeight="700" fontSize="11" fill="#fff" letterSpacing="-0.5">59</text>
        </g>

        {/* corner badge */}
        <g transform="translate(20, 20)">
          <rect width="132" height="32" rx="16" fill="var(--ink)"/>
          <circle cx="18" cy="16" r="4" fill="var(--ember)">
            <animate attributeName="opacity" values="1;0.3;1" dur="1.6s" repeatCount="indefinite"/>
          </circle>
          <text x="32" y="20" fontFamily="Inter Tight" fontWeight="600" fontSize="10" letterSpacing="1.5" fill="#fff">7 KM · 59 MIN</text>
        </g>

        {/* corner: Gurugram label */}
        <g transform="translate(20, 360)">
          <text fontFamily="JetBrains Mono" fontSize="10" fill="var(--fg3)" letterSpacing="1">28.46° N · 77.02° E</text>
          <text y="14" fontFamily="Space Grotesk" fontWeight="600" fontSize="14" fill="var(--fg1)" letterSpacing="-0.5">Gurugram, IN</text>
        </g>
      </svg>
    </div>
  );
}

function Coverage() {
  return (
    <section className="coverage" id="coverage" data-screen-label="03 Coverage">
      <div className="shell coverage-grid">
        <CoverageMap/>
        <div>
          <div className="eyebrow" style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg3)', letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: 12 }}>Coverage · v1</div>
          <h2>Starting in Gurugram.<br/>One 59-minute circle at a time.</h2>
          <p className="lead">
            We're starting with six neighborhoods at launch. Every showroom stays within a
            7 km drop radius of your door. More cities follow once we're nailing 59 in every order.
          </p>
          <ul className="coverage-areas">
            <li>DLF Phase 1–5</li>
            <li>Sector 29</li>
            <li>Golf Course Road</li>
            <li>Cyber Hub</li>
            <li>Sushant Lok</li>
            <li>MG Road</li>
          </ul>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   Post-signup success helpers
   ============================================================ */

const CONFETTI_PIECES = [
  { dx:'-60px',  dy:'-85px',  dr:'-45deg',  bg:'#FF5A1F', w:'8px',  h:'8px',  delay:'200ms', round:true  },
  { dx: '60px',  dy:'-85px',  dr: '30deg',  bg:'#4A1942', w:'6px',  h:'10px', delay:'240ms', round:false },
  { dx:'-105px', dy:'-35px',  dr:'-60deg',  bg:'#FBF7F1', w:'10px', h:'5px',  delay:'280ms', round:false },
  { dx: '105px', dy:'-35px',  dr: '60deg',  bg:'#FF5A1F', w:'6px',  h:'6px',  delay:'220ms', round:true  },
  { dx:'-85px',  dy: '55px',  dr:'120deg',  bg:'#4A1942', w:'8px',  h:'8px',  delay:'260ms', round:true  },
  { dx: '85px',  dy: '55px',  dr:'-90deg',  bg:'#FFE2D3', w:'10px', h:'5px',  delay:'230ms', round:false },
  { dx:'-25px',  dy:'-105px', dr:'180deg',  bg:'#FF5A1F', w:'6px',  h:'10px', delay:'210ms', round:false },
  { dx: '25px',  dy:'-105px', dr:'-30deg',  bg:'#4A1942', w:'8px',  h:'8px',  delay:'250ms', round:true  },
  { dx:'-125px', dy: '15px',  dr:'-150deg', bg:'#FBF7F1', w:'6px',  h:'6px',  delay:'270ms', round:true  },
  { dx: '125px', dy: '15px',  dr:'150deg',  bg:'#FF5A1F', w:'10px', h:'6px',  delay:'215ms', round:false },
  { dx:'-45px',  dy: '95px',  dr:'-90deg',  bg:'#4A1942', w:'6px',  h:'10px', delay:'245ms', round:false },
  { dx: '45px',  dy: '95px',  dr: '45deg',  bg:'#FFE2D3', w:'8px',  h:'8px',  delay:'255ms', round:true  },
  { dx:'-95px',  dy:'-55px',  dr: '75deg',  bg:'#FF5A1F', w:'5px',  h:'8px',  delay:'225ms', round:false },
  { dx: '95px',  dy:'-55px',  dr:'-75deg',  bg:'#4A1942', w:'6px',  h:'6px',  delay:'235ms', round:true  },
  { dx:  '0px',  dy:'-115px', dr:  '0deg',  bg:'#FBF7F1', w:'8px',  h:'5px',  delay:'265ms', round:false },
  { dx:  '0px',  dy: '105px', dr:'180deg',  bg:'#FF5A1F', w:'6px',  h:'6px',  delay:'275ms', round:true  },
];

function ConfettiBurst() {
  return (
    <div className="confetti-wrap" aria-hidden="true">
      {CONFETTI_PIECES.map((p, i) => (
        <span key={i} className="confetti-piece" style={{
          '--cdx': p.dx, '--cdy': p.dy, '--cdr': p.dr,
          background: p.bg, width: p.w, height: p.h,
          animationDelay: p.delay,
          borderRadius: p.round ? '50%' : '3px',
        }}/>
      ))}
    </div>
  );
}

function SuccessCheck({ muted = false }) {
  const color = muted ? 'var(--fg3)' : 'var(--ember)';
  return (
    <div className="success-icon" aria-hidden="true">
      <svg viewBox="0 0 60 60" width="68" height="68">
        <circle cx="30" cy="30" r="26"
          fill="none" stroke={color} strokeWidth="2.5"
          className="check-circle"/>
        <path d="M18,30 L26,38 L42,22"
          fill="none" stroke={color} strokeWidth="3"
          strokeLinecap="round" strokeLinejoin="round"
          className="check-mark"/>
      </svg>
    </div>
  );
}

function PositionRoll({ value }) {
  const str = String(value ?? 0);
  return (
    <span className="pos-roll" aria-label={`Position ${value}`}>
      <span className="pos-hash">#</span>
      {str.split('').map((d, i) => (
        <span className="pos-digit" key={i}>
          <span className="pos-reel" style={{ animationDelay: `${180 + i * 90}ms` }}>
            {Array.from({ length: 10 }).map((_, n) => <span key={n}>{n}</span>)}
            <span>{d}</span>
          </span>
        </span>
      ))}
    </span>
  );
}

/* ============================================================
   Waitlist forms
   ============================================================ */
const FORM_LIMITS = {
  customer: {
    name: 80,
    email: 120,
    location: 120,
  },
  vendor: {
    name: 80,
    brand: 120,
    email: 120,
    phone: 20,
    area: 140,
  },
  age: {
    min: 18,
    max: 120,
  },
};

function normalizeFormText(value) {
  return typeof value === 'string' ? value.trim() : '';
}

function normalizeFormEmail(value) {
  return normalizeFormText(value).toLowerCase();
}

function isValidFormEmail(value) {
  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
}

function isValidFormPhone(value) {
  return /^[0-9+\-()\s]{7,20}$/.test(value);
}

function validateCustomerForm(data) {
  const name = normalizeFormText(data.name);
  const email = normalizeFormEmail(data.email);
  const location = normalizeFormText(data.location);
  const age = Number(data.age);

  if (!name || !email || data.age === '' || data.age == null || !location) {
    return 'Please complete all shopper fields.';
  }
  if (!isValidFormEmail(email)) {
    return 'Enter a valid email address.';
  }
  if (!Number.isInteger(age) || age < FORM_LIMITS.age.min || age > FORM_LIMITS.age.max) {
    return `Age must be between ${FORM_LIMITS.age.min} and ${FORM_LIMITS.age.max}.`;
  }
  if (name.length > FORM_LIMITS.customer.name) {
    return `Full name must be ${FORM_LIMITS.customer.name} characters or fewer.`;
  }
  if (email.length > FORM_LIMITS.customer.email) {
    return `Email must be ${FORM_LIMITS.customer.email} characters or fewer.`;
  }
  if (location.length > FORM_LIMITS.customer.location) {
    return `Location must be ${FORM_LIMITS.customer.location} characters or fewer.`;
  }
  return '';
}

function validateVendorForm(data, customArea) {
  const name = normalizeFormText(data.name);
  const brand = normalizeFormText(data.brand);
  const email = normalizeFormEmail(data.email);
  const phone = normalizeFormText(data.phone);
  const area = normalizeFormText(data.area === 'Other' ? customArea : data.area);

  if (!name || !brand || !email || !phone || !area) {
    return 'Please complete all vendor fields.';
  }
  if (!isValidFormEmail(email)) {
    return 'Enter a valid work email address.';
  }
  if (!isValidFormPhone(phone)) {
    return 'Enter a valid phone number.';
  }
  if (name.length > FORM_LIMITS.vendor.name) {
    return `Your name must be ${FORM_LIMITS.vendor.name} characters or fewer.`;
  }
  if (brand.length > FORM_LIMITS.vendor.brand) {
    return `Brand name must be ${FORM_LIMITS.vendor.brand} characters or fewer.`;
  }
  if (email.length > FORM_LIMITS.vendor.email) {
    return `Email must be ${FORM_LIMITS.vendor.email} characters or fewer.`;
  }
  if (phone.length > FORM_LIMITS.vendor.phone) {
    return `Phone number must be ${FORM_LIMITS.vendor.phone} characters or fewer.`;
  }
  if (area.length > FORM_LIMITS.vendor.area) {
    return `Store location must be ${FORM_LIMITS.vendor.area} characters or fewer.`;
  }
  return '';
}

function CustomerForm() {
  const [done, setDone] = useState(false);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');
  const [data, setData] = useState({ name: '', email: '', age: '', location: '' });
  const [position, setPosition] = useState(null);
  const [alreadyRegistered, setAlreadyRegistered] = useState(false);
  const update = (k, v) => setData(d => ({ ...d, [k]: v }));
  const submit = async (e) => {
    e.preventDefault();
    setError('');
    const validationError = validateCustomerForm(data);
    if (validationError) {
      setError(validationError);
      return;
    }
    setLoading(true);
    const payload = {
      type: 'customer',
      name: normalizeFormText(data.name),
      email: normalizeFormEmail(data.email),
      age: Number(data.age),
      location: normalizeFormText(data.location),
    };
    try {
      const res = await fetch('/api/waitlist', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload),
      });
      const json = await res.json().catch(() => ({}));
      if (!res.ok) throw new Error(json.error || 'Something went wrong. Try again.');
      setPosition(json.position ?? null);
      setAlreadyRegistered(!!json.alreadyRegistered);
      setDone(true);
    } catch (err) {
      setError(err.message || 'Something went wrong. Try again.');
    } finally {
      setLoading(false);
    }
  };
  return (
    <form className={`form-card ${done ? 'done' : ''}`} onSubmit={submit}>
      <div className="role"><span className="pip"></span>For shoppers</div>
      <h3>Get 59-min fashion at your door.</h3>
      <p className="blurb">First in line for early access, launch deals, and the very first 59-minute orders in Gurugram.</p>
      <div className="fields">
        <div className="field"><input placeholder="Full name" value={data.name} onChange={e => update('name', e.target.value)} maxLength={FORM_LIMITS.customer.name} required/></div>
        <div className="field"><input type="email" placeholder="you@gmail.com" value={data.email} onChange={e => update('email', e.target.value)} maxLength={FORM_LIMITS.customer.email} required/></div>
        <div className="field-row">
          <div className="field"><input type="number" min={FORM_LIMITS.age.min} max={FORM_LIMITS.age.max} placeholder="Age" value={data.age} onChange={e => update('age', e.target.value)} required/></div>
          <div className="field"><input placeholder="Your area / sector" value={data.location} onChange={e => update('location', e.target.value)} maxLength={FORM_LIMITS.customer.location} required/></div>
        </div>
      </div>
      <button className="form-cta" type="submit" disabled={loading}>
        {loading ? 'Verifying...' : 'Save my spot'}
        {!loading && <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14M13 5l7 7-7 7"/></svg>}
      </button>
      {error && <div className="fine" style={{ color: 'var(--ember)' }}>{error}</div>}
      <div className="fine">No spam. One mail when we go live.</div>

      <div className="success">
        <ConfettiBurst/>
        <SuccessCheck muted={alreadyRegistered}/>
        <h4>{alreadyRegistered ? 'Already on the list.' : "You're in."}</h4>
        <p>{alreadyRegistered
          ? `${normalizeFormEmail(data.email)} is already saved. See you at launch.`
          : `We'll ping ${data.email || 'you'} the moment Glidzy goes live.`
        }</p>
        {position != null && (
          <div className="pos-badge">
            <span className="pos-label">YOUR POSITION</span>
            <PositionRoll value={position}/>
          </div>
        )}
      </div>
    </form>
  );
}

const GURUGRAM_AREAS = [
  'DLF Phase 1', 'DLF Phase 2', 'DLF Phase 3', 'DLF Phase 4', 'DLF Phase 5',
  'Sector 29', 'Golf Course Road', 'Cyber Hub', 'Sushant Lok', 'MG Road', 'Other',
];

function VendorForm() {
  const [done, setDone] = useState(false);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');
  const [data, setData] = useState({ name: '', brand: '', email: '', phone: '', area: '' });
  const [position, setPosition] = useState(null);
  const [alreadyRegistered, setAlreadyRegistered] = useState(false);
  const [customArea, setCustomArea] = useState('');
  const update = (k, v) => setData(d => ({ ...d, [k]: v }));
  const submit = async (e) => {
    e.preventDefault();
    setError('');
    const validationError = validateVendorForm(data, customArea);
    if (validationError) {
      setError(validationError);
      return;
    }
    setLoading(true);
    const area = normalizeFormText(data.area === 'Other' ? customArea : data.area);
    const payload = {
      type: 'vendor',
      name: normalizeFormText(data.name),
      brand: normalizeFormText(data.brand),
      email: normalizeFormEmail(data.email),
      phone: normalizeFormText(data.phone),
      area,
    };
    try {
      const res = await fetch('/api/waitlist', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload),
      });
      const json = await res.json().catch(() => ({}));
      if (!res.ok) throw new Error(json.error || 'Something went wrong. Try again.');
      setPosition(json.position ?? null);
      setAlreadyRegistered(!!json.alreadyRegistered);
      setDone(true);
    } catch (err) {
      setError(err.message || 'Something went wrong. Try again.');
    } finally {
      setLoading(false);
    }
  };
  return (
    <form className={`form-card ${done ? 'done' : ''}`} onSubmit={submit}>
      <div className="role"><span className="pip" style={{ background: 'var(--plum)' }}></span>For vendors & brands</div>
      <h3>Sell to nearby shoppers faster.</h3>
      <p className="blurb">Showroom owners, multi-brand boutiques, and label founders can join the launch roster.</p>
      <div className="fields">
        <div className="field-row">
          <div className="field"><input placeholder="Your name" value={data.name} onChange={e => update('name', e.target.value)} maxLength={FORM_LIMITS.vendor.name} required/></div>
          <div className="field"><input placeholder="Brand / shop" value={data.brand} onChange={e => update('brand', e.target.value)} maxLength={FORM_LIMITS.vendor.brand} required/></div>
        </div>
        <div className="field-row">
          <div className="field"><input type="email" placeholder="work@brand.com" value={data.email} onChange={e => update('email', e.target.value)} maxLength={FORM_LIMITS.vendor.email} required/></div>
          <div className="field"><input type="tel" placeholder="+91 98xxx xxxxx" value={data.phone} onChange={e => update('phone', e.target.value)} maxLength={FORM_LIMITS.vendor.phone} required/></div>
        </div>
        <div className="field">
          <select value={data.area} onChange={e => update('area', e.target.value)} required style={{ appearance: 'none', backgroundImage: 'url("data:image/svg+xml;utf8,<svg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23141413%27 stroke-width=%272%27><polyline points=%276 9 12 15 18 9%27/></svg>")', backgroundRepeat: 'no-repeat', backgroundPosition: 'right 14px center', backgroundSize: '16px' }}>
            <option value="" disabled>Select store location in Gurugram</option>
            {GURUGRAM_AREAS.map(a => <option key={a} value={a}>{a}</option>)}
          </select>
        </div>
        {data.area === 'Other' && (
          <div className="field">
            <input
              placeholder="Enter your store address"
              value={customArea}
              onChange={e => setCustomArea(e.target.value)}
              maxLength={FORM_LIMITS.vendor.area}
              required
              autoFocus
            />
          </div>
        )}
      </div>
      <button className="form-cta" type="submit" style={{ background: 'var(--plum)' }} disabled={loading}>
        {loading ? 'Verifying...' : 'Apply to onboard'}
        {!loading && <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14M13 5l7 7-7 7"/></svg>}
      </button>
      {error && <div className="fine" style={{ color: 'var(--ember)' }}>{error}</div>}
      <div className="fine">A founder will reach out within 48 hours.</div>

      <div className="success">
        <ConfettiBurst/>
        <SuccessCheck muted={alreadyRegistered}/>
        <h4>{alreadyRegistered ? 'Already applied.' : 'Application received.'}</h4>
        <p>{alreadyRegistered
          ? `${normalizeFormEmail(data.email)} is already on file. A founder will reach out soon.`
          : `Thanks ${data.name ? data.name.split(' ')[0] : 'there'} - we'll be in touch about onboarding ${data.brand || 'your brand'}.`
        }</p>
        {position != null && (
          <div className="pos-badge">
            <span className="pos-label">YOUR POSITION</span>
            <PositionRoll value={position}/>
          </div>
        )}
      </div>
    </form>
  );
}

function Waitlist() {
  return (
    <section className="waitlist" id="waitlist" data-screen-label="04 Waitlist">
      <div className="shell">
        <div className="waitlist-head">
          <span className="eyebrow">★ Limited launch cohort</span>
          <h2>Be on Glidzy before everyone else.</h2>
          <p>Two ways in. Pick yours. We'll handle the rest.</p>
        </div>
        <div className="forms">
          <CustomerForm/>
          <VendorForm/>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   Footer
   ============================================================ */
function Footer() {
  return (
    <footer className="footer" data-screen-label="05 Footer">
      <div className="shell">
        <div className="footer-top">
          <div className="footer-brand">
            <Wordmark height={40} forceVariant="dark"/>
            <p>Fashion, delivered in 59 minutes. Starting in Gurugram. Coming to your city next.</p>
          </div>
          <div className="footer-col">
            <h5>Product</h5>
            <ul>
              <li><a href="#how">How it works</a></li>
              <li><a href="#coverage">Coverage</a></li>
              <li><a href="#waitlist">For shoppers</a></li>
              <li><a href="#waitlist">For vendors</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h5>Legal</h5>
            <ul>
              <li><a href="/privacy.html">Privacy Policy</a></li>
              <li><a href="/terms.html">Terms of Service</a></li>
              <li><a href="mailto:admin@glidzy.com">admin@glidzy.com</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <div className="meta">© 2026 GLIDZY NOW PRIVATE LIMITED · GURUGRAM, IN</div>
          <div className="socials">
            <a href="https://www.instagram.com/glidzyofficial?utm_source=qr" aria-label="Instagram" target="_blank" rel="noreferrer">
              <svg viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="0.5" fill="currentColor"/></svg>
            </a>
            <a href="https://x.com/glidzyofficial?s=21" aria-label="X" target="_blank" rel="noreferrer">
              <svg viewBox="0 0 24 24" fill="currentColor" stroke="none"><path d="M17.6 3.5h3.1l-6.8 7.8 8 10.6h-6.3l-4.9-6.4-5.6 6.4H2l7.3-8.3L1.6 3.5H8l4.4 5.8 5.2-5.8Zm-1.1 16.6h1.7L7.6 5.3H5.8l10.7 14.8Z"/></svg>
            </a>
            <a href="https://www.linkedin.com/company/glidzy/" aria-label="LinkedIn" target="_blank" rel="noreferrer">
              <svg viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" rx="2"/><line x1="8" y1="11" x2="8" y2="17"/><circle cx="8" cy="7.5" r="0.5" fill="currentColor"/><path d="M12 17v-4a2.5 2.5 0 0 1 5 0v4"/><line x1="12" y1="11" x2="12" y2="17"/></svg>
            </a>
          </div>
        </div>
      </div>
    </footer>
  );
}

/* expose to global */
Object.assign(window, { Nav, Hero, HowItWorks, Coverage, Waitlist, Footer });