// sections-top.jsx — Nav, Hero, Marquee, Pillars, ProductShowcase

const { useState, useEffect, useRef } = React;

// ─────────────────────────────────────────────────────────────────────────────
// Logo mark — circular badge style matching the brand logo
function LogoMark({ size = 36 }) {
  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 12 }}>
      <img src="assets/logo.svg" alt="Real Date Balls" width={size} height={size} style={{ borderRadius: '50%', display: 'block' }} />
      <span style={{ fontFamily: 'var(--display)', fontSize: 22, letterSpacing: '-0.005em' }}>
        Real <span style={{ fontStyle: 'italic' }}>Date Balls</span>
      </span>
    </span>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
function Nav({ onOrder }) {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const on = () => setScrolled(window.scrollY > 24);
    window.addEventListener('scroll', on, { passive: true });
    return () => window.removeEventListener('scroll', on);
  }, []);
  const links = [
    ['The Ball', '#product'],
    ['Why', '#why'],
    ['Nutrition', '#nutrition'],
    ['Pricing', '#pricing'],
    ['Pickup', '#pickup'],
    ['Reviews', '#reviews'],
    ['Founder', '#founder'],
  ];
  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 50,
      background: scrolled ? 'color-mix(in oklab, var(--bg) 92%, transparent)' : 'transparent',
      backdropFilter: scrolled ? 'blur(14px) saturate(150%)' : 'none',
      WebkitBackdropFilter: scrolled ? 'blur(14px) saturate(150%)' : 'none',
      borderBottom: scrolled ? '1px solid var(--line)' : '1px solid transparent',
      transition: 'background .2s, border-color .2s',
    }}>
      <div className="wrap" style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        padding: '18px 0',
      }}>
        <a href="#top"><LogoMark /></a>
        <nav style={{ display: 'flex', gap: 28 }}>
          {links.map(([label, href]) => (
            <a key={href} href={href} style={{
              fontSize: 14, color: 'var(--ink-soft)',
              letterSpacing: '.01em', position: 'relative',
            }}>{label}</a>
          ))}
        </nav>
        <button className="btn" onClick={onOrder} style={{ padding: '10px 18px' }}>
          Order <span className="arr">→</span>
        </button>
      </div>
    </header>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// Product ball placeholder — a stylized SVG of a bag of date balls
function BallShot({ aspect = '1', label = 'PRODUCT SHOT · 600×800' }) {
  return (
    <div className="ph" style={{ aspectRatio: aspect, width: '100%', minHeight: 280 }}>
      <span className="ph-tag">{label}</span>
      {/* Stylized pouch + date balls silhouette */}
      <svg viewBox="0 0 240 360" width="55%" style={{ filter: 'drop-shadow(0 14px 30px rgba(46,31,18,.18))' }}>
        <defs>
          <linearGradient id="wrap" x1="0" x2="1" y1="0" y2="1">
            <stop offset="0%" stopColor="#3B2616" />
            <stop offset="100%" stopColor="#1F1108" />
          </linearGradient>
          <radialGradient id="ball" cx="35%" cy="30%" r="75%">
            <stop offset="0%" stopColor="#EADFC4" />
            <stop offset="100%" stopColor="#B5875A" />
          </radialGradient>
        </defs>
        <rect x="20" y="20" width="200" height="320" rx="18" fill="url(#wrap)" />
        <rect x="20" y="20" width="200" height="320" rx="18" fill="none" stroke="rgba(196,154,108,0.5)" strokeWidth="1" />
        <circle cx="88" cy="205" r="34" fill="url(#ball)" />
        <circle cx="150" cy="225" r="30" fill="url(#ball)" opacity="0.92" />
        <circle cx="118" cy="170" r="26" fill="url(#ball)" opacity="0.85" />
        <text x="120" y="100" textAnchor="middle" fontFamily="Instrument Serif, serif" fontSize="22" fill="#EADFC4">REAL</text>
        <text x="120" y="128" textAnchor="middle" fontFamily="Instrument Serif, serif" fontSize="22" fontStyle="italic" fill="#EADFC4">date balls</text>
        <text x="120" y="62" textAnchor="middle" fontFamily="JetBrains Mono, monospace" fontSize="9" letterSpacing="2" fill="#C49A6C">ORGANIC · 2 INGREDIENTS</text>
        <text x="120" y="300" textAnchor="middle" fontFamily="JetBrains Mono, monospace" fontSize="9" letterSpacing="2" fill="#C49A6C">DATES · CASHEWS</text>
        <text x="120" y="324" textAnchor="middle" fontFamily="JetBrains Mono, monospace" fontSize="8" letterSpacing="2" fill="#8A745A">NET WT 1.7 OZ (48g)</text>
      </svg>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
function Hero({ variant = 'editorial', eyebrowStyle = 'mono' }) {
  // 'editorial' — split layout w/ huge serif headline left, product right
  // 'split'     — dark block left like reference inspiration, cream right
  // 'centered'  — centered headline with product floating below
  if (variant === 'centered') {
    return (
      <section id="top" style={{ paddingTop: 40, paddingBottom: 0 }}>
        <div className="wrap" style={{ textAlign: 'center', paddingTop: 60 }}>
          <span className={`eyebrow ${eyebrowStyle === 'diamond' ? 'diamond' : eyebrowStyle === 'none' ? 'no-rule' : ''}`}>Frisco, TX · Est. 2026</span>
          <h1 style={{ marginTop: 24, marginBottom: 24 }}>
            Real fuel.<br/><em>Two ingredients.</em>
          </h1>
          <p style={{ maxWidth: 560, margin: '0 auto', fontSize: 18, color: 'var(--ink-soft)' }}>
            A filling, energizing date ball built for athletes who are tired of gels that don't keep them full. Organic dates. Organic cashews. Nothing else.
          </p>
          <div style={{ display: 'flex', gap: 12, justifyContent: 'center', marginTop: 32 }}>
            <a href="#order" className="btn">Order a pack <span className="arr">→</span></a>
            <a href="#why" className="btn ghost">Why date balls?</a>
          </div>
          <div style={{ marginTop: 60, maxWidth: 520, margin: '60px auto 0' }}>
            <BallShot aspect="3/4" label="HERO PRODUCT · 800×1000" />
          </div>
        </div>
      </section>
    );
  }
  if (variant === 'split') {
    return (
      <section id="top" style={{ padding: 0 }}>
        <div className="wrap" style={{ paddingTop: 24, paddingBottom: 24 }}>
          <div style={{
            display: 'grid', gridTemplateColumns: '1fr 1fr', borderRadius: 'var(--radius-lg)', overflow: 'hidden',
            border: '1px solid var(--line)', minHeight: 'min(78vh, 720px)',
          }}>
            <div style={{ background: 'var(--ink)', color: 'var(--bg)', padding: 'clamp(32px, 5vw, 64px)', display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
              <span className="eyebrow" style={{ color: 'var(--tan)' }}>Real Date Balls · Est. 2026</span>
              <div>
                <h1 style={{ color: 'var(--bg)', fontSize: 'clamp(44px,6vw,96px)' }}>
                  Real fuel.<br/><em style={{ color: 'var(--tan)' }}>Two ingredients.</em>
                </h1>
                <p style={{ marginTop: 24, maxWidth: 440, color: 'color-mix(in oklab, var(--bg) 80%, transparent)', fontSize: 17 }}>
                  Organic dates. Organic cashews. Nothing else. A filling, energizing snack made by a swimmer who got tired of energy gels.
                </p>
                <div style={{ display: 'flex', gap: 12, marginTop: 28 }}>
                  <a href="#order" className="btn" style={{ background: 'var(--tan)', borderColor: 'var(--tan)', color: 'var(--ink)' }}>Order a pack <span className="arr">→</span></a>
                  <a href="#why" className="btn ghost" style={{ color: 'var(--bg)', borderColor: 'var(--bg)' }}>Why date balls?</a>
                </div>
              </div>
              <div style={{ display: 'flex', gap: 28, fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '.14em', textTransform: 'uppercase', color: 'var(--tan)' }}>
                <span>◆ Organic</span><span>◆ 2 Ingredients</span><span>◆ Athlete-made</span>
              </div>
            </div>
            <div style={{ background: 'var(--bg-soft)', position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 32 }}>
              <BallShot aspect="3/4" label="HERO PRODUCT · 900×1200" />
            </div>
          </div>
        </div>
      </section>
    );
  }
  // editorial (default)
  return (
    <section id="top" style={{ paddingTop: 24, paddingBottom: 40, position: 'relative' }}>
      <div className="wrap">
        <div style={{ display: 'grid', gridTemplateColumns: '1.15fr 1fr', gap: 'clamp(28px, 5vw, 80px)', alignItems: 'end' }}>
          <div style={{ paddingBlock: 'clamp(20px, 4vw, 60px)' }}>
            <span className={`eyebrow ${eyebrowStyle === 'diamond' ? 'diamond' : eyebrowStyle === 'none' ? 'no-rule' : ''}`}>Frisco, Texas · Est. 2026</span>
            <h1 style={{ marginTop: 28 }}>
              Real fuel.<br/>
              <em>Two ingredients.</em><br/>
              Zero nonsense.
            </h1>
            <p style={{ marginTop: 28, maxWidth: 460, fontSize: 18, color: 'var(--ink-soft)' }}>
              A filling, energizing date ball made for student athletes who deserve more than a sugary gel. Organic dates, organic cashews — that's it.
            </p>
            <div style={{ display: 'flex', gap: 12, marginTop: 32 }}>
              <a href="#order" className="btn">Order a pack <span className="arr">→</span></a>
              <a href="#why" className="btn ghost">Why date balls?</a>
            </div>
            {/* Inline meta strip */}
            <div style={{ marginTop: 56, display: 'flex', gap: 28, flexWrap: 'wrap', fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '.14em', textTransform: 'uppercase', color: 'var(--ink-mute)' }}>
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
                <span style={{ width: 8, height: 8, background: 'var(--accent)', transform: 'rotate(45deg)' }}/>
                Organic
              </span>
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
                <span style={{ width: 8, height: 8, background: 'var(--accent)', transform: 'rotate(45deg)' }}/>
                2 ingredients
              </span>
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
                <span style={{ width: 8, height: 8, background: 'var(--accent)', transform: 'rotate(45deg)' }}/>
                Athlete-made
              </span>
            </div>
          </div>
          <div style={{ alignSelf: 'stretch', display: 'flex', alignItems: 'center' }}>
            <BallShot aspect="4/5" label="HERO PRODUCT · 800×1000" />
          </div>
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
function Marquee() {
  const items = ['Organic dates', 'Organic cashews', 'No fillers', 'No syrups', 'No preservatives', 'Made in Frisco, TX', 'Athlete-fueled'];
  const seq = [...items, ...items, ...items];
  return (
    <div className="marquee" aria-hidden="true">
      <div className="marquee-track">
        {seq.map((it, i) => (
          <React.Fragment key={i}>
            <span>{it}</span>
            <span className="sep">◆</span>
          </React.Fragment>
        ))}
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
function Pillars() {
  const items = [
    { n: '02', label: 'Ingredients', body: 'Organic dates and organic cashews. Read the back of an energy gel sometime — we did, and we got mad.' },
    { n: '00', label: 'Fillers', body: 'No syrups, no maltodextrin, no preservatives, no mystery powders. Real food that travels well.' },
    { n: '01', label: 'Founder', body: 'Made by a competitive swimmer who needed something to give her energy and keep her full.' },
  ];
  return (
    <section className="tight" id="pillars">
      <div className="wrap">
        <div className="grid cols-3" style={{ gap: 0 }}>
          {items.map((it, i) => (
            <div key={i} style={{
              padding: 'clamp(24px, 3vw, 40px)',
              borderRight: i < 2 ? '1px solid var(--line-strong)' : 'none',
              borderTop: '1px solid var(--line-strong)',
              borderBottom: '1px solid var(--line-strong)',
            }}>
              <div className="num" style={{ color: 'var(--accent)' }}>{it.n}</div>
              <div className="uppercase mono" style={{ color: 'var(--ink-mute)', marginTop: 8 }}>{it.label}</div>
              <p style={{ marginTop: 16, fontSize: 16, color: 'var(--ink-soft)', maxWidth: 320 }}>{it.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
function ProductShowcase() {
  return (
    <section id="product">
      <div className="wrap">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', flexWrap: 'wrap', gap: 24, marginBottom: 48 }}>
          <div style={{ maxWidth: 600 }}>
            <span className="eyebrow">The Ball</span>
            <h2 style={{ marginTop: 16 }}>One ball. <em>That's the menu.</em></h2>
          </div>
          <p style={{ maxWidth: 380, color: 'var(--ink-soft)' }}>
            We focused on getting one thing perfect before adding anything else. A dense, soft, chewy date ball rolled by hand — every bite is dates and cashews and nothing else.
          </p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 24 }}>
          <div className="ph" style={{ aspectRatio: '4/3', minHeight: 380 }}>
            <span className="ph-tag">PRODUCT SHOT · 1200×900</span>
            <div className="ph-cap">Add a photo of the date balls<br/>(whole batch on parchment)</div>
          </div>
          <div style={{ display: 'grid', gridTemplateRows: '1fr 1fr', gap: 24 }}>
            <div className="ph" style={{ minHeight: 0 }}>
              <span className="ph-tag">DETAIL</span>
              <div className="ph-cap">Add a close-up photo<br/>(texture / ingredients)</div>
            </div>
            <div className="ph" style={{ minHeight: 0 }}>
              <span className="ph-tag">LIFESTYLE</span>
              <div className="ph-cap">Add a lifestyle photo<br/>(ball at a meet / practice)</div>
            </div>
          </div>
        </div>

        {/* Spec table */}
        <div style={{ marginTop: 56, display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0, border: '1px solid var(--line-strong)', borderRadius: 'var(--radius)' }}>
          {[
            ['Net weight', '1.7 oz / 48 g'],
            ['Ingredients', 'Dates, cashews'],
            ['Shelf life', 'Months at room temp'],
            ['Made in', 'Frisco, TX'],
          ].map(([k, v], i) => (
            <div key={k} style={{
              padding: 24,
              borderRight: i < 3 ? '1px solid var(--line)' : 'none',
            }}>
              <div className="uppercase mono" style={{ color: 'var(--ink-mute)' }}>{k}</div>
              <div style={{ marginTop: 8, fontFamily: 'var(--display)', fontSize: 22 }}>{v}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Nav, Hero, Marquee, Pillars, ProductShowcase, LogoMark, BallShot });
