/* SƠN — sections 8-12: Wholesale dashboard, Export map, Sustainability, Packaging, Verify-a-bag, Footer */

const { useState: useState3, useMemo: useMemo3, useEffect: useEffect3 } = React;

// ============================== WHOLESALE DASHBOARD
function WholesaleDashboard() {
  const inv = window.SON_DATA.INVENTORY_ROWS;

  return (
    <section className="section tall dark" id="wholesale" data-screen-label="07 Wholesale">
      <div className="container">
        <div className="section-head reveal">
          <div>
            <div className="head-num">07 — WHOLESALE COMMAND CENTER</div>
            <h2>Allocation,<br/>at <em style={{ fontStyle: 'italic', color: 'var(--gold-2)' }}>institutional</em> scale.</h2>
          </div>
          <div className="head-meta">
            <p>Live inventory across the network. Lead-time, container capacity, origin allocation and verification status — visible to your buyer the moment they sign in.</p>
            <p style={{ opacity: 0.55 }}>Demo dataset shown. Production accounts query against live FloraChain state.</p>
          </div>
        </div>

        <div className="dashboard reveal">
          <div className="dashboard-head">
            <div className="head-left">
              <div className="title">CÔN SƠN · WHOLESALE</div>
              <div className="subtitle">ACCOUNT — MAISON HÉRITAGE GROUP · MILANO</div>
            </div>
            <div className="actions">
              <select defaultValue="q1">
                <option value="q1">Q1 2025 · Harvest window</option>
                <option value="q2">Q2 2025 · Forward</option>
              </select>
              <button>Export CSV</button>
              <button>Book call</button>
            </div>
          </div>

          <div className="dashboard-metrics">
            <Metric label="Available · ex-stock" val="287" unit="kg" trend="+18.4% vs Q4" spark={[12,14,11,16,18,22,26,28]} />
            <Metric label="Allocated · committed" val="43" unit="kg" trend="2 contracts" sparkColor="#cdac74" spark={[8,9,7,10,12,13,15,14]} />
            <Metric label="Container capacity" val="0.6" unit="× 20-ft" trend="next slot · Apr 14" spark={[3,4,4,5,6,5,6,6]} />
            <Metric label="Ledger entries · 30d" val="1,247" unit="" trend="100% verified" spark={[80,92,88,104,112,118,124,132]} />
          </div>

          <div className="dashboard-body">
            <div className="inventory-table">
              <div className="tbl-head">
                <div>FARM / LOT</div>
                <div>BATCH ID</div>
                <div>STOCK · kg</div>
                <div>STATUS · LEAD</div>
                <div style={{ textAlign: 'right' }}>PRICE</div>
              </div>
              {inv.map((row, i) => (
                <div className="tbl-row" key={i}>
                  <div className="farm-name">
                    {row.farm}
                    <span className="farm-sub">{row.id}</span>
                  </div>
                  <div className="mono" style={{ fontSize: 11, opacity: 0.7 }}>{row.id}</div>
                  <div>
                    <div className="mono" style={{ fontSize: 13, marginBottom: 4 }}>{row.stock} kg</div>
                    <div className="stock-bar"><span style={{ width: (row.stock) + '%' }} /></div>
                  </div>
                  <div>
                    <span className={`status-pill ${row.status}`}>{row.status.toUpperCase()}</span>
                    <span style={{ marginLeft: 8, fontSize: 11, opacity: 0.55 }}>{row.lead}</span>
                  </div>
                  <div className="mono" style={{ textAlign: 'right', fontSize: 13 }}>{row.price}</div>
                </div>
              ))}
            </div>

            <div className="dashboard-side">
              <div className="side-card">
                <h4>ALLOCATION · BY DESTINATION</h4>
                <div className="allocation-row">
                  <span className="flag">IT</span>
                  <span className="name">Milano</span>
                  <span className="amount">142 kg</span>
                </div>
                <div className="allocation-row">
                  <span className="flag">FR</span>
                  <span className="name">Paris</span>
                  <span className="amount">88 kg</span>
                </div>
                <div className="allocation-row">
                  <span className="flag">DE</span>
                  <span className="name">München</span>
                  <span className="amount">64 kg</span>
                </div>
                <div className="allocation-row">
                  <span className="flag">CH</span>
                  <span className="name">Zürich</span>
                  <span className="amount">32 kg</span>
                </div>
              </div>

              <div className="side-card">
                <h4>EXPORT READINESS</h4>
                <div style={{ display: 'grid', gap: 10, fontSize: 12 }}>
                  <Readiness label="Origin documentation" status="complete" />
                  <Readiness label="Phytosanitary cert." status="complete" />
                  <Readiness label="BLT batch registration" status="complete" />
                  <Readiness label="EU import declaration" status="pending" />
                  <Readiness label="Container booking" status="complete" />
                </div>
              </div>

              <div className="side-card">
                <h4>NEXT SHIPMENT</h4>
                <div style={{ fontFamily: 'var(--serif)', fontSize: 24, lineHeight: 1.1, marginBottom: 8 }}>
                  Apr 14 · Cát Lái
                </div>
                <div style={{ fontFamily: 'var(--mono)', fontSize: 11, opacity: 0.65, letterSpacing: '0.05em' }}>
                  20-ft REEFER · 9.2 t · ETA GENOVA APR 28
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Metric({ label, val, unit, trend, spark, sparkColor }) {
  const max = Math.max(...spark);
  const min = Math.min(...spark);
  const w = 100;
  const h = 24;
  const points = spark.map((v, i) => {
    const x = (i / (spark.length - 1)) * w;
    const y = h - ((v - min) / (max - min || 1)) * h;
    return `${x},${y}`;
  }).join(' ');
  return (
    <div className="metric">
      <div className="label">{label}</div>
      <div className="val">{val}{unit && <span className="unit">{unit}</span>}</div>
      <div className="trend">▲ {trend}</div>
      <svg className="spark" viewBox={`0 0 ${w} ${h}`} preserveAspectRatio="none" style={{ width: '100%' }}>
        <polyline points={points} fill="none" stroke={sparkColor || "#b4945e"} strokeWidth="1.2" />
      </svg>
    </div>
  );
}

function Readiness({ label, status }) {
  return (
    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '6px 0', borderBottom: '1px solid var(--line-d)' }}>
      <span>{label}</span>
      <span style={{
        fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.1em', textTransform: 'uppercase',
        color: status === 'complete' ? '#8fc879' : '#d8c280'
      }}>
        {status === 'complete' ? '◆ ready' : '◇ pending'}
      </span>
    </div>
  );
}

// ============================== GLOBAL EXPORT MAP
function ExportMap() {
  const dests = window.SON_DATA.EXPORT_DESTINATIONS;
  const origin = window.SON_DATA.VN_ORIGIN;
  const [active, setActive] = useState3(null);

  return (
    <section className="section tall map-section" id="export" data-screen-label="08 Export">
      <div className="container">
        <div className="section-head reveal">
          <div>
            <div className="head-num">08 — GLOBAL EXPORT</div>
            <h2>Đà Nẵng. Cát Lái.<br/>To <em style={{ fontStyle: 'italic', color: 'var(--gold)' }}>thirty-eight</em> ports.</h2>
          </div>
          <div className="head-meta">
            <p>Climate-controlled freight to four continents. Customs-pre-cleared in eleven destinations. End-of-chain anchor confirms arrival, automatically.</p>
          </div>
        </div>

        <div className="map-wrap reveal">
          <WorldMap dests={dests} origin={origin} active={active} setActive={setActive} />
        </div>

        <div className="export-stats reveal">
          <div className="stat">
            <div className="label">DESTINATIONS</div>
            <div className="val">38<span className="unit">ports</span></div>
          </div>
          <div className="stat">
            <div className="label">CONTINENTS</div>
            <div className="val">4</div>
          </div>
          <div className="stat">
            <div className="label">VOLUME · 2024</div>
            <div className="val">142<span className="unit">tonnes</span></div>
          </div>
          <div className="stat">
            <div className="label">CHAIN-OF-CUSTODY</div>
            <div className="val">100<span className="unit">%</span></div>
          </div>
        </div>
      </div>
    </section>
  );
}

function WorldMap({ dests, origin, active, setActive }) {
  // Simple stylized world map using SVG paths; landmasses as low-fi polygons
  return (
    <>
      <svg className="world-map" viewBox="0 0 100 50" preserveAspectRatio="none">
        <defs>
          <pattern id="dotgrid" width="0.5" height="0.5" patternUnits="userSpaceOnUse">
            <circle cx="0.25" cy="0.25" r="0.05" fill="rgba(246,241,231,0.15)" />
          </pattern>
        </defs>
        <rect x="0" y="0" width="100" height="50" fill="url(#dotgrid)" />

        {/* Stylized continents - very abstract */}
        <g fill="rgba(246,241,231,0.06)" stroke="rgba(246,241,231,0.18)" strokeWidth="0.15">
          {/* North America */}
          <path d="M5,18 L18,16 L24,20 L26,28 L24,38 L18,42 L10,40 L5,32 Z" />
          {/* South America */}
          <path d="M22,42 L28,42 L30,50 L26,56 L22,54 Z" />
          {/* Europe */}
          <path d="M45,22 L52,20 L54,26 L52,30 L47,30 L44,26 Z" />
          {/* Africa */}
          <path d="M46,32 L54,30 L57,40 L54,48 L48,48 L45,40 Z" />
          {/* Asia */}
          <path d="M55,18 L75,16 L84,22 L82,32 L72,34 L62,30 L56,24 Z" />
          {/* Southeast Asia */}
          <path d="M76,38 L82,36 L84,42 L80,46 L76,44 Z" />
          {/* Australia */}
          <path d="M82,68 L92,66 L94,72 L90,76 L84,74 Z" transform="translate(0,-12)" />
        </g>

        {/* Arcs from origin to destinations */}
        {dests.map((d, i) => {
          const x1 = origin.x;
          const y1 = origin.y;
          const x2 = d.x;
          const y2 = d.y;
          const mx = (x1 + x2) / 2;
          const my = (y1 + y2) / 2 - Math.abs(x2 - x1) * 0.25;
          return (
            <path
              key={i}
              className="map-arc"
              d={`M${x1},${y1} Q${mx},${my} ${x2},${y2}`}
              style={{
                strokeWidth: active === i ? 0.4 : 0.15,
                opacity: active === null || active === i ? 0.7 : 0.2,
                strokeDasharray: '0.6 0.6',
                transition: 'all .3s'
              }}
            />
          );
        })}
      </svg>

      {/* Origin marker */}
      <div className="map-marker origin" style={{ left: origin.x + '%', top: origin.y + '%' }}>
        <div className="ring" />
        <div className="dot" />
        <div className="label" style={{ color: 'var(--gold-2)', fontWeight: 500 }}>
          VIỆT NAM · ORIGIN
        </div>
      </div>

      {dests.map((d, i) => (
        <div
          key={i}
          className="map-marker"
          style={{ left: d.x + '%', top: d.y + '%' }}
          onMouseEnter={() => setActive(i)}
          onMouseLeave={() => setActive(null)}
        >
          <div className="ring" style={{ animationDelay: i * 0.3 + 's' }} />
          <div className="dot" />
          <div className="label" style={{
            opacity: active === i ? 1 : 0.7,
            background: active === i ? 'rgba(20,17,13,0.92)' : 'transparent',
            padding: active === i ? '4px 8px' : '0',
            transition: 'all .2s'
          }}>
            {d.name}
            {active === i && (
              <span style={{ marginLeft: 12, opacity: 0.65 }}>{d.vol}</span>
            )}
          </div>
        </div>
      ))}
    </>
  );
}

// ============================== SUSTAINABILITY
function Sustainability() {
  return (
    <section className="section tall cream" data-screen-label="09 Sustainability">
      <div className="container">
        <div className="section-head reveal">
          <div>
            <div className="head-num">09 — SUSTAINABILITY & ETHICS</div>
            <h2>The standard, <em style={{ fontStyle: 'italic', color: 'var(--gold)' }}>plainly stated.</em></h2>
          </div>
          <div className="head-meta">
            <p>Civet coffee carries a difficult industry history. We took a deliberate position from day one. The standards below are independently audited and published in full.</p>
          </div>
        </div>

        <div className="sust-grid">
          <div className="sust-img reveal" style={{ backgroundImage: 'url(assets/coi-mascot.png)', backgroundSize: 'contain', backgroundColor: '#0a0805', backgroundRepeat: 'no-repeat', backgroundPosition: 'center' }} />
          <ul className="sust-list reveal">
            <li>
              <span className="num">/ 01</span>
              <div>
                <div className="title">Wild civets only.</div>
                <div className="desc">Zero confined-production tolerance. All civets are wild-resident in registered forest plots. Audited annually by an independent wildlife biologist.</div>
              </div>
            </li>
            <li>
              <span className="num">/ 02</span>
              <div>
                <div className="title">Producer parity.</div>
                <div className="desc">Farmers earn an average of 4.7× the regional commodity rate. Pricing is fixed before harvest, paid against delivery, settled in VND.</div>
              </div>
            </li>
            <li>
              <span className="num">/ 03</span>
              <div>
                <div className="title">Forest tenure.</div>
                <div className="desc">All farms operate under multi-generational land tenure. We do not buy from clearcut plots; satellite verification is run quarterly.</div>
              </div>
            </li>
            <li>
              <span className="num">/ 04</span>
              <div>
                <div className="title">Closed processing loop.</div>
                <div className="desc">Wash water recirculates through reed-bed filtration. Pulp returns to farm as compost. Zero effluent leaves the property.</div>
              </div>
            </li>
            <li>
              <span className="num">/ 05</span>
              <div>
                <div className="title">Open ledger.</div>
                <div className="desc">Every batch is publicly inspectable on FloraChain. Verification is not a marketing claim — it is a network call.</div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </section>
  );
}

// ============================== PACKAGING GALLERY
function Packaging() {
  const imgs = [
    { src: "assets/coi-bag.png", cap: "Reserve · 250g pouch · gold-foil", id: "/ 01", contain: true },
    { src: "assets/product-tins.png", cap: "Tin trio · origin / mark / spec", id: "/ 02", contain: true },
    { src: "assets/product-hangtag.png", cap: "Digital passport hangtag", id: "/ 03", contain: true },
    { src: "assets/coi-giftbox.png", cap: "Gift box · letterpress card", id: "/ 04", contain: true },
    { src: "assets/product-bag.png", cap: "Carry bag · retail", id: "/ 05", contain: true }
  ];

  return (
    <section className="section tall" data-screen-label="10 Packaging" style={{ background: '#0d0a07', color: 'var(--paper)' }}>
      <div className="container">
        <div className="section-head reveal">
          <div>
            <div className="head-num" style={{ opacity: 0.55 }}>10 — PACKAGING</div>
            <h2>Hand-finished, ledger-tagged, <em style={{ fontStyle: 'italic', color: 'var(--gold-2)' }}>archival.</em></h2>
          </div>
          <div className="head-meta">
            <p>Boxes pressed in Ho Chi Minh City. Cards letterpress-printed in Hà Nội. Tamper-evident holographic seal applied at the point of pack.</p>
          </div>
        </div>

        <div className="pkg-gallery reveal">
          {[0,1,2,3,4].map(i => (
            <div
              key={i}
              className={`slot ${i === 0 ? 'tall' : ''}`}
              style={{
                backgroundImage: `url(${imgs[i].src})`,
                backgroundSize: imgs[i].contain ? 'contain' : 'cover',
                backgroundRepeat: 'no-repeat',
                backgroundColor: '#000'
              }}
            >
              <div className="caption"><span>{imgs[i].id}</span><span>{imgs[i].cap}</span></div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================== FOUNDER NOTE
function FounderNote() {
  return (
    <section className="founder-note" data-screen-label="10b Founders">
      <div className="container">
        <div className="founder-grid">
          <div className="reveal">
            <VietnamMap />
          </div>
          <div className="reveal">
            <div className="eyebrow gold" style={{ color: 'var(--gold-2)' }}>A NOTE FROM THE FARMS</div>
            <p className="quote" style={{ marginTop: 24 }}>
              <em>“Every bag has history.”</em> From the farms of Vietnam, to you. Thank you for supporting authentic origin and sustainable futures.
            </p>
            <div className="signature">— The Cội Team</div>
          </div>
        </div>
      </div>
    </section>
  );
}

function VietnamMap() {
  return (
    <svg className="map-svg" viewBox="0 0 240 360" fill="none">
      <defs>
        <linearGradient id="vnGrad" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stopColor="var(--gold-2)" stopOpacity="1" />
          <stop offset="100%" stopColor="var(--gold-3)" stopOpacity="1" />
        </linearGradient>
      </defs>
      <path
        d="M 120 16 L 132 28 L 138 44 L 134 60 L 122 70 L 116 86 L 122 98 L 132 106 L 138 120 L 138 138 L 130 154 L 128 172 L 132 190 L 138 206 L 148 220 L 158 236 L 168 252 L 174 270 L 178 290 L 174 310 L 166 322 L 152 332 L 138 332 L 128 322 L 126 308 L 132 296 L 138 286 L 138 274 L 130 264 L 116 254 L 102 244 L 90 230 L 82 214 L 80 196 L 88 180 L 100 168 L 110 152 L 116 134 L 116 114 L 110 96 L 102 84 L 96 70 L 96 54 L 102 40 L 110 26 Z"
        stroke="url(#vnGrad)" strokeWidth="1.5" fill="rgba(201,168,102,0.04)"
      />
      <g transform="translate(150 270)">
        <circle r="14" fill="none" stroke="var(--gold)" strokeWidth="0.8" opacity="0.4">
          <animate attributeName="r" from="6" to="28" dur="3s" repeatCount="indefinite" />
          <animate attributeName="opacity" from="0.8" to="0" dur="3s" repeatCount="indefinite" />
        </circle>
        <circle r="6" fill="var(--gold)" />
        <circle r="2" fill="var(--ink)" />
        <text x="18" y="4" fill="var(--gold-2)" fontFamily="var(--mono)" fontSize="10" letterSpacing="2">
          LAM DONG
        </text>
        <text x="18" y="18" fill="rgba(246,241,231,0.55)" fontFamily="var(--mono)" fontSize="8" letterSpacing="1.5">
          SUOI NHIEU EST.
        </text>
      </g>
      <g transform="translate(120 60)">
        <circle r="3" fill="none" stroke="rgba(246,241,231,0.4)" strokeWidth="0.6" />
        <text x="8" y="3" fill="rgba(246,241,231,0.45)" fontFamily="var(--mono)" fontSize="8" letterSpacing="1.5">HA NOI</text>
      </g>
      <g transform="translate(125 305)">
        <circle r="3" fill="none" stroke="rgba(246,241,231,0.4)" strokeWidth="0.6" />
        <text x="-58" y="3" fill="rgba(246,241,231,0.45)" fontFamily="var(--mono)" fontSize="8" letterSpacing="1.5">HO CHI MINH</text>
      </g>
    </svg>
  );
}

// ============================== VERIFY A BAG (CTA)
function VerifyABag() {
  return (
    <section className="vab" id="verify-bag" data-screen-label="11 Verify A Bag">
      <div className="container">
        <div className="vab-grid">
          <div className="reveal">
            <div className="eyebrow" style={{ color: 'var(--gold-2)' }}>11 — VERIFY A BAG</div>
            <h2>The bag in<br/>your hand —<br/>open <em style={{ fontStyle: 'italic', color: 'var(--gold-2)' }}>the chain.</em></h2>
            <p>Point your camera at the BLT QR on the inside of the pouch. The chain returns the farm, the farmer, the harvest, the cup. In under three seconds. Anywhere on earth.</p>
            <div style={{ display: 'flex', gap: 12 }}>
              <a className="btn gold" href="#verify">Scan now <span className="arrow">→</span></a>
              <a className="btn" href="#process" style={{ color: 'var(--paper)', borderColor: 'var(--paper)' }}>Learn how</a>
            </div>
          </div>
          <div className="reveal">
            <div className="scan-frame">
              <span className="c-tr"></span>
              <span className="c-bl"></span>
              <div className="scan-line" />
              <FakeQR />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function FakeQR() {
  // Render a stylized QR with brand mark in center
  const N = 21;
  const seed = "0xf3a8c2d4e9b1758a44e0bd91c5e6f7a2b8c9091a";
  const cells = [];
  for (let y = 0; y < N; y++) {
    const row = [];
    for (let x = 0; x < N; x++) {
      const isCorner =
        (x < 7 && y < 7) || (x > N - 8 && y < 7) || (x < 7 && y > N - 8);
      const cornerOn =
        isCorner && (
          (x === 0 || x === 6 || y === 0 || y === 6 ||
           (x >= 2 && x <= 4 && y >= 2 && y <= 4)) ||
          (x === N - 1 || x === N - 7 || y === 0 || y === 6 ||
           (x >= N - 5 && x <= N - 3 && y >= 2 && y <= 4)) ||
          (x === 0 || x === 6 || y === N - 1 || y === N - 7 ||
           (x >= 2 && x <= 4 && y >= N - 5 && y <= N - 3))
        );
      const hash = (x * 131 + y * 17 + parseInt(seed.slice(2, 6), 16)) % 7;
      row.push(isCorner ? (cornerOn ? 1 : 0) : (hash < 3 ? 1 : 0));
    }
    cells.push(row);
  }
  return (
    <svg viewBox={`0 0 ${N} ${N}`} style={{ width: '100%', height: '100%', maxWidth: 320 }}>
      {cells.map((row, y) => row.map((c, x) =>
        c === 1 ? <rect key={x + '-' + y} x={x} y={y} width="1" height="1" fill="var(--paper)" /> : null
      ))}
      <rect x={N/2 - 2} y={N/2 - 2} width="4" height="4" fill="var(--ink)" />
      <text x={N/2} y={N/2 + 0.6} textAnchor="middle" fontSize="2.2" fill="var(--gold)" fontFamily="serif">S</text>
    </svg>
  );
}

// ============================== FOOTER
function Footer() {
  return (
    <footer className="footer" data-screen-label="12 Footer">
      <div className="container">
        <div className="footer-grid">
          <div>
            <div className="footer-logo">CỘI</div>
            <div style={{ fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.3em', color: 'var(--gold-2)', marginTop: 8 }}>
              ROOTED IN VIETNAM
            </div>
            <div className="footer-tag">
              Vietnamese origin coffee, authenticated through BLT and anchored to FloraChain. Suối Nhiêu Estate, Lâm Đồng. Exported worldwide.
            </div>
            <div style={{ marginTop: 24, display: 'flex', gap: 12 }}>
              <a className="btn" href="wholesale.html#book" style={{ color: 'var(--gold)', borderColor: 'var(--gold)', fontSize: 10 }}>
                Export inquiry <span className="arrow">→</span>
              </a>
            </div>
          </div>
          <div className="footer-col">
            <h5>SHOP</h5>
            <a href="product.html?id=reserve">Reserve</a>
            <a href="product.html?id=grand-reserve">Grand Reserve</a>
            <a href="product.html?id=founder">Founder Collection</a>
            <a href="heritage.html">Heritage Series</a>
            <a href="vault.html">Collector Vault</a>
            <a href="pods.html">Capsules & Pods</a>
            <a href="product.html?id=family">The Family Trio</a>
          </div>
          <div className="footer-col">
            <h5>DISCOVER</h5>
            <a href="farms.html">Farms</a>
            <a href="process.html">Process</a>
            <a href="sustainability.html">Sustainability</a>
            <a href="packaging.html">Packaging</a>
            <a href="export.html">Global export</a>
            <a href="wholesale.html">Wholesale</a>
            <a href="wholesale.html#book">Book a call</a>
          </div>
          <div className="footer-col">
            <h5>VERIFICATION</h5>
            <a href="verify.html">Verify a batch</a>
            <a href="verify-bag.html">Verify a bag</a>
            <a href="docs.html#blt">BLT protocol</a>
            <a href="docs.html#florachain">FloraChain</a>
            <a href="ledger.html">Public ledger</a>
          </div>
          <div className="footer-col">
            <h5>CỘI</h5>
            <a href="about.html">About</a>
            <a href="press.html">Press</a>
            <a href="docs.html">Documentation</a>
            <a href="contact.html">Contact</a>
            <a href="cart.html">Your bag</a>
          </div>
        </div>
        <div className="footer-bottom">
          <div>© 2008–2025 CỘI ESTATE · CT JSC · ĐÀ LẠT · LÂM ĐỒNG · VIỆT NAM</div>
          <div>FLORA-1 · BLT v2.4 · BUILD 4847291</div>
        </div>
      </div>
    </footer>
  );
}

window.SonSections3 = { WholesaleDashboard, ExportMap, Sustainability, Packaging, FounderNote, VerifyABag, Footer };