// landing.jsx — landing page with state selection
const { useState: useStateL, useEffect: useEffectL } = React;

function Landing({ onPick, unlocked, onUnlock, onLock }) {
  const live = STATES.filter((s) => s.status === 'live');
  const soon = STATES.filter((s) => s.status === 'soon');
  const wait = STATES.filter((s) => s.status === 'waitlist');

  return (
    <>
      <section className="landing-hero" style={{ padding: "60px 0px 50px" }}>
        <div className="hero-left">
          <span className="eyebrow">Wholesale · Multi-state · '26</span>
          <h1 className="display">
            <span className="display-line">The</span>
            <span className="display-line outline" style={{ fontFamily: "\"Big Shoulders Display\"" }}>menu</span>
            <span className="display-line">by state.</span>
          </h1>
          <p className="lede">
            Top Secret Workshops runs a real-time wholesale book. Select your market —
            buyer specs, COA links, and live inventory render directly from our KPI tracker.
            Pricing, MOQ, and buyer terms unlock with a token.
          </p>
          <div className="hero-cta">
            <a className="btn-red" href="#states">Choose market →</a>
            <a className="btn-ghost" href="#about">How it works</a>
          </div>
          <div className="hero-stats">
            <div><b>5</b><small>partnered states</small></div>
            <div><b>18</b><small>live SKUs (MT)</small></div>
            <div><b>1.4m</b><small>buyer scans/yr</small></div>
            <div><b>OTC</b><small>token-gated</small></div>
          </div>
        </div>
        <div className="hero-right">
          <TokenPanel unlocked={unlocked} onUnlock={onUnlock} onLock={onLock} />
        </div>
      </section>

      <section id="states" className="landing-states">
        <div className="section-head">
          <span className="num">§01</span>
          <h2 className="display-md">Live markets</h2>
          <p>Two markets ready to pull menus from. Click a card to enter.</p>
        </div>
        <div className="market-row">
          {live.map((s) => <MarketCard key={s.code} state={s} variant="live" onPick={onPick} />)}
          {soon.slice(0, 4).map((s) => <MarketCard key={s.code} state={s} variant="soon" onPick={onPick} />)}
        </div>

        <div className="section-head section-head-tight">
          <span className="num">§02</span>
          <h2 className="display-md">Theater map</h2>
          <p>Red pin = live. Gold = onboarding. Cream = waitlist. Click in.</p>
        </div>
        <USPinMap states={STATES} onPick={onPick} />

        <div className="landing-soon">
          {soon.slice(4).concat(wait).map((s) =>
          <div key={s.code} className={`soon-row soon-${s.status}`}>
              <span className="soon-code">{s.code}</span>
              <strong className="soon-name">{s.name}</strong>
              <span className="soon-note">{s.note}</span>
              <span className="soon-status">{s.statusLabel}</span>
              <span className="soon-arrow">{s.status === 'soon' ? 'request' : 'waitlist'}</span>
            </div>
          )}
        </div>
      </section>

      <section id="about" className="landing-about">
        <div className="about-card">
          <span className="num">§03</span>
          <h3>Live from the inventory tracker</h3>
          <p>Every row on the menu pulls from our internal KPI + inventory modules. When a batch is restocked, the status badge here updates within seconds.</p>
        </div>
        <div className="about-card">
          <span className="num">§04</span>
          <h3>Specs public · prices private</h3>
          <p>Anyone can see what's in our book — strain, format, potency, COA. Wholesale pricing and MOQ unlock per-buyer with a token issued by sales.</p>
        </div>
        <div className="about-card">
          <span className="num">§05</span>
          <h3>State-first compliance</h3>
          <p>Every menu is scoped to a single market so buyers never see cross-border SKUs. Compliance team reviews each addition before it goes live.</p>
        </div>
      </section>
    </>);

}

function MarketCard({ state, variant, onPick }) {
  const active = state.status === 'live';
  return (
    <button
      className={`market-card market-${variant}`}
      onClick={() => active ? onPick(state) : alert(`${state.name} — request-access form goes here.`)}>
      
      <div className="market-card-shape">
        <StateSilhouette code={state.code} accent={active ? '#ff3a3a' : '#9b6aff'} label={state.name} />
      </div>
      <div className="market-card-body">
        <span className={`status-chip status-${state.status}`}>
          <span className="chip-dot"></span> {state.statusLabel}
        </span>
        <h3 className="market-name">{state.name}</h3>
        <p className="market-note">{state.note}</p>
        <div className="market-foot">
          <span>{state.rooted}</span>
          <span>Since {state.since}</span>
        </div>
      </div>
      <div className="market-cta">
        {active ? 'Open menu →' : 'Request access →'}
      </div>
    </button>);

}

function TokenPanel({ unlocked, onUnlock, onLock }) {
  const [val, setVal] = useStateL('');
  const [notice, setNotice] = useStateL('');
  function submit() {
    const v = val.trim().toUpperCase();
    if (VALID_TOKENS.has(v)) {onUnlock(v);setNotice('');} else
    {setNotice('Token not recognized');}
  }
  if (unlocked) {
    return (
      <div className="token-panel token-on">
        <div className="token-row">
          <span className="led led-green"></span>
          <span className="token-label">Wholesale token</span>
        </div>
        <h4>Prices unlocked</h4>
        <p>Buyer pricing, MOQ, and unit terms are visible across every market in this browser.</p>
        <button className="btn-ghost" onClick={onLock}>Lock again</button>
      </div>);

  }
  return (
    <div className="token-panel">
      <div className="token-row">
        <span className="led led-red"></span>
        <span className="token-label">Wholesale token</span>
      </div>
      <h4>Enter buyer token</h4>
      <p>Specs, COAs, and availability are public. Pricing, MOQ, and wholesale notes unlock per-buyer.</p>
      <div className="token-field">
        <input type="password" placeholder="e.g. DIAMOND" value={val}
        onChange={(e) => setVal(e.target.value)}
        onKeyDown={(e) => e.key === 'Enter' && submit()} />
        <button onClick={submit}>Unlock</button>
      </div>
      <div className="token-notice">{notice || 'Demo: try DIAMOND'}</div>
    </div>);

}

Object.assign(window, { Landing, TokenPanel });