/* CỘI — Heritage Series, Collector Vault, Pods, Sustainability, Packaging, Export pages */

const { useState: usePrem, useEffect: useEffectPrem } = React;
const { Page: PremPage_, PageHero: PremHero_ } = window.SonPage;
const { ExportMap: _ExportMap, Sustainability: _Sust, Packaging: _Packaging } = window.SonSections3;

// ============================== HERITAGE SERIES
function HeritagePage() {
  const product = window.SON_DATA.RETAIL_PRODUCTS.find(p => p.id === 'heritage');
  const [qty, setQty] = usePrem(1);
  const [added, setAdded] = usePrem(false);

  const onAdd = () => {
    window.CoiCart.add(product, qty);
    setAdded(true);
    setTimeout(() => setAdded(false), 2200);
  };

  return (
    <PremPage_ navDefaultDark={true}>
      <section className="prem-hero" data-screen-label="Heritage · Hero">
        <div className="container">
          <div className="prem-hero-grid">
            <div className="prem-hero-text reveal">
              <div className="crumbs"><a href="index.html">Home</a><span className="sep">/</span><a href="shop.html">Shop</a><span className="sep">/</span><span>Heritage Series</span></div>
              <div className="eyebrow gold" style={{ color: 'var(--gold-2)', marginTop: 24 }}>MICRO LOT · SERIALIZED · 25G</div>
              <h1 className="prem-title">The <em>Heritage</em><br/>Series.</h1>
              <p className="prem-lede">
                A single farm. A single harvest day. Twenty-five grams in a hand-blown jar, brass-capped, hand-numbered. Released once per harvest window — never repeated.
              </p>
              <div className="prem-price">
                <div className="num">$299</div>
                <div className="sm">PER 25G JAR · INCL. SIGNED ORIGIN CARD</div>
              </div>
              <div className="prem-actions">
                <button className="btn gold" onClick={onAdd}>
                  {added ? '◆ Added to bag' : <>Acquire <span className="arrow">→</span></>}
                </button>
                <div className="qty" style={{ border: '1px solid var(--paper)' }}>
                  <button onClick={() => setQty(Math.max(1, qty - 1))}>−</button>
                  <span>{qty}</span>
                  <button onClick={() => setQty(qty + 1)}>+</button>
                </div>
              </div>
              <div style={{ marginTop: 24, fontSize: 11, letterSpacing: '0.15em', textTransform: 'uppercase', opacity: 0.55 }}>
                ◆ Free worldwide shipping · Anchored receipt · 144 jars per release
              </div>
            </div>
            <div className="prem-hero-img reveal" style={{ backgroundImage: 'url(assets/coi-heritage.png)' }} />
          </div>
        </div>
      </section>

      <section className="prem-pillars" data-screen-label="Heritage · Pillars">
        <div className="container">
          <div className="prem-pillars-grid">
            <PremPillar num="01" title="Micro lot" desc="Beans are isolated by GPS plot and harvest day — never blended, never extended. A single moment in the season, jarred." />
            <PremPillar num="02" title="Serialized" desc="Each release is hand-numbered (e.g. 037 / 144). The serial is registered to your account at acquisition." />
            <PremPillar num="03" title="Signed origin card" desc="A letterpress card signed by the farmer who collected the harvest day's beans. Real ink, real paper." />
            <PremPillar num="04" title="On-chain" desc="The serial is anchored to FloraChain on release day. Provenance is verifiable for the lifetime of the chain." />
          </div>
        </div>
      </section>

      <section className="prem-detail" data-screen-label="Heritage · Spec">
        <div className="container">
          <div className="prem-detail-grid">
            <div className="reveal">
              <div className="eyebrow gold">/ SPECIFICATIONS</div>
              <h2 className="prem-h2">A document, <em>not a label.</em></h2>
              <p className="prem-p">
                Heritage releases are intended for collectors and serious cuppers. Brew with care — twenty-five grams is six to ten cups by the recipe of your choosing. Or keep it sealed. Either is correct.
              </p>
            </div>
            <div className="pf-spec reveal" style={{ marginTop: 0 }}>
              {product.specs.map((s, i) => (
                <div key={i} className="row" style={i === product.specs.length - 1 ? { borderBottom: 'none' } : {}}>
                  <span className="k">{s.k}</span>
                  <span className="v">{s.v}</span>
                </div>
              ))}
            </div>
          </div>

          <div className="prem-notes reveal" style={{ marginTop: 64 }}>
            <div className="eyebrow gold" style={{ marginBottom: 16 }}>TASTING NOTES · SPRING 2025 RELEASE</div>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 12 }}>
              {product.notes.map((n, i) => (
                <span key={i} className="prem-note-chip">{n}</span>
              ))}
            </div>
          </div>
        </div>
      </section>

      <ReleaseSchedule />
      <VaultUpsell />
    </PremPage_>
  );
}

// ============================== COLLECTOR VAULT
function VaultPage() {
  const product = window.SON_DATA.RETAIL_PRODUCTS.find(p => p.id === 'vault');
  const [requested, setRequested] = usePrem(false);

  return (
    <PremPage_ navDefaultDark={true}>
      <section className="vault-hero" data-screen-label="Vault · Hero">
        <div className="vault-hero-bg" style={{ backgroundImage: 'url(assets/coi-vault.png)' }} />
        <div className="vault-hero-veil" />
        <div className="container">
          <div className="vault-hero-content reveal">
            <div className="crumbs" style={{ marginBottom: 48 }}>
              <a href="index.html">Home</a><span className="sep">/</span>
              <a href="shop.html">Shop</a><span className="sep">/</span>
              <span>Collector Vault</span>
            </div>
            <div className="eyebrow gold" style={{ color: 'var(--gold-2)' }}>LIMITED TO 88 WORLDWIDE · NOT CONTINUOUSLY SOLD</div>
            <h1 className="vault-title">
              <em>A legacy</em><br/>
              in every<br/>
              grain.
            </h1>
            <p className="vault-lede">
              Sourced from the most exceptional harvests. Preserved in rarity. Verified in origin. Crafted not for many, but for those who understand true value. <em>This is not just coffee. This is our heritage.</em>
            </p>
            <div className="vault-price-block">
              <div className="vault-price">{product.priceRange}</div>
              <div className="vault-price-sub">PER 10G · MAHOGANY CASE · DIGITAL PASSPORT</div>
            </div>
            <div style={{ marginTop: 32 }}>
              <a href="#apply" className="btn gold">Apply for an allocation <span className="arrow">→</span></a>
            </div>
          </div>
        </div>
      </section>

      <section className="vault-inside" data-screen-label="Vault · Inside">
        <div className="container">
          <div className="section-head reveal">
            <div>
              <div className="head-num" style={{ opacity: 0.55 }}>02 — INSIDE THE BOX</div>
              <h2 style={{ fontFamily: 'var(--serif)', fontWeight: 300, fontSize: 'clamp(40px, 5vw, 72px)', lineHeight: 1, letterSpacing: '-0.02em', margin: '16px 0 0' }}>
                Six items.<br/><em style={{ fontStyle: 'italic', color: 'var(--gold-2)' }}>One legacy.</em>
              </h2>
            </div>
            <div className="head-meta">
              <p>Hand-finished in mahogany with brass hinges. The case is yours; the jar inside is documented.</p>
            </div>
          </div>

          <div className="vault-items-grid reveal">
            <VaultItem num="01" title="Brass-sealed jar" desc="10g of single-day microlot in a hand-blown matte jar with brushed brass closure. Lot CV-2024-01." />
            <VaultItem num="02" title="Digital Passport" desc="Leather-bound digital passport linked to the lot's FloraChain anchor. Open the chain by scanning the embedded NFC." />
            <VaultItem num="03" title="Certificate of Origin" desc="Hand-signed by the founder. Origin, farm, harvest, lot number, quantity. Wax-sealed envelope." />
            <VaultItem num="04" title="Farm Biography" desc="A leather-bound monograph documenting the family, the plot, and the generation behind this specific lot." />
            <VaultItem num="05" title="Harvest Journal" desc="The collector's notebook from the day this lot was foraged. Weather, foragers, route, weight at gate." />
            <VaultItem num="06" title="Collector display" desc="The mahogany case is its display. Felt-lined, brass-hinged, side-cracking. Yours to keep, signed or not." />
          </div>

          <div className="vault-images-grid reveal">
            <div className="vault-img" style={{ backgroundImage: 'url(assets/coi-vault.png)' }} />
            <div className="vault-img" style={{ backgroundImage: 'url(assets/coi-heritage.png)' }} />
          </div>
        </div>
      </section>

      <section className="vault-spec" data-screen-label="Vault · Spec">
        <div className="container">
          <div className="vault-spec-grid">
            <div className="reveal">
              <div className="eyebrow gold">/ CERTIFICATE OF ORIGIN & AUTHENTICITY</div>
              <h2 className="prem-h2">Documentation, <em>plainly.</em></h2>
              <p className="prem-p">
                Each Vault is documented at the level of an estate watch. The certificate is signed by hand and matched to the chain. We don't claim authenticity; we publish it.
              </p>
            </div>
            <div className="pf-spec reveal">
              {product.specs.map((s, i) => (
                <div key={i} className="row" style={i === product.specs.length - 1 ? { borderBottom: 'none' } : {}}>
                  <span className="k">{s.k}</span>
                  <span className="v" style={{ color: s.k === 'NUMBERED' || s.k === 'AUTHENTICATED' || s.k === 'AVAILABILITY' ? 'var(--gold-2)' : 'var(--paper)' }}>{s.v}</span>
                </div>
              ))}
            </div>
          </div>

          <div className="vault-notes reveal" style={{ marginTop: 64 }}>
            <div className="eyebrow gold" style={{ marginBottom: 16 }}>TASTING NOTES · LOT CV-2024-01</div>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 12 }}>
              {product.notes.map((n, i) => (
                <span key={i} className="prem-note-chip">{n}</span>
              ))}
            </div>
          </div>
        </div>
      </section>

      <section className="vault-apply" id="apply" data-screen-label="Vault · Apply">
        <div className="container">
          <div className="vault-apply-card reveal">
            {requested ? (
              <div style={{ textAlign: 'center', padding: 48 }}>
                <div className="eyebrow gold" style={{ color: 'var(--gold-2)' }}>◆ APPLICATION RECEIVED</div>
                <h3 style={{ fontFamily: 'var(--serif)', fontWeight: 300, fontSize: 48, margin: '16px 0' }}>
                  Thank you.
                </h3>
                <p style={{ opacity: 0.78, maxWidth: 480, margin: '0 auto' }}>
                  We hand-review every Vault application. Expect a reply within five business days. If your allocation is granted, you'll receive an invoice + scheduled delivery.
                </p>
              </div>
            ) : (
              <>
                <div className="reveal">
                  <div className="eyebrow gold" style={{ color: 'var(--gold-2)' }}>/ APPLY FOR AN ALLOCATION</div>
                  <h2 className="prem-h2" style={{ marginTop: 16 }}>Eighty-eight Vaults<br/><em>per harvest year.</em></h2>
                  <p className="prem-p" style={{ maxWidth: 480 }}>
                    Vaults are not on continuous sale. Each year, eighty-eight are released to collectors, institutions, and private clients. The form below joins the consideration list for the next allocation.
                  </p>
                </div>
                <form className="form" onSubmit={e => { e.preventDefault(); setRequested(true); }} style={{ maxWidth: 520 }}>
                  <div className="form-row"><div className="lbl">FULL NAME</div><input required placeholder="Your name" /></div>
                  <div className="form-row"><div className="lbl">EMAIL</div><input required type="email" placeholder="you@domain.com" /></div>
                  <div className="form-row">
                    <div className="lbl">INTEREST</div>
                    <select>
                      <option>Private collection</option>
                      <option>Institutional / hospitality</option>
                      <option>Gift</option>
                      <option>Press / editorial</option>
                    </select>
                  </div>
                  <div className="form-row"><div className="lbl">A FEW WORDS (OPTIONAL)</div><textarea placeholder="Anything you'd like the team to know." /></div>
                  <button type="submit" className="btn gold">Submit application <span className="arrow">→</span></button>
                </form>
              </>
            )}
          </div>
        </div>
      </section>
    </PremPage_>
  );
}

// ============================== PODS PAGE
function PodsPage() {
  const pods = window.SON_DATA.POD_PRODUCTS;
  const [added, setAdded] = usePrem(null);

  const onAdd = (p) => {
    window.CoiCart.add(p, 1);
    setAdded(p.id);
    setTimeout(() => setAdded(null), 1600);
  };

  return (
    <PremPage_ navDefaultDark={true}>
      <PremHero_
        num="01"
        eyebrow="CAPSULES & PODS"
        title={<>The pour, <em>simplified.</em></>}
        sub="Nespresso®-compatible capsules in three tiers and a fully biodegradable version. The same Cội coffee, anchored to the same ledger — pressed into the format your morning takes."
        bg="assets/coi-pods-trio.png"
      >
        <div className="crumbs"><a href="index.html">Home</a><span className="sep">/</span><span>Capsules &amp; Pods</span></div>
      </PremHero_>

      <section className="section dark" data-screen-label="Pods · Bio Feature">
        <div className="container">
          <div className="pods-feature">
            <div className="reveal" style={{ aspectRatio: '4/3', background: '#0d0a07', backgroundImage: 'url(assets/coi-pods-bio.png)', backgroundSize: 'contain', backgroundPosition: 'center', backgroundRepeat: 'no-repeat', border: '1px solid var(--line-d)' }} />
            <div className="reveal">
              <div className="eyebrow gold" style={{ color: 'var(--gold-2)' }}>◆ FEATURED · 100% COMPOSTABLE</div>
              <h2 className="prem-h2">For a better planet.<br/><em>For future generations.</em></h2>
              <p className="prem-p" style={{ maxWidth: 460 }}>
                The Bio Pod is our fully plant-based, fully compostable Nespresso-compatible capsule. Capsule, foil, box and card all return to earth within twenty-six weeks. Crafted by nature. Respected by Cội.
              </p>

              <div className="bio-claims">
                <div className="bio-claim">
                  <div className="bio-claim-icon">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.2"><path d="M12 22s-7-7-7-12a7 7 0 0114 0c0 5-7 12-7 12z M9 9c1 1 4 1 6 0" /></svg>
                  </div>
                  <div>
                    <div className="bio-claim-title">100% Compostable</div>
                    <div className="bio-claim-desc">Capsule + foil + box</div>
                  </div>
                </div>
                <div className="bio-claim">
                  <div className="bio-claim-icon">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.2"><path d="M12 4v16 M5 12c2-3 5-4 7-4 M19 12c-2-3-5-4-7-4" /></svg>
                  </div>
                  <div>
                    <div className="bio-claim-title">Plant-based material</div>
                    <div className="bio-claim-desc">Bagasse + corn-starch lid</div>
                  </div>
                </div>
                <div className="bio-claim">
                  <div className="bio-claim-icon">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.2"><path d="M5 5l14 14 M19 5L5 19" /></svg>
                  </div>
                  <div>
                    <div className="bio-claim-title">Zero plastic · zero waste</div>
                    <div className="bio-claim-desc">Industrial &amp; home compost</div>
                  </div>
                </div>
              </div>

              <div style={{ marginTop: 32, display: 'flex', gap: 12, alignItems: 'center' }}>
                <div className="pd-price" style={{ margin: 0 }}>
                  <span>$42</span>
                  <span className="small">10 PODS · GRAND RESERVE</span>
                </div>
                <button className="btn gold" onClick={() => onAdd(pods[0])}>
                  {added === pods[0].id ? '◆ Added' : <>Add to bag <span className="arrow">→</span></>}
                </button>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="section paper" data-screen-label="Pods · Range">
        <div className="container">
          <div className="section-head reveal">
            <div>
              <div className="head-num">02 — THE CAPSULE RANGE</div>
              <h2>Three tiers.<br/>Same <em style={{ fontStyle: 'italic', color: 'var(--gold)' }}>chain.</em></h2>
            </div>
            <div className="head-meta">
              <p>Reserve, Grand Reserve and Founder — pressed into aluminium Nespresso-compatible capsules. The coffee inside is exactly the same as the pouch on the next page.</p>
            </div>
          </div>

          <div className="products-grid reveal" style={{ gridTemplateColumns: 'repeat(3, 1fr)' }}>
            {pods.slice(1).map((p, i) => (
              <div className="product-card" key={p.id}>
                <div className="product-img" style={{ backgroundImage: `url(${p.img})`, backgroundSize: 'contain', backgroundColor: '#0d0a07', backgroundRepeat: 'no-repeat' }}>
                  <div className="product-badge">{p.badge}</div>
                </div>
                <div className="product-meta">/ {String(i + 2).padStart(2, '0')} · {p.region}</div>
                <div className="product-name">{p.name}</div>
                <div style={{ fontSize: 12, opacity: 0.7, marginTop: 4 }}>{p.sub}</div>
                <div className="product-price">
                  <span className="price">{p.price}</span>
                  <span className="weight">{p.weight}</span>
                </div>
                <button
                  className="btn"
                  style={{ marginTop: 16, width: '100%', justifyContent: 'center' }}
                  onClick={() => onAdd(p)}
                >
                  {added === p.id ? '◆ Added to bag' : 'Add to bag'}
                </button>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section dark" data-screen-label="Pods · Compat">
        <div className="container">
          <div className="pods-compat-grid">
            <div className="reveal">
              <div className="eyebrow gold">/ COMPATIBILITY</div>
              <h2 className="prem-h2">Fits Nespresso®.<br/>Reads <em>like</em> Cội.</h2>
              <p className="prem-p" style={{ maxWidth: 460 }}>
                Every capsule is mechanically tested against Nespresso® Original line machines. The QR on the box opens the same passport you'd find on the pouch — same farm, same harvest, same chain.
              </p>
            </div>
            <div className="pod-specs reveal">
              <div className="pf-spec" style={{ marginTop: 0 }}>
                <div className="row"><span className="k">FORMAT</span><span className="v">10 × capsules per box</span></div>
                <div className="row"><span className="k">COMPATIBILITY</span><span className="v">Nespresso® Original</span></div>
                <div className="row"><span className="k">EXTRACTION</span><span className="v">9 bar · 36ml espresso</span></div>
                <div className="row"><span className="k">SHELF</span><span className="v">9 months from pack date</span></div>
                <div className="row" style={{ borderBottom: 'none' }}><span className="k">AUTHENTICATED</span><span className="v" style={{ color: 'var(--gold-2)' }}>BLT QR on every box</span></div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </PremPage_>
  );
}

// ============================== SUSTAINABILITY PAGE
function SustainabilityPage() {
  return (
    <PremPage_ navDefaultDark={true}>
      <PremHero_
        num="01"
        eyebrow="SUSTAINABILITY"
        title={<>Crafted by nature.<br/>Respected by <em>Cội.</em></>}
        sub="Our position on animal welfare, producer parity, forest tenure, and packaging. Stated plainly, audited independently, published in full."
      >
        <div className="crumbs"><a href="index.html">Home</a><span className="sep">/</span><span>Sustainability</span></div>
      </PremHero_>
      <_Sust />

      <section className="section dark" data-screen-label="Sustainability · Bio Pod">
        <div className="container">
          <div className="pods-feature">
            <div className="reveal" style={{ aspectRatio: '4/3', background: '#0d0a07', backgroundImage: 'url(assets/coi-pods-bio.png)', backgroundSize: 'contain', backgroundPosition: 'center', backgroundRepeat: 'no-repeat', border: '1px solid var(--line-d)' }} />
            <div className="reveal">
              <div className="eyebrow gold" style={{ color: 'var(--gold-2)' }}>◆ THE BIO POD INITIATIVE</div>
              <h2 className="prem-h2">A capsule<br/>that <em>returns.</em></h2>
              <p className="prem-p" style={{ maxWidth: 460 }}>
                The Bio Pod programme replaces every aluminium capsule we ship with a fully compostable plant-based alternative. Targeted full transition by end of harvest year 2026.
              </p>
              <div style={{ marginTop: 24 }}>
                <a className="btn gold" href="pods.html">View the Bio Pods <span className="arrow">→</span></a>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="section paper" data-screen-label="Sustainability · Targets">
        <div className="container">
          <div className="section-head reveal">
            <div>
              <div className="head-num">03 — TARGETS &amp; REPORTING</div>
              <h2>Measured. <em style={{ fontStyle: 'italic', color: 'var(--gold)' }}>Published.</em></h2>
            </div>
            <div className="head-meta">
              <p>We publish a single sustainability report each harvest year, audited by a third party. Below: this year's headline targets.</p>
            </div>
          </div>
          <div className="export-stats reveal">
            <div className="stat"><div className="label">PACKAGING · COMPOST</div><div className="val">86<span className="unit">%</span></div></div>
            <div className="stat"><div className="label">PRODUCER PARITY</div><div className="val">4.7<span className="unit">× rate</span></div></div>
            <div className="stat"><div className="label">FOREST RETAINED</div><div className="val">100<span className="unit">%</span></div></div>
            <div className="stat"><div className="label">WILD-ONLY CIVET</div><div className="val">100<span className="unit">%</span></div></div>
          </div>
        </div>
      </section>
    </PremPage_>
  );
}

// ============================== PACKAGING PAGE
function PackagingPage() {
  return (
    <PremPage_ navDefaultDark={true}>
      <PremHero_
        num="01"
        eyebrow="PACKAGING"
        title={<>Hand-finished.<br/><em>Archival.</em></>}
        sub="Boxes pressed in Ho Chi Minh City. Cards letterpress-printed in Hà Nội. Wood-cased Vaults finished in Đồng Kỵ. Every layer of the package is documented."
      >
        <div className="crumbs"><a href="index.html">Home</a><span className="sep">/</span><span>Packaging</span></div>
      </PremHero_>

      <_Packaging />

      <section className="section dark" data-screen-label="Packaging · Vault">
        <div className="container">
          <div className="pods-feature">
            <div className="reveal" style={{ aspectRatio: '4/5', background: '#0a0805', backgroundImage: 'url(assets/coi-vault.png)', backgroundSize: 'contain', backgroundPosition: 'center', backgroundRepeat: 'no-repeat', border: '1px solid var(--line-d)' }} />
            <div className="reveal">
              <div className="eyebrow gold" style={{ color: 'var(--gold-2)' }}>◆ THE VAULT</div>
              <h2 className="prem-h2">A box <em>worth keeping</em><br/>after the coffee.</h2>
              <p className="prem-p" style={{ maxWidth: 460 }}>
                The Collector Vault case is finished in solid mahogany with brass hinges and brass closure. Felt-lined for the jar and the leather Digital Passport. The wax seal is set the morning of shipping.
              </p>
              <div style={{ marginTop: 24 }}>
                <a className="btn gold" href="vault.html">Inside the Vault <span className="arrow">→</span></a>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="section paper" data-screen-label="Packaging · Capsules">
        <div className="container">
          <div className="pods-feature">
            <div className="reveal">
              <div className="eyebrow gold">/ CAPSULES</div>
              <h2 className="prem-h2">Three boxes.<br/><em>Two materials.</em></h2>
              <p className="prem-p" style={{ maxWidth: 460 }}>
                The aluminium capsule line ships in offset-printed, foil-stamped boxes — the same paper stock and ink palette as the pouch program. The Bio Pod line replaces aluminium with bagasse and the foil-stamp ink with a soy alternative.
              </p>
              <div style={{ marginTop: 24 }}>
                <a className="btn solid" href="pods.html">View capsules <span className="arrow">→</span></a>
              </div>
            </div>
            <div className="reveal" style={{ aspectRatio: '4/3', background: '#0d0a07', backgroundImage: 'url(assets/coi-pods-trio.png)', backgroundSize: 'contain', backgroundPosition: 'center', backgroundRepeat: 'no-repeat' }} />
          </div>
        </div>
      </section>
    </PremPage_>
  );
}

// ============================== EXPORT PAGE
function ExportPage() {
  return (
    <PremPage_ navDefaultDark={true}>
      <PremHero_
        num="01"
        eyebrow="GLOBAL EXPORT"
        title={<>Đà Nẵng. Cát Lái.<br/>To <em>thirty-eight</em> ports.</>}
        sub="Climate-controlled freight to four continents. Customs-pre-cleared in eleven destinations. End-of-chain anchor confirms arrival, automatically."
      >
        <div className="crumbs"><a href="index.html">Home</a><span className="sep">/</span><span>Global Export</span></div>
      </PremHero_>
      <_ExportMap />

      <section className="section paper" data-screen-label="Export · Service Levels">
        <div className="container">
          <div className="section-head reveal">
            <div>
              <div className="head-num">03 — SERVICE LEVELS</div>
              <h2>Three speeds.<br/>One <em style={{ fontStyle: 'italic', color: 'var(--gold)' }}>chain.</em></h2>
            </div>
            <div className="head-meta">
              <p>Climate-controlled at every stage. End-of-chain anchor commits on arrival, automatically — your buyer knows the bag is real before it leaves the box.</p>
            </div>
          </div>

          <div className="export-tiers reveal">
            <ExportTier name="Container" lead="20-ft REEFER · 9.2 t" cadence="Quarterly" notes="Full-container export · sea freight from Cát Lái" />
            <ExportTier name="Pallet" lead="LCL · 200–1,200 kg" cadence="Monthly" notes="Bonded warehouse consolidation · sea or air" />
            <ExportTier name="Carton" lead="48 kg cases" cadence="Weekly · air" notes="DHL / FedEx priority · destination customs cleared" />
          </div>
        </div>
      </section>

      <section className="section dark" data-screen-label="Export · Pre-clearance">
        <div className="container">
          <div className="export-pre">
            <div className="reveal">
              <div className="eyebrow gold" style={{ color: 'var(--gold-2)' }}>/ PRE-CLEARED</div>
              <h2 className="prem-h2">Eleven destinations.<br/><em>Documentation</em> ready.</h2>
              <p className="prem-p" style={{ maxWidth: 460 }}>
                For these destinations Cội maintains pre-cleared phytosanitary records and current import declarations. Container delivery proceeds without import-side certification delays.
              </p>
            </div>
            <div className="reveal" style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 12 }}>
              {['UNITED STATES', 'JAPAN', 'SINGAPORE', 'UNITED KINGDOM', 'FRANCE', 'ITALY', 'GERMANY', 'AUSTRALIA', 'UAE', 'SWITZERLAND', 'SOUTH KOREA'].map(d => (
                <div key={d} style={{ padding: 16, border: '1px solid var(--line-d)', display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                  <span style={{ fontFamily: 'var(--mono)', fontSize: 12, letterSpacing: '0.1em' }}>{d}</span>
                  <span style={{ fontFamily: 'var(--mono)', fontSize: 10, color: 'var(--gold-2)' }}>◆ READY</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>
    </PremPage_>
  );
}

// ============================== Helpers
function PremPillar({ num, title, desc }) {
  return (
    <div className="prem-pillar reveal">
      <div className="prem-pillar-num">/ {num}</div>
      <div className="prem-pillar-title">{title}</div>
      <div className="prem-pillar-desc">{desc}</div>
    </div>
  );
}

function VaultItem({ num, title, desc }) {
  return (
    <div className="vault-item">
      <div className="vault-item-num">{num}</div>
      <div>
        <div className="vault-item-title">{title}</div>
        <div className="vault-item-desc">{desc}</div>
      </div>
    </div>
  );
}

function ExportTier({ name, lead, cadence, notes }) {
  return (
    <div className="export-tier">
      <div className="eyebrow gold">{name.toUpperCase()}</div>
      <div className="export-tier-lead">{lead}</div>
      <div className="export-tier-cadence">{cadence}</div>
      <div className="export-tier-notes">{notes}</div>
    </div>
  );
}

function ReleaseSchedule() {
  const rows = [
    { season: 'Spring 2025', lot: 'HS-25-S-01', state: 'Released · 144 jars · sold out', sold: true },
    { season: 'Summer 2025', lot: 'HS-25-Su-01', state: 'In production · waitlist open', sold: false },
    { season: 'Autumn 2025', lot: 'HS-25-A-01', state: 'Scheduled · September', sold: false },
    { season: 'Winter 2025/26', lot: 'HS-25-W-01', state: 'Scheduled · December', sold: false }
  ];
  return (
    <section className="section dark" data-screen-label="Heritage · Schedule">
      <div className="container">
        <div className="section-head reveal">
          <div>
            <div className="head-num">04 — RELEASE SCHEDULE</div>
            <h2>Four releases. <em style={{ fontStyle: 'italic', color: 'var(--gold-2)' }}>Per year.</em></h2>
          </div>
          <div className="head-meta">
            <p>Waitlist members are notified twenty-four hours before public release.</p>
            <a className="btn" href="#" style={{ color: 'var(--paper)', borderColor: 'var(--paper)' }}>Join the waitlist <span className="arrow">→</span></a>
          </div>
        </div>
        <table className="ledger-table reveal">
          <thead>
            <tr><th>SEASON</th><th>LOT</th><th>STATE</th><th></th></tr>
          </thead>
          <tbody>
            {rows.map(r => (
              <tr key={r.lot}>
                <td style={{ fontFamily: 'var(--serif)', fontSize: 18 }}>{r.season}</td>
                <td className="tx-hash">{r.lot}</td>
                <td style={{ color: r.sold ? 'rgba(246,241,231,0.55)' : 'var(--gold-2)' }}>{r.state}</td>
                <td style={{ textAlign: 'right' }}>{r.sold ? '—' : <a href="#" style={{ color: 'var(--gold)' }}>notify me →</a>}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </section>
  );
}

function VaultUpsell() {
  return (
    <section className="vault-upsell" data-screen-label="Heritage · Vault upsell">
      <div className="container">
        <div className="vault-upsell-inner reveal">
          <div className="vault-upsell-img" style={{ backgroundImage: 'url(assets/coi-heritage.png)' }} />
          <div>
            <div className="eyebrow gold" style={{ color: 'var(--gold-2)' }}>/ ONE STEP RARER</div>
            <h2 className="prem-h2">The <em>Collector</em> Vault.</h2>
            <p className="prem-p" style={{ maxWidth: 420 }}>
              When twenty-five grams is too many. The Collector Vault holds ten grams of single-day microlot, hand-boxed in mahogany, limited to eighty-eight worldwide.
            </p>
            <a className="btn gold" href="vault.html" style={{ marginTop: 24 }}>View the Vault <span className="arrow">→</span></a>
          </div>
        </div>
      </div>
    </section>
  );
}

window.SonPremiumPages = { HeritagePage, VaultPage, PodsPage, SustainabilityPage, PackagingPage, ExportPage };