/* SƠN — sections 5-7: Digital Passport showcase, Farms, Shop (retail+wholesale) */

const { useState: useState2, useEffect: useEffect2 } = React;

// ============================== DIGITAL PASSPORT SHOWCASE
function PassportShowcase() {
  const [flipped, setFlipped] = useState2(false);

  return (
    <section className="section tall" data-screen-label="04 Digital Passport">
      <div className="container">
        <div className="section-head reveal">
          <div>
            <div className="head-num">04 — DIGITAL COFFEE PASSPORT</div>
            <h2>A document, not<br/>a <em style={{ fontStyle: 'italic', color: 'var(--gold)' }}>marketing claim.</em></h2>
          </div>
          <div className="head-meta">
            <p>Every pouch ships with a passport-grade certificate of origin: photographic record, farmer biography, harvest narrative, roasting profile, authenticity seal. Held in your hand, anchored on chain.</p>
          </div>
        </div>

        <div className="passport-display">
          <div
            className={`passport-card-3d ${flipped ? 'flipped' : ''}`}
            onClick={() => setFlipped(!flipped)}
          >
            <div className="passport-card-inner">
              {/* FRONT */}
              <div className="passport-face front">
                <div className="passport-face-top">
                  <div>
                    <div className="brand">SƠN</div>
                    <div style={{ fontSize: 9, letterSpacing: '0.2em', opacity: 0.55, marginTop: 4 }}>
                      DIGITAL COFFEE PASSPORT
                    </div>
                  </div>
                  <div className="doc-id">
                    COI-240S<br/>
                    -LD-01227<br/>
                    <span style={{ color: 'var(--gold)' }}>◆ VERIFIED</span>
                  </div>
                </div>
                <div className="passport-photo" style={{ backgroundImage: 'url(assets/coi-bag.png)', backgroundSize: 'contain', backgroundRepeat: 'no-repeat', backgroundColor: '#0d0a07' }} />
                <div className="name">Suối Nhiêu <em>Estate</em></div>
                <div className="subname">LÂM ĐỒNG · VIETNAM · 1,200–1,500 M</div>

                <div className="passport-face-fields">
                  <div>
                    <div className="label">HARVEST</div>
                    <div className="val">18 Nov 2024</div>
                  </div>
                  <div>
                    <div className="label">CUPPING</div>
                    <div className="val">Q-grade 88.5</div>
                  </div>
                  <div>
                    <div className="label">PROCESS</div>
                    <div className="val">Wild-foraged</div>
                  </div>
                  <div>
                    <div className="label">BATCH</div>
                    <div className="val" style={{ fontFamily: 'var(--mono)', fontSize: 12 }}>250 g</div>
                  </div>
                </div>

                <div className="passport-seal">
                  AUTHENTI-<br/>CATED<br/>EST. 2008
                </div>
              </div>

              {/* BACK */}
              <div className="passport-face back">
                <div className="passport-face-top">
                  <div>
                    <div className="brand">SƠN</div>
                    <div style={{ fontSize: 9, letterSpacing: '0.2em', opacity: 0.55, marginTop: 4 }}>
                      LEDGER ENTRY · FLORACHAIN
                    </div>
                  </div>
                  <div className="doc-id">
                    BLOCK #4,847,291<br/>
                    <span style={{ color: 'var(--gold-2)' }}>◆ CONFIRMED</span>
                  </div>
                </div>

                <div className="ledger-block">
                  <div className="row">
                    <span className="k">CHAIN</span>
                    <span>flora-1 · testnet</span>
                  </div>
                  <div className="row">
                    <span className="k">BLT HASH</span>
                    <span>0xf3a8c2d4e9b1758a44e0bd91c5e6f7a2b8</span>
                  </div>
                  <div className="row">
                    <span className="k">TX</span>
                    <span>flora1tx9a8d3e2f7c1b94e</span>
                  </div>
                  <div className="row">
                    <span className="k">SIGNER</span>
                    <span>flora1guwtmal8c7n0q9ddjm6ujljzdmq47wt</span>
                  </div>
                  <div className="row">
                    <span className="k">ANCHORED</span>
                    <span>2024.12.04 · 03:41:22 UTC</span>
                  </div>
                  <div className="row">
                    <span className="k">GPS</span>
                    <span>11°56′12″N 108°27′44″E ± 1.4 m</span>
                  </div>
                  <div className="row">
                    <span className="k">PRODUCER</span>
                    <span>Trần Văn Mộc · Reg. 0247</span>
                  </div>
                </div>

                <div style={{ position: 'absolute', bottom: 32, left: 32, right: 32, display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end' }}>
                  <div>
                    <div style={{ fontSize: 9, letterSpacing: '0.2em', opacity: 0.55, marginBottom: 4 }}>SIGNATURE</div>
                    <div style={{ fontFamily: 'var(--serif)', fontSize: 22, fontStyle: 'italic', color: 'var(--gold-2)' }}>
                      Trần V. Mộc
                    </div>
                  </div>
                  <QRMark />
                </div>
              </div>
            </div>
            <div className="passport-card-flip-hint">Click to flip</div>
          </div>

          <div className="passport-desc reveal">
            <div className="eyebrow gold">PER BAG, PER BATCH, PER FARMER</div>
            <h3>Five documents,<br/>one passport.</h3>

            <ul className="passport-features">
              <li>
                <span className="feat-num">/ 01</span>
                <div className="feat-content">
                  <div className="feat-title">Origin certificate</div>
                  <div className="feat-desc">GPS plot · altitude · varietal · harvest window · weight at gate</div>
                </div>
              </li>
              <li>
                <span className="feat-num">/ 02</span>
                <div className="feat-content">
                  <div className="feat-title">Farmer biography</div>
                  <div className="feat-desc">Family history, generation, methods, signature, photograph</div>
                </div>
              </li>
              <li>
                <span className="feat-num">/ 03</span>
                <div className="feat-content">
                  <div className="feat-title">Harvest narrative</div>
                  <div className="feat-desc">Season conditions, collection log, processing record, dry curve</div>
                </div>
              </li>
              <li>
                <span className="feat-num">/ 04</span>
                <div className="feat-content">
                  <div className="feat-title">Roasting profile</div>
                  <div className="feat-desc">Roaster, batch size, time, Q-grade scorecard, panel signatures</div>
                </div>
              </li>
              <li>
                <span className="feat-num">/ 05</span>
                <div className="feat-content">
                  <div className="feat-title">Authenticity seal</div>
                  <div className="feat-desc">BLT identifier, FloraChain anchor, holographic pouch seal</div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

function QRMark() {
  // 9x9 stylized QR-corner
  const cells = [
    "111111100",
    "100000100",
    "101110100",
    "101110100",
    "101110100",
    "100000100",
    "111111100",
    "000000000",
    "001110010",
  ];
  return (
    <svg width="56" height="56" viewBox="0 0 9 9" style={{ background: 'var(--paper)', padding: 2 }}>
      {cells.map((row, y) => row.split('').map((c, x) =>
        c === '1' ? <rect key={x + '-' + y} x={x} y={y} width="1" height="1" fill="var(--ink)" /> : null
      ))}
    </svg>
  );
}

// ============================== FARM STORIES
function Farms() {
  const farms = window.SON_DATA.FARMS;
  return (
    <section className="section tall cream" id="farms" data-screen-label="05 Farms">
      <div className="container">
        <div className="section-head reveal">
          <div>
            <div className="head-num">05 — FARM STORIES</div>
            <h2>Six families.<br/>One <em style={{ fontStyle: 'italic', color: 'var(--gold)' }}>chain.</em></h2>
          </div>
          <div className="head-meta">
            <p>Our supply comes from six farms across the Central Highlands. Each is independently audited, each is registered to a named producer, each commits to BLT at the gate.</p>
            <a href="#" className="btn" style={{ marginTop: 8 }}>The full network <span className="arrow">→</span></a>
          </div>
        </div>

        <div className="farms-grid reveal">
          {farms.map((f, i) => (
            <div className="farm-card" key={f.id}>
              <div className="farm-img" style={{ backgroundImage: `url(${f.img})` }}>
                <div className="farm-overlay">
                  <div className="region">{f.region}</div>
                  <div className="alt">{f.altitude}<br/>EST. {2025 - f.years}</div>
                </div>
              </div>
              <div className="farm-meta">
                <span>/ {String(i + 1).padStart(2, '0')}</span>
                <span>{f.id}</span>
              </div>
              <div className="farm-name">{f.name}</div>
              <div style={{ fontFamily: 'var(--mono)', fontSize: 11, opacity: 0.65, marginBottom: 12 }}>
                {f.family} · {f.method}
              </div>
              <div className="farm-desc">{f.desc}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================== SHOP
function Shop({ onAddToCart }) {
  const [mode, setMode] = useState2("retail");
  const retail = window.SON_DATA.RETAIL_PRODUCTS;
  const wholesale = window.SON_DATA.WHOLESALE_TIERS;

  return (
    <section className="section tall" id="shop" data-screen-label="06 Shop">
      <div className="container">
        <div className="section-head reveal">
          <div>
            <div className="head-num">06 — SHOP</div>
            <h2>Acquire <em style={{ fontStyle: 'italic', color: 'var(--gold)' }}>a bag,</em><br/>or a container.</h2>
          </div>
          <div className="head-meta">
            <p>Single-origin reserves and limited cloud-forest microlots for the consumer. Tier-allocated supply contracts for the operator. Same farms, same ledger, same chain of custody.</p>
          </div>
        </div>

        <div className="shop-toggle reveal">
          <button className={mode === 'retail' ? 'active' : ''} onClick={() => setMode('retail')}>
            Retail
          </button>
          <button className={mode === 'wholesale' ? 'active' : ''} onClick={() => setMode('wholesale')}>
            Wholesale
          </button>
        </div>

        {mode === 'retail' ? (
          <div className="products-grid reveal">
            {retail.map((p, i) => (
              <div className="product-card" key={i}>
                <a
                  className="product-img"
                  href={`product.html?id=${p.id}`}
                  style={{
                    backgroundImage: `url(${p.img})`,
                    backgroundSize: p.imgFit === 'contain' ? 'contain' : 'cover',
                    backgroundColor: p.imgFit === 'contain' ? '#0d0a07' : 'var(--ivory)',
                    backgroundRepeat: 'no-repeat',
                    display: 'block'
                  }}
                >
                  <div className="product-badge">{p.badge}</div>
                </a>
                <div className="product-meta">/ {String(i + 1).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={() => {
                    window.CoiCart.add(p, 1);
                    onAddToCart && onAddToCart(p);
                  }}
                >
                  Add to bag
                </button>
              </div>
            ))}
          </div>
        ) : (
          <div className="reveal">
            <div className="wholesale-grid">
              {wholesale.map((w, i) => (
                <div className="wholesale-card" key={i}>
                  <div>
                    <div className="moq">{w.moq}<sup>{w.unit}</sup></div>
                    <div className="desc">
                      <strong>{w.desc}</strong>
                      {w.sub}
                    </div>
                  </div>
                  <div className="price-from">
                    <div className="label">From</div>
                    <div className="price">{w.price}</div>
                  </div>
                </div>
              ))}
            </div>
            <div style={{ marginTop: 32, display: 'flex', gap: 12, justifyContent: 'flex-end' }}>
              <a className="btn" href="#wholesale">MOQ calculator <span className="arrow">→</span></a>
              <a className="btn solid" href="#wholesale">Book global supply call <span className="arrow">→</span></a>
            </div>
          </div>
        )}
      </div>
    </section>
  );
}

window.SonSections2 = { PassportShowcase, Farms, Shop };