/* global React, Icon */
// Why we're different + Feature list

const WhyDifferent = () => {
  const cards = [
    {
      tag: '01',
      label: 'Built by sellers',
      title: 'We run Whatnot shows.',
      body: "We've spent the 3-hour nights. Every feature in here exists because we needed it.",
      accent: true,
    },
    {
      tag: '02',
      label: 'Confidence-scored',
      title: 'No more inaccurate listings.',
      body: "Confidence scoring tells you when the AI isn't sure — and lets you correct it with a hint. No more wrong colorways killing your listings.",
    },
    {
      tag: '03',
      label: 'Browser-based',
      title: 'Works on the phone in your hand.',
      body: 'Web-based. No App Store install, no desktop software. Open the link, scan, done. Inventory persists between sessions.',
    },
    {
      tag: '04',
      label: 'Margin-aware',
      title: 'Cost tracking built in.',
      body: 'Drop in your purchase CSV and we auto-match every pair to its cost by SKU. Know your margin before you go live.',
    },
  ];

  return (
    <section style={{ padding: '120px 0', background: 'var(--bg-deep)', borderTop: '1px solid var(--hairline)', borderBottom: '1px solid var(--hairline)' }}>
      <div className="wrap">
        <div style={{ marginBottom: 56 }}>
          <span className="section-label"><span className="dot"></span>03 / The difference</span>
          <h2 className="display" style={{ fontSize: 'clamp(40px, 5vw, 64px)', margin: '20px 0 0', maxWidth: '20ch' }}>
            Why KickScanner is <span className="display-italic" style={{ color: 'var(--brand)' }}>different.</span>
          </h2>
        </div>

        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 1,
          background: 'var(--hairline)',
          border: '1px solid var(--hairline)',
          borderRadius: 12, overflow: 'hidden',
        }} className="grid-2">
          {cards.map((c) => (
            <div key={c.tag} style={{
              background: c.accent ? 'var(--bg-card)' : 'var(--background)',
              padding: 40,
              minHeight: 280,
              display: 'flex', flexDirection: 'column',
              position: 'relative',
            }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <span className="mono" style={{ fontSize: 11, color: c.accent ? 'var(--brand)' : 'var(--dim-fg)', letterSpacing: '0.08em' }}>
                  / {c.tag}
                </span>
                <span className="mono upper" style={{ fontSize: 10, color: 'var(--dim-fg)', letterSpacing: '0.1em' }}>{c.label}</span>
              </div>
              <h3 style={{
                fontSize: 32, fontWeight: 500, letterSpacing: '-0.025em', lineHeight: 1.05,
                margin: '32px 0 16px',
                maxWidth: '14ch',
              }}>{c.title}</h3>
              <p style={{ color: 'var(--muted-fg)', fontSize: 16, lineHeight: 1.55, margin: 0, maxWidth: '40ch' }}>
                {c.body}
              </p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// ---------- Feature list ----------
const FEATURES = [
  { name: 'AI shoe identification', tag: '50+ brands' },
  { name: 'Box label, tongue tag, or "wild" photo input', tag: '3 modes' },
  { name: 'Confidence scoring with one-tap re-scan', tag: 'AI' },
  { name: 'Live StockX + GOAT pricing', tag: 'Realtime' },
  { name: 'Whatnot bulk-upload CSV export', tag: 'CSV' },
  { name: 'Title preset styles — hype, classic, SKU-first, minimal', tag: '4 styles' },
  { name: 'AI-generated sell scripts for live shows', tag: 'Live' },
  { name: 'AI-generated fun facts per shoe', tag: 'Fill dead air' },
  { name: 'Up to 8 product photos + authenticity proof shot', tag: 'Photos' },
  { name: 'Auto box / condition tracking', tag: 'Inventory' },
  { name: 'Cost-per-item import + margin tracking', tag: 'Margin' },
  { name: 'Lot numbering with auto-renumber on export', tag: 'Lots' },
  { name: 'Persistent inventory across sessions', tag: 'Sync' },
  { name: 'Sort by scan order, size, or brand', tag: 'Sort' },
];

const FeatureList = () => (
  <section id="features" style={{ padding: '120px 0' }}>
    <div className="wrap">
      <div style={{
        display: 'grid', gridTemplateColumns: '1fr 1.5fr', gap: 80, alignItems: 'flex-start',
      }} className="grid-2">
        <div style={{ position: 'sticky', top: 96 }}>
          <span className="section-label"><span className="dot"></span>04 / Everything you get</span>
          <h2 className="display" style={{ fontSize: 'clamp(40px, 5vw, 64px)', margin: '20px 0 24px' }}>
            Everything<br/>you get.
          </h2>
          <p style={{ color: 'var(--muted-fg)', fontSize: 16, lineHeight: 1.55, maxWidth: '36ch' }}>
            Every feature exists because a seller asked for it on a 2 a.m. Slack thread.
          </p>
          <div style={{
            marginTop: 32,
            padding: 16,
            border: '1px solid var(--hairline)',
            borderRadius: 8,
            background: 'var(--bg-card)',
            maxWidth: 320,
          }}>
            <div className="mono upper" style={{ fontSize: 10, color: 'var(--dim-fg)', letterSpacing: '0.1em' }}>Coming soon</div>
            <div style={{ marginTop: 8, display: 'flex', gap: 8, flexWrap: 'wrap' }}>
              <span className="pill pill-dim">TikTok Shop export</span>
              <span className="pill pill-dim">eBay export</span>
              <span className="pill pill-dim">StockX export</span>
            </div>
          </div>
        </div>

        <div>
          {FEATURES.map((f, i) => (
            <div key={i} className="feature-row">
              <span className="num">{String(i + 1).padStart(2, '0')}</span>
              <span className="name">{f.name}</span>
              <span className="tag">{f.tag}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  </section>
);

Object.assign(window, { WhyDifferent, FeatureList });