// OriginNotes.jsx — countries + regions we source from
const OriginNotes = () => {
  const origins = [
    {
      code: 'ETH', country: 'ETHIOPIA', region: 'YIRGACHEFFE / SIDAMO',
      altitude: '1800-2200m', process: 'WASHED · NATURAL',
      farmer: 'KONGA COOPERATIVE',
      notes: 'the spiritual home of arabica. bright, floral, citric acidity.',
      skus: ['EXPLOIT', 'ZERO-DAY'],
      accent: '#00FF41',
    },
    {
      code: 'COL', country: 'COLOMBIA', region: 'HUILA / NARIÑO',
      altitude: '1500-2000m', process: 'WASHED · HONEY',
      farmer: 'ASOPEP COOPERATIVE',
      notes: 'balanced, sweet, dependable. the swiss army knife of specialty.',
      skus: ['WIRELESS', 'HONEYPOT', 'PRIVESC'],
      accent: '#00E5FF',
    },
    {
      code: 'BRA', country: 'BRAZIL', region: 'MINAS GERAIS / CERRADO',
      altitude: '900-1300m', process: 'NATURAL · PULPED NATURAL',
      farmer: 'FAZENDA SANTA MONICA',
      notes: 'low acidity, heavy body, chocolate. backbone of every blend.',
      skus: ['EXPLOIT', 'PAYLOAD', 'BRUTE-FORCE', 'EXFIL'],
      accent: '#FFD23F',
    },
    {
      code: 'GTM', country: 'GUATEMALA', region: 'HUEHUETENANGO / ANTIGUA',
      altitude: '1500-2000m', process: 'WASHED',
      farmer: 'FINCA EL INJERTO',
      notes: 'complex, layered, cocoa-driven. holds up to dark roasts.',
      skus: ['ZERO-DAY', 'PHISHING'],
      accent: '#FF3344',
    },
    {
      code: 'IDN', country: 'INDONESIA', region: 'SUMATRA / SULAWESI',
      altitude: '900-1600m', process: 'WET-HULLED (GILING BASAH)',
      farmer: 'MUTU BATAK COOPERATIVE',
      notes: 'earthy, herbal, deep. the rootkit. unmistakable.',
      skus: ['PAYLOAD', 'ROOTKIT'],
      accent: '#FF8C42',
    },
    {
      code: 'IND', country: 'INDIA', region: 'KARNATAKA · MONSOONED MALABAR',
      altitude: '900-1200m', process: 'NATURAL · MONSOONED',
      farmer: 'BABA BUDANGIRIS ESTATE',
      notes: 'low acid, full body, faintly smoky. blends like a dream.',
      skus: ['BRUTE-FORCE'],
      accent: '#B266FF',
    },
    {
      code: 'CAM', country: 'CENTRAL AMERICA', region: 'COSTA RICA · HONDURAS · NICARAGUA',
      altitude: '1200-1800m', process: 'WASHED · HONEY',
      farmer: 'VARIES BY LOT',
      notes: 'balanced acidity. citric brightness. workhorse blend material.',
      skus: ['PRIVESC', 'LATERAL MOVE'],
      accent: '#4A9EFF',
    },
    {
      code: 'PAN', country: 'PANAMA', region: 'BOQUETE · GESHA',
      altitude: '1500-1800m', process: 'WASHED',
      farmer: 'HACIENDA LA ESMERALDA',
      notes: 'the highest-scoring coffee on earth. floral, bergamot, jasmine. reserved.',
      skus: ['0-DAY RESERVE'],
      accent: '#B266FF',
    },
  ];

  return (
    <section style={{ padding:'40px 24px 80px', maxWidth: 1280, margin:'0 auto' }}>
      <div style={{ marginBottom: 24 }}>
        <h2 style={{ fontSize: 36, letterSpacing:'0.04em', textTransform:'uppercase', fontWeight: 800, color:'#FFF', margin: 0 }}>{'>'} cat origins/*.md</h2>
        <div style={{ marginTop: 8, fontSize: 13, color:'#BFBFBF', letterSpacing:'0.15em' }}>
          // every bean has a paper trail. {origins.length} regions · {origins.reduce((s,o) => s + o.skus.length, 0)} SKU mappings.
        </div>
      </div>

      {/* ascii world map placeholder strip */}
      <pre style={{ padding:'14px 18px', background:'#0A0A0A', border:'1px solid rgba(255,255,255,0.22)', color:'#00FF41', fontSize: 10, lineHeight: 1.2, margin: '0 0 28px', overflow:'auto', letterSpacing: 0 }}>
{`     _____           _____           _____           _____
    /\\    \\         /\\    \\         /\\    \\         /\\    \\        // map
   /::\\____\\       /::\\____\\       /::\\    \\       /::\\____\\       // pinned origins
  /:::/    /      /:::/    /      /::::\\    \\     /::::|   |       // verified supply chain
 /:::/____/      /:::/____/      /::::::\\    \\   /:::::|   |
   ETH              COL              BRA              GTM           IDN · IND · CAM · PAN`}
      </pre>

      {/* origin cards */}
      <div style={{ display:'grid', gridTemplateColumns:'repeat(auto-fill, minmax(360px, 1fr))', gap: 16 }}>
        {origins.map((o) => (
          <div key={o.code} style={{
            background:'#000', border:`1px solid ${o.accent}55`, padding: 0,
            display:'flex', flexDirection:'column',
            transition:'border-color 120ms, box-shadow 120ms',
          }}
            onMouseEnter={(e) => { e.currentTarget.style.borderColor = o.accent; e.currentTarget.style.boxShadow = `0 0 24px ${o.accent}33`; }}
            onMouseLeave={(e) => { e.currentTarget.style.borderColor = `${o.accent}55`; e.currentTarget.style.boxShadow = 'none'; }}
          >
            {/* header */}
            <div style={{ display:'flex', alignItems:'center', gap: 12, padding:'12px 18px', borderBottom:`1px solid ${o.accent}44`, background:'#0A0A0A' }}>
              <span style={{ width: 10, height: 10, borderRadius:'50%', background: o.accent, boxShadow:`0 0 8px ${o.accent}` }}></span>
              <span style={{ color: o.accent, fontWeight: 700, letterSpacing:'0.2em', fontSize: 11 }}>{o.code}</span>
              <span style={{ marginLeft:'auto', color:'#BFBFBF', fontSize: 10, letterSpacing:'0.2em' }}>{o.altitude}</span>
            </div>

            {/* body */}
            <div style={{ padding:'22px 18px' }}>
              <div style={{ fontSize: 28, fontWeight: 800, color: o.accent, letterSpacing:'0.02em' }}>{o.country}</div>
              <div style={{ fontSize: 11, color:'#E0E0E0', letterSpacing:'0.18em', marginTop: 8, fontWeight: 700 }}>{o.region}</div>

              <div style={{ marginTop: 18, fontSize: 14, color:'#E8E8E8', lineHeight: 1.6 }}>{o.notes}</div>

              <div style={{ marginTop: 18, display:'grid', gridTemplateColumns:'1fr 1fr', gap: 12, fontSize: 11 }}>
                <div><div style={{ color:'#BFBFBF', letterSpacing:'0.18em', fontWeight: 700 }}>PROCESS</div><div style={{ marginTop: 4, color:'#FFFFFF', fontSize: 12 }}>{o.process}</div></div>
                <div><div style={{ color:'#BFBFBF', letterSpacing:'0.18em', fontWeight: 700 }}>FARMER</div><div style={{ marginTop: 4, color:'#FFFFFF', fontSize: 12 }}>{o.farmer}</div></div>
              </div>
            </div>

            {/* sku footer */}
            <div style={{ marginTop:'auto', padding:'10px 18px', borderTop:`1px dashed ${o.accent}55`, background:'#0A0A0A', display:'flex', alignItems:'center', gap: 8, flexWrap:'wrap', fontSize: 9, letterSpacing:'0.18em' }}>
              <span style={{ color:'#BFBFBF' }}>// USED IN:</span>
              {o.skus.map((s) => (
                <span key={s} style={{ padding:'3px 8px', border:`1px solid ${o.accent}88`, color: o.accent, fontWeight: 700 }}>{s}</span>
              ))}
            </div>
          </div>
        ))}
      </div>

      <div style={{ marginTop: 28, padding:'14px 18px', borderTop:'1px dashed rgba(255,255,255,0.32)', fontSize: 11, color:'#9A9A9A', letterSpacing:'0.15em', textAlign:'center' }}>
        // we pay above commodity. that's baseline, not a story. · drink responsibly. pwn responsibly.
      </div>
    </section>
  );
};

window.OriginNotes = OriginNotes;