// Comparison section — interactive swipe between four land uses
function Comparison() {
  const uses = [
    { id:'dc', name: 'Data Center', icon: <Icons.Shield size={22}/>, accent: true, sub: 'Piedmont Technology Park', img: 'dc',
      metrics: {
        'Daily Traffic': { level: 1, label: 'Low' },
        'Truck Traffic': { level: 1, label: 'Very limited' },
        'Permanent Jobs': { level: 3, label: 'Moderate, highly skilled' },
        'Average Wages': { level: 4, label: 'High' },
        'Public Service Demand': { level: 1, label: 'Low' },
        'Tax Revenue Stability': { level: 4, label: 'Very stable, long-term' },
        'Land Use Intensity': { level: 2, label: 'Moderate size, low activity' },
      }
    },
    { id:'wh', name: 'Warehouse', icon: <Icons.Truck size={22}/>, sub: 'Large distribution facility', img: 'wh',
      metrics: {
        'Daily Traffic': { level: 4, label: 'High' },
        'Truck Traffic': { level: 4, label: 'Frequent' },
        'Permanent Jobs': { level: 3, label: 'Moderate, logistics-focused' },
        'Average Wages': { level: 2, label: 'Moderate' },
        'Public Service Demand': { level: 2, label: 'Moderate' },
        'Tax Revenue Stability': { level: 2, label: 'Moderate' },
        'Land Use Intensity': { level: 4, label: 'Large buildings, high activity' },
      }
    },
    { id:'re', name: 'Retail', icon: <Icons.Briefcase size={22}/>, sub: 'Shopping & services', img: 're',
      metrics: {
        'Daily Traffic': { level: 4, label: 'High' },
        'Truck Traffic': { level: 3, label: 'Regular deliveries' },
        'Permanent Jobs': { level: 4, label: 'Higher count, service-oriented' },
        'Average Wages': { level: 1, label: 'Lower to moderate' },
        'Public Service Demand': { level: 3, label: 'Higher' },
        'Tax Revenue Stability': { level: 2, label: 'Market-dependent' },
        'Land Use Intensity': { level: 3, label: 'Smaller buildings, high activity' },
      }
    },
    { id:'rs', name: 'Residential', icon: <Icons.Home size={22}/>, sub: 'Subdivision development', img: 'rs',
      metrics: {
        'Daily Traffic': { level: 2, label: 'Moderate' },
        'Truck Traffic': { level: 1, label: 'Very limited' },
        'Permanent Jobs': { level: 0, label: 'None' },
        'Average Wages': { level: 0, label: 'N/A' },
        'Public Service Demand': { level: 4, label: 'Higher (schools, services)' },
        'Tax Revenue Stability': { level: 3, label: 'Stable but service-intensive' },
        'Land Use Intensity': { level: 3, label: 'Smaller, continuous activity' },
      }
    },
  ];
  const [active, setActive] = useState('dc');
  const a = uses.find(u => u.id === active);

  // Favorability scoring for each metric (higher bar = better for community/data-center-positive)
  const favorability = {
    'Daily Traffic':         [5,4,3,2,1], // level -> goodness
    'Truck Traffic':         [5,4,3,2,1],
    'Permanent Jobs':        [1,2,3,4,5],
    'Average Wages':         [0,2,3,4,5],
    'Public Service Demand': [5,4,3,2,1],
    'Tax Revenue Stability': [0,1,2,3,4],
    'Land Use Intensity':    [3,4,3,2,1],
  };

  const TinyScene = ({ kind }) => (
    <svg viewBox="0 0 200 100" style={{ width: '100%', height: '100%' }} preserveAspectRatio="xMidYMid slice" aria-hidden>
      <rect width="200" height="60" fill="#e3e7cf" />
      <rect y="60" width="200" height="40" fill="#8a9a62" />
      {kind === 'dc' && (<>
        <ellipse cx="100" cy="72" rx="88" ry="18" fill="#6e8a4a" />
        <rect x="70" y="58" width="60" height="16" fill="#ebe2cf" stroke="#a39b70" strokeWidth=".6" />
        <rect x="82" y="52" width="36" height="8" fill="#ebe2cf" stroke="#a39b70" strokeWidth=".6" />
      </>)}
      {kind === 'wh' && (<>
        <rect x="30" y="46" width="140" height="34" fill="#dcd5bc" stroke="#9a9175" strokeWidth=".6" />
        <rect x="40" y="70" width="10" height="10" fill="#8a8267" />
        <rect x="60" y="70" width="10" height="10" fill="#8a8267" />
        <rect x="80" y="70" width="10" height="10" fill="#8a8267" />
        <rect x="40" y="30" width="120" height="6" fill="#8a8267" />
      </>)}
      {kind === 're' && (<>
        <rect x="20" y="50" width="30" height="30" fill="#f0d7b2" stroke="#a38a5d" strokeWidth=".6" />
        <rect x="60" y="44" width="40" height="36" fill="#e8dcc2" stroke="#a38a5d" strokeWidth=".6" />
        <rect x="110" y="54" width="28" height="26" fill="#d9c9a6" stroke="#a38a5d" strokeWidth=".6" />
        <rect x="150" y="48" width="30" height="32" fill="#e3d3ae" stroke="#a38a5d" strokeWidth=".6" />
      </>)}
      {kind === 'rs' && (<>
        {Array.from({length:6}).map((_,i)=>(
          <g key={i}>
            <polygon points={`${20+i*28},60 ${34+i*28},46 ${48+i*28},60`} fill="#b8916a" />
            <rect x={22+i*28} y="60" width="24" height="18" fill="#e0cda9" stroke="#8a6a48" strokeWidth=".4" />
          </g>
        ))}
      </>)}
    </svg>
  );

  return (
    <section id="landuse" style={{ padding: '140px 0', background: 'var(--paper)' }}>
      <div className="container-x">
        <div style={{ display:'flex', alignItems:'end', justifyContent:'space-between', gap: 40, flexWrap:'wrap', marginBottom: 40 }}>
          <div style={{ maxWidth: 720 }}>
            <Reveal><div className="eyebrow"><span className="dot" /> Land use comparison</div></Reveal>
            <Reveal delay={1}><h2 className="h2" style={{ marginTop: 18 }}>The best possible <span className="accent-underline">neighbor.</span></h2></Reveal>
          </div>
          <Reveal delay={2}>
            <p style={{ color: 'var(--slate-700)', fontSize: 16, lineHeight: 1.6, maxWidth: 480 }}>
              Data center campuses offer significant advantages in traffic, wages, and tax revenue stability compared to alternative development options for the same parcel.
            </p>
          </Reveal>
        </div>

        {/* Tab row */}
        <div style={{ display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap: 10, marginBottom: 18 }}>
          {uses.map(u => (
            <button key={u.id} onClick={() => setActive(u.id)}
              className="card" style={{
                padding: 18, textAlign:'left', cursor: 'pointer',
                border: u.id === active ? '1px solid var(--ink)' : '1px solid rgba(20,32,27,.1)',
                background: 'var(--white)',
                color: 'var(--ink)',
                transform: 'none',
                position: 'relative',
                boxShadow: u.id === active ? 'inset 0 -3px 0 var(--accent)' : 'none',
              }}>
              <div style={{ display:'flex', alignItems:'center', gap: 12 }}>
                <div style={{ width: 38, height: 38, borderRadius: 0, display:'flex', alignItems:'center', justifyContent:'center',
                  background: u.id === active ? 'var(--accent-soft)' : 'var(--cream-100)',
                  color: u.id === active ? 'var(--accent-deep)' : 'var(--slate-500)' }}>
                  {u.icon}
                </div>
                <div>
                  <div className="font-display" style={{ fontWeight: 500, fontSize: 15, letterSpacing: '-0.005em' }}>{u.name}</div>
                  <div className="tag-mono" style={{ color: 'var(--slate-500)', marginTop: 2 }}>{u.sub}</div>
                </div>
              </div>
            </button>
          ))}
        </div>

        {/* Detail panel */}
        <Reveal className="card" style={{ padding: 0, overflow: 'hidden' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '0.7fr 1.3fr' }}>
            <div style={{ background: a.id === 'dc' ? 'var(--cream-100)' : 'var(--cream-50)', color: 'var(--ink)', padding: 32, position: 'relative', overflow: 'hidden', borderRight: '1px solid rgba(20,32,27,.08)' }}>
              <div style={{ position: 'absolute', inset: 0, opacity: .15, pointerEvents: 'none' }}>
                <TinyScene kind={a.img} />
              </div>
              <div style={{ position: 'relative' }}>
                <div className="tag-mono" style={{ color: a.id === 'dc' ? 'var(--accent-deep)' : 'var(--slate-500)' }}>
                  {a.id === 'dc' ? '— Recommended neighbor' : '— Alternative use'}
                </div>
                <div className="font-display" style={{ fontSize: 36, fontWeight: 500, letterSpacing:'-0.02em', marginTop: 10, lineHeight: 1, color: 'var(--ink)' }}>{a.name}</div>
                <div style={{ color: 'var(--slate-500)', fontSize: 14, marginTop: 6 }}>{a.sub}</div>

                <div style={{ marginTop: 36, display: 'flex', flexDirection: 'column', gap: 10 }}>
                  {a.id === 'dc' ? (
                    <>
                      <div style={{ color: 'var(--slate-700)', fontSize: 14, lineHeight: 1.6 }}>Minimal daily traffic, no school burden, stable long‑term property taxes, and high‑wage technical jobs.</div>
                      <div className="pill pill-accent" style={{ alignSelf:'start', marginTop: 10 }}>4 of 4 advantages</div>
                    </>
                  ) : (
                    <div style={{ color: 'var(--slate-700)', fontSize: 14, lineHeight: 1.6 }}>Higher daily or truck traffic, greater public service demand, or market‑dependent revenue compared to a data center.</div>
                  )}
                </div>
              </div>
            </div>
            <div style={{ padding: 28 }}>
              {Object.entries(a.metrics).map(([k, m], i) => {
                const score = favorability[k][m.level] ?? 0;
                const pct = (score / 5) * 100;
                const good = score >= 4;
                return (
                  <div key={k} style={{ padding: '14px 0', borderBottom: i < 6 ? '1px dashed rgba(10,24,18,.12)' : 'none', display: 'grid', gridTemplateColumns: 'minmax(140px, 0.9fr) 1.6fr auto', gap: 24, alignItems: 'center' }}>
                    <div className="font-display" style={{ fontWeight: 500, fontSize: 14 }}>{k}</div>
                    <div>
                      <div style={{ height: 6, borderRadius: 999, background: 'rgba(10,24,18,.06)', position:'relative', overflow: 'hidden' }}>
                        <div style={{ position: 'absolute', inset: 0, width: `${pct}%`, background: good ? 'var(--accent)' : 'var(--slate-300)', transition: 'width .6s ease' }} />
                      </div>
                      <div className="tag-mono" style={{ marginTop: 8, color: good ? 'var(--accent-deep)' : 'var(--slate-500)' }}>{m.label}</div>
                    </div>
                    <div style={{ textAlign:'right', display: 'flex', alignItems: 'center', justifyContent: 'flex-end', gap: 6, whiteSpace: 'nowrap' }}>
                      <span className="pip" style={{ background: good ? 'var(--accent)' : 'var(--slate-300)' }} />
                      <span className="font-display num" style={{ fontWeight: 500, fontSize: 15 }}>{score}/5</span>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        </Reveal>
      </div>
      <style>{`
        @media(max-width: 900px){
          #landuse > .container-x > div:nth-child(2) { grid-template-columns: 1fr 1fr !important; }
          #landuse > .container-x > div:nth-child(3) > div { grid-template-columns: 1fr !important; }
          #landuse > .container-x > div:nth-child(3) > div > div:first-child { border-right: none !important; border-bottom: 1px solid rgba(20,32,27,.08) !important; }
        }
        @media(max-width: 560px){
          #landuse > .container-x > div:nth-child(2) { grid-template-columns: 1fr !important; }
          #landuse [style*="grid-template-columns: minmax(140px"] { grid-template-columns: 1fr auto !important; row-gap: 8px !important; }
          #landuse [style*="grid-template-columns: minmax(140px"] > div:nth-child(2) { grid-column: 1 / -1 !important; }
        }
      `}</style>
    </section>
  );
}
window.Comparison = Comparison;