/* global React */
const { useState, useEffect, useRef } = React;

/* =========================================================
   Shared small components
   ========================================================= */

function Logo({ size = 22, variant }) {
  // Real Ree wordmark as PNG. Variants map to the supplied color options.
  // Default: cream (best on dark backgrounds).
  const map = {
    cream: 'assets/logo-cream.png',
    dark: 'assets/logo-dark.png',
    mint: 'assets/logo-mint.png',
    white: 'assets/logo-white.png',
  };
  const src = map[variant] || 'assets/logo-cream.png';
  return (
    <span
      className="ree-logo"
      aria-label="Ree"
      role="img"
      style={{ display: 'inline-flex', alignItems: 'center', height: size, lineHeight: 0 }}
    >
      <img src={src} alt="Ree" style={{ height: size, width: 'auto', display: 'block' }} />
    </span>
  );
}

function Nav({ onCta }) {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const on = () => setScrolled(window.scrollY > 40);
    on();
    window.addEventListener('scroll', on, { passive: true });
    return () => window.removeEventListener('scroll', on);
  }, []);
  return (
    <nav
      style={{
        position: 'fixed',
        top: 0, left: 0, right: 0,
        zIndex: 50,
        padding: scrolled ? '14px 0' : '22px 0',
        background: scrolled ? 'rgba(10,10,10,0.7)' : 'transparent',
        backdropFilter: scrolled ? 'blur(14px) saturate(140%)' : 'none',
        WebkitBackdropFilter: scrolled ? 'blur(14px) saturate(140%)' : 'none',
        borderBottom: scrolled ? '1px solid var(--line)' : '1px solid transparent',
        transition: 'all 0.4s var(--ease-out)',
      }}
    >
      <div className="container" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <a href="#top" style={{ display: 'flex', alignItems: 'center' }}>
          <Logo size={22} />
        </a>
        <div className="nav-links" style={{ display: 'flex', gap: 32, alignItems: 'center' }}>
          <a href="#about" className="nav-link">About</a>
          <a href="#product" className="nav-link">Product</a>
          <a href="#sustainability" className="nav-link">Sustainability</a>
          <a href="#investors" className="nav-link">Investors</a>
          <a href="#contact" className="nav-link">Contact</a>
        </div>
        <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
          <button
            type="button"
            className="btn btn-ghost nav-updates"
            onClick={() => window.dispatchEvent(new CustomEvent('ree:open-updates'))}
            style={{ padding: '9px 16px', fontSize: 13, display: 'inline-flex', alignItems: 'center', gap: 8 }}
          >
            <span className="nav-updates-dot" />
            Updates
          </button>
          <button className="btn btn-primary" onClick={onCta} style={{ padding: '10px 18px', fontSize: 14 }}>
            Notify me
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M3 11L11 3M11 3H5M11 3V9" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg>
          </button>
        </div>
      </div>
      <style>{`
        .nav-link { color: var(--ink-1); font-size: 14px; position: relative; transition: color 0.3s; }
        .nav-link:hover { color: var(--ink-0); }
        .nav-link::after { content: ""; position: absolute; left: 0; bottom: -4px; width: 0; height: 1px; background: var(--lime); transition: width 0.3s var(--ease-out); }
        .nav-link:hover::after { width: 100%; }
        @media (max-width: 820px) {
          .nav-links { display: none !important; }
          .nav-updates { display: none !important; }
        }
        .nav-updates-dot {
          width: 7px; height: 7px; border-radius: 50%;
          background: var(--mint);
          box-shadow: 0 0 10px var(--mint);
          animation: pulse 2.4s var(--ease-out) infinite;
        }
      `}</style>
    </nav>
  );
}

/* =========================================================
   Notify form, email-only with validation + success state
   ========================================================= */
function NotifyForm({ compact = false, big = false }) {
  const [email, setEmail] = useState('');
  const [status, setStatus] = useState('idle'); // idle | submitting | success | error
  const [err, setErr] = useState('');

  const submit = (e) => {
    e.preventDefault();
    const ok = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.trim());
    if (!ok) { setErr('That doesn\u2019t look like an email.'); setStatus('error'); return; }
    setErr('');
    setStatus('submitting');
    setTimeout(() => setStatus('success'), 700);
  };

  if (status === 'success') {
    return (
      <div className={`notify-success ${big ? 'big' : ''}`}>
        <div className="notify-success-inner">
          <div className="check-wrap">
            <svg width="22" height="22" viewBox="0 0 22 22" fill="none">
              <circle cx="11" cy="11" r="10" stroke="var(--mint)" strokeWidth="1.5"/>
              <path d="M6 11.5L9.5 15L16 8.5" stroke="var(--mint)" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
          </div>
          <div>
            <div style={{ fontWeight: 600, color: 'var(--ink-0)' }}>You\u2019re on the list.</div>
            <div style={{ fontSize: 14, color: 'var(--ink-2)' }}>We\u2019ll email <strong style={{color:'var(--ink-1)'}}>{email}</strong> the moment Ree opens.</div>
          </div>
        </div>
        <style>{`
          .notify-success {
            display: flex; align-items: center;
            padding: ${big ? '18px 22px' : '14px 18px'};
            border-radius: 999px;
            border: 1px solid var(--mint);
            background: rgba(159, 232, 112, 0.06);
          }
          .notify-success-inner { display: flex; align-items: center; gap: 14px; }
          .check-wrap { width: 36px; height: 36px; border-radius: 50%; background: rgba(159, 232, 112, 0.12); display: grid; place-items: center; flex-shrink: 0; }
        `}</style>
      </div>
    );
  }

  return (
    <form onSubmit={submit} className={`notify-form ${big ? 'big' : ''} ${compact ? 'compact' : ''}`}>
      <div className={`notify-row ${status === 'error' ? 'err' : ''}`}>
        <svg className="mail-icon" width="18" height="18" viewBox="0 0 18 18" fill="none">
          <rect x="2" y="3.5" width="14" height="11" rx="2" stroke="currentColor" strokeWidth="1.4"/>
          <path d="M3 5L9 10L15 5" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"/>
        </svg>
        <input
          type="email"
          value={email}
          onChange={(e) => { setEmail(e.target.value); if (status === 'error') setStatus('idle'); }}
          placeholder="you@company.com"
          aria-label="Email address"
          spellCheck="false"
          autoComplete="email"
        />
        <button type="submit" className="btn btn-primary" disabled={status === 'submitting'}>
          {status === 'submitting' ? 'Sending…' : 'Notify me'}
          {status !== 'submitting' && <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M3 11L11 3M11 3H5M11 3V9" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg>}
        </button>
      </div>
      {err && <div className="notify-err">{err}</div>}
      {!err && <div className="notify-note">No spam. One email when we launch.</div>}
      <style>{`
        .notify-form { width: 100%; max-width: 520px; }
        .notify-form.big { max-width: 620px; }
        .notify-row {
          display: flex;
          align-items: center;
          background: rgba(255,255,255,0.04);
          border: 1px solid var(--line-strong);
          border-radius: 999px;
          padding: 6px 6px 6px 20px;
          gap: 12px;
          transition: border-color 0.3s var(--ease-out), background 0.3s var(--ease-out);
        }
        .notify-row:focus-within {
          border-color: var(--lime);
          background: rgba(255,255,255,0.06);
          box-shadow: 0 0 0 4px rgba(212,255,58,0.12);
        }
        .notify-row.err { border-color: #ff6b6b; }
        .mail-icon { color: var(--ink-2); flex-shrink: 0; }
        .notify-row input {
          flex: 1;
          border: 0;
          outline: none;
          background: transparent;
          padding: 14px 0;
          font-size: 16px;
          color: var(--ink-0);
          min-width: 0;
        }
        .notify-row input::placeholder { color: var(--ink-3); }
        .notify-form.big .notify-row { padding: 8px 8px 8px 24px; }
        .notify-form.big .notify-row input { padding: 18px 0; font-size: 17px; }
        .notify-form.big .btn { padding: 16px 24px; font-size: 15px; }
        .notify-note { margin-top: 12px; font-size: 13px; color: var(--ink-3); padding-left: 20px; }
        .notify-err { margin-top: 12px; font-size: 13px; color: #ff9c9c; padding-left: 20px; }
        @media (max-width: 520px) {
          .notify-row { flex-direction: column; border-radius: 22px; padding: 16px; align-items: stretch; gap: 10px; }
          .notify-row input { padding: 4px 0; }
          .notify-form .btn { justify-content: center; padding: 14px; }
          .mail-icon { display: none; }
          .notify-note, .notify-err { padding-left: 4px; }
        }
      `}</style>
    </form>
  );
}

Object.assign(window, { Logo, Nav, NotifyForm });