// Marketing landing page
function Landing({ onEnter }) {
  const { t, lang, setLang } = useT();

  return (
    <div className="landing">
      <header className="lp-nav">
        <div className="lp-nav-inner">
          <div className="logo" style={{ fontFamily: 'var(--serif)', fontSize: 22, flexShrink: 0, whiteSpace: 'nowrap', display: 'flex', alignItems: 'center', gap: 6 }}>
            <span style={{ color: 'var(--emerald-2)' }}>◈</span><span>Dividis</span><span style={{ color: 'var(--text-3)' }}>·</span><span style={{ fontStyle: 'italic' }}>Capital</span>
          </div>
          <div className="lp-nav-links">
            <a>{t('lp_link_marketplace')}</a>
            <a>{t('lp_link_how')}</a>
            <a>{t('lp_link_security')}</a>
            <a>{lang === 'es' ? 'Empresas' : 'Companies'}</a>
          </div>
          <div style={{ display: 'flex', gap: 10, alignItems: 'center', flexShrink: 0 }}>
            <button className="lang-toggle" onClick={() => setLang(lang === 'es' ? 'en' : 'es')} title="Switch language">
              {lang === 'es' ? 'EN' : 'ES'}
            </button>
            <button className="btn btn-ghost" onClick={onEnter}>{t('lp_login')}</button>
            <button className="btn btn-primary" onClick={onEnter}>{t('lp_signup')}</button>
          </div>
        </div>
      </header>

      <section className="lp-hero">
        <div className="lp-hero-inner">
          <div className="lp-hero-tag">
            <span className="dot" style={{ background: 'var(--emerald-2)' }}></span>
            {lang === 'es' ? 'Plataforma autorizada por CNMV' : 'CNMV-authorised platform'}
          </div>
          <h1 className="lp-h1">
            {lang === 'es' ? (
              <>Renta fija. <span style={{ fontStyle: 'italic', color: 'var(--text-2)' }}>Capital paciente.</span><br />Acceso institucional.</>
            ) : (
              <>Fixed income. <span style={{ fontStyle: 'italic', color: 'var(--text-2)' }}>Patient capital.</span><br />Institutional access.</>
            )}
          </h1>
          <p className="lp-lede">{t('lp_lede')}</p>
          <div style={{ display: 'flex', gap: 12, marginTop: 38 }}>
            <button className="btn btn-primary btn-lg" onClick={onEnter}>{t('lp_cta')} <Icon name="arrow-right" size={14} /></button>
            <button className="btn btn-ghost btn-lg">{lang === 'es' ? 'Hablar con un asesor' : 'Talk to an advisor'}</button>
          </div>
          <div className="lp-hero-stats">
            <div>
              <div className="num" style={{ fontFamily: 'var(--serif)', fontSize: 36, letterSpacing: '-0.025em' }}>€38.4M</div>
              <div style={{ fontSize: 12, color: 'var(--text-3)', marginTop: 4 }}>{lang === 'es' ? 'Capital intermediado' : 'Capital intermediated'}</div>
            </div>
            <div>
              <div className="num" style={{ fontFamily: 'var(--serif)', fontSize: 36, letterSpacing: '-0.025em' }}>9.4%</div>
              <div style={{ fontSize: 12, color: 'var(--text-3)', marginTop: 4 }}>{lang === 'es' ? 'TIR media histórica' : 'Avg. historical IRR'}</div>
            </div>
            <div>
              <div className="num" style={{ fontFamily: 'var(--serif)', fontSize: 36, letterSpacing: '-0.025em' }}>0.18%</div>
              <div style={{ fontSize: 12, color: 'var(--text-3)', marginTop: 4 }}>{lang === 'es' ? 'Tasa de impago factoring' : 'Factoring default rate'}</div>
            </div>
            <div>
              <div className="num" style={{ fontFamily: 'var(--serif)', fontSize: 36, letterSpacing: '-0.025em' }}>3,847</div>
              <div style={{ fontSize: 12, color: 'var(--text-3)', marginTop: 4 }}>{lang === 'es' ? 'Inversores activos' : 'Active investors'}</div>
            </div>
          </div>
        </div>

        {/* Floating product card preview */}
        <div className="lp-preview">
          <div className="lp-preview-card">
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 18 }}>
              <div>
                <span className="badge badge-equity">EQUITY</span>
                <div style={{ fontFamily: 'var(--serif)', fontSize: 22, marginTop: 10, letterSpacing: '-0.02em' }}>Fenix Energías</div>
                <div style={{ fontSize: 12, color: 'var(--text-3)' }}>{lang === 'es' ? 'Energía solar · Sevilla' : 'Solar energy · Sevilla'}</div>
              </div>
              <span className="rating">A2</span>
            </div>
            <div className="progress"><div className="progress-fill" style={{ width: '58%' }} /></div>
            <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 8 }}>
              <span className="num" style={{ fontSize: 11, color: 'var(--text-3)' }}>{fmtEUR(696000)}</span>
              <span className="num" style={{ fontSize: 11, color: 'var(--text-2)' }}>{fmtEUR(1200000)}</span>
            </div>
            <div className="lp-pv-grid">
              <div>
                <div style={{ fontSize: 10, color: 'var(--text-3)', textTransform: 'uppercase', letterSpacing: '.06em' }}>{t('det_term_yield')}</div>
                <div className="num" style={{ fontFamily: 'var(--serif)', fontSize: 22, color: 'var(--emerald-2)', marginTop: 4 }}>22-32%</div>
              </div>
              <div>
                <div style={{ fontSize: 10, color: 'var(--text-3)', textTransform: 'uppercase', letterSpacing: '.06em' }}>{t('det_term_min')}</div>
                <div className="num" style={{ fontFamily: 'var(--serif)', fontSize: 22, marginTop: 4 }}>€500</div>
              </div>
            </div>
          </div>
          <div className="lp-preview-card lp-preview-card-2">
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              <div>
                <span className="badge badge-invoice">INVOICE</span>
                <div style={{ fontFamily: 'var(--serif)', fontSize: 16, marginTop: 8, letterSpacing: '-0.01em' }}>Mediterránea Logística</div>
              </div>
              <div style={{ textAlign: 'right' }}>
                <div className="num" style={{ fontFamily: 'var(--serif)', fontSize: 22, color: 'var(--emerald-2)' }}>8.4%</div>
                <div className="num" style={{ fontSize: 11, color: 'var(--text-3)' }}>62 d</div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="lp-section">
        <div className="lp-section-inner">
          <div className="eyebrow" style={{ textAlign: 'center', marginBottom: 18 }}>{lang === 'es' ? '— Productos' : '— Products'}</div>
          <h2 className="lp-h2">{t('lp_products_title')}</h2>
          <div className="lp-products">
            {[
              { type: 'invoice', icon: 'doc', title: t('lp_p_invoice'), desc: t('lp_p_invoice_desc'), term: '30-90 d', yld: '6-9%' },
              { type: 'fixed', icon: 'lock', title: t('lp_p_fixed'), desc: t('lp_p_fixed_desc'), term: '12-36 m', yld: '7-12%' },
              { type: 'equity', icon: 'building', title: t('lp_p_equity'), desc: t('lp_p_equity_desc'), term: '3-7 a', yld: '15-30%' },
              { type: 'seed', icon: 'seedling', title: t('lp_p_seed'), desc: t('lp_p_seed_desc'), term: '5-10 a', yld: '25%+' },
            ].map(p => (
              <div key={p.type} className="lp-product">
                <TypeBadge type={p.type} />
                <h3 style={{ fontFamily: 'var(--serif)', fontSize: 22, marginTop: 16, letterSpacing: '-0.02em', fontWeight: 400 }}>{p.title}</h3>
                <p style={{ fontSize: 13, color: 'var(--text-2)', lineHeight: 1.6, marginTop: 8, marginBottom: 22 }}>{p.desc}</p>
                <div style={{ display: 'flex', justifyContent: 'space-between', borderTop: '1px solid var(--line)', paddingTop: 14 }}>
                  <div>
                    <div style={{ fontSize: 10, color: 'var(--text-3)', textTransform: 'uppercase', letterSpacing: '.06em' }}>{t('det_term_term')}</div>
                    <div className="num" style={{ fontSize: 14, fontWeight: 500, marginTop: 2 }}>{p.term}</div>
                  </div>
                  <div>
                    <div style={{ fontSize: 10, color: 'var(--text-3)', textTransform: 'uppercase', letterSpacing: '.06em' }}>{lang === 'es' ? 'Rentab.' : 'Yield'}</div>
                    <div className="num" style={{ fontSize: 14, fontWeight: 500, marginTop: 2, color: 'var(--emerald-2)' }}>{p.yld}</div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="lp-section lp-trust">
        <div className="lp-section-inner">
          <div className="eyebrow" style={{ textAlign: 'center', marginBottom: 18 }}>{lang === 'es' ? '— Confianza' : '— Trust'}</div>
          <h2 className="lp-h2">{t('lp_trust_title')}</h2>
          <div className="lp-trust-grid">
            <div className="lp-trust-card">
              <Icon name="shield" size={22} color="var(--emerald-2)" />
              <h4 style={{ fontFamily: 'var(--serif)', fontSize: 18, marginTop: 14, fontWeight: 400 }}>{t('lp_trust_1')}</h4>
              <p style={{ fontSize: 13, color: 'var(--text-2)', marginTop: 8, lineHeight: 1.6 }}>{t('lp_trust_1_desc')}</p>
            </div>
            <div className="lp-trust-card">
              <Icon name="bank" size={22} color="var(--emerald-2)" />
              <h4 style={{ fontFamily: 'var(--serif)', fontSize: 18, marginTop: 14, fontWeight: 400 }}>{t('lp_trust_2')}</h4>
              <p style={{ fontSize: 13, color: 'var(--text-2)', marginTop: 8, lineHeight: 1.6 }}>{t('lp_trust_2_desc')}</p>
            </div>
            <div className="lp-trust-card">
              <Icon name="chart" size={22} color="var(--emerald-2)" />
              <h4 style={{ fontFamily: 'var(--serif)', fontSize: 18, marginTop: 14, fontWeight: 400 }}>{t('lp_trust_3')}</h4>
              <p style={{ fontSize: 13, color: 'var(--text-2)', marginTop: 8, lineHeight: 1.6 }}>{t('lp_trust_3_desc')}</p>
            </div>
          </div>
        </div>
      </section>

      <section className="lp-cta">
        <div className="lp-section-inner" style={{ textAlign: 'center' }}>
          <h2 className="lp-h2" style={{ marginBottom: 14 }}>{lang === 'es' ? 'Empieza con €100.' : 'Start with €100.'}</h2>
          <p style={{ color: 'var(--text-2)', fontSize: 16, marginBottom: 28 }}>{lang === 'es' ? 'Sin comisiones de entrada. Diversifica desde tu primera inversión.' : 'No entry fees. Diversify from your very first investment.'}</p>
          <button className="btn btn-primary btn-lg" onClick={onEnter}>{t('lp_cta')} <Icon name="arrow-right" size={14} /></button>
          <div style={{ marginTop: 28, fontSize: 11, color: 'var(--text-3)', letterSpacing: '.04em' }}>
            {lang === 'es' ? 'Inversión sujeta a riesgo. Rentabilidades pasadas no garantizan resultados futuros.' : 'Investment carries risk. Past performance does not guarantee future results.'}
          </div>
        </div>
      </section>

      <footer className="lp-foot">
        <div className="lp-section-inner">
          <div className="lp-foot-grid">
            <div>
              <div style={{ fontFamily: 'var(--serif)', fontSize: 18 }}><span style={{ color: 'var(--emerald-2)' }}>◈</span> Dividis Capital</div>
              <div style={{ fontSize: 11, color: 'var(--text-3)', marginTop: 14, lineHeight: 1.7 }}>
                Plataforma de Financiación Participativa autorizada por la CNMV nº 32. Inscripción Registro Mercantil de Madrid.
              </div>
            </div>
            <div>
              <div style={{ fontSize: 11, color: 'var(--text-3)', textTransform: 'uppercase', letterSpacing: '.06em', marginBottom: 12 }}>{lang === 'es' ? 'Producto' : 'Product'}</div>
              <a className="lp-foot-l">{t('lp_link_marketplace')}</a>
              <a className="lp-foot-l">{lang === 'es' ? 'Cómo funciona' : 'How it works'}</a>
              <a className="lp-foot-l">{lang === 'es' ? 'Tarifas' : 'Pricing'}</a>
            </div>
            <div>
              <div style={{ fontSize: 11, color: 'var(--text-3)', textTransform: 'uppercase', letterSpacing: '.06em', marginBottom: 12 }}>Legal</div>
              <a className="lp-foot-l">{lang === 'es' ? 'Aviso legal' : 'Terms'}</a>
              <a className="lp-foot-l">{lang === 'es' ? 'Privacidad' : 'Privacy'}</a>
              <a className="lp-foot-l">{lang === 'es' ? 'Información PRIIPs' : 'PRIIPs information'}</a>
            </div>
            <div>
              <div style={{ fontSize: 11, color: 'var(--text-3)', textTransform: 'uppercase', letterSpacing: '.06em', marginBottom: 12 }}>{lang === 'es' ? 'Contacto' : 'Contact'}</div>
              <a className="lp-foot-l">hola@dividis.capital</a>
              <a className="lp-foot-l">+34 91 042 8493</a>
              <a className="lp-foot-l">Pº de la Castellana 89, Madrid</a>
            </div>
          </div>
          <div style={{ marginTop: 40, paddingTop: 24, borderTop: '1px solid var(--line)', fontSize: 11, color: 'var(--text-3)', display: 'flex', justifyContent: 'space-between' }}>
            <span>© 2025 Dividis Capital S.L. — CIF B-12345678</span>
            <span>Madrid · Lisboa · Milano</span>
          </div>
        </div>
      </footer>

      <style>{`
        .landing { background: var(--bg); color: var(--text); min-height: 100vh; }
        .lp-nav { position: sticky; top: 0; z-index: 50; background: rgba(8,11,16,0.85); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
        .lp-nav-inner { max-width: 1280px; margin: 0 auto; padding: 18px 40px; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
        .lp-nav-links { display: flex; gap: 28px; font-size: 13px; color: var(--text-2); flex-shrink: 1; min-width: 0; white-space: nowrap; overflow: hidden; }
        .lp-nav-links a { cursor: pointer; transition: color .15s; }
        .lp-nav-links a:hover { color: var(--text); }
        .lang-toggle { background: transparent; border: 1px solid var(--line-2); border-radius: 6px; color: var(--text-2); font-family: var(--mono); font-size: 11px; padding: 6px 10px; cursor: pointer; }
        .lang-toggle:hover { background: var(--surface-2); color: var(--text); }
        
        .lp-hero { position: relative; max-width: 1280px; margin: 0 auto; padding: 96px 40px 80px; display: grid; grid-template-columns: 1fr 0.85fr; gap: 60px; }
        .lp-hero::before {
          content: '';
          position: absolute;
          top: -200px; right: -200px;
          width: 800px; height: 800px;
          background: radial-gradient(circle, rgba(45,190,126,0.08), transparent 60%);
          pointer-events: none;
        }
        .lp-hero-inner { position: relative; z-index: 2; }
        .lp-hero-tag {
          display: inline-flex; align-items: center; gap: 8px;
          white-space: nowrap;
          padding: 6px 12px;
          background: var(--emerald-glow);
          border: 1px solid var(--emerald-line);
          border-radius: 100px;
          font-size: 11px; color: var(--emerald-2);
          font-weight: 500;
          margin-bottom: 24px;
        }
        .lp-h1 {
          font-family: var(--serif);
          font-size: 76px;
          line-height: 0.98;
          letter-spacing: -0.035em;
          font-weight: 400;
          margin-bottom: 28px;
        }
        .lp-lede {
          font-size: 18px; color: var(--text-2);
          line-height: 1.55;
          max-width: 520px;
        }
        .lp-hero-stats {
          display: grid; grid-template-columns: repeat(2, 1fr);
          gap: 36px 48px;
          margin-top: 64px;
          padding-top: 36px;
          border-top: 1px solid var(--line);
          max-width: 480px;
        }
        .lp-preview { position: relative; z-index: 1; }
        .lp-preview-card {
          background: var(--surface);
          border: 1px solid var(--line-2);
          border-radius: 14px;
          padding: 24px;
          box-shadow: 0 24px 60px rgba(0,0,0,0.4);
        }
        .lp-preview-card-2 {
          margin-top: -36px;
          margin-left: 60px;
          margin-right: -20px;
          padding: 18px 22px;
          transform: rotate(-1.2deg);
        }
        .lp-pv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding-top: 18px; margin-top: 18px; border-top: 1px solid var(--line); }

        .lp-section { padding: 96px 0; border-top: 1px solid var(--line); }
        .lp-section-inner { max-width: 1280px; margin: 0 auto; padding: 0 40px; }
        .lp-h2 {
          font-family: var(--serif);
          font-size: 52px;
          line-height: 1.05;
          letter-spacing: -0.03em;
          font-weight: 400;
          text-align: center;
          margin-bottom: 56px;
          max-width: 880px;
          margin-left: auto;
          margin-right: auto;
        }
        .lp-products { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
        .lp-product { padding: 28px 24px; border: 1px solid var(--line-2); border-radius: 14px; background: var(--surface); transition: transform .2s, border-color .2s; }
        .lp-product:hover { transform: translateY(-3px); border-color: var(--emerald-line); }

        .lp-trust { background: var(--bg-1); }
        .lp-trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
        .lp-trust-card { padding: 32px 28px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }

        .lp-cta { padding: 100px 0; background: linear-gradient(180deg, transparent, rgba(45,190,126,0.04)); border-top: 1px solid var(--line); }

        .lp-foot { padding: 60px 0 40px; border-top: 1px solid var(--line); background: var(--bg-1); }
        .lp-foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 60px; }
        .lp-foot-l { display: block; font-size: 13px; color: var(--text-2); padding: 5px 0; cursor: pointer; transition: color .15s; }
        .lp-foot-l:hover { color: var(--text); }

        .badge-equity { background: rgba(193,158,103,0.10); color: var(--gold); border: 1px solid rgba(193,158,103,0.25); padding: 4px 10px; border-radius: 4px; font-family: var(--mono); font-size: 10px; letter-spacing: .08em; font-weight: 500; }
        .badge-invoice { background: rgba(74,143,231,0.10); color: var(--blue); border: 1px solid rgba(74,143,231,0.25); padding: 4px 10px; border-radius: 4px; font-family: var(--mono); font-size: 10px; letter-spacing: .08em; font-weight: 500; }
        
        @media (max-width: 1100px) {
          .lp-hero { grid-template-columns: 1fr; }
          .lp-h1 { font-size: 56px; }
          .lp-products { grid-template-columns: repeat(2, 1fr); }
          .lp-foot-grid { grid-template-columns: 1fr 1fr; }
        }
      `}</style>
    </div>
  );
}

window.Landing = Landing;