'use client';

import { useState } from 'react';

const ITEMS = [
  {
    list: 'api',
    title: 'API access',
    body: 'Programmatic access to the grading engine. Build your own dashboards, alerts, automations.',
  },
  {
    list: 'alerts',
    title: 'Custom alerts',
    body: 'Get pinged when specific players, stats, or matchups hit your threshold — by SMS, email, or webhook.',
  },
  {
    list: 'The Edge',
    title: 'The Edge — playbook',
    body: 'Long-form analysis of the model and how to deploy it in real bankroll management.',
  },
  {
    list: 'merch',
    title: 'Capsule drop',
    body: 'First merch run. 200 units. Founder access gets first pull.',
  },
];

export default function MarketplacePage() {
  const [email, setEmail] = useState('');
  const [honeypot, setHoneypot] = useState('');
  const [submitted, setSubmitted] = useState<Set<string>>(new Set());
  const [error, setError] = useState('');

  const joinList = async (list: string) => {
    if (honeypot) return;
    setError('');
    if (!email || !/^\S+@\S+\.\S+$/.test(email)) {
      setError('Enter a valid email first.');
      return;
    }
    try {
      const res = await fetch('/api/waitlist', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email, list }),
      });
      if (res.ok) setSubmitted((s) => new Set(s).add(list));
    } catch {
      setSubmitted((s) => new Set(s).add(list));
    }
  };

  return (
    <section style={{ maxWidth: 880, margin: '0 auto', padding: '64px 16px 120px' }}>
      <header style={{ textAlign: 'center', marginBottom: 48 }}>
        <p className="mono" style={{ fontSize: 12, color: 'var(--grade-a)', letterSpacing: '0.08em', marginBottom: 12 }}>
          COMING SOON
        </p>
        <h1 style={{ fontSize: 'clamp(28px,4vw,40px)', fontWeight: 700, letterSpacing: '-0.03em', marginBottom: 12 }}>
          The VYNDR Marketplace.
        </h1>
        <p style={{ color: 'var(--text-secondary)', fontSize: 16, maxWidth: 560, margin: '0 auto' }}>
          API access, custom alerts, deep analysis, and limited drops. Reserve your spot — these go to founder users first.
        </p>
      </header>

      <div
        style={{
          display: 'grid',
          gap: 16,
          gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',
          marginBottom: 32,
        }}
      >
        {ITEMS.map((item) => (
          <article key={item.list} className="surface diagonal-cut surface-hover" style={{ padding: 24 }}>
            <h3 style={{ fontSize: 17, fontWeight: 700, marginBottom: 8 }}>{item.title}</h3>
            <p style={{ fontSize: 14, color: 'var(--text-secondary)', marginBottom: 16, lineHeight: 1.6 }}>
              {item.body}
            </p>
            {submitted.has(item.list) ? (
              <p className="mono" style={{ color: 'var(--grade-a)', fontSize: 13 }}>✓ On the list.</p>
            ) : (
              <button onClick={() => joinList(item.list)} className="btn-ghost" style={{ padding: '8px 16px', fontSize: 13 }}>
                Join waitlist
              </button>
            )}
          </article>
        ))}
      </div>

      <section className="surface diagonal-cut" style={{ padding: 24, maxWidth: 460, margin: '0 auto' }}>
        <label className="mono" style={{ display: 'block', fontSize: 11, color: 'var(--text-tertiary)', letterSpacing: '0.08em', marginBottom: 8 }}>
          YOUR EMAIL
        </label>
        <input
          type="email"
          className="input-field"
          placeholder="you@email.com"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
        />
        {/* Honeypot — hidden from humans */}
        <input
          type="text"
          name="website"
          value={honeypot}
          onChange={(e) => setHoneypot(e.target.value)}
          style={{ position: 'absolute', left: '-9999px', opacity: 0 }}
          tabIndex={-1}
          autoComplete="off"
          aria-hidden
        />
        {error && <p style={{ fontSize: 12, color: 'var(--grade-d)', marginTop: 8 }}>{error}</p>}
        <p style={{ fontSize: 12, color: 'var(--text-tertiary)', marginTop: 12 }}>
          Tap any "Join waitlist" above and we&apos;ll add this email to that list. No spam. Cancel anytime.
        </p>
      </section>
    </section>
  );
}
