/* CỘI — Farms, Process, About, Press, Docs, Contact */

const { useState: useInfo, useEffect: useEffectInfo, useRef: useRefInfo } = React;
const { Page: InfoPage_, PageHero: InfoHero_ } = window.SonPage;
const { Farms: _Farms } = window.SonSections2;
const { Process: _Process } = window.SonSections1;
const { Sustainability: _Sust, FounderNote: _FN } = window.SonSections3;

// ============================== FARMS PAGE
function FarmsPage() {
  return (
    <InfoPage_ navDefaultDark={true}>
      <InfoHero_
        num="01"
        eyebrow="THE NETWORK"
        title={<>Six families.<br/><em>One ledger.</em></>}
        sub="Cội works with six families across the Central Highlands and Central Coast. Suối Nhiêu is our anchor estate; the other five contribute single-origin and cooperative microlots."
      >
        <div className="crumbs"><a href="index.html">Home</a><span className="sep">/</span><span>Farms</span></div>
      </InfoHero_>
      <_Farms />
      <FarmStats />
    </InfoPage_>
  );
}

function FarmStats() {
  return (
    <section className="section dark" data-screen-label="Farms · Stats">
      <div className="container">
        <div className="section-head reveal">
          <div>
            <div className="head-num">02 — BY THE NUMBERS</div>
            <h2>The network, <em style={{ fontStyle: 'italic', color: 'var(--gold-2)' }}>plainly stated.</em></h2>
          </div>
          <div className="head-meta">
            <p>Updated quarterly. Independently audited annually.</p>
          </div>
        </div>
        <div className="export-stats reveal">
          <div className="stat"><div className="label">FARMS</div><div className="val">6</div></div>
          <div className="stat"><div className="label">FAMILIES</div><div className="val">6<span className="unit">multi-gen.</span></div></div>
          <div className="stat"><div className="label">HECTARES</div><div className="val">214</div></div>
          <div className="stat"><div className="label">FORAGERS</div><div className="val">147</div></div>
        </div>
      </div>
    </section>
  );
}

// ============================== PROCESS PAGE
function ProcessPage() {
  return (
    <InfoPage_ navDefaultDark={true}>
      <InfoHero_
        num="01"
        eyebrow="PROCESS"
        title={<>From <em>cherry</em> to cup.</>}
        sub="Eight stages, each independently recorded. No stage is invisible. No batch enters the chain without all eight."
      >
        <div className="crumbs"><a href="index.html">Home</a><span className="sep">/</span><span>Process</span></div>
      </InfoHero_>
      <_Process />
      <_Sust />
    </InfoPage_>
  );
}

// ============================== ABOUT PAGE
function AboutPage() {
  return (
    <InfoPage_ navDefaultDark={true}>
      <InfoHero_
        num="01"
        eyebrow="ABOUT CỘI"
        title={<>Every cup<br/>has <em>roots.</em></>}
        sub="Cội (root, source) is a verified Vietnamese origin coffee company. Founded in 2008 at Suối Nhiêu Estate in Lâm Đồng, we built the first end-to-end BLT-anchored civet coffee supply chain in 2019."
      >
        <div className="crumbs"><a href="index.html">Home</a><span className="sep">/</span><span>About</span></div>
      </InfoHero_>

      <section className="section paper" data-screen-label="About · Story">
        <div className="container">
          <div className="section-head reveal">
            <div>
              <div className="head-num">02 — STORY</div>
              <h2>2008. <em style={{ fontStyle: 'italic', color: 'var(--gold)' }}>One farm.</em></h2>
            </div>
            <div className="head-meta">
              <p>Suối Nhiêu Estate has been a working coffee farm since 1962. In 2008 the Trần family converted it to wild-foraged civet production — the first registered estate of its kind in Lâm Đồng. In 2019 we anchored every harvest to FloraChain.</p>
              <p style={{ opacity: 0.65 }}>Today the network includes six farms, supplying retail and wholesale buyers in 38 ports across 4 continents.</p>
            </div>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 32 }} className="reveal">
            {[
              { year: '1962', title: 'Suối Nhiêu founded', desc: 'Trần family converts ancestral mountain plot to coffee.' },
              { year: '2008', title: 'CỘI registered', desc: 'First civet-coffee registration in Lâm Đồng. Wild-only standard adopted.' },
              { year: '2019', title: 'BLT anchored', desc: 'Every harvest committed to FloraChain. End-to-end traceability live.' },
              { year: '2024', title: 'Network at six', desc: 'Six estates, 147 foragers, 38 export ports, four continents.' }
            ].map((t, i) => (
              <div key={i} style={{ paddingTop: 32, borderTop: '1px solid var(--line)' }}>
                <div style={{ fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.2em', color: 'var(--gold)' }}>{t.year}</div>
                <div style={{ fontFamily: 'var(--serif)', fontSize: 22, fontWeight: 400, lineHeight: 1.2, margin: '12px 0 8px' }}>{t.title}</div>
                <div style={{ fontSize: 13, opacity: 0.75, lineHeight: 1.55 }}>{t.desc}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <_FN />

      <section className="section paper" data-screen-label="About · Team">
        <div className="container">
          <div className="section-head reveal">
            <div>
              <div className="head-num">04 — TEAM</div>
              <h2>The <em style={{ fontStyle: 'italic', color: 'var(--gold)' }}>signatories.</em></h2>
            </div>
            <div className="head-meta">
              <p>Every batch is signed by a named producer. The team below is publicly accountable for every BLT entry.</p>
            </div>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 48 }} className="reveal">
            {[
              { name: 'Trần Văn Mộc', role: 'Founder · Suối Nhiêu Estate', sig: 'Trần V. Mộc' },
              { name: 'Nguyễn Thị Hoà', role: 'Cooperative Lead · Hoà Khê', sig: 'Nguyễn T. Hoà' },
              { name: 'Lê Quang Tâm', role: 'Q-Grader · Roasting', sig: 'Lê Q. Tâm' },
              { name: 'Mai Bảo Linh', role: 'Head of Export', sig: 'Mai B. Linh' }
            ].map((p, i) => (
              <div key={i}>
                <div style={{ aspectRatio: '4/5', background: 'var(--ivory)', marginBottom: 16, position: 'relative', overflow: 'hidden' }}>
                  <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(20,17,13,0.1), rgba(20,17,13,0.5))' }} />
                  <div style={{
                    position: 'absolute', bottom: 16, left: 16,
                    fontFamily: 'var(--serif)', fontSize: 28, fontStyle: 'italic', color: 'var(--gold-2)'
                  }}>{p.sig}</div>
                </div>
                <div style={{ fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.18em', opacity: 0.6 }}>/ 0{i + 1}</div>
                <div style={{ fontFamily: 'var(--serif)', fontSize: 22, fontWeight: 400, marginTop: 4 }}>{p.name}</div>
                <div style={{ fontSize: 12, opacity: 0.65, marginTop: 4 }}>{p.role}</div>
              </div>
            ))}
          </div>
        </div>
      </section>
    </InfoPage_>
  );
}

// ============================== PRESS PAGE
function PressPage() {
  const articles = [
    { pub: 'MONOCLE · ISSUE 178', headline: 'Inside the Vietnamese civet coffee that fixed its own provenance crisis', date: 'NOVEMBER 2024' },
    { pub: 'FINANCIAL TIMES · HOW TO SPEND IT', headline: 'The new traceability standard for luxury commodities', date: 'OCTOBER 2024' },
    { pub: 'WALLPAPER*', headline: 'Letterpress, gold-foil, and a block-explorer: the packaging of CỘI', date: 'SEPTEMBER 2024' },
    { pub: 'PUNCH', headline: '"Every cup has roots" — the editorial behind the Reserve Collection', date: 'AUGUST 2024' },
    { pub: 'BLOOMBERG PURSUITS', headline: 'A $264-per-kilogram cup, and what the buyer is actually paying for', date: 'JULY 2024' },
    { pub: 'KINFOLK · ISSUE 52', headline: 'Six families, six altitudes, one ledger', date: 'JUNE 2024' }
  ];
  return (
    <InfoPage_ navDefaultDark={true}>
      <InfoHero_
        num="01"
        eyebrow="PRESS"
        title={<>Selected <em>writing.</em></>}
        sub="A small selection of recent press. For media enquiries, full press kit, or imagery, contact press@coi.vn — we respond within 48 hours."
      >
        <div className="crumbs"><a href="index.html">Home</a><span className="sep">/</span><span>Press</span></div>
      </InfoHero_>

      <section className="section paper" data-screen-label="Press · Cards">
        <div className="container">
          <div className="press-grid reveal">
            {articles.map((a, i) => (
              <div className="press-card" key={i}>
                <div className="pub">{a.pub}</div>
                <div className="headline">{a.headline}</div>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginTop: 16 }}>
                  <span className="date">{a.date}</span>
                  <span style={{ color: 'var(--gold)', fontFamily: 'var(--mono)', fontSize: 11 }}>READ →</span>
                </div>
              </div>
            ))}
          </div>

          <div style={{ marginTop: 64, padding: 48, background: 'var(--ink)', color: 'var(--paper)', textAlign: 'center' }} className="reveal">
            <div className="eyebrow gold" style={{ color: 'var(--gold-2)' }}>◆ MEDIA KIT</div>
            <h3 style={{ fontFamily: 'var(--serif)', fontWeight: 300, fontSize: 40, margin: '16px 0' }}>
              Full press kit · imagery · brand assets
            </h3>
            <p style={{ opacity: 0.75, maxWidth: 480, margin: '0 auto 24px' }}>
              High-resolution photography, the brand guide, and farmer biographies in editable formats.
            </p>
            <a className="btn gold">Request press kit <span className="arrow">→</span></a>
          </div>
        </div>
      </section>
    </InfoPage_>
  );
}

// ============================== DOCS PAGE
function DocsPage() {
  const [active, setActive] = useInfo('overview');
  useEffectInfo(() => {
    const onScroll = () => {
      const sections = ['overview', 'blt', 'florachain', 'integration', 'public-ledger', 'sla'];
      for (const id of sections) {
        const el = document.getElementById(id);
        if (!el) continue;
        const top = el.getBoundingClientRect().top;
        if (top < 200) setActive(id);
      }
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <InfoPage_ navDefaultDark={true}>
      <InfoHero_
        num="01"
        eyebrow="DOCUMENTATION"
        title={<>The <em>protocol.</em></>}
        sub="BLT (BloomBridge Ledger Technology), the FloraChain anchor, and the public-ledger integration. Everything required for partners to verify, audit, or build against the chain."
      >
        <div className="crumbs"><a href="index.html">Home</a><span className="sep">/</span><span>Documentation</span></div>
      </InfoHero_>

      <section className="section paper" data-screen-label="Docs">
        <div className="container">
          <div style={{ display: 'grid', gridTemplateColumns: '240px 1fr', gap: 96 }}>
            <nav className="docs-toc">
              <div className="eyebrow gold" style={{ marginBottom: 16 }}>/ CONTENTS</div>
              {[
                { id: 'overview', label: 'Overview' },
                { id: 'blt', label: 'BLT Protocol' },
                { id: 'florachain', label: 'FloraChain' },
                { id: 'integration', label: 'Integration' },
                { id: 'public-ledger', label: 'Public Ledger' },
                { id: 'sla', label: 'SLA · Uptime' }
              ].map(t => (
                <a key={t.id} href={`#${t.id}`} className={active === t.id ? 'active' : ''}>{t.label}</a>
              ))}
            </nav>

            <div className="docs-body">
              <h2 id="overview">Overview</h2>
              <p>CỘI operates a two-layer verification system. The producer-facing layer is BLT (BloomBridge Ledger Technology) — a permissioned write-only registry recording origin, processing, and signatory data per batch. The public-facing layer is FloraChain — a Cosmos SDK chain (chain ID <code>flora-1</code>) that anchors a hash of every BLT entry, providing immutable third-party verification.</p>
              <p>Every CỘI batch, from cherry collection through final pack, produces exactly one BLT record and one FloraChain anchor.</p>

              <h2 id="blt">BLT Protocol</h2>
              <p>BLT is a CosmWasm contract running on FloraChain at:</p>
              <pre>flora14hj2tavq8fpesdwxxcu44rty3hh90vhujrvcmstl4zr3txmfvw9squtmry</pre>
              <h3>Record fields</h3>
              <p>Each BLT record contains: <code>batch_id</code>, <code>farm_id</code>, <code>producer_pubkey</code>, <code>producer_signature</code>, <code>gps_plot</code>, <code>altitude_m</code>, <code>harvest_date</code>, <code>process_record</code>, <code>roast_profile</code>, <code>q_grade</code>, <code>weight_kg</code>, <code>content_hash</code>, and a timestamp.</p>
              <h3>Signing</h3>
              <p>The producer signs the record with their registered keypair. The signature is verified on-chain before the contract emits the anchor event.</p>

              <h2 id="florachain">FloraChain</h2>
              <p>FloraChain is a Cosmos SDK chain with CosmWasm enabled. Network parameters:</p>
              <pre>{`Chain ID:    flora-1
RPC:         wss://testnet-gateway.metaflora.xyz
REST:        https://testnet-gateway.metaflora.xyz/api
Denom:       uflora (6 decimals)
Bech32:      flora`}</pre>
              <p>Public anchoring is open — any node can verify a BLT record by querying the CỘI contract on FloraChain. No CỘI server is in the verification path.</p>

              <h2 id="integration">Integration</h2>
              <p>Partners verify a batch with a single HTTPS GET:</p>
              <pre>{`GET https://testnet-gateway.metaflora.xyz/api/cosmwasm/wasm/v1/
    contract/{coi_contract}/smart/{base64({"batch":{"id":"COI-..."}})}`}</pre>
              <p>The response is the full BLT record, signed by the producer and timestamped by the chain. Response time is typically sub-500ms.</p>

              <h2 id="public-ledger">Public Ledger</h2>
              <p>The public ledger viewer at <a href="ledger.html" style={{ color: 'var(--gold)' }}>ledger.html</a> renders the most recent 100 anchors with batch ID, farm, block height, and transaction hash. Every row links to the underlying FloraChain block explorer.</p>

              <h2 id="sla">SLA · Uptime</h2>
              <p>Network uptime: 99.95% over the last 12 months. RPC latency: P50 220ms, P95 480ms. For commercial partners requiring tighter guarantees, contact <a href="contact.html" style={{ color: 'var(--gold)' }}>partners@coi.vn</a>.</p>
            </div>
          </div>
        </div>
      </section>
    </InfoPage_>
  );
}

// ============================== CONTACT PAGE
function ContactPage() {
  const [submitted, setSubmitted] = useInfo(false);
  return (
    <InfoPage_ navDefaultDark={true}>
      <InfoHero_
        num="01"
        eyebrow="CONTACT"
        title={<>Reach the <em>farm.</em></>}
        sub="General enquiries, wholesale, press, partnerships. The team responds within one business day."
      >
        <div className="crumbs"><a href="index.html">Home</a><span className="sep">/</span><span>Contact</span></div>
      </InfoHero_>

      <section className="section paper" data-screen-label="Contact">
        <div className="container">
          <div className="contact-grid">
            <div className="contact-info reveal">
              <div className="block">
                <div className="label">VIETNAM · ORIGIN</div>
                <div className="val">
                  Suối Nhiêu Estate<br/>
                  Đà Lạt, Lâm Đồng 670000<br/>
                  Việt Nam
                  <span className="mono">+84 263 6543 200</span>
                </div>
              </div>
              <div className="block">
                <div className="label">EXPORT · HCMC</div>
                <div className="val">
                  Cội Export Office<br/>
                  Cát Lái Port District 2<br/>
                  Ho Chi Minh City
                  <span className="mono">export@coi.vn</span>
                </div>
              </div>
              <div className="block">
                <div className="label">PRESS · PARTNERSHIPS</div>
                <div className="val">
                  press@coi.vn<br/>
                  partners@coi.vn
                  <span className="mono">+84 28 3823 1100</span>
                </div>
              </div>
              <div className="block">
                <div className="label">VERIFICATION SUPPORT</div>
                <div className="val">
                  verify@coi.vn
                  <span className="mono">For BLT or FloraChain<br/>queries, 24/7.</span>
                </div>
              </div>
            </div>

            <div className="reveal">
              {submitted ? (
                <div style={{ padding: 64, border: '1px solid var(--line)', textAlign: 'center' }}>
                  <div className="eyebrow gold">◆ MESSAGE RECEIVED</div>
                  <h3 style={{ fontFamily: 'var(--serif)', fontWeight: 300, fontSize: 40, margin: '16px 0' }}>
                    Thank you.
                  </h3>
                  <p style={{ opacity: 0.7 }}>We'll be in touch within one business day.</p>
                </div>
              ) : (
                <form className="form" onSubmit={e => { e.preventDefault(); setSubmitted(true); }}>
                  <div className="form-row"><div className="lbl">NAME</div><input required placeholder="Your full name" /></div>
                  <div className="form-row"><div className="lbl">EMAIL</div><input required type="email" placeholder="you@company.com" /></div>
                  <div className="form-row">
                    <div className="lbl">TOPIC</div>
                    <select>
                      <option>General enquiry</option>
                      <option>Wholesale / RFQ</option>
                      <option>Press / Media</option>
                      <option>Verification support</option>
                      <option>Partnerships</option>
                    </select>
                  </div>
                  <div className="form-row"><div className="lbl">MESSAGE</div><textarea required placeholder="How can we help?" /></div>
                  <div><button type="submit" className="btn solid">Send <span className="arrow">→</span></button></div>
                </form>
              )}
            </div>
          </div>
        </div>
      </section>
    </InfoPage_>
  );
}

window.SonInfoPages = { FarmsPage, ProcessPage, AboutPage, PressPage, DocsPage, ContactPage };