/* global React, Icon */
// Pain section + How It Works (3-up)

const Pain = () => (
  <section style={{ padding: '120px 0 80px', background: 'var(--bg-deep)', borderTop: '1px solid var(--hairline)', borderBottom: '1px solid var(--hairline)' }}>
    <div className="wrap">
      <div style={{
        display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'flex-start',
      }} className="grid-2">
        <div>
          <span className="section-label">
            <span className="dot"></span>
            01 / The night before
          </span>
          <h2 className="display" style={{ fontSize: 'clamp(40px, 5.5vw, 72px)', margin: '24px 0 0' }}>
            The night before<br/>
            a show shouldn't<br/>
            take <span className="display-italic" style={{ color: 'var(--brand)' }}>3 hours.</span>
          </h2>
        </div>
        <div style={{ paddingTop: 60 }}>
          <p style={{ fontSize: 20, lineHeight: 1.5, color: 'var(--muted-fg)', margin: 0, letterSpacing: '-0.005em' }}>
            You know the drill. <span style={{ color: 'var(--foreground)' }}>80 pairs to list.</span> Photographing each one. Typing every title into Whatnot. Writing descriptions. Looking up comps on StockX. Setting prices. Praying the AI doesn't flag your listing.
          </p>
          <p style={{ fontSize: 20, lineHeight: 1.5, color: 'var(--foreground)', marginTop: 28, fontWeight: 500, letterSpacing: '-0.01em' }}>
            It's the worst part of being a seller.<br/>
            So we built the tool we wished existed.
          </p>

          {/* Time comparison */}
          <div style={{
            marginTop: 40,
            display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 1,
            background: 'var(--hairline)',
            border: '1px solid var(--hairline)',
            borderRadius: 10,
            overflow: 'hidden',
          }}>
            <div style={{ background: 'var(--bg-card)', padding: 24 }}>
              <div className="mono upper" style={{ fontSize: 10, color: 'var(--dim-fg)', letterSpacing: '0.1em' }}>Before</div>
              <div className="mono" style={{ fontSize: 36, marginTop: 8, color: 'oklch(0.65 0.226 27.094)', letterSpacing: '-0.02em' }}>
                3h <span style={{ fontSize: 18, color: 'var(--muted-fg)' }}>15m</span>
              </div>
              <div style={{ fontSize: 13, color: 'var(--muted-fg)', marginTop: 4 }}>80 pairs · manual</div>
            </div>
            <div style={{ background: 'var(--bg-card)', padding: 24 }}>
              <div className="mono upper" style={{ fontSize: 10, color: 'var(--dim-fg)', letterSpacing: '0.1em' }}>With KickScanner</div>
              <div className="mono" style={{ fontSize: 36, marginTop: 8, color: 'var(--brand)', letterSpacing: '-0.02em' }}>
                22m
              </div>
              <div style={{ fontSize: 13, color: 'var(--muted-fg)', marginTop: 4 }}>80 pairs · scanned</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
);

// ---------- How It Works — vertical timeline ----------
const TimelineRow = ({ n, total, label, title, body, demo, flip }) => (
  <div className="timeline-row" style={{
    display: 'grid',
    gridTemplateColumns: '80px 1fr 1fr',
    gap: 32,
    alignItems: 'stretch',
    position: 'relative',
  }}>
    {/* Rail with number */}
    <div style={{ position: 'relative', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
      <div className="mono" style={{
        width: 56, height: 56,
        borderRadius: '50%',
        border: '1px solid var(--hairline-strong)',
        background: 'var(--bg-deep)',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        fontSize: 18, color: 'var(--brand)',
        position: 'relative', zIndex: 2,
      }}>{n}</div>
      {n < total && (
        <div style={{
          flex: 1, width: 1,
          background: 'linear-gradient(to bottom, var(--hairline-strong), var(--hairline) 30%, transparent)',
          marginTop: -2, marginBottom: -2,
          minHeight: 80,
        }}></div>
      )}
    </div>

    {/* Copy + demo, swap order on flip */}
    <div style={{
      gridColumn: flip ? '3' : '2',
      gridRow: 1,
      paddingTop: 4, paddingBottom: 64,
    }}>
      <div className="mono upper" style={{ fontSize: 11, color: 'var(--dim-fg)', letterSpacing: '0.1em' }}>{label}</div>
      <h3 style={{
        fontSize: 'clamp(28px, 3.2vw, 44px)', fontWeight: 500,
        letterSpacing: '-0.025em',
        margin: '12px 0 16px', lineHeight: 1.05,
      }}>{title}</h3>
      <p style={{ color: 'var(--muted-fg)', fontSize: 17, lineHeight: 1.55, margin: 0, maxWidth: 460 }}>{body}</p>
    </div>
    <div style={{
      gridColumn: flip ? '2' : '3',
      gridRow: 1,
      paddingBottom: 64,
    }}>
      <div style={{ minHeight: 240, height: '100%' }}>{demo}</div>
    </div>
  </div>
);

// Step 1 — setup (preferences config)
const SetupDemo = () => {
  const Row = ({ label, value, on }) => (
    <div style={{
      display: 'flex', justifyContent: 'space-between', alignItems: 'center',
      padding: '11px 14px',
      borderTop: '1px solid var(--hairline)',
    }}>
      <span style={{ fontSize: 13, color: 'var(--muted-fg)' }}>{label}</span>
      <span style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
        <span className="mono" style={{ fontSize: 12, color: 'var(--foreground)' }}>{value}</span>
        {on !== undefined && (
          <span style={{
            width: 28, height: 16, borderRadius: 999,
            background: on ? 'var(--brand)' : 'var(--hairline-strong)',
            position: 'relative', flexShrink: 0,
          }}>
            <span style={{
              position: 'absolute', top: 2,
              left: on ? 14 : 2,
              width: 12, height: 12, borderRadius: '50%',
              background: on ? '#111' : 'var(--muted-fg)',
              transition: 'left 0.2s',
            }}></span>
          </span>
        )}
      </span>
    </div>
  );
  return (
    <div style={{
      background: 'var(--bg-deep)',
      border: '1px solid var(--hairline)',
      borderRadius: 8,
      height: '100%', minHeight: 240,
      display: 'flex', flexDirection: 'column',
      overflow: 'hidden',
    }}>
      <div style={{
        padding: '12px 14px',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
      }}>
        <span className="mono upper" style={{ fontSize: 10, color: 'var(--dim-fg)', letterSpacing: '0.1em' }}>Listing preferences</span>
        <span className="pill pill-brand" style={{ fontSize: 9 }}>SAVED</span>
      </div>
      <Row label="Title style" value="HYPE" />
      <Row label="Description tone" value="Confident · short" />
      <Row label="Pricing strategy" value="Low comp − 3%" />
      <Row label="Sell scripts" value="ON" on={true} />
      <Row label="Fun facts" value="ON" on={true} />
      <Row label="Auto-margin floor" value="$25" />
      <div style={{
        marginTop: 'auto',
        padding: '10px 14px',
        borderTop: '1px solid var(--hairline)',
        fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--dim-fg)',
        textTransform: 'uppercase', letterSpacing: '0.08em',
      }}>
        Set once. Applies to every scan.
      </div>
    </div>
  );
};

// Step 2 — scan demo (mini scan frame)
const ScanDemo = () => (
  <div style={{
    position: 'relative', height: '100%',
    background: 'var(--bg-deep)',
    border: '1px solid var(--hairline)',
    borderRadius: 8,
    overflow: 'hidden',
    minHeight: 220,
  }}>
    <div style={{
      position: 'absolute', inset: '20% 18% 25% 18%',
      border: '1px solid var(--brand)',
      borderRadius: 4,
    }}>
      <div className="scan-line" style={{ animationDuration: '2s' }}></div>
    </div>
    <div style={{
      position: 'absolute', top: 12, left: 12,
      display: 'flex', gap: 8,
    }}>
      <span className="pill pill-brand" style={{ fontSize: 9 }}>Box label</span>
      <span className="pill pill-dim" style={{ fontSize: 9 }}>Tongue tag</span>
      <span className="pill pill-dim" style={{ fontSize: 9 }}>Wild</span>
    </div>
    <div style={{
      position: 'absolute', bottom: 12, left: 12, right: 12,
      display: 'flex', justifyContent: 'space-between', alignItems: 'center',
      fontFamily: 'var(--font-mono)', fontSize: 11,
    }}>
      <span style={{ color: 'var(--muted-fg)' }}>SKU detected</span>
      <span style={{ color: 'var(--brand)' }}>DZ5485-612</span>
    </div>
  </div>
);

// Step 3 — review (confidence check + edit)
const ReviewDemo = () => {
  const items = [
    { sku: 'DZ5485-612', name: 'AJ1 Lost & Found', sz: '10.5', conf: 'HIGH', confColor: 'var(--brand)' },
    { sku: 'HQ4540',     name: 'Yeezy 350 Onyx',  sz: '9',    conf: 'MED',  confColor: 'oklch(0.875 0.165 91.772)' },
    { sku: 'B75806',     name: 'Samba OG W/B',    sz: '11',   conf: 'HIGH', confColor: 'var(--brand)' },
  ];
  return (
    <div style={{
      background: 'var(--bg-deep)',
      border: '1px solid var(--hairline)',
      borderRadius: 8,
      height: '100%', minHeight: 240,
      overflow: 'hidden',
      display: 'flex', flexDirection: 'column',
    }}>
      <div style={{
        padding: '12px 14px',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        borderBottom: '1px solid var(--hairline)',
      }}>
        <span className="mono upper" style={{ fontSize: 10, color: 'var(--dim-fg)', letterSpacing: '0.1em' }}>Review queue · 80 pairs</span>
        <span className="mono" style={{ fontSize: 11, color: 'var(--muted-fg)' }}>2 need attention</span>
      </div>
      {items.map((it, i) => (
        <div key={it.sku} style={{
          display: 'grid', gridTemplateColumns: '32px 1fr auto auto', gap: 12, alignItems: 'center',
          padding: '10px 14px',
          borderBottom: i < items.length - 1 ? '1px solid var(--hairline)' : 'none',
        }}>
          <div style={{
            width: 32, height: 32, borderRadius: 4,
            background: 'var(--bg-card)', border: '1px solid var(--hairline)',
          }}></div>
          <div style={{ minWidth: 0 }}>
            <div style={{ fontSize: 13, color: 'var(--foreground)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{it.name}</div>
            <div className="mono" style={{ fontSize: 10, color: 'var(--dim-fg)' }}>{it.sku} · sz {it.sz}</div>
          </div>
          <span className="mono upper" style={{
            fontSize: 9, letterSpacing: '0.1em',
            color: it.confColor,
            border: `1px solid ${it.confColor}`,
            padding: '3px 7px', borderRadius: 999,
            background: it.conf === 'MED' ? 'oklch(0.875 0.165 91.772 / 0.12)' : 'transparent',
          }}>{it.conf}</span>
          <span className="mono" style={{ fontSize: 11, color: 'var(--brand)' }}>$385</span>
        </div>
      ))}
      <div style={{
        marginTop: 'auto',
        padding: '10px 14px',
        borderTop: '1px solid var(--hairline)',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        fontFamily: 'var(--font-mono)', fontSize: 10,
        color: 'var(--dim-fg)', textTransform: 'uppercase', letterSpacing: '0.08em',
      }}>
        <span>Tap to fix or re-scan</span>
        <span style={{ color: 'var(--brand)' }}>78 / 80 ready ✓</span>
      </div>
    </div>
  );
};

// Step 4 — upload (CSV export preview)
const UploadDemo = () => (
  <div style={{
    background: 'var(--bg-deep)',
    border: '1px solid var(--hairline)',
    borderRadius: 8,
    height: '100%', minHeight: 240,
    overflow: 'hidden',
    display: 'flex', flexDirection: 'column',
  }}>
    <div style={{
      display: 'flex', alignItems: 'center', gap: 8,
      padding: '8px 12px',
      borderBottom: '1px solid var(--hairline)',
      fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--muted-fg)',
    }}>
      <span style={{ width: 8, height: 8, borderRadius: '50%', background: 'oklch(0.65 0.226 27.094)' }}></span>
      <span style={{ width: 8, height: 8, borderRadius: '50%', background: 'oklch(0.875 0.165 91.772)' }}></span>
      <span style={{ width: 8, height: 8, borderRadius: '50%', background: 'oklch(0.741 0.199 147.068)' }}></span>
      <span style={{ marginLeft: 12 }}>whatnot_export_2026-04-26.csv</span>
    </div>
    <div className="mono" style={{
      padding: 14, fontSize: 11, lineHeight: 1.7,
      color: 'var(--muted-fg)',
      overflowX: 'hidden', whiteSpace: 'nowrap',
    }}>
      <div style={{ color: 'var(--brand)' }}>title,brand,sku,size,price,description,photo_1...</div>
      <div>"AJ1 Lost & Found 10.5",Jordan,DZ5485-612,10.5,385,"DS pair...",ph_1.jpg</div>
      <div>"Yeezy Onyx 9",Adidas,HQ4540,9,235,"VNDS no box...",ph_2.jpg</div>
      <div>"Samba OG W/B 11",Adidas,B75806,11,118,"Used 8/10...",ph_3.jpg</div>
      <div>"Dunk Low Panda 8",Nike,DD1391-100,8,112,"DS w/ box...",ph_4.jpg</div>
      <div style={{ color: 'var(--dim-fg)' }}>...76 more rows</div>
    </div>
    <div style={{
      marginTop: 'auto',
      padding: '10px 14px',
      borderTop: '1px solid var(--hairline)',
      display: 'flex', justifyContent: 'space-between', alignItems: 'center',
      fontFamily: 'var(--font-mono)', fontSize: 11,
    }}>
      <span style={{ color: 'var(--muted-fg)' }}>80 rows · 640 photos</span>
      <span className="pill pill-brand" style={{ fontSize: 9 }}>↓ DOWNLOAD</span>
    </div>
  </div>
);

// Step 5 — live (sell scripts on-screen during a show)
const LiveDemo = () => (
  <div style={{
    position: 'relative',
    background: 'var(--bg-deep)',
    border: '1px solid var(--hairline)',
    borderRadius: 8,
    height: '100%', minHeight: 240,
    overflow: 'hidden',
    display: 'flex', flexDirection: 'column',
  }}>
    {/* Top bar — live indicator */}
    <div style={{
      padding: '10px 14px',
      display: 'flex', justifyContent: 'space-between', alignItems: 'center',
      borderBottom: '1px solid var(--hairline)',
    }}>
      <span style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
        <span style={{
          width: 8, height: 8, borderRadius: '50%',
          background: 'oklch(0.65 0.226 27.094)',
          boxShadow: '0 0 8px oklch(0.65 0.226 27.094)',
          animation: 'live-pulse 1.4s infinite',
        }}></span>
        <span className="mono upper" style={{ fontSize: 10, letterSpacing: '0.12em', color: 'var(--foreground)' }}>LIVE · 247 viewers</span>
      </span>
      <span className="mono" style={{ fontSize: 10, color: 'var(--dim-fg)' }}>Lot 14 / 80</span>
    </div>

    {/* Sell script */}
    <div style={{ padding: 16, flex: 1 }}>
      <div className="mono upper" style={{ fontSize: 9, color: 'var(--brand)', letterSpacing: '0.12em', marginBottom: 8 }}>SELL SCRIPT</div>
      <div style={{ fontSize: 14, lineHeight: 1.45, color: 'var(--foreground)', letterSpacing: '-0.005em' }}>
        "Lost &amp; Found AJ1s, size 10.5, deadstock with the box. This was the 40th-anniversary drop — aged Sail, Chicago colorway, comes with the special card. Last GOAT sale was $410. We're starting at $325."
      </div>
    </div>

    {/* Fun fact strip */}
    <div style={{
      padding: '10px 14px',
      borderTop: '1px solid var(--hairline)',
      background: 'oklch(1 0 0 / 0.02)',
    }}>
      <div className="mono upper" style={{ fontSize: 9, color: 'var(--dim-fg)', letterSpacing: '0.12em', marginBottom: 4 }}>FUN FACT (filler)</div>
      <div style={{ fontSize: 12, color: 'var(--muted-fg)', lineHeight: 1.4 }}>
        Released Nov 2022. Designed to look like a vintage AJ1 found in a warehouse 40 years later — the &quot;Y&quot; in the box logo is intentionally faded.
      </div>
    </div>
  </div>
);

const HowItWorks = () => (
  <section id="how" style={{ padding: '120px 0' }}>
    <div className="wrap">
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 72, gap: 32, flexWrap: 'wrap' }}>
        <div>
          <span className="section-label"><span className="dot"></span>02 / The flow</span>
          <h2 className="display" style={{ fontSize: 'clamp(40px, 5vw, 64px)', margin: '20px 0 0' }}>
            Five steps.<br/>
            <span style={{ color: 'var(--muted-fg)' }}>That's the whole thing.</span>
          </h2>
        </div>
        <div className="mono" style={{
          fontSize: 11, color: 'var(--muted-fg)', textTransform: 'uppercase', letterSpacing: '0.08em',
          maxWidth: 280, textAlign: 'right',
        }}>
          [ Demo: 30-second loop of the full flow goes here once we shoot it ]
        </div>
      </div>

      <div className="timeline" style={{ display: 'flex', flexDirection: 'column' }}>
        <TimelineRow
          n="01" total={5} label="Setup · once"
          title="Set the rules."
          body="Pick how you want listings to read — title style, description tone, pricing strategy, margin floor. Set it once and KickScanner uses it on every scan, every show."
          demo={<SetupDemo />}
          flip={false}
        />
        <TimelineRow
          n="02" total={5} label="Scan"
          title="Point and shoot."
          body="Box label, tongue tag, or just the shoe itself. We identify brand, model, colorway, SKU, size, and release year — across 50+ brands including Nike, Jordan, Adidas, New Balance, Yeezy, On, and HOKA."
          demo={<ScanDemo />}
          flip={true}
        />
        <TimelineRow
          n="03" total={5} label="Review"
          title="Catch the misses."
          body="Confidence scoring tells you when the AI isn't sure. Tap to re-scan with a hint or fix it manually. Live StockX and GOAT comps load on every pair, with the conservative low comp pre-selected so you never underprice."
          demo={<ReviewDemo />}
          flip={false}
        />
        <TimelineRow
          n="04" total={5} label="Upload"
          title="Export and push."
          body="Whatnot-ready CSV with everything baked in: titles, descriptions, up to 8 photos per pair, sell scripts, fun facts. Download it and bulk-upload to Whatnot. TikTok Shop, eBay, and StockX export coming soon."
          demo={<UploadDemo />}
          flip={true}
        />
        <TimelineRow
          n="05" total={5} label="Live"
          title="Go live, never freeze."
          body="During the show, KickScanner surfaces your AI sell script and a backup fun fact for every lot — so you sound prepared on camera, never lose your flow, and have something to say when the room goes quiet."
          demo={<LiveDemo />}
          flip={false}
        />
      </div>
    </div>
  </section>
);

Object.assign(window, { Pain, HowItWorks });
