// /wall — Brand wall, infinite scroll list of worst offenders
// Card has a "Receipt" button that downloads a receipt-styled PNG

const wallData = [
  { rank: 1, brand: 'Coca-Cola',     cat: 'Beverage',  score: 12, sales: '$1.2B AU', note: 'Single-use PET, no return scheme.' },
  { rank: 2, brand: 'Pepsi',         cat: 'Beverage',  score: 14, sales: '$890M AU', note: 'Multilayer film. No mono-stream.' },
  { rank: 3, brand: 'Oreo',          cat: 'Snack',     score: 17, sales: '$340M AU', note: 'Tray + foil + outer film.' },
  { rank: 4, brand: 'P&G',           cat: 'Personal',  score: 18, sales: '$2.1B AU', note: 'Composite parent. 7 polymer types.' },
  { rank: 5, brand: 'Nestle',        cat: 'Food',      score: 19, sales: '$1.6B AU', note: 'PET + foil + adhesive.' },
  { rank: 6, brand: 'L\'Oreal',      cat: 'Cosmetics', score: 21, sales: '$420M AU', note: 'PP/PE/PET in same SKU.' },
  { rank: 7, brand: 'Kraft',         cat: 'Food',      score: 22, sales: '$310M AU', note: 'Cheese slices · 1 wrap each.' },
  { rank: 8, brand: 'Mars',          cat: 'Snack',     score: 23, sales: '$580M AU', note: 'Wrapper + outer + tray.' },
  { rank: 9, brand: 'Johnson',       cat: 'Personal',  score: 24, sales: '$280M AU', note: 'Pump dispensers — 5 polymers.' },
  { rank: 10, brand: 'Unilever',     cat: 'Personal',  score: 26, sales: '$1.1B AU', note: 'Sachet refills don\'t recycle.' },
  { rank: 11, brand: 'Colgate',      cat: 'Personal',  score: 31, sales: '$170M AU', note: 'Tube laminate.' },
  { rank: 12, brand: 'Tesco',        cat: 'Retail',    score: 36, sales: '£8.4B UK', note: 'Own-brand · pack-of-pack.' },
  { rank: 13, brand: 'Woolworths',   cat: 'Retail',    score: 38, sales: '$3.4B AU', note: 'Tray-on-tray produce.' },
  { rank: 14, brand: 'Coles',        cat: 'Retail',    score: 41, sales: '$3.2B AU', note: 'Plastic-wrapped bananas.' },
  { rank: 15, brand: 'Tesco Finest', cat: 'Retail',    score: 44, sales: '£1.1B UK', note: 'Premium = more layers.' },
];

function WallPage({ onNav, tweaks }) {
  const [sort, setSort] = React.useState('worst');
  const [showReceipt, setShowReceipt] = React.useState(null);

  const sorted = React.useMemo(() => {
    const c = [...wallData];
    if (sort === 'best') c.sort((a, b) => b.score - a.score);
    else if (sort === 'food') return c.filter(d => d.cat === 'Food' || d.cat === 'Snack' || d.cat === 'Beverage');
    else if (sort === 'personal') return c.filter(d => d.cat === 'Personal' || d.cat === 'Cosmetics');
    else c.sort((a, b) => a.score - b.score);
    return c;
  }, [sort]);

  return (
    <div className="page">
      <DocBar onNav={onNav} crumb="WALL · WK 19" />
      <Subnav page="/wall" onNav={onNav} />

      <section className="page-hero">
        <div className="eyebrow">UPDATED · MON 06:00 AEDT</div>
        <h1>The brands<br/>you buy,<br/>ranked.</h1>
        <p className="lede">From least plastic to most. Don't shoot the messenger.</p>
      </section>

      <div className="stat-strip">
        <div>
          <div className="n">1,247</div>
          <div className="l">BRANDS RANKED</div>
        </div>
        <div>
          <div className="n">38</div>
          <div className="l">MEDIAN SCORE</div>
        </div>
        <div>
          <div className="n">+14%</div>
          <div className="l">SCANS WK/WK</div>
        </div>
      </div>

      <div className="sort-bar" role="tablist">
        {[
          ['worst', 'Worst → best'],
          ['best',  'Best → worst'],
          ['food',  'Food + drink'],
          ['personal', 'Personal care'],
        ].map(([k, l]) => (
          <button key={k} className={'chip' + (sort === k ? ' active' : '')} onClick={() => setSort(k)}>
            {l}
          </button>
        ))}
      </div>

      <div>
        {sorted.map((d, i) => (
          <div key={d.brand} className="wall-row">
            <div className="rank">#{String(i + 1).padStart(2, '0')}</div>
            <div>
              <div className="brand-name">{d.brand}</div>
              <div className="cat">{d.cat.toUpperCase()} · {d.sales} · {d.note.toUpperCase()}</div>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <div className={'pill ' + pillClassFor(d.score)}>{d.score}</div>
              <button
                onClick={() => setShowReceipt(d)}
                aria-label="Receipt"
                style={{
                  width: 32, height: 32, borderRadius: 9999,
                  border: '1px solid var(--plassic-jungle-950)',
                  background: 'transparent', cursor: 'pointer',
                  display: 'grid', placeItems: 'center'
                }}>
                <Icon.download />
              </button>
            </div>
          </div>
        ))}
      </div>

      {/* Receipt modal-ish (inline, mobile-friendly) */}
      {showReceipt && (
        <section style={{ padding: '24px 0 0', background: 'var(--plassic-jungle-950)', color: 'var(--plassic-kraft-50)', marginTop: 24, paddingBottom: 24 }}>
          <div className="section-h" style={{ color: 'var(--plassic-coral-500)', paddingBottom: 16 }}>
            <span>RECEIPT · {showReceipt.brand.toUpperCase()}</span>
            <button onClick={() => setShowReceipt(null)}
                    style={{ background: 'transparent', border: 0, color: 'inherit', cursor: 'pointer' }}>
              <Icon.close />
            </button>
          </div>
          <div className="receipt" style={{ background: 'var(--plassic-kraft-50)', color: 'var(--plassic-jungle-950)' }}>
            <div className="head">
              <span>PLASSIC NO. WK19-{String(showReceipt.rank).padStart(3, '0')}</span>
              <span>9:41 AM · MON</span>
            </div>
            <div className="brand-name">{showReceipt.brand}</div>
            <div className="mono mute" style={{ fontSize: 10, marginTop: 4 }}>{showReceipt.cat.toUpperCase()} · {showReceipt.sales}</div>

            <div style={{ height: 12 }}></div>

            <div className="row"><span>Plastic content</span><span>{showReceipt.score < 30 ? '74%' : showReceipt.score < 60 ? '38%' : '6%'}</span></div>
            <div className="row"><span>Distinct polymers</span><span>{showReceipt.score < 30 ? '7' : showReceipt.score < 60 ? '3' : '1'}</span></div>
            <div className="row"><span>Curbside recycle</span><span>{showReceipt.score < 30 ? 'NO' : showReceipt.score < 60 ? 'PARTIAL' : 'YES'}</span></div>
            <div className="row"><span>Sales (12mo)</span><span>{showReceipt.sales}</span></div>
            <div className="row"><span>Rank</span><span>#{showReceipt.rank} of 1,247</span></div>

            <div className="total">
              <span className="word">PLASTIC SCORE</span>
              <span className="num">{showReceipt.score}</span>
            </div>

            <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 12, alignItems: 'center' }}>
              <span className="mono mute" style={{ fontSize: 10 }}>plassic.com/s/{showReceipt.brand.toLowerCase()}</span>
              <FauxQR fg="var(--plassic-jungle-950)" size={32} />
            </div>

            <div className="actions">
              <button className="mini coral"><Icon.download /> PNG</button>
              <button className="mini dark">Share</button>
            </div>
          </div>
        </section>
      )}

      <div className="section-h" style={{ marginTop: 16 }}>
        <span>UPDATED WEEKLY · DATA AS OF</span>
        <span>04 MAY 2026</span>
      </div>

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

window.WallPage = WallPage;