// /scan/:slug — dynamic share landing page
// "this is the score you sent your friend"

const slugDB = {
  'coles-mascara':   { brand: 'Coles Mascara',          product: '8ml tube · 7 polymers',     score: 23, sender: 'Bella · DM' },
  'crunchbarmultipack': { brand: 'Crunch Bar Multipack', product: '12 × 35g',                   score: 62, sender: 'Group chat' },
  'oatmilk':         { brand: 'Oat Milk',                product: 'Carton · 1L',                score: 94, sender: 'TikTok caption' },
  'mascaratube':     { brand: 'Mascara Tube',            product: '8ml · drugstore brand',     score: 23, sender: 'IG story' },
  'crunchbar':       { brand: 'Crunch Bar Multipack',    product: '12 × 35g',                   score: 62, sender: 'Group chat' },
  'cocacola':        { brand: 'Coca-Cola',               product: '24-pack · 375ml cans',      score: 12, sender: 'X reply' },
  'nestle':          { brand: 'Nestle',                  product: 'Composite Q1 26',           score: 19, sender: 'TikTok comment' },
};

function ScanSharePage({ slug, onNav }) {
  const data = slugDB[slug] || slugDB['coles-mascara'];
  const band = bandFor(data.score);

  return (
    <div className="page">
      <DocBar onNav={onNav} crumb={"S/" + (slug || 'X').toUpperCase().slice(0, 8)} />
      <Subnav page={'/scan/' + slug} onNav={onNav} />

      <div className="sender-chip">
        <div className="av">{data.sender[0]}</div>
        <div className="text">
          <strong>{data.sender}</strong> just sent you this score — open it inside Plassic to scan back.
        </div>
      </div>

      {/* The big card itself, full bleed margin */}
      <section style={{ padding: '20px 20px 8px' }}>
        <div className={'score-card ' + band} style={{ paddingTop: 36, paddingBottom: 28 }}>
          <div className="band"></div>
          <div className="label">PLASTIC SCORE · INCOMING</div>
          <div className="number">
            <CountUp to={data.score} dur={600} />
            <span className="of">/100</span>
          </div>
          <div className="verdict">{verdictFor(data.score)}</div>
          <div className="meta-row">
            <span>{data.brand.toUpperCase()}</span>
            <span>{data.product.toUpperCase()}</span>
          </div>
        </div>
      </section>

      {/* Receipt-of-evidence */}
      <div className="section-h" style={{ marginTop: 8 }}>
        <span>WHY THIS SCORE</span>
        <span>3 ITEMS</span>
      </div>
      <div style={{ borderTop: '1px solid var(--plassic-line-200)' }}>
        <div className="data-row"><span className="l">PACKAGING MASS — PLASTIC</span><span className="v">{data.score < 50 ? '74%' : data.score < 80 ? '38%' : '6%'}</span></div>
        <div className="data-row"><span className="l">DISTINCT POLYMERS</span><span className="v">{data.score < 30 ? '7' : data.score < 60 ? '3' : '1'}</span></div>
        <div className="data-row"><span className="l">CURBSIDE-RECYCLABLE</span><span className="v">{data.score < 30 ? 'NO' : data.score < 80 ? 'PARTIAL' : 'YES'}</span></div>
        <div className="data-row"><span className="l">DATA SOURCE</span><span className="v">PUBLIC PACKAGING SPEC · 2026</span></div>
      </div>

      {/* CTA stack */}
      <section style={{ padding: '24px 20px 8px', display: 'flex', flexDirection: 'column', gap: 10 }}>
        <a className="btn coral" href="#" onClick={(e) => e.preventDefault()}>
          <Icon.apple /> Open in App Store
        </a>
        <a className="btn ghost" href="#" onClick={(e) => e.preventDefault()}>
          <Icon.android /> Open in Google Play
        </a>
        <a className="btn ghost" href="#/" onClick={(e) => { e.preventDefault(); onNav('/'); }}>
          <Icon.scan /> Or scan one yourself →
        </a>
      </section>

      {/* OG-image / share-back hint */}
      <div className="section-h" style={{ marginTop: 16 }}>
        <span>WHAT THIS LOOKS LIKE WHEN SHARED</span>
        <span>1080 × 1920</span>
      </div>
      <ShareCardPreview
        score={data.score}
        brand={data.brand}
        product={data.product}
        variant="clean"
      />

      <div style={{ padding: '12px 20px 0' }}>
        <a className="btn ghost" href="#" onClick={(e) => e.preventDefault()}>
          <Icon.download /> Download share card · PNG
        </a>
      </div>

      {/* Methodology hint */}
      <div className="prose" style={{ paddingTop: 24 }}>
        <p style={{ fontFamily: 'var(--plassic-font-mono)', fontSize: 11, letterSpacing: 1.5, textTransform: 'uppercase', color: 'var(--plassic-mute-400)', lineHeight: 1.5 }}>
          We score on packaging-content data only. We don't claim {data.brand}'s product is unsafe, hazardous, or causal of any health outcome. <a href="#/methodology" onClick={(e) => { e.preventDefault(); onNav('/methodology'); }} style={{ color: 'var(--plassic-jungle-950)' }}>Read the methodology →</a>
        </p>
      </div>

      <Foot onNav={onNav} />
    </div>
  );
}

window.ScanSharePage = ScanSharePage;