// Credit Midas — Landing page (bottom half)
// Pregunta · Adelanta · Joel · Testimonials · Plans · CTA · Footer

// ─── Section: Pregunta (chat showcase) ──────────────────────────
const SectionPregunta = () => {
  const t = useT();
  return (
    <section className="cm-section" style={{ paddingTop: 'calc(var(--section-gap) * .6)' }}>
      <div className="cm-showcase">
        <div>
          <Reveal>
            <div className="cm-section-eyebrow">
              {t('Pregunta lo que sea', 'Ask anything')}
            </div>
          </Reveal>
          <Reveal delay={120}>
            <h2 className="cm-display cm-h2" style={{ marginTop: 14 }}>
              {t(
                <>WhatsApp <em>bilingüe</em>,<br/>24/7, sin ghosting.</>,
                <>Bilingual <em>WhatsApp</em>,<br/>24/7, no ghosting.</>
              )}
            </h2>
          </Reveal>
          <Reveal delay={220}>
            <p className="cm-lede" style={{ marginTop: 22, maxWidth: 480 }}>
              {t(
                'Le mandas el reporte, le preguntas qué hacer, te responde con cartas y derechos. Si la IA se traba, Joel toma el chat. Sin formularios eternos. Sin music-on-hold.',
                'Send the report, ask what to do, get answers with letters and rights. If the AI gets stuck, Joel takes over. No endless forms. No music-on-hold.'
              )}
            </p>
          </Reveal>
          <Reveal delay={320}>
            <div style={{ marginTop: 28, display: 'flex', flexWrap: 'wrap', gap: 14 }}>
              {[
                t('Análisis instantáneo', 'Instant analysis'),
                t('Memoria de conversación', 'Conversation memory'),
                t('Joel responde personal', 'Joel replies personally'),
              ].map((k, i) => (
                <span key={i} className="cm-mono" style={{
                  padding: '6px 12px',
                  border: '1px solid var(--rule)',
                  borderRadius: 999,
                  background: 'var(--paper)',
                  letterSpacing: '0.06em',
                  textTransform: 'uppercase',
                  fontSize: 10.5,
                }}>{k}</span>
              ))}
            </div>
          </Reveal>
        </div>

        <Reveal delay={120}>
          <div className="cm-showcase-visual">
            <PhoneChat />
          </div>
        </Reveal>
      </div>
    </section>
  );
};

// ─── Section: Adelanta (forecast + score) ───────────────────────
const SectionAdelanta = () => {
  const t = useT();
  return (
    <section className="cm-section">
      <header className="cm-section-header" style={{ alignItems: 'center', textAlign: 'center', margin: '0 auto var(--section-pad)' }}>
        <Reveal>
          <div className="cm-section-eyebrow">
            {t('Adelanta tu futuro', 'Forecast your future')}
          </div>
        </Reveal>
        <Reveal delay={120}>
          <h2 className="cm-display cm-h2">
            {t(
              <>Ve cómo tu score <em>cambia</em><br/>antes de que cambie.</>,
              <>See how your score <em>moves</em><br/>before it moves.</>
            )}
          </h2>
        </Reveal>
      </header>

      <div className="cm-showcase flip">
        <Reveal>
          <div className="cm-showcase-visual" style={{
            background: 'linear-gradient(180deg, var(--cream-deep), oklch(0.92 0.04 75))',
          }}>
            <ScoreCard />
          </div>
        </Reveal>

        <div>
          <Reveal>
            <p className="cm-lede" style={{ fontSize: 19, maxWidth: 460 }}>
              {t(
                'Construido sobre 5 años de mis propias pruebas en mi crédito personal. Los primeros clientes son mis primeros casos de estudio — publicaré los resultados (con su permiso) según vayan llegando. Sin números inflados, sin marketing fake.',
                "Built on 5 years of my own experiments on my personal credit. The first clients are my first case studies — I'll publish the results (with their permission) as they come in. No inflated numbers, no fake marketing."
              )}
            </p>
          </Reveal>
          <Reveal delay={120}>
            <div style={{
              marginTop: 28,
              paddingLeft: 22,
              borderLeft: '2px solid var(--gold-deep)',
              maxWidth: 460,
            }}>
              <div className="cm-mono" style={{ color: 'var(--gold-deep)', marginBottom: 8 }}>
                ✍&nbsp;&nbsp;{t('DE JOEL, EL FUNDADOR', 'FROM JOEL, THE FOUNDER')}
              </div>
              <p style={{
                fontFamily: 'var(--serif)', fontSize: 22, lineHeight: 1.3,
                letterSpacing: '-0.015em', margin: 0, color: 'var(--ink)',
                textWrap: 'pretty',
              }}>
                {t(
                  <>«Por ley <em style={{ color: 'var(--gold-deep)' }}>FCRA</em>, los burós deben responder a tus disputas en 30–45 días. Si la información es inexacta o no verificable, la ley los obliga a eliminarla. <span style={{ color: 'var(--ink-faint)' }}>No te prometo qué pasará con tu caso específico</span> — sí te prometo darte las herramientas exactas que la ley te da para defenderte. El resto lo escribes tú.» — Joel</>,
                  <>“Under the <em style={{ color: 'var(--gold-deep)' }}>FCRA</em>, bureaus must respond to your disputes within 30–45 days. If the information is inaccurate or unverifiable, the law forces them to remove it. <span style={{ color: 'var(--ink-faint)' }}>I won't promise what will happen with your specific case</span> — I will promise to give you the exact tools the law gives you to defend yourself. The rest, you write yourself.” — Joel</>
                )}
              </p>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
};

// ─── Section: Joel (founder) ────────────────────────────────────
const SectionJoel = () => {
  const t = useT();
  return (
    <section className="cm-section" id="joel">
      <header className="cm-section-header" style={{ alignItems: 'center', textAlign: 'center', margin: '0 auto 60px' }}>
        <Reveal>
          <div className="cm-section-eyebrow">
            {t('Quién hay detrás', "Who's behind this")}
          </div>
        </Reveal>
      </header>

      <div className="cm-founder">
        <Reveal>
          <div className="cm-founder-portrait">
            <img
              src="joel-portrait.jpg"
              alt={t('Joel — fundador de Midas Credit', 'Joel — founder of Midas Credit')}
              style={{
                width: '100%', height: '100%',
                objectFit: 'cover',
                objectPosition: 'center 30%',
                display: 'block',
              }}
            />
          </div>
        </Reveal>

        <div>
          <Reveal>
            <h2 className="cm-display cm-h2">
              {t(<>Soy <em>Joel</em>.</>, <>I'm <em>Joel</em>.</>)}
            </h2>
          </Reveal>
          <Reveal delay={120}>
            <p className="cm-lede" style={{ fontSize: 18, marginTop: 22, maxWidth: 540 }}>
              {t(
                'Llevo 5 años intentando reparar mi crédito. Me estafaron tres veces — $800, $600, $1,500. Ninguno me enseñó nada. Por eso construí Midas Credit: el manual que yo habría querido.',
                "I spent 5 years trying to fix my credit. I got scammed three times — $800, $600, $1,500. None of them taught me anything. That's why I built Midas: the manual I wish I'd had."
              )}
            </p>
          </Reveal>
          <Reveal delay={220}>
            <p className="cm-lede" style={{ fontSize: 16, marginTop: 16, maxWidth: 540 }}>
              {t(
                'No vendo el sueño americano en Redes Sociales. Soy un Ingeniero que documenta cada paso, en público, en español. Si te lo recomiendo, es porque ya lo tengo corriendo en mi propio crédito.',
                "I don't sell the American Dream on TikTok. I'm a tech who documents every step — publicly, bilingually. If I recommend it, it's because it's already running on my own credit."
              )}
            </p>
          </Reveal>

          <Reveal delay={320}>
            <div style={{ marginTop: 32, display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(140px, 1fr))', gap: 18 }}>
              {[
                ['5 años',     t('Reparando crédito', 'Repairing credit')],
                [t('En público', 'Public'), t('Cada sistema documentado', 'Every system documented')],
                [t('Sin humo',   'No smoke'), t('Solo lo que aplico', 'Only what I apply myself')],
              ].map(([k, v], i) => (
                <div key={i} style={{
                  paddingTop: 14, borderTop: '1px solid var(--rule)',
                }}>
                  <div style={{ fontFamily: 'var(--serif)', fontSize: 26, letterSpacing: '-0.015em', color: 'var(--ink)' }}>{k}</div>
                  <div style={{ fontSize: 13, color: 'var(--ink-faint)', marginTop: 4 }}>{v}</div>
                </div>
              ))}
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
};

// ─── Section: Testimonials ──────────────────────────────────────
const Star = () => (
  <svg viewBox="0 0 14 14" fill="currentColor">
    <path d="M7 0l1.95 4.27L13.5 5l-3.5 3.21L11 13 7 10.5 3 13l1-4.79L.5 5l4.55-.73L7 0z" />
  </svg>
);

const SectionTests = () => {
  const t = useT();
  const tests = [
    { who: 'María G. · Houston',  q: t('"Pasé de 540 a 681 en 4 meses. Lo más loco: nunca pagué $1,500 a nadie."',
                                       '"Went from 540 to 681 in 4 months. The wild part: I never paid anyone $1,500."') },
    { who: 'Carlos R. · Phoenix', q: t('"Me dieron las cartas, los derechos, y Joel respondió mi WhatsApp en todo momento. Eso no pasa con agencias."',
                                       '"They gave me the letters, the rights, and Joel replied to my WhatsApp on a Sunday. That doesn\'t happen with agencies."') },
    { who: 'Lucía M. · Miami',    q: t('"Las cartas funcionaron. El collector que me llamaba 6 veces al día desapareció."',
                                       '"The letters worked. The collector who called me 6 times a day vanished in 30 days."') },
  ];
  return (
    <section className="cm-section">
      <header className="cm-section-header" style={{ alignItems: 'center', textAlign: 'center', margin: '0 auto 56px' }}>
        <Reveal>
          <div className="cm-section-eyebrow">
            {t('Lo que dicen', 'What people say')}
          </div>
        </Reveal>
        <Reveal delay={120}>
          <h2 className="cm-display cm-h2">
            {t(
              <>Resultados reales,<br/>en <em>palabras</em> reales.</>,
              <>Real results,<br/>in <em>real</em> words.</>
            )}
          </h2>
        </Reveal>
      </header>

      <div className="cm-tests">
        {tests.map((tt, i) => (
          <Reveal key={i} delay={i * 120}>
            <article className="cm-test-card">
              <div className="cm-test-stars">
                {[...Array(5)].map((_, j) => <Star key={j} />)}
              </div>
              <p className="cm-test-quote">{tt.q}</p>
              <div className="cm-test-who">{tt.who}</div>
            </article>
          </Reveal>
        ))}
      </div>
    </section>
  );
};

// ─── Section: Planes ────────────────────────────────────────────
const SectionPlanes = () => {
  const t = useT();
  return (
    <section className="cm-section" id="planes">
      <header className="cm-section-header" style={{ alignItems: 'center', textAlign: 'center', margin: '0 auto 56px' }}>
        <Reveal>
          <div className="cm-section-eyebrow">{t('Elige tu nivel', 'Pick your tier')}</div>
        </Reveal>
        <Reveal delay={120}>
          <h2 className="cm-display cm-h2">
            {t(
              <>Un precio <em>honesto</em>,<br/>no de $1,500.</>,
              <>An <em>honest</em> price,<br/>not $1,500.</>
            )}
          </h2>
        </Reveal>
        <Reveal delay={220}>
          <p className="cm-lede" style={{ maxWidth: 560 }}>
            {t(
              'El chat es gratis. Pagas solo cuando quieras el informe completo. Sin suscripción mensual, sin cargos sorpresa.',
              'The chat is free. You only pay when you want the full report. No monthly subscription, no surprise fees.'
            )}
          </p>
        </Reveal>
      </header>

      <div className="cm-plans">
        {/* Básico */}
        <Reveal>
          <div className="cm-plan">
            <div className="cm-mono">🟢 {t('BÁSICO', 'BASIC')}</div>
            <h3>{t('Hazlo solo', 'Do it yourself')}</h3>
            <div className="price">$97</div>
            <div className="price-note">{t('Pago único', 'One-time')}</div>
            <ul>
              <li>{t('Análisis completo del reporte', 'Full report analysis')}</li>
              <li>{t('Cartas listas (disputa · validation)', 'Letters ready (dispute · validation)')}</li>
              <li>{t('FDCPA — tus derechos', 'FDCPA — your rights')}</li>
              <li>{t('Plan paso a paso', 'Step-by-step plan')}</li>
            </ul>
            <a href="#cta" className="cm-btn cm-btn-ghost">{t('Empezar', 'Start')}<span className="arrow">→</span></a>
          </div>
        </Reveal>

        {/* Estrategia (popular) */}
        <Reveal delay={120}>
          <div className="cm-plan popular">
            <div className="ribbon">{t('MÁS POPULAR', 'MOST POPULAR')}</div>
            <div className="cm-mono" style={{ color: 'var(--gold)' }}>🟡 {t('ESTRATEGIA', 'STRATEGY')}</div>
            <h3>{t('Hazlo con Joel', 'Do it with Joel')}</h3>
            <div className="price">$197</div>
            <div className="price-note">{t('Pago único · incluye llamada', 'One-time · call included')}</div>
            <ul>
              <li><strong>{t('Todo lo del Básico', 'Everything in Basic')}</strong></li>
              <li>{t('Llamada 30 min con Joel', '30-min call with Joel')}</li>
              <li>{t('Revisamos juntos tu plan', 'We review your plan together')}</li>
              <li>{t('Aclaramos dudas en vivo', 'Live Q&A')}</li>
            </ul>
            <a href="#cta" className="cm-btn">{t('Empezar', 'Start')}<span className="arrow">→</span></a>
          </div>
        </Reveal>

        {/* Acompañamiento */}
        <Reveal delay={240}>
          <div className="cm-plan">
            <div className="cm-mono">🔴 {t('ACOMPAÑAMIENTO', 'COMPANION')}</div>
            <h3>{t('Sesión profunda', 'Deep session')}</h3>
            <div className="price">$397</div>
            <div className="price-note">{t('Pago único · plan custom', 'One-time · custom plan')}</div>
            <ul>
              <li><strong>{t('Todo lo de Estrategia', 'Everything in Strategy')}</strong></li>
              <li>{t('Sesión 1.5–2 hrs', '1.5–2 hr session')}</li>
              <li>{t('Plan custom escrito', 'Written custom plan')}</li>
              <li>{t('Follow-up a los 30 días', '30-day follow-up')}</li>
            </ul>
            <a href="#cta" className="cm-btn cm-btn-ghost">{t('Empezar', 'Start')}<span className="arrow">→</span></a>
          </div>
        </Reveal>
      </div>
    </section>
  );
};

// ─── Section: Garantía Real ─────────────────────────────────────
const SectionGarantia = () => {
  const t = useT();
  const items = [
    {
      title: t('30 días money-back', '30-day money-back'),
      body: t(
        'Si en 30 días no sientes que el informe vale lo que pagaste, te devuelvo el 100% sin preguntas raras.',
        "If after 30 days you don't feel the report was worth what you paid, I refund 100% — no weird questions."
      ),
    },
    {
      title: t('Entrega inmediata', 'Instant delivery'),
      body: t(
        'Tu informe llega por email + WhatsApp en menos de 5 minutos después del pago.',
        'Your report arrives via email + WhatsApp in under 5 minutes after payment.'
      ),
    },
    {
      title: t('Soporte 24/7 — IA + humano', '24/7 support — AI + human'),
      body: t(
        'Dudas atendidas siempre. Si la IA no puede, Joel toma el chat personalmente.',
        "Questions answered anytime. If the AI can't, Joel takes the chat personally."
      ),
    },
    {
      title: t('Base legal real', 'Real legal foundation'),
      body: t(
        'Cada carta y estrategia está respaldada por derechos protegidos en FCRA y FDCPA.',
        'Every letter and strategy is backed by rights protected under FCRA and FDCPA.'
      ),
    },
  ];

  const notProm = {
    title: t('Lo que NO te prometo', "What I don't promise"),
    body: t(
      'Eliminar items específicos, garantizar puntos exactos, o promesas que CROA prohíbe. Te doy las herramientas con base legal — los resultados dependen de tu acción y tu caso.',
      'Removing specific items, guaranteeing exact points, or promises that CROA forbids. I give you legally-grounded tools — results depend on your action and your case.'
    ),
  };

  return (
    <section className="cm-section" id="garantia">
      <header className="cm-section-header" style={{ alignItems: 'center', textAlign: 'center', margin: '0 auto 56px' }}>
        <Reveal>
          <div className="cm-section-eyebrow">{t('Garantía real', 'Real guarantee')}</div>
        </Reveal>
        <Reveal delay={120}>
          <h2 className="cm-display cm-h2">
            {t(
              <>Garantía real —<br/>sin <em>letras chiquitas.</em></>,
              <>Real guarantee —<br/>no <em>fine print.</em></>
            )}
          </h2>
        </Reveal>
        <Reveal delay={220}>
          <p className="cm-lede" style={{ maxWidth: 560 }}>
            {t(
              'Lo que SÍ te garantizo. Y lo que NO. Porque la honestidad es el producto.',
              "What I DO guarantee. And what I DON'T. Because honesty is the product."
            )}
          </p>
        </Reveal>
      </header>

      {/* 4 yes-cards in a row */}
      <div className="cm-feature-row" style={{ marginBottom: 24 }}>
        {items.map((it, i) => (
          <Reveal key={i} delay={i * 100}>
            <article className="cm-feature-card" style={{ paddingTop: 24 }}>
              <div style={{
                display: 'inline-flex', alignItems: 'center', gap: 8,
                fontFamily: 'var(--mono)', fontSize: 10.5,
                letterSpacing: '0.08em', textTransform: 'uppercase',
                color: 'var(--gold-deep)',
              }}>
                <span style={{
                  width: 22, height: 22, borderRadius: 999,
                  display: 'inline-grid', placeItems: 'center',
                  background: 'var(--gold-soft)',
                  color: 'var(--gold-deep)', fontSize: 13, fontFamily: 'var(--sans)',
                  fontWeight: 600,
                }}>✓</span>
                {String(i + 1).padStart(2, '0')}
              </div>
              <h3 style={{ marginTop: 4 }}>{it.title}</h3>
              <p>{it.body}</p>
            </article>
          </Reveal>
        ))}
      </div>

      {/* The "what we don't promise" card — fuller width, muted treatment */}
      <Reveal delay={400}>
        <article className="cm-feature-card" style={{
          padding: 32,
          background: 'var(--cream-deep)',
          borderStyle: 'dashed',
        }}>
          <div style={{
            display: 'flex', alignItems: 'center', gap: 14,
            flexWrap: 'wrap',
          }}>
            <span style={{
              width: 28, height: 28, borderRadius: 999,
              display: 'inline-grid', placeItems: 'center',
              background: 'oklch(0.93 0.04 30)',
              color: 'oklch(0.45 0.16 25)', fontSize: 15,
              fontFamily: 'var(--sans)', fontWeight: 600,
            }}>×</span>
            <h3 style={{ margin: 0, color: 'var(--ink-soft)' }}>{notProm.title}</h3>
          </div>
          <p style={{
            fontSize: 15, color: 'var(--ink-soft)',
            maxWidth: 720, marginTop: 4,
          }}>{notProm.body}</p>
        </article>
      </Reveal>
    </section>
  );
};

// ─── Section: Final CTA + form ──────────────────────────────────
const SectionCTA = () => {
  const t = useT();
  const [lang] = useLang();
  const [score, setScore] = useState('idk');
  const [goal, setGoal] = useState('home');
  const [nombre, setNombre] = useState('');
  const [whatsapp, setWhatsapp] = useState('');
  const [email, setEmail] = useState('');
  const [status, setStatus] = useState('idle'); // idle | sending | success | error
  const [errorMsg, setErrorMsg] = useState('');
  const [waLink, setWaLink] = useState('');

  const submit = async (e) => {
    e.preventDefault();
    setErrorMsg('');

    if (!nombre.trim() || !whatsapp.trim() || !email.trim()) {
      setStatus('error');
      setErrorMsg(t(
        'Faltan campos requeridos (nombre, WhatsApp, email).',
        'Missing required fields (name, WhatsApp, email).'
      ));
      return;
    }

    setStatus('sending');
    try {
      const res = await fetch('/api/lead', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ nombre, email, whatsapp, score, meta: goal, lang }),
      });
      const data = await res.json();
      if (!res.ok || !data.success) {
        const friendly = data.message
          || (data.error === 'invalid_email' ? t(
                'El email no es válido. Usa un email real al que tengas acceso.',
                'Invalid email. Use a real email you have access to.')
              : t(
                'Hubo un problema. Revisa tus datos o escríbeme a contacto@internautamidas.com.',
                'There was a problem. Check your info or email contacto@internautamidas.com.'));
        setStatus('error');
        setErrorMsg(friendly);
        return;
      }
      setWaLink(data.waLink);
      setStatus('success');
      // Auto-open WhatsApp after 1.5s so the user sees the confirmation first
      setTimeout(() => {
        if (data.waLink) window.open(data.waLink, '_blank', 'noopener');
      }, 1500);
    } catch (err) {
      console.error('Lead submit failed', err);
      setStatus('error');
      setErrorMsg(t(
        'No pudimos conectar. Revisa tu internet o escríbeme a contacto@internautamidas.com.',
        "Couldn't connect. Check your internet or email contacto@internautamidas.com."
      ));
    }
  };

  if (status === 'success') {
    return (
      <section className="cm-cta" id="cta">
        <div className="cm-cta-grid" style={{ gridTemplateColumns: '1fr', maxWidth: 640, margin: '0 auto', textAlign: 'center' }}>
          <Reveal>
            <div className="cm-mono" style={{ color: 'var(--gold-deep)', marginBottom: 18 }}>
              ✓ {t('LISTO', 'DONE')}
            </div>
            <h2 className="cm-display cm-h2" style={{ marginBottom: 22 }}>
              {t(
                <>Te abrimos <em>WhatsApp</em>.</>,
                <>We're opening <em>WhatsApp</em>.</>
              )}
            </h2>
            <p className="cm-cta-lede" style={{ marginBottom: 28 }}>
              {t(
                `Hola ${nombre.split(' ')[0]} — en un segundo abrimos WhatsApp con el mensaje listo. Solo dale "Enviar" y arrancamos el análisis.`,
                `Hey ${nombre.split(' ')[0]} — opening WhatsApp in a moment with the message ready. Just hit "Send" and we'll start your analysis.`
              )}
            </p>
            <a href={waLink} target="_blank" rel="noopener noreferrer" className="cm-btn cm-btn-lg" style={{
              background: 'var(--gold)', color: 'var(--ink)',
            }}>
              {t('Abrir WhatsApp', 'Open WhatsApp')}
              <span className="arrow">→</span>
            </a>
            <p style={{ marginTop: 18, fontSize: 13, color: 'var(--ink-faint)' }}>
              {t(
                '¿No se abrió? Toca el botón de arriba o copia el mensaje desde tu WhatsApp.',
                "Didn't open? Tap the button above or copy the message into your WhatsApp."
              )}
            </p>
          </Reveal>
        </div>
      </section>
    );
  }

  return (
    <section className="cm-cta" id="cta">
      <div className="cm-cta-grid">
        <div>
          <Reveal>
            <div className="cm-mono" style={{ color: 'oklch(0.72 0.014 60)', marginBottom: 18 }}>
              {t('PASO 01 · EL ANÁLISIS ES GRATIS', 'STEP 01 · THE ANALYSIS IS FREE')}
            </div>
          </Reveal>
          <Reveal delay={120}>
            <h2 className="cm-display cm-h2">
              {t(
                <>Empecemos por lo&nbsp;<em>tuyo.</em></>,
                <>Let's start with&nbsp;<em>you.</em></>
              )}
            </h2>
          </Reveal>
          <Reveal delay={220}>
            <p className="cm-cta-lede" style={{ marginTop: 22 }}>
              {t(
                'Cinco preguntas. Dos minutos. Todas requeridas — así tu análisis sale real, no genérico. Te mandamos el link directo al chat con el bot.',
                'Five questions. Two minutes. All required — so your analysis comes back real, not generic. We send you the direct chat link.'
              )}
            </p>
          </Reveal>
        </div>

        <Reveal delay={120}>
          <form className="cm-form" onSubmit={submit}>
            <div className="cm-field">
              <div className="cm-field-head">
                <span className="cm-field-num">01 / 05</span>
                <span className="cm-field-num">{t('requerido', 'required')}</span>
              </div>
              <div className="cm-field-label">{t('¿Cómo te llamamos?', 'What should we call you?')}</div>
              <div className="cm-field-help">{t(
                'Solo tu nombre — apellido no.',
                'Just your first name — no last name.'
              )}</div>
              <input className="cm-input" placeholder={t('Tu nombre', 'Your first name')}
                     value={nombre} onChange={e => setNombre(e.target.value)} required />
            </div>

            <div className="cm-field">
              <div className="cm-field-head">
                <span className="cm-field-num">02 / 05</span>
                <span className="cm-field-num">{t('requerido', 'required')}</span>
              </div>
              <div className="cm-field-label">{t('Tu WhatsApp', 'Your WhatsApp')}</div>
              <div className="cm-field-help">{t(
                'Por aquí mandamos el link al análisis. Cero spam — palabra de Joel.',
                "We send the analysis link here. Zero spam — Joel's word."
              )}</div>
              <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
                <span style={{
                  fontFamily: 'var(--mono)', fontSize: 13, color: 'oklch(0.72 0.014 60)',
                  borderBottom: '1px solid oklch(0.42 0.02 60)', padding: '6px 0',
                }}>+1</span>
                <input className="cm-input" placeholder="(713) 555 — 0142" style={{ flex: 1 }}
                       value={whatsapp} onChange={e => setWhatsapp(e.target.value)}
                       type="tel" inputMode="tel" required />
              </div>
            </div>

            <div className="cm-field">
              <div className="cm-field-head">
                <span className="cm-field-num">03 / 05</span>
                <span className="cm-field-num">{t('requerido', 'required')}</span>
              </div>
              <div className="cm-field-label">{t('Email de respaldo', 'Backup email')}</div>
              <div className="cm-field-help">{t(
                'Solo por si pierdes el chat.',
                'Only in case you lose the chat.'
              )}</div>
              <input className="cm-input" type="email" placeholder="tunombre@gmail.com"
                     value={email} onChange={e => setEmail(e.target.value)} required />
            </div>

            <div className="cm-field">
              <div className="cm-field-head">
                <span className="cm-field-num">04 / 05</span>
                <span className="cm-field-num">{t('elige uno', 'pick one')}</span>
              </div>
              <div className="cm-field-label">{t('¿En qué score andas?', "Where's your score?")}</div>
              <div className="cm-field-help">{t(
                'Aproximado está bien. Si no sabes, marca «ni idea».',
                'Approximate is fine. If you don\'t know, pick "no clue".'
              )}</div>
              <div className="cm-chip-row">
                {[['lt580', '< 580'], ['580', '580–650'], ['650', '650–720'], ['720', '720 +'], ['idk', t('Ni idea', 'No clue')]].map(([id, l]) => (
                  <button key={id} type="button" className={`cm-chip ${score === id ? 'on' : ''}`}
                          onClick={() => setScore(id)}>{l}</button>
                ))}
              </div>
            </div>

            <div className="cm-field">
              <div className="cm-field-head">
                <span className="cm-field-num">05 / 05</span>
                <span className="cm-field-num">{t('elige uno', 'pick one')}</span>
              </div>
              <div className="cm-field-label">{t('¿Y tu meta en 6 meses?', 'Your goal in 6 months?')}</div>
              <div className="cm-field-help">{t(
                'La razón real. Esto nos ayuda a priorizar tu plan.',
                'The real reason. This helps us prioritize your plan.'
              )}</div>
              <div className="cm-chip-row">
                {[
                  ['home',  t('Comprar casa', 'Buy a home')],
                  ['car',   t('Comprar carro', 'Buy a car')],
                  ['debt',  t('Salir de deudas', 'Get out of debt')],
                  ['biz',   t('Crédito de negocio', 'Business credit')],
                  ['peace', t('Paz mental', 'Peace of mind')],
                ].map(([id, l]) => (
                  <button key={id} type="button" className={`cm-chip ${goal === id ? 'on' : ''}`}
                          onClick={() => setGoal(id)}>{l}</button>
                ))}
              </div>
            </div>

            {status === 'error' && errorMsg && (
              <div style={{
                marginTop: 16, padding: '12px 14px',
                background: 'oklch(0.95 0.04 30)',
                border: '1px solid oklch(0.75 0.12 30)',
                borderRadius: 6, color: 'oklch(0.35 0.16 25)', fontSize: 14,
              }}>{errorMsg}</div>
            )}

            <button type="submit" className="cm-btn cm-btn-lg" disabled={status === 'sending'} style={{
              marginTop: 24, width: '100%',
              background: 'var(--gold)', color: 'var(--ink)',
              opacity: status === 'sending' ? 0.6 : 1,
              cursor: status === 'sending' ? 'wait' : 'pointer',
            }}>
              {status === 'sending'
                ? t('Enviando…', 'Sending…')
                : t('Mandarme el link al chat', 'Send me the chat link')}
              {status !== 'sending' && <span className="arrow">→</span>}
            </button>

            <div className="cm-cta-foot">
              🔒 &nbsp; {t('SIN COMPROMISO', 'NO COMMITMENT')} &nbsp;·&nbsp;
              {t('SIN TARJETA', 'NO CARD')} &nbsp;·&nbsp; 2 MIN
            </div>
          </form>
        </Reveal>
      </div>
    </section>
  );
};

// ─── Footer ─────────────────────────────────────────────────────
const Footer = () => {
  const t = useT();
  return (
    <footer className="cm-footer">
      <div className="cm-footer-inner">
        <div>
          <a href="#top" className="cm-wordmark" style={{ fontSize: 28 }}>
            Midas<span className="slash">/</span>credit
          </a>
          <p style={{ marginTop: 18, maxWidth: 320, color: 'var(--ink-soft)', fontSize: 14, lineHeight: 1.55 }}>
            {t(
              'Educación financiera y consultoría para la comunidad latina en USA. Sin humo, sin gurús, sin $1,500.',
              'Financial education and consulting for the Latino community in the US. No smoke, no gurus, no $1,500.'
            )}
          </p>
        </div>
        <div>
          <h4>{t('Producto', 'Product')}</h4>
          <ul>
            <li><a href="#lee">{t('Cómo funciona', 'How it works')}</a></li>
            <li><a href="#planes">{t('Planes', 'Plans')}</a></li>
            <li><a href="#joel">{t('Historia', 'Story')}</a></li>
            <li><a href="#faq">FAQ</a></li>
          </ul>
        </div>
        <div>
          <h4>{t('Contacto', 'Contact')}</h4>
          <ul>
            <li><a href="mailto:contacto@internautamidas.com">contacto@internautamidas.com</a></li>
            <li><a href="#">WhatsApp · +1</a></li>
            <li><a href="#">TikTok @clickconia</a></li>
            <li><a href="#">Instagram</a></li>
          </ul>
        </div>
        <div>
          <h4>Legal</h4>
          <ul>
            <li><a href="#">{t('Privacidad', 'Privacy')}</a></li>
            <li><a href="#">{t('Términos', 'Terms')}</a></li>
            <li><a href="#">CROA · FCRA · FDCPA</a></li>
          </ul>
        </div>
      </div>
      <div className="cm-footer-bottom">
        <span>© 2026 MIDAS CREDIT-CONSULTING · KATY, TEXAS</span>
        <span>{t('NO ES UNA AGENCIA DE REPARACIÓN DE CRÉDITO', 'NOT A CREDIT REPAIR AGENCY')}</span>
      </div>
      <div style={{
        maxWidth: 1320, margin: '24px auto 0',
        fontSize: 11, color: 'var(--ink-faint)',
        lineHeight: 1.55, letterSpacing: '0.01em',
      }}>
        {t(
          'Midas Credit-Consulting es un servicio de educación financiera y consultoría. No es una agencia de reparación de crédito bajo CROA. No prometemos eliminación específica de items negativos. Los resultados varían según el caso individual. Toda comunicación está sujeta a la Política de Privacidad.',
          'Midas Credit-Consulting is a financial education and consulting service. Not a credit repair agency under CROA. We make no guarantee of specific item removal. Results vary by individual case. All communications subject to the Privacy Policy.'
        )}
      </div>
    </footer>
  );
};

// ─── Tweaks: dark-surface palette presets ───────────────────────
const DARK_BG_PRESETS = {
  'warm-ink':       { label: 'Tinta cálida',    label_en: 'Warm ink',      value: 'oklch(0.20 0.018 60)' },
  'lighter-ink':    { label: 'Tinta más clara', label_en: 'Lighter ink',   value: 'oklch(0.27 0.018 60)' },
  'navy':           { label: 'Navy',            label_en: 'Navy',          value: 'oklch(0.26 0.070 250)' },
  'lighter-navy':   { label: 'Navy claro',      label_en: 'Lighter navy',  value: 'oklch(0.34 0.075 250)' },
  'slate':          { label: 'Pizarra',         label_en: 'Slate',         value: 'oklch(0.30 0.020 230)' },
};
const DARK_FG_PRESETS = {
  'cream':          { label: 'Crema',           label_en: 'Cream',         value: 'oklch(0.972 0.012 85)' },
  'white':          { label: 'Blanco',          label_en: 'White',         value: '#ffffff' },
};

// ─── Landing — full composition ─────────────────────────────────
const Landing = () => (
  <LangProvider>
    <LandingInner />
  </LangProvider>
);

const LandingInner = () => {
  const t = useT();
  const [tw, setTweak] = useTweaks(window.__MIDAS_TWEAKS || { darkBg: 'warm-ink', darkFg: 'cream' });

  // Apply tweak values as CSS variables on :root
  React.useEffect(() => {
    const root = document.documentElement;
    const bg = DARK_BG_PRESETS[tw.darkBg]?.value || DARK_BG_PRESETS['warm-ink'].value;
    const fg = DARK_FG_PRESETS[tw.darkFg]?.value || DARK_FG_PRESETS['cream'].value;
    root.style.setProperty('--dark-bg', bg);
    root.style.setProperty('--dark-fg', fg);
  }, [tw.darkBg, tw.darkFg]);

  const bgOptions = Object.entries(DARK_BG_PRESETS).map(([k, v]) => ({ value: k, label: t(v.label, v.label_en) }));
  const fgOptions = Object.entries(DARK_FG_PRESETS).map(([k, v]) => ({ value: k, label: t(v.label, v.label_en) }));

  return (
    <div className="cm-app">
      <Nav />
      <Hero />
      <SimplifyIntro />
      <SectionLee />
      <SectionPregunta />
      <SectionAdelanta />
      <SectionJoel />
      <SectionTests />
      <SectionPlanes />
      <SectionGarantia />
      <SectionCTA />
      <Footer />

      <TweaksPanel title="Tweaks · Midas">
        <TweakSection label={t('Superficie oscura', 'Dark surface')} />
        <TweakSelect
          label={t('Color de fondo', 'Background')}
          value={tw.darkBg}
          options={bgOptions}
          onChange={(v) => setTweak('darkBg', v)} />
        <TweakSelect
          label={t('Color de texto', 'Text')}
          value={tw.darkFg}
          options={fgOptions}
          onChange={(v) => setTweak('darkFg', v)} />
      </TweaksPanel>
    </div>
  );
};

Object.assign(window, {
  SectionPregunta, SectionAdelanta, SectionJoel,
  SectionTests, SectionPlanes, SectionGarantia, SectionCTA, Footer,
  Landing,
});