// Regions page with map + Article + Shop + Advertise
// Exports: window.Regions, window.Article, window.Shop, window.Advertise

/* ==================== REGIONS ==================== */
function Regions({ onNav }) {
  const D = window.TX_DATA;
  const [selected, setSelected] = React.useState('texas-hill-country');
  const cur = D.avas.find(a => a.id === selected);

  // Map coords: convert lat/lng roughly to SVG coordinates within Texas bbox
  // Texas bbox: lat 25.8–36.5, lng -106.7 to -93.5
  const toXY = (lat, lng) => {
    const x = ((lng + 106.7) / (106.7 - 93.5)) * 800;
    const y = ((36.5 - lat) / (36.5 - 25.8)) * 780;
    return [x, y];
  };

  return (
    <main className="container" style={{ paddingTop: 48, paddingBottom: 64 }}>
      <div className="section-label">The Atlas</div>
      <div style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr', gap: 32, alignItems: 'end', marginBottom: 40 }}>
        <h1 className="h-display" style={{ fontSize: 'clamp(48px, 6vw, 92px)' }}>Eight AVAs.<br/>One enormous state.</h1>
        <p className="lede">
          Texas has more land area than France. Its eight federally recognized
          American Viticultural Areas span from the Rio Grande to the Red River,
          from sea level to 4,500 feet. Select a region to read the field notes.
        </p>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 40, alignItems: 'start' }}>
        {/* Map */}
        <div style={{ background: 'var(--paper)', border: '1px solid var(--rule)', padding: 24, position: 'sticky', top: 80 }}>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.1em', color: 'var(--ink-mute)', marginBottom: 12, display: 'flex', justifyContent: 'space-between' }}>
            <span>TEXAS · AVA OVERLAY</span>
            <span>SCALE 1:5,000,000</span>
          </div>
          <svg viewBox="0 0 800 780" style={{ width: '100%', height: 'auto', background: 'var(--page-bg)' }}>
            <path d="
              M 55 325 L 70 280 L 95 225 L 130 195 L 180 165 L 235 140 L 280 130 L 320 120 L 360 115 L 400 118
              L 435 125 L 470 135 L 510 145 L 545 150 L 580 148 L 615 145 L 640 150 L 660 170 L 680 195 L 700 230
              L 720 275 L 735 325 L 745 375 L 750 425 L 745 475 L 735 520 L 720 560 L 700 595 L 675 625
              L 645 650 L 610 670 L 570 680 L 525 685 L 480 680 L 440 670 L 400 655 L 365 635 L 335 610
              L 310 580 L 285 545 L 260 505 L 235 470 L 210 440 L 180 415 L 150 395 L 120 375 L 90 355 L 55 325 Z
            " fill="var(--chip)" stroke="var(--ink-soft)" strokeWidth="1.5" />

            {D.avas.map(a => {
              const [x, y] = toXY(a.lat, a.lng);
              const active = a.id === selected;
              return (
                <g key={a.id} style={{ cursor: 'pointer' }} onClick={() => setSelected(a.id)}>
                  <circle cx={x} cy={y} r={active ? 22 : 14}
                    fill={active ? 'var(--accent)' : 'var(--paper)'}
                    stroke={active ? 'var(--accent)' : 'var(--ink)'} strokeWidth="2" opacity="0.92" />
                  <circle cx={x} cy={y} r="3" fill={active ? 'var(--paper)' : 'var(--ink)'} />
                  <text x={x + 20} y={y + 4}
                    style={{ fontFamily: 'var(--font-mono)', fontSize: 11, fontWeight: active ? 700 : 500, letterSpacing: '0.05em' }}
                    fill="var(--ink)">
                    {a.short.toUpperCase()}
                  </text>
                </g>
              );
            })}

            <g transform="translate(60, 700)">
              <circle cx="10" cy="10" r="6" fill="var(--accent)" />
              <text x="24" y="14" style={{ fontFamily: 'var(--font-mono)', fontSize: 11 }} fill="var(--ink-soft)">Selected AVA</text>
              <circle cx="150" cy="10" r="6" fill="var(--paper)" stroke="var(--ink)" />
              <text x="164" y="14" style={{ fontFamily: 'var(--font-mono)', fontSize: 11 }} fill="var(--ink-soft)">Other AVAs</text>
            </g>
          </svg>
        </div>

        {/* Detail */}
        <div>
          <div style={{ borderTop: '2px solid var(--ink)', paddingTop: 18 }}>
            <div className="kicker">AVA · EST. {cur.established}</div>
            <h2 className="h-display" style={{ fontSize: 'clamp(36px, 4vw, 56px)', marginTop: 10 }}>{cur.name}</h2>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 17, lineHeight: 1.6, color: 'var(--ink-soft)' }}>{cur.blurb}</p>
          </div>

          <div style={{ borderTop: '1px solid var(--rule)', marginTop: 28, paddingTop: 24 }}>
            <h4 className="kicker" style={{ marginBottom: 14 }}>Field Notes</h4>
            <dl style={{ fontFamily: 'var(--font-body)', fontSize: 15, margin: 0 }}>
              {[
                ['Counties', cur.counties],
                ['Total acreage', cur.acres],
                ['Elevation', cur.elevation],
                ['Soil', cur.soil],
                ['Climate', cur.climate],
                ['Bonded wineries', cur.wineries],
              ].map(([k,v]) => (
                <div key={k} style={{ display: 'flex', justifyContent: 'space-between', padding: '10px 0', borderBottom: '1px dotted var(--rule)' }}>
                  <dt style={{ color: 'var(--ink-mute)' }}>{k}</dt>
                  <dd style={{ margin: 0, color: 'var(--ink)', fontWeight: 500 }}>{v}</dd>
                </div>
              ))}
            </dl>
          </div>

          <div style={{ marginTop: 24 }}>
            <h4 className="kicker" style={{ marginBottom: 14 }}>Signature grapes</h4>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
              {cur.signature.map(g => <span key={g} className="chip">{g}</span>)}
            </div>
          </div>

          <div style={{ marginTop: 28, padding: 24, background: 'var(--chip)' }}>
            <div className="kicker" style={{ marginBottom: 8 }}>In this AVA</div>
            <div style={{ fontFamily: 'var(--font-body)', lineHeight: 1.8, fontSize: 14 }}>
              {D.wineries.filter(w => w.ava === cur.id).slice(0, 5).map(w => (
                <div key={w.id} onClick={() => onNav('winery', w.id)} style={{ cursor: 'pointer' }}>
                  · {w.name} <span style={{ color: 'var(--ink-mute)' }}>· {w.town}</span>
                </div>
              ))}
            </div>
            <button className="btn btn-ghost" style={{ marginTop: 16, padding: '8px 14px', fontSize: 11 }}
              onClick={() => onNav('directory')}>Browse all →</button>
          </div>
        </div>
      </div>

      {/* AVA strip */}
      <div style={{ marginTop: 72 }}>
        <div className="section-label">Cross-Reference</div>
        <h3 className="h2" style={{ marginBottom: 24 }}>Every Texas AVA at a glance.</h3>
        <table style={{ width: '100%', borderCollapse: 'collapse', fontFamily: 'var(--font-body)', fontSize: 14 }}>
          <thead>
            <tr style={{ borderBottom: '2px solid var(--ink)' }}>
              {['AVA', 'Established', 'Counties', 'Elevation', 'Wineries', 'Signature'].map(h => (
                <th key={h} style={{ textAlign: 'left', padding: '12px 10px', fontFamily: 'var(--font-ui)', fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--ink-mute)' }}>{h}</th>
              ))}
            </tr>
          </thead>
          <tbody>
            {D.avas.map(a => (
              <tr key={a.id} onClick={() => setSelected(a.id)} style={{ borderBottom: '1px solid var(--rule)', cursor: 'pointer', background: selected === a.id ? 'var(--chip)' : 'transparent' }}>
                <td style={{ padding: '14px 10px', fontFamily: 'var(--font-display)', fontSize: 17, fontWeight: 600 }}>{a.name}</td>
                <td style={{ padding: '14px 10px', color: 'var(--ink-soft)' }}>{a.established}</td>
                <td style={{ padding: '14px 10px', color: 'var(--ink-soft)' }}>{a.counties}</td>
                <td style={{ padding: '14px 10px', color: 'var(--ink-soft)' }}>{a.elevation}</td>
                <td style={{ padding: '14px 10px', color: 'var(--ink-soft)' }}>{a.wineries}</td>
                <td style={{ padding: '14px 10px', color: 'var(--ink-soft)', fontStyle: 'italic' }}>{a.signature.slice(0,2).join(', ')}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </main>
  );
}

/* ==================== ARTICLE ==================== */
/* Now parameterized by articleId prop, renders body[] from data.js */

const articleStyles = {
  body:     { fontFamily: 'var(--font-body)', fontSize: 18, lineHeight: 1.75, color: 'var(--ink)' },
  firstP:   { fontSize: 22, lineHeight: 1.6, marginTop: 0 },
  p:        { margin: '24px 0' },
  dropcap:  { fontFamily: 'var(--font-display)', fontSize: 72, lineHeight: 0.8, float: 'left', marginRight: 10, marginTop: 6, color: 'var(--accent)', fontWeight: 700 },
  h2:       { fontFamily: 'var(--font-display)', fontSize: 36, lineHeight: 1.1, margin: '48px 0 18px', letterSpacing: '-0.02em' },
  quote:    { borderLeft: '4px solid var(--accent)', paddingLeft: 24, margin: '36px 0', fontFamily: 'var(--font-display)', fontSize: 28, lineHeight: 1.3, fontStyle: 'italic', color: 'var(--ink)' },
  quoteAttr:{ fontFamily: 'var(--font-ui)', fontSize: 13, fontStyle: 'normal', color: 'var(--ink-mute)', marginTop: 12, letterSpacing: '0.08em', textTransform: 'uppercase' },
  pull:     { fontFamily: 'var(--font-display)', fontSize: 32, lineHeight: 1.2, fontStyle: 'italic', color: 'var(--accent)', textAlign: 'center', margin: '48px 0', padding: '0 40px', letterSpacing: '-0.015em' },
};

function renderArticleBody(body) {
  let firstParaSeen = false;
  return body.map((node, i) => {
    if (node.type === 'p') {
      const isFirst = !firstParaSeen;
      firstParaSeen = true;
      const baseStyle = { ...articleStyles.p, ...(isFirst ? articleStyles.firstP : {}) };

      // Dropcap paragraphs split the first letter so we can style it separately
      if (node.dropcap) {
        const first = node.text[0];
        const rest = node.text.slice(1);
        return (
          <p key={i} style={baseStyle}>
            <span style={articleStyles.dropcap}>{first}</span>
            <span dangerouslySetInnerHTML={{ __html: rest }} />
          </p>
        );
      }
      return <p key={i} style={baseStyle} dangerouslySetInnerHTML={{ __html: node.text }} />;
    }
    if (node.type === 'h2') {
      return <h2 key={i} style={articleStyles.h2}>{node.text}</h2>;
    }
    if (node.type === 'quote') {
      return (
        <blockquote key={i} style={articleStyles.quote}>
          "{node.text}"
          {node.attr && <footer style={articleStyles.quoteAttr}>— {node.attr}</footer>}
        </blockquote>
      );
    }
    if (node.type === 'pull') {
      return <p key={i} style={articleStyles.pull}>"{node.text}"</p>;
    }
    return null;
  });
}

function Article({ onNav, articleId }) {
  const D = window.TX_DATA;
  const a = D.articles.find(x => x.id === articleId) || D.articles[0];

  // Articles without body content fall back to a "coming soon" treatment
  const hasBody = Array.isArray(a.body) && a.body.length > 0;

  // Continue-reading rail: 3 other articles that have bodies, preferred
  const others = D.articles.filter(x => x.id !== a.id);
  const continueReading = [
    ...others.filter(x => x.body),
    ...others.filter(x => !x.body),
  ].slice(0, 3);

  return (
    <main>
      <div className="container-narrow" style={{ paddingTop: 48, paddingBottom: 16 }}>
        <div className="section-label">The Journal · {a.kicker}</div>
        <h1 className="h-display" style={{ fontSize: 'clamp(40px, 5.5vw, 80px)', marginBottom: 24 }}>{a.title}</h1>
        <p className="lede" style={{ fontSize: 22, color: 'var(--ink-soft)', marginBottom: 32 }}>{a.dek}</p>
        <div style={{ display: 'flex', gap: 24, fontFamily: 'var(--font-ui)', fontSize: 13, color: 'var(--ink-mute)', paddingBottom: 24, borderBottom: '1px solid var(--rule)' }}>
          <span>By <strong style={{ color: 'var(--ink)' }}>{a.author}</strong></span>
          <span>{a.date}</span>
          <span>{a.read} min read</span>
        </div>
      </div>

      <div className="container" style={{ paddingTop: 32, paddingBottom: 32 }}>
        <window.Ph label={a.hero + ' · lead image'} aspect="21/9" style={{ height: 500 }} />
        <div style={{ textAlign: 'center', fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--ink-mute)', marginTop: 10, letterSpacing: '0.1em' }}>
          {a.kicker.toUpperCase()} · PHOTO: PLACEHOLDER CREDIT
        </div>
      </div>

      <article className="container-narrow" style={{ paddingBottom: 80, ...articleStyles.body }}>
        {hasBody ? renderArticleBody(a.body) : (
          <div style={{ padding: 32, background: 'var(--chip)', border: '1px dashed var(--rule)', textAlign: 'center', fontFamily: 'var(--font-body)' }}>
            <div style={{ fontFamily: 'var(--font-display)', fontSize: 24, color: 'var(--ink-soft)', marginBottom: 8 }}>This piece is in production.</div>
            <p style={{ color: 'var(--ink-mute)', fontSize: 14, margin: 0 }}>
              The Journal publishes new editorial monthly. Subscribe to the newsletter to be notified when "{a.title}" goes live.
            </p>
          </div>
        )}
      </article>

      <div className="container" style={{ paddingBottom: 80 }}>
        <div className="section-label">Continue reading</div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
          {continueReading.map(x => (
            <article key={x.id} onClick={() => onNav('article', x.id)} style={{ cursor: 'pointer' }}>
              <window.Ph label={x.hero} aspect="4/3" />
              <div className="kicker" style={{ marginTop: 14 }}>{x.kicker} · {x.read} min</div>
              <h4 style={{ fontFamily: 'var(--font-display)', fontSize: 22, margin: '8px 0 8px', lineHeight: 1.2, letterSpacing: '-0.01em' }}>{x.title}</h4>
              <p style={{ fontSize: 14, color: 'var(--ink-soft)', margin: 0, fontFamily: 'var(--font-body)' }}>{x.dek.slice(0, 110)}…</p>
            </article>
          ))}
        </div>
      </div>
    </main>
  );
}

/* ==================== SHOP ==================== */
function Shop({ onNav }) {
  const D = window.TX_DATA;
  const [type, setType] = React.useState('all');
  const [sort, setSort] = React.useState('featured');

  const filtered = D.bottles.filter(b => {
    if (type === 'red' && !b.type.toLowerCase().includes('red')) return false;
    if (type === 'white' && !b.type.toLowerCase().includes('white')) return false;
    return true;
  });

  return (
    <main className="container" style={{ paddingTop: 48, paddingBottom: 64 }}>
      <div className="section-label">The Cellar</div>
      <div style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr', gap: 48, alignItems: 'end', marginBottom: 40 }}>
        <h1 className="h-display" style={{ fontSize: 'clamp(48px, 6vw, 92px)' }}>Curated by us.<br/>Shipped by them.</h1>
        <p className="lede">
          Every bottle in the Cellar comes directly from the winery. We curate
          the list, coordinate the order, and the producers ship to you. 42
          states plus DC.
        </p>
      </div>

      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', borderTop: '1px solid var(--rule)', borderBottom: '1px solid var(--rule)', padding: '14px 0', marginBottom: 32 }}>
        <div style={{ display: 'flex', gap: 6 }}>
          {[
            { v: 'all', l: 'All bottles' },
            { v: 'red', l: 'Red' },
            { v: 'white', l: 'White' },
            { v: 'cases', l: 'Curated cases' },
            { v: 'club', l: 'Texan Club' },
          ].map(o => (
            <button key={o.v}
              className={`opt`}
              style={{
                padding: '8px 14px', border: '1px solid var(--rule)',
                background: type === o.v ? 'var(--ink)' : 'transparent',
                color: type === o.v ? 'var(--paper)' : 'var(--ink-soft)',
                fontFamily: 'var(--font-ui)', fontSize: 12, cursor: 'pointer', borderRadius: 'var(--radius)',
              }}
              onClick={() => setType(o.v)}>
              {o.l}
            </button>
          ))}
        </div>
        <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
          <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--ink-mute)' }}>{filtered.length} BOTTLES</span>
          <select value={sort} onChange={e => setSort(e.target.value)} style={{ ...fieldStyle, width: 180, padding: '8px 12px' }}>
            <option value="featured">Sort: Featured</option>
            <option>Price: low to high</option>
            <option>Price: high to low</option>
            <option>Rating</option>
            <option>New arrivals</option>
          </select>
        </div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 32 }}>
        {filtered.map(b => <BottleCard key={b.id} b={b} />)}
      </div>

      <div style={{ marginTop: 80, padding: '48px 40px', background: 'var(--paper)', border: '1px solid var(--rule)', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 48, alignItems: 'center' }}>
        <div>
          <div className="section-label">The Texan Club</div>
          <h2 className="h2">Six bottles, four times a year.</h2>
          <p style={{ fontFamily: 'var(--font-body)', fontSize: 16, color: 'var(--ink-soft)', lineHeight: 1.6, marginTop: 16 }}>
            A quarterly shipment curated around a theme — vintage, region, or
            variety. Members get first access to limited releases and library
            wines, plus an essay in every box.
          </p>
          <div style={{ display: 'flex', gap: 12, marginTop: 24 }}>
            <button className="btn">Join the club · $185/qtr</button>
            <button className="btn btn-ghost">How it works</button>
          </div>
        </div>
        <window.Ph label="Club shipment box" aspect="4/3" />
      </div>
    </main>
  );
}

function BottleCard({ b }) {
  return (
    <article style={{ background: 'var(--paper)', border: '1px solid var(--rule)', padding: 24 }}>
      <div style={{ height: 220, background: 'var(--chip)', display: 'flex', alignItems: 'flex-end', justifyContent: 'center', position: 'relative', overflow: 'hidden' }}>
        <div style={{
          width: 70, height: 200, background: 'var(--accent)',
          borderRadius: '4px 4px 2px 2px', position: 'relative',
          boxShadow: 'inset 0 0 0 4px rgba(0,0,0,0.15)',
        }}>
          <div style={{ position: 'absolute', top: '32%', left: 4, right: 4, bottom: '22%', background: 'var(--paper)', fontFamily: 'var(--font-display)', fontSize: 8, display: 'flex', alignItems: 'center', justifyContent: 'center', textAlign: 'center', padding: 4, color: 'var(--ink)' }}>
            {b.producer.split(' ').slice(0, 2).map(s => s[0]).join('')}
          </div>
        </div>
      </div>
      <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--ink-mute)', letterSpacing: '0.1em', textTransform: 'uppercase', marginTop: 18 }}>
        {b.producer} · {b.vintage}
      </div>
      <h4 style={{ fontFamily: 'var(--font-display)', fontSize: 20, margin: '6px 0 8px', letterSpacing: '-0.01em' }}>{b.name}</h4>
      <p style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: 'var(--ink-soft)', lineHeight: 1.5, margin: '0 0 16px' }}>{b.notes}</p>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', paddingTop: 14, borderTop: '1px solid var(--rule)' }}>
        <span style={{ fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 600 }}>${b.price}</span>
        <button className="btn" style={{ padding: '8px 14px', fontSize: 10 }}>Add to cart</button>
      </div>
    </article>
  );
}

/* ==================== ADVERTISE ==================== */
function Advertise({ onNav }) {
  return (
    <main>
      <div className="container" style={{ paddingTop: 56, paddingBottom: 40 }}>
        <div className="section-label">Partnerships</div>
        <div style={{ display: 'grid', gridTemplateColumns: '1.6fr 1fr', gap: 56, alignItems: 'end' }}>
          <h1 className="h-display" style={{ fontSize: 'clamp(48px, 7vw, 112px)' }}>
            Reach the readers<br/>who actually visit.
          </h1>
          <p className="lede">
            Wines of Texas is read by travelers planning trips, locals booking
            tastings, and trade buyers tracking the state. We offer four
            sponsorship formats — all editorially vetted, all tastefully executed.
          </p>
        </div>

        {/* Two-audience switch: wineries → Plans; hospitality/tourism → this page */}
        <div style={{ marginTop: 32, padding: '20px 24px', background: 'var(--chip)', borderLeft: '3px solid var(--accent)', display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 24 }}>
          <div style={{ fontFamily: 'var(--font-body)', fontSize: 15, color: 'var(--ink-soft)', lineHeight: 1.5 }}>
            <strong style={{ color: 'var(--ink)' }}>Are you a Texas winery?</strong> This page is for hospitality, tourism, and lifestyle brands. To upgrade or claim your winery listing, see our Plans.
          </div>
          <button className="btn btn-ghost" onClick={() => onNav('plans')} style={{ whiteSpace: 'nowrap' }}>
            View listing plans →
          </button>
        </div>
      </div>

      {/* Audience — placeholder copy until we have real numbers to publish.
          When the site is generating traffic, replace this block with actual
          analytics from Vercel / Cloudflare. */}
      <div className="container" style={{ paddingBottom: 56 }}>
        <div style={{
          padding: '40px 32px', border: '1px dashed var(--rule)', background: 'var(--paper)',
          display: 'grid', gridTemplateColumns: '1fr auto', gap: 32, alignItems: 'center',
        }}>
          <div>
            <div className="kicker" style={{ marginBottom: 10 }}>Audience</div>
            <div style={{ fontFamily: 'var(--font-display)', fontSize: 28, lineHeight: 1.25, color: 'var(--ink)', marginBottom: 8 }}>
              We're new. So are our numbers — and we'd rather show real ones than borrowed ones.
            </div>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 15, color: 'var(--ink-soft)', margin: 0, lineHeight: 1.55, maxWidth: '60ch' }}>
              Wines of Texas launched in 2026 as the only editorial-grade directory of every Texas winery. Our audience is travelers planning trips, locals booking tastings, and trade buyers tracking the state. Ask us for a current media kit — we'll send you real-time analytics, audience demographics, and case studies as they accumulate.
            </p>
          </div>
          <a href="mailto:[email protected]?subject=Media%20kit%20request" className="btn" style={{ whiteSpace: 'nowrap' }}>
            Request media kit →
          </a>
        </div>
      </div>

      {/* Formats */}
      <div className="container" style={{ paddingBottom: 64 }}>
        <div className="section-label">Sponsorship Formats</div>
        <h2 className="h1" style={{ marginBottom: 40, maxWidth: 18 + 'ch' }}>Four ways to show up.</h2>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 28 }}>
          {[
            { label: '01', name: 'Spotlight Sponsorship', price: 'From $1,200/mo', desc: 'A full-width editorial placement on the homepage, plus category-page presence for the duration. Your story, told in our voice — or yours. Distinct from our winery listing tiers; intended for tourism boards, hospitality, and lifestyle brands.', best: 'Regional tourism boards, hotel groups, hospitality brands.' },
            { label: '02', name: 'Sponsored Article', price: 'From $4,500/piece', desc: 'Long-form editorial produced by our writing desk, clearly labeled as sponsored. Lives on the site indefinitely; distributed once in the weekly newsletter.', best: 'Brands with a story that benefits from the long form.' },
            { label: '03', name: 'Banner Units', price: 'From $28 CPM', desc: 'Tastefully integrated display advertising. Served on article pages, the directory, and regional hubs. No tracking pixels. No pop-ups.', best: 'Wine tech, hospitality brands, regional tourism.' },
            { label: '04', name: 'Event Promotion', price: 'From $600/event', desc: 'Calendar placement, weekend-guide inclusion, and a dedicated email blast. Ideal for festivals, release weekends, and pop-ups.', best: 'Winery events, festivals, trail passports.' },
          ].map(f => (
            <article key={f.label} style={{ padding: 32, border: '1px solid var(--rule)', background: 'var(--paper)' }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'start' }}>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 48, color: 'var(--accent)', lineHeight: 1, fontWeight: 700 }}>{f.label}</div>
                <span className="chip">{f.price}</span>
              </div>
              <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 30, margin: '20px 0 12px', letterSpacing: '-0.015em' }}>{f.name}</h3>
              <p style={{ fontSize: 15, lineHeight: 1.55, color: 'var(--ink-soft)', fontFamily: 'var(--font-body)' }}>{f.desc}</p>
              <div style={{ marginTop: 20, paddingTop: 16, borderTop: '1px dotted var(--rule)' }}>
                <div className="kicker" style={{ marginBottom: 6 }}>Best for</div>
                <div style={{ fontFamily: 'var(--font-body)', fontSize: 14, color: 'var(--ink)', fontStyle: 'italic' }}>{f.best}</div>
              </div>
            </article>
          ))}
        </div>
      </div>

      {/* Inquiry form */}
      <div style={{ background: 'var(--ink)', color: 'var(--paper)', padding: '72px 0' }}>
        <div className="container" style={{ display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 64 }}>
          <div>
            <div className="section-label" style={{ color: 'rgba(255,255,255,0.5)' }}>Start a conversation</div>
            <h2 className="h1" style={{ color: 'var(--paper)' }}>Tell us what you're pouring.</h2>
            <p style={{ fontSize: 16, opacity: 0.75, lineHeight: 1.6, marginTop: 16, fontFamily: 'var(--font-body)' }}>
              We'll follow up within two business days with a plan tailored to
              your release calendar, budget, and audience goals. No sales pitch
              — just an honest read on whether we're a fit.
            </p>
            <div style={{ marginTop: 32, fontFamily: 'var(--font-body)', fontSize: 14, opacity: 0.6, lineHeight: 1.8 }}>
              <div>partnerships@winesoftexas.com</div>
              <div>(512) 555–0142</div>
              <div>Austin · Fredericksburg</div>
            </div>
          </div>
          <form onSubmit={e => e.preventDefault()} style={{ display: 'grid', gap: 14 }}>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
              <AdField label="Your name" />
              <AdField label="Brand or organization" />
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
              <AdField label="Email" />
              <AdField label="Phone" />
            </div>
            <AdField label="Interested in" placeholder="e.g. Sponsored Article + Event Promotion" />
            <AdField label="Tell us about your goals" textarea />
            <button className="btn" style={{ background: 'var(--paper)', color: 'var(--ink)', borderColor: 'var(--paper)', justifySelf: 'start', marginTop: 4 }}>
              Send inquiry →
            </button>
          </form>
        </div>
      </div>
    </main>
  );
}

function AdField({ label, textarea, placeholder }) {
  const s = {
    width: '100%', padding: '12px 14px', fontSize: 14,
    border: '1px solid rgba(255,255,255,0.22)',
    background: 'transparent', color: 'var(--paper)',
    borderRadius: 'var(--radius)', fontFamily: 'var(--font-ui)',
  };
  return (
    <label>
      <div style={{ fontFamily: 'var(--font-ui)', fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', opacity: 0.55, marginBottom: 6, fontWeight: 600 }}>{label}</div>
      {textarea
        ? <textarea rows="4" placeholder={placeholder} style={s} />
        : <input placeholder={placeholder} style={s} />}
    </label>
  );
}

Object.assign(window, { Regions, Article, Shop, Advertise });