// NoFees.jsx — cleaner, more premium fee calculator

const NoFees = () => {
  const [price, setPrice] = React.useState(250);

  const platforms = [
    { name: 'StubHub', feePct: 0.23 },
    { name: 'Ticketmaster', feePct: 0.28 },
    { name: 'SeatGeek', feePct: 0.22 },
  ];

  const scFee = 0;
  const avgFee = price * ((platforms.reduce((a,p) => a + p.feePct, 0) / platforms.length));
  const maxTotal = Math.max(...platforms.map(p => price * (1 + p.feePct)));

  return (
    <section style={{
      padding: '140px 0',
      background: `
        linear-gradient(180deg, var(--bg) 0%, transparent 140px),
        linear-gradient(0deg, var(--bg) 0%, transparent 140px),
        var(--bg-2)
      `,
      position: 'relative', overflow: 'hidden',
    }}>
      <div className="container">
        <div className="sc-two-col" style={{
          display: 'grid', gridTemplateColumns: '1fr 1.15fr',
          gap: 100, alignItems: 'center',
        }}>
          {/* LEFT */}
          <div>
            <div className="eyebrow" style={{ marginBottom: 18 }}>Zero buyer fees</div>
            <h2 className="display" style={{
              fontSize: 'clamp(44px, 5.2vw, 72px)',
              margin: 0, letterSpacing: '-0.03em', lineHeight: 1.02,
            }}>
              The price you see<br/>
              is the price you{' '}
              <em style={{ color: 'var(--accent)', fontStyle: 'italic' }}>pay</em>.
            </h2>
            <p style={{
              fontSize: 19, color: 'var(--ink-3)', marginTop: 24,
              lineHeight: 1.5, maxWidth: 480,
            }}>
              Others tack on 20–30%. We add $0.
              Sellers keep more. Buyers pay sticker.
            </p>

            {/* Feature pills */}
            <div style={{ display: 'flex', flexDirection: 'column', gap: 14, marginTop: 34 }}>
              {[
                ['✓', 'No buyer fees. No hidden charges.'],
                ['✓', 'Low seller commission — keep more of your sale.'],
                ['✓', 'Secure checkout powered by Stripe.'],
              ].map(([ic, t]) => (
                <div key={t} style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
                  <div style={{
                    width: 22, height: 22, borderRadius: '50%',
                    background: 'var(--accent)',
                    color: 'white', fontSize: 12, fontWeight: 700,
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    flexShrink: 0,
                  }}>{ic}</div>
                  <span style={{ fontSize: 15, color: 'var(--ink-2)', fontWeight: 500 }}>{t}</span>
                </div>
              ))}
            </div>
          </div>

          {/* RIGHT — Calculator */}
          <div style={{
            background: 'white',
            borderRadius: 28,
            padding: 36,
            border: '1px solid var(--line)',
            boxShadow: '0 30px 60px -20px rgba(10, 8, 30, 0.12), 0 4px 12px -4px rgba(10, 8, 30, 0.04)',
            position: 'relative',
            overflow: 'hidden',
          }}>
            {/* Header */}
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 28 }}>
              <div>
                <div className="eyebrow" style={{ marginBottom: 6, color: 'var(--ink-4)' }}>Ticket price</div>
                <div style={{
                  fontSize: 80, fontFamily: 'var(--font-impact)',
                  fontWeight: 900, color: 'var(--ink)',
                  lineHeight: 1, letterSpacing: '-0.04em',
                  display: 'flex', alignItems: 'baseline', gap: 2,
                }}>
                  <span style={{ fontSize: 42, color: 'var(--ink-3)', fontWeight: 800 }}>$</span>
                  {price}
                </div>
              </div>
              <div style={{
                fontFamily: 'var(--font-mono)', fontSize: 10,
                color: 'var(--ink-4)', letterSpacing: '0.14em', textTransform: 'uppercase',
                textAlign: 'right',
              }}>
                Drag to<br/>compare ↓
              </div>
            </div>

            {/* Slider */}
            <div style={{ marginBottom: 12 }}>
              <input
                type="range" min="50" max="800" step="5"
                value={price} onChange={e => setPrice(+e.target.value)}
                style={{
                  width: '100%', accentColor: 'var(--accent)',
                  height: 4,
                }}
              />
              <div style={{
                display: 'flex', justifyContent: 'space-between', marginTop: 4,
                fontFamily: 'var(--font-mono)', fontSize: 10,
                color: 'var(--ink-4)', letterSpacing: '0.08em',
              }}>
                <span>$50</span><span>$800</span>
              </div>
            </div>

            <div style={{ height: 1, background: 'var(--line)', margin: '24px 0' }}/>

            {/* SeatConnect — winner, big and on top */}
            <div style={{
              padding: '20px 22px',
              background: 'linear-gradient(135deg, var(--accent) 0%, var(--accent-ink) 100%)',
              borderRadius: 18,
              color: 'white',
              marginBottom: 20,
              position: 'relative',
              overflow: 'hidden',
              boxShadow: '0 10px 30px -8px rgba(107,61,232,0.35)',
            }}>
              <div style={{
                position: 'absolute', top: -30, right: -30,
                width: 140, height: 140, borderRadius: '50%',
                background: 'rgba(255,255,255,0.08)',
              }}/>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', position: 'relative' }}>
                <div>
                  <div style={{
                    fontFamily: 'var(--font-mono)', fontSize: 10,
                    letterSpacing: '0.14em', textTransform: 'uppercase',
                    opacity: 0.75, marginBottom: 6,
                  }}>You pay on SeatConnect</div>
                  <div style={{ fontSize: 34, fontFamily: 'var(--font-impact)', fontWeight: 900, letterSpacing: '-0.02em', lineHeight: 1 }}>
                    ${price}
                    <span style={{ fontSize: 15, opacity: 0.7, fontWeight: 500, marginLeft: 6 }}>· +$0 fees</span>
                  </div>
                </div>
                <div style={{
                  padding: '8px 14px',
                  background: 'rgba(255,255,255,0.18)',
                  border: '1px solid rgba(255,255,255,0.25)',
                  borderRadius: 999,
                  fontSize: 12, fontWeight: 700, letterSpacing: '0.04em',
                  textTransform: 'uppercase', flexShrink: 0,
                }}>
                  Save ${avgFee.toFixed(0)}
                </div>
              </div>
            </div>

            {/* Platforms */}
            <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
              {platforms.map(p => {
                const fee = price * p.feePct;
                const total = price + fee;
                const pct = (total / maxTotal) * 100;
                return (
                  <div key={p.name}>
                    <div style={{
                      display: 'flex', justifyContent: 'space-between',
                      alignItems: 'baseline', marginBottom: 8,
                    }}>
                      <span style={{ fontSize: 14, color: 'var(--ink)', fontWeight: 600 }}>{p.name}</span>
                      <span style={{ fontSize: 13, color: 'var(--ink-3)', fontFamily: 'var(--font-mono)' }}>
                        <span style={{ color: 'var(--ink)', fontWeight: 600 }}>${total.toFixed(0)}</span>
                        <span style={{ color: 'var(--ink-4)', marginLeft: 8 }}>+${fee.toFixed(0)} ({(p.feePct*100).toFixed(0)}%)</span>
                      </span>
                    </div>
                    <div style={{
                      height: 6, background: 'var(--bg-2)',
                      borderRadius: 999, overflow: 'hidden', position: 'relative',
                    }}>
                      {/* ticket part */}
                      <div style={{
                        position: 'absolute', top: 0, left: 0, height: '100%',
                        width: `${(price / maxTotal) * 100}%`,
                        background: 'var(--ink-2)',
                      }}/>
                      {/* fee part */}
                      <div style={{
                        position: 'absolute', top: 0, left: `${(price / maxTotal) * 100}%`,
                        height: '100%',
                        width: `${(fee / maxTotal) * 100}%`,
                        background: '#E11D48',
                        transition: 'width 0.25s ease',
                      }}/>
                    </div>
                  </div>
                );
              })}
            </div>

            {/* Legend */}
            <div style={{
              display: 'flex', gap: 18, marginTop: 20,
              fontFamily: 'var(--font-mono)', fontSize: 10,
              color: 'var(--ink-4)', letterSpacing: '0.08em', textTransform: 'uppercase',
            }}>
              <span style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                <span style={{ width: 10, height: 10, background: 'var(--ink-2)', borderRadius: 2 }}/>
                Ticket
              </span>
              <span style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                <span style={{ width: 10, height: 10, background: '#E11D48', borderRadius: 2 }}/>
                Fees
              </span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { NoFees });