/* All section components */

/* ============================================================ Nav */
function Nav({ onJoin }) {
  return (
    <nav className="nav">
      <div className="container nav-inner">
        <a href="#" className="brand" aria-label="Orbi inicio">
          <OrbiIcon size={32} />
        </a>
        <div className="nav-links">
          <a href="#productos">Productos</a>
          <a href="#features">Funciones</a>
          <a href="#faq">Preguntas</a>
        </div>
        <button className="btn btn-primary" onClick={onJoin}>
          Unirme a la lista
          <IconArrow size={16} sw={2} />
        </button>
      </div>
    </nav>
  );
}

/* ============================================================ Hero */
function Hero({ count, onJoinScroll }) {
  const [email, setEmail] = React.useState('');
  const [status, setStatus] = React.useState('idle'); // idle | error | success
  const [error, setError] = React.useState('');

  function validateEmail(e) {
    return /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/.test(e);
  }

  async function submit(e) {
    e.preventDefault();
    if (!email) { setError('Escribí tu email.'); setStatus('error'); return; }
    if (!validateEmail(email)) { setError('Ese email no parece válido.'); setStatus('error'); return; }
    const result = await window.waitlistAdd({ email });
    if (result === 'duplicate') {
      setError('Ya estás en la lista.');
      setStatus('error');
      return;
    }
    if (result === 'error') {
      setError('Algo salió mal, intentá de nuevo.');
      setStatus('error');
      return;
    }
    if (result?.status === 'validation_error') {
      setError(result.message);
      setStatus('error');
      return;
    }
    setStatus('success');
    setError('');
    // also scroll into full form for richer data, but keep email
    setTimeout(() => onJoinScroll(email), 900);
  }

  return (
    <section className="hero">
      <div className="container hero-grid">
        <div>
          <span className="badge">
            <span className="dot">✦</span>
            Lanzamiento próximo en Centroamérica
          </span>
          <h1>
            Deja de adivinar.<br/>
            <em>Empieza a controlar.</em>
          </h1>
          <p className="lede">
            Dashboard financiero para personas, freelancers y PYMEs de Latinoamérica.
            Pago único, sin suscripción mensual.
          </p>

          <div className="audience-chips" aria-label="Para quién es Orbi">
            <span className="chip"><i></i>Personas</span>
            <span className="chip"><i></i>Freelancers</span>
            <span className="chip"><i></i>PYMEs</span>
          </div>

          <form className="inline-form" onSubmit={submit} noValidate>
            <div className="input-wrap">
              <span className="input-icon"><IconMail size={18} sw={1.7}/></span>
              <input
                className={`input ${status === 'error' ? 'error' : ''}`}
                type="email"
                placeholder="tu@email.com"
                value={email}
                onChange={(e) => { setEmail(e.target.value); if (status === 'error') setStatus('idle'); }}
                aria-label="Email"
              />
            </div>
            <button type="submit" className="btn btn-brand btn-lg">
              Quiero acceso anticipado
              <IconArrow size={16} className="arrow" sw={2}/>
            </button>
          </form>

          {status === 'error' && (
            <div className="form-error">
              <IconAlert size={14} sw={2}/> {error}
            </div>
          )}
          {status === 'success' && (
            <div className="form-success">
              <IconCheck size={16} sw={2.2}/>
              ¡Listo! Te llevamos al formulario completo…
            </div>
          )}

          <div className="form-meta">
            <span className="avatars" aria-hidden="true">
              <span></span><span></span><span></span><span></span>
            </span>
            <span>
              <strong style={{color: 'var(--ink)', fontVariantNumeric: 'tabular-nums'}}>
                Más de {count.toLocaleString('es')}
              </strong> personas ya están en la lista
            </span>
          </div>

          <div className="hero-stats" aria-hidden="false">
            <div className="hstat">
              <div className="hstat-num">$0<span>/mes</span></div>
              <div className="hstat-lbl">Sin suscripción</div>
            </div>
            <div className="hstat">
              <div className="hstat-num">100<span>%</span></div>
              <div className="hstat-lbl">Privado y encriptado</div>
            </div>
            <div className="hstat">
              <div className="hstat-num">15<span> min</span></div>
              <div className="hstat-lbl">Setup completo</div>
            </div>
          </div>

          <div className="founder-pill">
            <span className="star">★</span>
            <span><strong>Beneficio fundador:</strong> 30% OFF de por vida · Solo primeros 100</span>
          </div>
        </div>

        <div className="hero-mockup">
          <DashboardMockup />
        </div>
      </div>
    </section>
  );
}

/* ============================================================ Trust strip */
function TrustStrip() {
  const items = [
    { icon: <IconLock size={14} sw={2}/>, text: 'Datos encriptados' },
    { icon: <IconGlobe size={14} sw={2}/>, text: 'Para toda Latinoamérica' },
    { icon: <IconClock size={14} sw={2}/>, text: 'Setup en 15 minutos' },
    { icon: <IconShield size={14} sw={2}/>, text: 'Sin compartir tus datos' },
  ];
  return (
    <div className="trust">
      <div className="container trust-inner">
        {items.map((it, i) => (
          <span className="item" key={i}>{it.icon}{it.text}</span>
        ))}
      </div>
    </div>
  );
}

/* ============================================================ Problem */
function Problem() {
  const items = [
    { icon: <IconWallet size={22}/>, quote: 'Llego a fin de mes sin saber en qué se fue el dinero.' },
    { icon: <IconChart size={22}/>, quote: 'Mi negocio vende, pero no sé si realmente gano.' },
    { icon: <IconLink size={22}/>, quote: 'Tengo deudas pero no tengo un plan claro para salir.' },
  ];
  return (
    <section className="section">
      <div className="container">
        <div className="section-head section-head--center">
          <span className="eyebrow">El problema</span>
          <h2 className="section-title">¿Te suena familiar?</h2>
          <p className="section-sub">Lo escuchamos todos los días. No es falta de disciplina, es falta de visibilidad.</p>
        </div>
        <div className="cards-3">
          {items.map((it, i) => (
            <div className="problem-card" key={i}>
              <span className="icon-tile">{it.icon}</span>
              <div className="quote">"{it.quote}"</div>
            </div>
          ))}
        </div>
        <p className="bridge">Orbi existe para resolver <strong>exactamente eso</strong>.</p>
      </div>
    </section>
  );
}

/* ============================================================ Products */
function Products() {
  const products = [
    {
      name: 'Orbi Deudas', price: 39, swatch: '#7B7EF5', tag: 'Para salir de deudas',
      desc: 'Sal de deudas con un plan claro y un cronograma realista.',
      features: ['Snowball y avalanche', 'Calendario de pagos', 'Proyección hasta $0']
    },
    {
      name: 'Orbi Starter', price: 49, swatch: '#4B4EE8', tag: 'Para empezar',
      desc: 'Entiende en qué se va tu dinero, mes a mes.',
      features: ['Categorías inteligentes', 'Presupuesto por área', 'Alertas de gasto']
    },
    {
      name: 'Orbi Control', price: 99, swatch: '#1B1F6E', tag: 'Para freelancers',
      desc: 'Controla tu dinero con inteligencia: ingresos, gastos y metas.',
      features: ['Todo lo de Starter', 'Metas de ahorro', 'Reportes exportables'],
      featured: true
    },
    {
      name: 'Orbi PYMES', price: 199, swatch: '#0E125A', tag: 'Para tu empresa',
      desc: 'Controla el flujo de caja de tu empresa con reportes claros.',
      features: ['Flujo de caja proyectado', 'Cuentas por cobrar/pagar', 'Hasta 5 usuarios']
    },
  ];
  return (
    <section className="section section--soft" id="productos">
      <div className="container">
        <div className="section-head section-head--center">
          <span className="eyebrow">Productos</span>
          <h2 className="section-title">Un producto para cada situación</h2>
          <p className="section-sub">Pagás una sola vez. Es tuyo para siempre. Sin renovaciones, sin sorpresas.</p>
        </div>
        <div className="products-grid">
          {products.map((p, i) => (
            <div
              className={`product-card ${p.featured ? 'featured' : ''}`}
              key={i}
              style={{ '--card-accent': p.swatch }}
            >
              <div className="p-head">
                <span className="swatch" style={{ background: p.swatch }}>
                  {p.name.split(' ')[1][0]}
                </span>
                <div>
                  <div className="ptag">{p.tag}</div>
                  <div className="pname">{p.name}</div>
                </div>
              </div>
              <div className="price">
                <span className="amt">${p.price}</span>
                <span className="cur">USD</span>
                <span className="once">pago único</span>
              </div>
              <p className="pdesc">{p.desc}</p>
              <ul className="pfeatures">
                {p.features.map((f, j) => (
                  <li key={j}><IconCheck size={14} sw={2.4}/> {f}</li>
                ))}
              </ul>
              <div className="coming">
                {p.featured && <span className="ribbon">Más popular</span>}
                Próximamente
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================================================ Features */
function Features() {
  const items = [
    { icon: <IconCoin size={20}/>, t: 'Pago único, sin suscripción', d: 'Una sola compra. Sin renovaciones automáticas. Sin recargos sorpresa cada mes.' },
    { icon: <IconLock size={20}/>, t: 'Datos 100% privados y seguros', d: 'Tu información se almacena encriptada y nunca se comparte con terceros.' },
    { icon: <IconGlobe size={20}/>, t: 'Pensado para Latinoamérica', d: 'Entiende cómo funciona la plata acá: ingresos variables, múltiples bancos, gastos en efectivo.' },
    { icon: <IconBolt size={20}/>, t: 'Dashboard en tiempo real', d: 'Tus ingresos, gastos y deudas actualizados al instante en una vista clara.' },
    { icon: <IconExport size={20}/>, t: 'Reportes exportables', d: 'Exportá a PDF y CSV para contabilidad, impuestos o tu propia revisión.' },
    { icon: <IconClock size={20}/>, t: 'Setup en 15 minutos', d: 'Sin curva de aprendizaje. Importás, categorizás y listo. Sin tutoriales largos.' },
  ];
  return (
    <section className="section" id="features">
      <div className="container">
        <div className="section-head section-head--center">
          <span className="eyebrow">Funciones</span>
          <h2 className="section-title">Todo lo que necesitas,<br/>nada de lo que no.</h2>
          <p className="section-sub">Hicimos un producto que cabe en una pantalla. Sin features de relleno.</p>
        </div>
        <div className="features-grid">
          {items.map((it, i) => (
            <div className="feature" key={i}>
              <span className="ftile">{it.icon}</span>
              <div>
                <div className="ftitle">{it.t}</div>
                <p className="fdesc">{it.d}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================================================ Waitlist big */
const WaitlistCTA = React.forwardRef(function WaitlistCTA({ prefillEmail }, ref) {
  const [form, setForm] = React.useState({ name: '', email: '', plan: '' });
  const [errors, setErrors] = React.useState({});
  const [submitted, setSubmitted] = React.useState(false);

  React.useEffect(() => {
    if (prefillEmail) setForm((f) => ({ ...f, email: prefillEmail }));
  }, [prefillEmail]);

  function set(k, v) {
    setForm((f) => ({ ...f, [k]: v }));
    if (errors[k]) setErrors((e) => ({ ...e, [k]: null }));
  }

  function validate() {
    const e = {};
    if (!form.name.trim() || form.name.trim().length < 2) e.name = 'Escribí tu nombre.';
    if (!form.email) e.email = 'Necesitamos tu email.';
    else if (!/^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/.test(form.email)) e.email = 'Ese email no parece válido.';
    if (!form.plan) e.plan = 'Elegí un plan de interés.';
    return e;
  }

  async function submit(ev) {
    ev.preventDefault();
    const eobj = validate();
    if (Object.keys(eobj).length) { setErrors(eobj); return; }
    const result = await window.waitlistAdd({ name: form.name.trim(), email: form.email.trim(), plan_interest: form.plan });
    if (result === 'duplicate') {
      setErrors({ email: 'Ya estás en la lista.' });
      return;
    }
    if (result === 'error') {
      setErrors({ form: 'Algo salió mal, intentá de nuevo.' });
      return;
    }
    if (result?.status === 'validation_error') {
      setErrors({ form: result.message });
      return;
    }
    setSubmitted(true);
  }

  return (
    <section className="section section--soft" id="waitlist" ref={ref}>
      <div className="container">
        <div className="section-head section-head--center">
          <span className="eyebrow">Lista de espera</span>
          <h2 className="section-title">Sé el primero en acceder</h2>
          <p className="section-sub" style={{marginBottom: 14}}>
            Los primeros 100 usuarios reciben <strong style={{color:'var(--ink)'}}>30% de descuento</strong> en cualquier plan.
          </p>
          <span className="discount-pill">★ Bonus: precio de lanzamiento blindado de por vida</span>
        </div>

        <div className="waitlist-card">
          {submitted ? (
            <div style={{ textAlign: 'center', padding: '12px 0' }}>
              <div style={{
                width: 64, height: 64, borderRadius: '50%',
                background: '#E6F8EF', color: '#0E9F6E',
                margin: '0 auto 16px', display: 'inline-flex',
                alignItems: 'center', justifyContent: 'center'
              }}>
                <IconCheck size={30} sw={2.4}/>
              </div>
              <h3 style={{ fontSize: 26, margin: '4px 0 8px', color: 'var(--ink)', letterSpacing: '-0.02em' }}>
                Listo. Te avisamos cuando abramos.
              </h3>
              <p style={{ color: 'var(--text-soft)', margin: 0, fontSize: 15.5 }}>
                Guardamos <strong style={{color:'var(--ink)'}}>{form.email}</strong> en la lista.
                Te escribiremos cuando abramos acceso.
              </p>
            </div>
          ) : (
            <form onSubmit={submit} noValidate>
              <div className="field-group two">
                <div className="field">
                  <label htmlFor="w-name">Tu nombre</label>
                  <input
                    id="w-name"
                    className={`input ${errors.name ? 'error' : ''}`}
                    type="text" placeholder="Jimena Rodríguez"
                    value={form.name}
                    onChange={(e) => set('name', e.target.value)}
                  />
                  {errors.name && <span className="hint" style={{color:'var(--danger)'}}>{errors.name}</span>}
                </div>
                <div className="field">
                  <label htmlFor="w-email">Email</label>
                  <input
                    id="w-email"
                    className={`input ${errors.email ? 'error' : ''}`}
                    type="email" placeholder="tu@email.com"
                    value={form.email}
                    onChange={(e) => set('email', e.target.value)}
                  />
                  {errors.email && <span className="hint" style={{color:'var(--danger)'}}>{errors.email}</span>}
                </div>
              </div>
              <div className="field" style={{marginTop: 14}}>
                <label htmlFor="w-plan">Plan de interés</label>
                <select
                  id="w-plan"
                  className={errors.plan ? 'error' : ''}
                  value={form.plan}
                  onChange={(e) => set('plan', e.target.value)}
                  style={errors.plan ? {borderColor: 'var(--danger)'} : {}}
                >
                  <option value="">Elegí un plan…</option>
                  <option value="deudas">Orbi Deudas · $39</option>
                  <option value="starter">Orbi Starter · $49</option>
                  <option value="control">Orbi Control · $99</option>
                  <option value="pymes">Orbi PYMES · $199</option>
                  <option value="undecided">Todavía no decido</option>
                </select>
                {errors.plan && <span className="hint" style={{color:'var(--danger)'}}>{errors.plan}</span>}
              </div>
              <button type="submit" className="btn btn-brand btn-lg">
                Sumarme a la lista
                <IconArrow size={16} className="arrow" sw={2}/>
              </button>
              {errors.form && <span className="hint" style={{color:'var(--danger)', display: 'block', marginTop: 10, textAlign: 'center'}}>{errors.form}</span>}
              <p className="terms">
                Al sumarte aceptás recibir un correo cuando lancemos. Sin spam. Cancelás cuando quieras.
              </p>
            </form>
          )}
        </div>
      </div>
    </section>
  );
});

/* ============================================================ FAQ */
function FAQ() {
  const items = [
    { q: '¿Cuándo estará disponible?', a: 'Estamos en fase final de desarrollo. Lanzamos en los próximos 30 días.' },
    { q: '¿Hay suscripción mensual?', a: 'No. Pago único por el plan que elijas. Lo comprás una vez, es tuyo para siempre.' },
    { q: '¿Funciona para mí?', a: 'Sí. Orbi está pensado para personas, freelancers y PYMEs de Latinoamérica. Si administras dinero propio o de tu negocio, Orbi se adapta.' },
    { q: '¿Qué pasa si me anoto en la lista?', a: 'Te avisamos primero cuando abramos y recibís precio de lanzamiento con descuento.' },
    { q: '¿Es seguro?', a: 'Tus datos se almacenan con encriptación y nunca se comparten con terceros. Vos sos el único dueño de tu información.' },
  ];
  const [open, setOpen] = React.useState(0);
  return (
    <section className="section" id="faq">
      <div className="container">
        <div className="section-head section-head--center">
          <span className="eyebrow">FAQ</span>
          <h2 className="section-title">Preguntas frecuentes</h2>
        </div>
        <div className="faq-list">
          {items.map((it, i) => (
            <div className={`faq-item ${open === i ? 'open' : ''}`} key={i}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)} aria-expanded={open === i}>
                <span>{it.q}</span>
                <span className="chev"><IconPlus size={14} sw={2.4}/></span>
              </button>
              <div className="faq-a">
                <div>{it.a}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================================================ Footer */
function Footer() {
  return (
    <footer className="footer">
      <div className="container footer-inner">
        <div className="brand" style={{gap: 10}}>
          <OrbiIcon size={28} />
        </div>
        <div className="footer-links">
          <a href="#">Privacidad</a>
          <a href="#">Términos</a>
          <a href="#faq">FAQ</a>
        </div>
        <div className="footer-meta">
          © 2026 Orbi. Todos los derechos reservados. · Hecho en El Salvador <span className="flag" aria-hidden="true"></span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Nav, Hero, TrustStrip, Problem, Products, Features, WaitlistCTA, FAQ, Footer });