// Wines of Texas — Homepage (three aesthetic variants)
// Exports: window.Home

function Home({ state, onNav }) {
  const { theme, density, hero, showCommerce, showAds, showNewsletter, showEditorial } = state;
  const D = window.TX_DATA;
  const compact = density === 'compact';

  const heroBlock = (
    <HomeHero theme={theme} hero={hero} onNav={onNav} />
  );

  return (
    <main>
      {heroBlock}
      <StatsStrip theme={theme} />
      <RegionsBlock onNav={onNav} theme={theme} />
      {showEditorial && <EditorialBlock onNav={onNav} theme={theme} compact={compact} />}
      {showCommerce && <CommerceBlock onNav={onNav} theme={theme} />}
      <TrailsBlock theme={theme} />
      <GrapePrimer theme={theme} />
      <EventsBlock theme={theme} />
      {showAds && <AdSlot theme={theme} />}
      {showNewsletter && <NewsletterBlock theme={theme} />}
    </main>
  );
}

/* ---------- Hero: three layouts ---------- */
function HomeHero({ theme, hero, onNav }) {
  if (hero === 'poster') return <HeroPoster theme={theme} onNav={onNav} />;
  if (hero === 'data') return <HeroData theme={theme} onNav={onNav} />;
  return <HeroSplit theme={theme} onNav={onNav} />;
}

function HeroSplit({ theme, onNav }) {
  return (
    <section className="container" style={{ paddingTop: 64, paddingBottom: 64 }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1.25fr 1fr', gap: 56, alignItems: 'end' }}>
        <div>
          <div className="section-label">Vol. 01 · The Spring Issue</div>
          <h1 className="h-display">
            The complete<br/>guide to<br/><em style={{ color: 'var(--accent)', fontStyle: 'italic' }}>Texas wine.</em>
          </h1>
          <p className="lede" style={{ marginTop: 28 }}>
            Eight appellations. Five hundred and thirty wineries. A Mediterranean
            climate hiding in the middle of North America. We cover it all — the
            producers, the places, and the bottles worth seeking out.
          </p>
          <div style={{ display: 'flex', gap: 12, marginTop: 32 }}>
            <button className="btn" onClick={() => onNav('directory')}>Browse wineries →</button>
            <button className="btn btn-ghost" onClick={() => onNav('regions')}>Explore regions</button>
          </div>
        </div>
        <div>
          <Ph label="hero · vineyard at golden hour · hill country" aspect="4/5" />
          <div style={{ marginTop: 12, display: 'flex', justifyContent: 'space-between', fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--ink-mute)' }}>
            <span>30.24°N · 98.87°W</span>
            <span>FREDERICKSBURG AVA</span>
          </div>
        </div>
      </div>
    </section>
  );
}

function HeroPoster({ theme, onNav }) {
  return (
    <section style={{ position: 'relative', padding: '48px 32px 72px' }}>
      <div style={{ position: 'relative', maxWidth: 1280, margin: '0 auto', aspectRatio: '16/9', minHeight: 520 }}>
        <Ph label="hero · full-bleed · vineyard panorama" aspect="16/9" style={{ position: 'absolute', inset: 0 }} />
        <div style={{
          position: 'absolute', inset: 0,
          background: 'linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.55) 70%, rgba(0,0,0,0.85) 100%)',
        }} />
        <div style={{ position: 'absolute', left: 40, right: 40, bottom: 40, color: '#fff' }}>
          <div className="kicker" style={{ color: 'rgba(255,255,255,0.75)', marginBottom: 16 }}>Volume One · Spring 2026</div>
          <h1 className="h-display" style={{ color: '#fff', maxWidth: 18 + 'ch' }}>
            Eight regions.<br/>One state.<br/>Endless bottles.
          </h1>
          <div style={{ display: 'flex', gap: 12, marginTop: 28 }}>
            <button className="btn" style={{ background: '#fff', color: '#111', borderColor: '#fff' }}
              onClick={() => onNav('directory')}>Browse wineries</button>
            <button className="btn btn-ghost" style={{ color: '#fff', borderColor: 'rgba(255,255,255,0.5)' }}
              onClick={() => onNav('regions')}>Explore the map</button>
          </div>
        </div>
      </div>
    </section>
  );
}

function HeroData({ theme, onNav }) {
  const D = window.TX_DATA;
  return (
    <section className="container" style={{ paddingTop: 48, paddingBottom: 48 }}>
      <div style={{ border: '1px solid var(--rule)', background: 'var(--paper)', padding: '32px 40px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr', gap: 48, alignItems: 'start' }}>
          <div>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', color: 'var(--ink-mute)', textTransform: 'uppercase' }}>
              TX-ALMANAC · APRIL 2026 · ENTRY NO. 01
            </div>
            <h1 className="h-display" style={{ marginTop: 16 }}>
              A field guide to<br/>the wines of Texas.
            </h1>
            <p className="lede" style={{ marginTop: 20 }}>
              Maps, data, and dispatches on America's fifth-largest wine state.
              Built for tourists planning trips, locals exploring tasting rooms,
              and anyone curious how a Mediterranean climate ended up between
              Austin and the Panhandle.
            </p>
            <div style={{ display: 'flex', gap: 12, marginTop: 24 }}>
              <button className="btn" onClick={() => onNav('regions')}>Open the atlas →</button>
              <button className="btn btn-ghost" onClick={() => onNav('article')}>Read the journal</button>
            </div>
          </div>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 13, lineHeight: 1.8 }}>
            {[
              ['AVAs', D.stats.avas],
              ['Wineries', D.stats.wineries],
              ['Texas grapes in TX wine', D.stats.vintageGrapes],
              ['US rank', '5th largest'],
              ['Annual impact', D.stats.economicImpact],
            ].map(([k,v]) => (
              <div key={k} style={{ display: 'flex', justifyContent: 'space-between', borderBottom: '1px dotted var(--rule)', padding: '6px 0' }}>
                <span style={{ color: 'var(--ink-mute)' }}>{k}</span>
                <span style={{ color: 'var(--ink)', fontWeight: 600 }}>{v}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- Stats strip ---------- */
function StatsStrip({ theme }) {
  const D = window.TX_DATA;
  // 843 = ground truth from TABC G-permit roster, May 2026.
  // "Licensed wineries" is the accurate framing — it's the legal universe.
  const items = [
    { k: D.stats.wineries + '+', v: 'Licensed wineries' },
    { k: D.stats.avas.toString(), v: 'Federally recognized AVAs' },
    { k: D.stats.vintageGrapes, v: 'Grapes from the High Plains' },
    { k: '5th', v: 'U.S. wine-producing state' },
  ];
  return (
    <section className="container" style={{ paddingBottom: 40 }}>
      <div style={{
        display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)',
        borderTop: '1px solid var(--rule)', borderBottom: '1px solid var(--rule)',
      }}>
        {items.map((s, i) => (
          <div key={s.k} style={{
            padding: '28px 24px',
            borderLeft: i > 0 ? '1px solid var(--rule)' : 'none',
          }}>
            <div style={{
              fontFamily: 'var(--font-display)',
              fontSize: 'clamp(32px, 4vw, 56px)',
              fontWeight: 700, lineHeight: 1,
              color: 'var(--accent)',
              letterSpacing: '-0.02em',
            }}>{s.k}</div>
            <div style={{ fontFamily: 'var(--font-ui)', fontSize: 12, color: 'var(--ink-mute)', marginTop: 10, letterSpacing: '0.08em', textTransform: 'uppercase', fontWeight: 600 }}>
              {s.v}
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

/* ---------- Regions block ---------- */
function RegionsBlock({ onNav, theme }) {
  const avas = window.TX_DATA.avas.slice(0, 4);
  return (
    <section className="container" style={{ paddingTop: 64, paddingBottom: 64 }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 32 }}>
        <div>
          <div className="section-label">The Regions</div>
          <h2 className="h1" style={{ maxWidth: 16 + 'ch' }}>Eight appellations, one state.</h2>
        </div>
        <button className="btn btn-ghost" onClick={() => onNav('regions')}>See all 8 AVAs →</button>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 20 }}>
        {avas.map(a => (
          <article key={a.id} onClick={() => onNav('regions')}
            style={{ cursor: 'pointer', background: 'var(--paper)', border: '1px solid var(--rule)', borderRadius: 'var(--radius)', padding: 20 }}>
            <Ph label={`map · ${a.short}`} aspect="4/3" />
            <div style={{ marginTop: 14, fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--ink-mute)', letterSpacing: '0.14em' }}>
              EST. {a.established} · {a.wineries} WINERIES
            </div>
            <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 22, margin: '8px 0 10px', letterSpacing: '-0.01em' }}>{a.name}</h3>
            <p style={{ fontSize: 14, lineHeight: 1.5, color: 'var(--ink-soft)', margin: 0 }}>{a.blurb.split('.')[0]}.</p>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginTop: 14 }}>
              {a.signature.slice(0,3).map(g => <span key={g} className="chip">{g}</span>)}
            </div>
          </article>
        ))}
      </div>
    </section>
  );
}

/* ---------- Editorial / featured journal ---------- */
function EditorialBlock({ onNav, theme, compact }) {
  const [lead, ...rest] = window.TX_DATA.articles;
  return (
    <section className="container" style={{ paddingTop: 64, paddingBottom: 64 }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 32 }}>
        <div>
          <div className="section-label">The Journal</div>
          <h2 className="h1">Dispatches from the vine.</h2>
        </div>
        <button className="btn btn-ghost" onClick={() => onNav('article')}>All stories →</button>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 48 }}>
        <article onClick={() => onNav('article')} style={{ cursor: 'pointer' }}>
          <Ph label={lead.hero} aspect="16/10" />
          <div style={{ marginTop: 18, display: 'flex', gap: 16, alignItems: 'center' }}>
            <span className="chip" style={{ background: 'var(--accent)', color: 'var(--paper)' }}>{lead.kicker}</span>
            <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--ink-mute)' }}>
              {lead.read} MIN READ · {lead.date.toUpperCase()}
            </span>
          </div>
          <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(28px, 3vw, 42px)', margin: '14px 0 10px', lineHeight: 1.1, letterSpacing: '-0.02em' }}>
            {lead.title}
          </h3>
          <p style={{ fontSize: 17, lineHeight: 1.55, color: 'var(--ink-soft)', fontFamily: 'var(--font-body)' }}>{lead.dek}</p>
          <div style={{ marginTop: 10, fontSize: 13, color: 'var(--ink-mute)', fontFamily: 'var(--font-ui)' }}>By {lead.author}</div>
        </article>
        <div style={{ borderLeft: '1px solid var(--rule)', paddingLeft: 32 }}>
          {rest.map((a, i) => (
            <article key={a.id} onClick={() => onNav('article')} style={{ cursor: 'pointer', borderBottom: i < rest.length - 1 ? '1px solid var(--rule)' : 'none', padding: '18px 0', display: 'grid', gridTemplateColumns: compact ? '1fr' : '1.8fr 1fr', gap: 16, alignItems: 'start' }}>
              <div>
                <div className="kicker" style={{ marginBottom: 8 }}>{a.kicker} · {a.read} min</div>
                <h4 style={{ fontFamily: 'var(--font-display)', fontSize: 19, margin: '0 0 8px', lineHeight: 1.2, letterSpacing: '-0.01em' }}>{a.title}</h4>
                <p style={{ fontSize: 13, color: 'var(--ink-mute)', margin: 0, fontFamily: 'var(--font-body)' }}>{a.dek.slice(0, 100)}…</p>
              </div>
              {!compact && <Ph label={a.hero} aspect="1/1" />}
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- Commerce ---------- */
function CommerceBlock({ onNav, theme }) {
  const picks = window.TX_DATA.bottles.slice(0, 4);
  return (
    <section style={{ background: 'var(--paper)', borderTop: '1px solid var(--rule)', borderBottom: '1px solid var(--rule)', padding: '72px 0' }}>
      <div className="container">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 32 }}>
          <div>
            <div className="section-label">The Cellar</div>
            <h2 className="h1">This month's pours.</h2>
            <p className="lede" style={{ marginTop: 16 }}>A rotating selection of bottles we're drinking right now, shipped direct to 42 states.</p>
          </div>
          <button className="btn" onClick={() => onNav('shop')}>Shop the cellar →</button>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24 }}>
          {picks.map(b => (
            <article key={b.id} style={{ cursor: 'pointer' }} onClick={() => onNav('shop')}>
              <div style={{ background: 'var(--page-bg)', padding: 24, aspectRatio: '3/4', display: 'flex', alignItems: 'end', justifyContent: 'center' }}>
                <div style={{
                  width: 70, height: '85%', background: 'var(--accent)',
                  borderRadius: '6px 6px 2px 2px',
                  boxShadow: 'inset 0 0 0 4px rgba(0,0,0,0.15), 0 8px 24px rgba(0,0,0,0.12)',
                  position: 'relative',
                }}>
                  <div style={{ position: 'absolute', top: '30%', left: 4, right: 4, bottom: '20%', background: 'var(--paper)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--font-display)', fontSize: 9, textAlign: 'center', color: 'var(--ink)', padding: 4, lineHeight: 1.1 }}>
                    {b.producer}
                  </div>
                </div>
              </div>
              <div style={{ marginTop: 14 }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--ink-mute)' }}>
                  <span>{b.ava}</span>
                  <span>{b.rating} PTS</span>
                </div>
                <h4 style={{ fontFamily: 'var(--font-display)', fontSize: 17, margin: '6px 0 2px', letterSpacing: '-0.01em' }}>{b.producer} · {b.name}</h4>
                <div style={{ fontSize: 13, color: 'var(--ink-mute)', fontFamily: 'var(--font-body)' }}>{b.vintage} · {b.type}</div>
                <div style={{ marginTop: 10, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                  <span style={{ fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 600 }}>${b.price}</span>
                  <button className="btn" style={{ padding: '6px 14px', fontSize: 11 }}>Add</button>
                </div>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- Trails ---------- */
function TrailsBlock({ theme }) {
  const trails = [
    { name: 'Highway 290 Wine Road', region: 'Fredericksburg', stops: 54, time: '3 days', note: 'The spine of Hill Country tasting-room density.' },
    { name: 'Lubbock Uncorked', region: 'High Plains', stops: 12, time: '1 day', note: 'The growing heart of Texas, between cotton fields.' },
    { name: 'Cross Timbers Trail', region: 'North Texas', stops: 18, time: '2 days', note: 'Oak savannahs and heritage hybrids.' },
  ];
  return (
    <section className="container" style={{ paddingTop: 64, paddingBottom: 64 }}>
      <div className="section-label">Wine Trails</div>
      <h2 className="h1" style={{ marginBottom: 32 }}>Plan the weekend.</h2>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
        {trails.map(t => (
          <article key={t.name} style={{ padding: 28, border: '1px solid var(--rule)', borderRadius: 'var(--radius)', background: 'var(--paper)' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--ink-mute)', letterSpacing: '0.1em' }}>
              <span>{t.region.toUpperCase()}</span>
              <span>{t.stops} STOPS · {t.time.toUpperCase()}</span>
            </div>
            <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 28, margin: '14px 0 10px', letterSpacing: '-0.015em' }}>{t.name}</h3>
            <p style={{ fontSize: 15, lineHeight: 1.5, color: 'var(--ink-soft)', margin: 0, fontFamily: 'var(--font-body)' }}>{t.note}</p>
            <button className="btn btn-ghost" style={{ marginTop: 20, padding: '8px 16px', fontSize: 11 }}>Open itinerary →</button>
          </article>
        ))}
      </div>
    </section>
  );
}

/* ---------- Grape primer ---------- */
function GrapePrimer({ theme }) {
  const grapes = window.TX_DATA.grapes.slice(0, 8);
  return (
    <section style={{ background: 'var(--paper)', borderTop: '1px solid var(--rule)', borderBottom: '1px solid var(--rule)', padding: '72px 0' }}>
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 48, alignItems: 'start' }}>
          <div style={{ position: 'sticky', top: 80 }}>
            <div className="section-label">Grape Primer</div>
            <h2 className="h1">The varieties that thrive.</h2>
            <p className="lede" style={{ marginTop: 20 }}>
              Texas has largely left Napa-model Cabernet behind. The state's future
              is Mediterranean — heat-loving grapes from Spain, the Rhône, and
              southern Italy, with a handful of native-adapted hybrids along the Gulf.
            </p>
          </div>
          <div>
            <table style={{ width: '100%', borderCollapse: 'collapse', fontFamily: 'var(--font-body)' }}>
              <thead>
                <tr style={{ borderBottom: '2px solid var(--ink)' }}>
                  {['Variety', 'Color', 'Origin', 'Character', 'Status'].map(h => (
                    <th key={h} style={{ textAlign: 'left', padding: '10px 8px', fontFamily: 'var(--font-ui)', fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--ink-mute)' }}>{h}</th>
                  ))}
                </tr>
              </thead>
              <tbody>
                {grapes.map(g => (
                  <tr key={g.name} style={{ borderBottom: '1px solid var(--rule)' }}>
                    <td style={{ padding: '14px 8px', fontFamily: 'var(--font-display)', fontSize: 18, fontWeight: 600, letterSpacing: '-0.01em' }}>{g.name}</td>
                    <td style={{ padding: '14px 8px' }}>
                      <span style={{ display: 'inline-block', width: 10, height: 10, borderRadius: '50%', background: g.type === 'red' ? '#6b1818' : '#e0d28a', border: '1px solid rgba(0,0,0,0.2)' }} />
                    </td>
                    <td style={{ padding: '14px 8px', fontSize: 13, color: 'var(--ink-soft)' }}>{g.origin}</td>
                    <td style={{ padding: '14px 8px', fontSize: 13, color: 'var(--ink-soft)', fontStyle: 'italic' }}>{g.character}</td>
                    <td style={{ padding: '14px 8px' }}><span className="chip">{g.status}</span></td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- Events ---------- */
function EventsBlock({ theme }) {
  const evs = window.TX_DATA.events;
  return (
    <section className="container" style={{ paddingTop: 64, paddingBottom: 64 }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'end', marginBottom: 32 }}>
        <div>
          <div className="section-label">Upcoming</div>
          <h2 className="h1">On the calendar.</h2>
        </div>
        <button className="btn btn-ghost">Full calendar →</button>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0, border: '1px solid var(--rule)', background: 'var(--paper)' }}>
        {evs.map((e, i) => (
          <article key={e.id} style={{
            padding: 24,
            borderRight: (i+1) % 3 !== 0 ? '1px solid var(--rule)' : 'none',
            borderBottom: i < evs.length - 3 ? '1px solid var(--rule)' : 'none',
            display: 'grid', gridTemplateColumns: 'auto 1fr', gap: 18, alignItems: 'start',
          }}>
            <div style={{ textAlign: 'center', padding: 10, border: '1px solid var(--ink)', minWidth: 64 }}>
              <div style={{ fontFamily: 'var(--font-ui)', fontSize: 10, letterSpacing: '0.18em', color: 'var(--accent)', fontWeight: 700 }}>{e.month}</div>
              <div style={{ fontFamily: 'var(--font-display)', fontSize: 28, fontWeight: 700, lineHeight: 1 }}>{e.day}</div>
            </div>
            <div>
              <div className="kicker" style={{ marginBottom: 6 }}>{e.tag}</div>
              <h4 style={{ fontFamily: 'var(--font-display)', fontSize: 18, margin: '0 0 6px', letterSpacing: '-0.01em' }}>{e.name}</h4>
              <div style={{ fontSize: 13, color: 'var(--ink-mute)', fontFamily: 'var(--font-body)' }}>{e.town}, Texas</div>
            </div>
          </article>
        ))}
      </div>
    </section>
  );
}

/* ---------- Ad slot (tasteful) ---------- */
function AdSlot({ theme }) {
  return (
    <section className="container" style={{ paddingTop: 32, paddingBottom: 32 }}>
      <div style={{
        border: '1px dashed var(--rule)',
        padding: '10px 24px 10px 10px',
        display: 'grid', gridTemplateColumns: '180px 1fr auto', gap: 24, alignItems: 'center',
        background: 'var(--paper)',
      }}>
        <Ph label="sponsor photo" aspect="3/2" />
        <div>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', color: 'var(--ink-mute)', textTransform: 'uppercase', marginBottom: 6 }}>
            PRESENTED BY · WILLIAM CHRIS VINEYARDS
          </div>
          <h4 style={{ fontFamily: 'var(--font-display)', fontSize: 20, margin: '0 0 6px', letterSpacing: '-0.01em' }}>
            Spring release tasting · May 10–11
          </h4>
          <p style={{ fontSize: 13, color: 'var(--ink-soft)', margin: 0, fontFamily: 'var(--font-body)' }}>
            First look at the 2023 estate bottlings. Hye, Texas. Members preview Saturday.
          </p>
        </div>
        <button className="btn btn-ghost">Reserve →</button>
      </div>
    </section>
  );
}

/* ---------- Newsletter ---------- */
function NewsletterBlock({ theme }) {
  return (
    <section className="container" style={{ paddingTop: 48, paddingBottom: 48 }}>
      <div style={{
        background: 'var(--ink)', color: 'var(--paper)',
        padding: '56px 48px', borderRadius: 'var(--radius-lg)',
        display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 48, alignItems: 'center',
      }}>
        <div>
          <div className="section-label" style={{ color: 'rgba(255,255,255,0.5)' }}>The Bulletin</div>
          <h2 className="h1" style={{ color: 'var(--paper)' }}>One email, every Thursday.</h2>
          <p style={{ fontSize: 16, opacity: 0.75, marginTop: 16, lineHeight: 1.55, fontFamily: 'var(--font-body)' }}>
            Tasting notes, winery openings, release calendars, and the occasional
            essay. Free. Never more than once a week.
          </p>
        </div>
        <form onSubmit={e => e.preventDefault()} style={{ display: 'flex', gap: 8 }}>
          <input placeholder="your@email.com" style={{
            flex: 1, padding: '14px 16px', fontSize: 14,
            border: '1px solid rgba(255,255,255,0.25)',
            background: 'transparent', color: 'var(--paper)',
            borderRadius: 'var(--radius)',
            fontFamily: 'var(--font-ui)',
          }} />
          <button className="btn" style={{ background: 'var(--paper)', color: 'var(--ink)', borderColor: 'var(--paper)' }}>Subscribe</button>
        </form>
      </div>
    </section>
  );
}

window.Home = Home;