'use client';

import { useState } from 'react';

const ITEMS = [
  {
    list: 'api',
    title: 'API access',
    body: 'Not built yet. Planned: programmatic access to the grading engine so you can build your own dashboards, alerts and automations.',
  },
  {
    list: 'alerts',
    title: 'Custom alerts',
    body: 'Not built yet. Planned: get pinged when specific players, stats or matchups hit a threshold you set — by SMS, email or webhook.',
  },
  {
    list: 'The Edge',
    title: 'The Edge — playbook',
    body: 'Not written yet. Planned: long-form analysis of how the model works and how to think about bankroll. No profit claim, no promised return.',
  },
  {
    list: 'merch',
    title: 'Capsule drop',
    body: 'Not produced yet. Planned: a first merch run, founder access gets first pull. Unit count not fixed.',
  },
];

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' }}>
          None of the below is built yet. This page exists so you can tell us which ones you&apos;d
          actually use — joining a list records your interest, nothing more. It is not a purchase,
          not a pre-order, and not a promise of a ship date.
        </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>
  );
}