// CARDS — showcase 6 sample cards

const cardData = [
  { k: 'PAYMENT DUE', t: '₹23,450', s: 'HDFC Credit Card · due in 5 days', meta: 'BILL', a: 'Pay now', c: 'var(--accent)' },
  { k: 'FLIGHT', t: 'DEL → BOM', s: 'Tomorrow · 6:45 am · 6E-2042', meta: 'TRAVEL', a: 'Check in', c: '#5567A8' },
  { k: 'PARCEL', t: 'Amazon · 2 items', s: 'Out for delivery · today', meta: 'LOGISTICS', a: 'Track', c: '#5C8A6F' },
  { k: 'REPLY NEEDED', t: 'Anika Mehta', s: 'Contract review · overdue 2d', meta: 'WORK', a: 'Quick reply', c: 'var(--accent-deep)' },
  { k: 'SUBSCRIPTION', t: 'Netflix · ₹649', s: 'Renews May 12 · 28 days left', meta: 'RECURRING', a: 'Manage', c: '#8B6FA8' },
  { k: 'OTP', t: '472 891', s: 'ICICI Bank · expires in 4 min', meta: 'SECURE', a: 'Copy', c: '#A88F5C' },
];

function Cards() {
  const [hover, setHover] = useState(-1);
  return (
    <section className="rs-section" style={{
      position: 'relative', padding: '120px 0',
      background: 'var(--bg-deep)', overflow: 'hidden'
    }}>
      <AmbientGrid density={42} dark />

      <div className="rs-container" style={{ position: 'relative', maxWidth: 1240, margin: '0 auto', padding: '0 32px', zIndex: 2 }}>
        <div className="rs-cards-head" style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 80, alignItems: 'end', marginBottom: 64 }}>
          <div>
            <Reveal><SectionMark num="02" label="Smart Cards" /></Reveal>
            <Reveal delay={100}>
              <h2 style={{
                fontFamily: 'var(--serif)', fontWeight: 400,
                fontSize: 'clamp(2.2rem, 4.5vw, 4rem)', lineHeight: 1,
                letterSpacing: '-0.03em', margin: '24px 0 0',
                textWrap: 'balance'
              }}>
                Less email.<br /><span className="italic" style={{ color: 'var(--accent)' }}>More signal.</span>
              </h2>
            </Reveal>
          </div>
          <Reveal delay={200}>
            <p style={{
              fontSize: 16, lineHeight: 1.7, fontWeight: 300,
              color: 'var(--ink-mute)', maxWidth: 480, margin: 0,
              textWrap: 'pretty'
            }}>
              Every email Scrub touches becomes a glanceable card with one job.
              Pay the bill. Catch the flight. Reply to the human. Move on with your day.
            </p>
          </Reveal>
        </div>

        <div className="rs-grid-3" style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16,
        }}>
          {cardData.map((c, i) => (
            <Reveal key={i} delay={i * 80}>
              <div
                onMouseEnter={() => setHover(i)}
                onMouseLeave={() => setHover(-1)}
                style={{
                  position: 'relative',
                  padding: 22,
                  background: hover === i
                    ? `linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02))`
                    : `linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01))`,
                  border: `1px solid ${hover === i ? c.c + '60' : 'var(--hair-dk)'}`,
                  borderRadius: 14,
                  transition: 'all 0.4s cubic-bezier(.2,.7,.2,1)',
                  transform: hover === i ? 'translateY(-3px)' : 'translateY(0)',
                  boxShadow: hover === i ? `0 18px 50px ${c.c}20` : 'none',
                  cursor: 'pointer',
                  height: '100%',
                  display: 'flex', flexDirection: 'column'
                }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 18 }}>
                  <span style={{
                    fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.18em',
                    color: c.c, fontWeight: 500
                  }}>{c.k}</span>
                  <span style={{
                    fontFamily: 'var(--mono)', fontSize: 9, letterSpacing: '0.16em',
                    color: 'var(--ink-faint)',
                    padding: '3px 7px', border: '1px solid var(--hair-dk)', borderRadius: 4
                  }}>{c.meta}</span>
                </div>

                <div style={{
                  fontFamily: 'var(--serif)', fontSize: 36, lineHeight: 1,
                  marginBottom: 6, letterSpacing: '-0.02em'
                }}>{c.t}</div>
                <div style={{ fontSize: 13, color: 'var(--ink-mute)', marginBottom: 22, flex: 1 }}>{c.s}</div>

                <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                  <button style={{
                    padding: '7px 12px', fontSize: 12, fontWeight: 500,
                    background: `${c.c}18`, color: c.c,
                    border: `1px solid ${c.c}40`, borderRadius: 7,
                    transition: 'all 0.2s'
                  }}>{c.a} →</button>
                  <button style={{
                    padding: '7px 10px', fontSize: 12,
                    color: 'var(--ink-faint)',
                    border: '1px solid var(--hair-dk)', borderRadius: 7
                  }}>Snooze</button>
                  <button style={{
                    padding: '7px 10px', fontSize: 12,
                    color: 'var(--ink-faint)',
                    border: '1px solid var(--hair-dk)', borderRadius: 7
                  }}>Done</button>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Cards = Cards;