/* ParaQuien + SobreInma + DashboardPreview + Testimonios */

const { useState: useStateB } = React;

function ParaQuien({ tweaks }) {
  const profiles = [
    {
      tag: 'Empezando',
      t: 'Acabas de facturar lo suficiente para no dormir tranquila',
      d: 'Tu negocio ya es real. Quieres saber cuánto ganas de verdad y dejar de adivinar.',
      points: ['Facturación 60-200k €/año', 'Estructura contable básica', 'Decisiones a ojo'],
    },
    {
      tag: 'Creciendo',
      t: 'Tienes equipo, varios canales y los números empiezan a no cuadrar',
      d: 'Has crecido y la complejidad también. Necesitas un panel que te diga, periódicamente, dónde estás y qué se está moviendo.',
      points: ['Facturación 200k-1M €/año', 'Equipo de 2-15 personas', 'Multicanal'],
    },
    {
      tag: 'Decidiendo',
      t: 'Estás ante una decisión grande y no quieres equivocarte',
      d: 'Subir precios, contratar, abrir local, vender online, pedir financiación. Quieres ponerle números a la decisión antes de tomarla.',
      points: ['Inversiones de 10k-300k €', 'Cambios estructurales', 'Necesitas una reflexión numérica'],
    },
  ];

  return (
    <section id="para-quien" style={{ padding: '120px 24px', background: 'var(--bg-3)' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <div style={{ maxWidth: 720, marginBottom: 64 }}>
          <div className="eyebrow" style={{ marginBottom: 16, color: tweaks.accent }}>Para quién</div>
          <h2 className="h2" style={{ margin: '0 0 20px', fontSize: 'clamp(32px, 4vw, 48px)' }}>
            Trabajamos con tres tipos de empresarias<span style={{ color: tweaks.accent }}>.</span>
          </h2>
          <p className="body-lg" style={{ color: 'var(--fg-2)', margin: 0 }}>
            No tenemos que encajar todas. Cuéntanos en qué momento estás y te decimos honestamente si somos lo que necesitas.
          </p>
        </div>

        <div className="paraquien-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
          {profiles.map((p, i) => (
            <article key={p.tag} style={{
              background: 'var(--white)', border: '1px solid var(--border-1)',
              borderRadius: 'var(--radius-md)', padding: 32,
              boxShadow: 'var(--shadow-sm)',
              display: 'flex', flexDirection: 'column',
            }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 20 }}>
                <span className="figure" style={{ fontSize: 13, fontWeight: 700, color: tweaks.accent }}>0{i+1}</span>
                <span style={{ flex: 1, height: 1, background: 'var(--border-1)' }}/>
                <span style={{
                  padding: '4px 10px', borderRadius: 999, fontSize: 11, fontWeight: 700,
                  background: 'var(--navy-050)', color: 'var(--navy-600)',
                  textTransform: 'uppercase', letterSpacing: '0.06em',
                }}>{p.tag}</span>
              </div>
              <h3 style={{ margin: '0 0 14px', fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 700, lineHeight: 1.25, letterSpacing: '-0.01em', textWrap: 'pretty' }}>{p.t}<span style={{ color: tweaks.accent }}>.</span></h3>
              <p style={{ color: 'var(--fg-2)', fontSize: 15, lineHeight: 1.6, margin: '0 0 24px' }}>{p.d}</p>
              <div style={{ marginTop: 'auto', borderTop: '1px solid var(--border-1)', paddingTop: 16, display: 'flex', flexDirection: 'column', gap: 8 }}>
                {p.points.map(pt => (
                  <div key={pt} style={{ display: 'flex', gap: 10, alignItems: 'center', fontSize: 13, color: 'var(--fg-2)' }}>
                    <span style={{ width: 6, height: 6, borderRadius: 999, background: tweaks.accent, flexShrink: 0 }}/>
                    {pt}
                  </div>
                ))}
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function SobreInma({ tweaks }) {
  return (
    <section id="sobre" style={{ padding: '120px 24px', background: 'var(--paper)' }}>
      <div style={{ maxWidth: 1100, margin: '0 auto' }}>
        <div className="sobre-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1.3fr', gap: 64, alignItems: 'center' }}>
          <div className="sobre-portrait" style={{
            position: 'relative', aspectRatio: '4/5', borderRadius: 'var(--radius-lg)',
            overflow: 'hidden', background: 'var(--navy-800)',
            boxShadow: 'var(--shadow-lg)',
          }}>
            {/* Stylized portrait placeholder using shapes */}
            <div style={{
              position: 'absolute', inset: 0,
              backgroundImage: 'radial-gradient(circle at 30% 20%, rgba(255,144,78,0.15) 0%, transparent 60%), radial-gradient(circle, rgba(255,144,78,0.10) 1.5px, transparent 1.5px)',
              backgroundSize: 'auto, 24px 24px',
            }}/>
            <svg viewBox="0 0 400 500" preserveAspectRatio="xMidYMid slice" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
              {/* Simple stylized portrait silhouette */}
              <defs>
                <linearGradient id="grad-portrait" x1="0" y1="0" x2="0" y2="1">
                  <stop offset="0%" stopColor="#0a2d52"/>
                  <stop offset="100%" stopColor="#001f3c"/>
                </linearGradient>
              </defs>
              <rect width="400" height="500" fill="url(#grad-portrait)"/>
              {/* Shoulders */}
              <path d="M40,500 C 40,380 100,340 200,340 C 300,340 360,380 360,500 Z" fill={tweaks.accent} fillOpacity="0.92"/>
              {/* Neck */}
              <rect x="175" y="290" width="50" height="70" fill="#ffd6bd"/>
              {/* Head */}
              <ellipse cx="200" cy="220" rx="80" ry="92" fill="#ffd6bd"/>
              {/* Hair */}
              <path d="M120,220 C 120,140 160,110 200,110 C 250,110 285,150 285,220 C 285,200 270,170 240,160 C 230,180 220,180 200,180 C 175,180 165,170 158,160 C 135,170 120,200 120,220 Z" fill="#1a0e08"/>
              {/* glasses */}
              <circle cx="173" cy="220" r="14" fill="none" stroke="#001f3c" strokeWidth="3"/>
              <circle cx="227" cy="220" r="14" fill="none" stroke="#001f3c" strokeWidth="3"/>
              <line x1="187" y1="220" x2="213" y2="220" stroke="#001f3c" strokeWidth="3"/>
              {/* smile */}
              <path d="M185,255 Q 200,265 215,255" stroke="#a0522d" strokeWidth="2.5" fill="none" strokeLinecap="round"/>
            </svg>
            <div style={{
              position: 'absolute', bottom: 16, left: 16, right: 16,
              padding: '12px 16px', background: 'rgba(0,31,60,0.85)',
              backdropFilter: 'blur(8px)', borderRadius: 12,
              color: 'var(--paper)', fontSize: 13,
            }}>
              <div style={{ fontWeight: 700, fontSize: 15 }}>Inma Ruiz Ramírez</div>
              <div style={{ color: 'var(--navy-200)', fontSize: 13, marginTop: 2 }}>Fundadora · Asesora financiera</div>
            </div>
          </div>

          <div>
            <div className="eyebrow" style={{ marginBottom: 16, color: tweaks.accent }}>Sobre Inncertia</div>
            <h2 className="h2" style={{ margin: '0 0 24px', fontSize: 'clamp(32px, 4vw, 44px)' }}>
              Soy Inma. Llevo 15 años traduciendo números a decisiones<span style={{ color: tweaks.accent }}>.</span>
            </h2>
            <p style={{ fontSize: 17, color: 'var(--fg-2)', lineHeight: 1.7, margin: '0 0 20px' }}>
              Pasé una década en control de gestión de empresas grandes, donde aprendí algo incómodo: la calidad de la información financiera es lo que separa a las empresas que crecen tranquilas de las que viven en sobresalto.
            </p>
            <p style={{ fontSize: 17, color: 'var(--fg-2)', lineHeight: 1.7, margin: '0 0 32px' }}>
              Fundé Inncertia para llevar ese mismo rigor — sin la jerga, sin los powerpoints — a las pequeñas empresas y empresarias que llevan los números entre dudas. Mi promesa es simple: tendrás claridad, tendrás contexto y tendrás criterio para decidir.
            </p>

            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 20, marginBottom: 32 }}>
              {[
                { k: 'Formación', v: 'ADE + Máster en Control de Gestión, ESADE' },
                { k: 'Experiencia', v: '15 años en finanzas — corporate y PYME' },
                { k: 'Sectores', v: 'Retail, hostelería, salud, e-commerce' },
                { k: 'Idiomas', v: 'Español · Catalán · Inglés' },
              ].map(it => (
                <div key={it.k}>
                  <div className="caption" style={{ color: 'var(--fg-3)', marginBottom: 4 }}>{it.k}</div>
                  <div style={{ fontSize: 15, color: 'var(--fg-1)', fontWeight: 500, lineHeight: 1.5 }}>{it.v}</div>
                </div>
              ))}
            </div>
            <a href="#contacto" className="btn-ghost" style={{ textDecoration: 'none', display: 'inline-block' }}>Hablemos 30 minutos →</a>
          </div>
        </div>
      </div>
    </section>
  );
}

function DashboardPreview({ tweaks }) {
  const [activeTab, setActiveTab] = useStateB('resumen');
  const tabs = [
    { id: 'resumen', label: 'Resumen' },
    { id: 'ingresos', label: 'Ingresos' },
    { id: 'tesoreria', label: 'Tesorería' },
  ];
  const kpis = [
    { label: 'Ingresos', value: '52.430,00 €', delta: '+9,2 %', positive: true },
    { label: 'Margen bruto', value: '31.249,50 €', delta: '+13,6 %', positive: true },
    { label: 'Gasto op.', value: '14.180,50 €', delta: '−4,2 %', positive: true },
    { label: 'Tesorería', value: '88.420,18 €', delta: '+2.140 €', positive: true },
  ];
  const rows = [
    ['Tienda Madrid', '18.420,00', '17.500,00', '+5,3 %', 'pos'],
    ['Tienda Barcelona', '14.110,50', '14.000,00', '+0,8 %', 'pos'],
    ['Online', '12.380,00', '10.500,00', '+17,9 %', 'pos'],
    ['Mayoristas', '7.519,50', '8.500,00', '−11,5 %', 'neg'],
  ];

  return (
    <section style={{ padding: '120px 24px', background: 'linear-gradient(180deg, var(--paper) 0%, var(--bg-3) 100%)' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <div style={{ maxWidth: 720, marginBottom: 56 }}>
          <div className="eyebrow" style={{ marginBottom: 16, color: tweaks.accent }}>Reporting</div>
          <h2 className="h2" style={{ margin: '0 0 20px', fontSize: 'clamp(32px, 4vw, 48px)' }}>
            Cada mes, esto encima de tu mesa<span style={{ color: tweaks.accent }}>.</span>
          </h2>
          <p className="body-lg" style={{ color: 'var(--fg-2)', margin: 0 }}>
            Un panel hecho contigo, no para ti. Te entregamos lo importante, lo que se ha movido, y la conversación pendiente.
          </p>
        </div>

        <div style={{
          background: 'var(--white)', border: '1px solid var(--border-1)',
          borderRadius: 'var(--radius-lg)', overflow: 'hidden',
          boxShadow: 'var(--shadow-lg)',
        }}>
          {/* Browser chrome */}
          <div style={{ background: 'var(--bg-3)', borderBottom: '1px solid var(--border-1)', padding: '10px 16px', display: 'flex', alignItems: 'center', gap: 12 }}>
            <div style={{ display: 'flex', gap: 6 }}>
              <span style={{ width: 11, height: 11, borderRadius: 999, background: '#ff5f56' }}/>
              <span style={{ width: 11, height: 11, borderRadius: 999, background: '#ffbd2e' }}/>
              <span style={{ width: 11, height: 11, borderRadius: 999, background: '#27c93f' }}/>
            </div>
            <div style={{
              flex: 1, padding: '4px 12px', background: 'var(--white)',
              border: '1px solid var(--border-1)', borderRadius: 'var(--radius-pill)',
              fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-3)', textAlign: 'center',
            }}>app.inncertia.com / tu-empresa / mayo-2026</div>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: '220px 1fr', minHeight: 480 }} className="dash-grid">
            {/* Sidebar */}
            <aside style={{ background: 'var(--navy-800)', color: 'var(--paper)', padding: '20px 14px' }}>
              <div style={{ padding: '0 6px 16px', borderBottom: '1px solid var(--navy-600)', marginBottom: 14 }}>
                <div style={{ fontSize: 10, color: 'var(--navy-300)', textTransform: 'uppercase', letterSpacing: '0.08em', fontWeight: 700, marginBottom: 6 }}>Cliente</div>
                <div style={{ fontWeight: 700, fontSize: 14 }}>Tu empresa S.L.</div>
                <div style={{ fontSize: 11, color: 'var(--navy-200)', marginTop: 2 }}>Mayo 2026</div>
              </div>
              <nav style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
                {[
                  { id: 'resumen', l: 'Resumen', i: 'M3 12l9-9 9 9 M5 10v10h14V10' },
                  { id: 'ingresos', l: 'Ingresos', i: 'M3 17l6-6 4 4 8-8 M14 7h7v7' },
                  { id: 'gastos', l: 'Gastos', i: 'M3 7l6 6 4-4 8 8 M14 17h7v-7' },
                  { id: 'tesoreria', l: 'Tesorería', i: 'M2 6h20v14H2z M2 10h20' },
                  { id: 'informes', l: 'Informes', i: 'M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z M14 2v6h6' },
                ].map(it => (
                  <button key={it.id} onClick={() => setActiveTab(it.id)} style={{
                    display: 'flex', alignItems: 'center', gap: 10,
                    padding: '9px 10px', borderRadius: 6,
                    background: activeTab === it.id ? 'var(--navy-600)' : 'transparent',
                    color: activeTab === it.id ? 'var(--paper)' : 'var(--navy-200)',
                    border: 'none', cursor: 'pointer', textAlign: 'left',
                    fontFamily: 'inherit', fontSize: 13, fontWeight: 500,
                  }}>
                    <svg width="15" height="15" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" viewBox="0 0 24 24"><path d={it.i}/></svg>
                    {it.l}
                  </button>
                ))}
              </nav>
              <div style={{ marginTop: 20, padding: 12, background: 'var(--navy-700)', borderRadius: 8 }}>
                <div style={{ fontSize: 11, color: 'var(--navy-300)', fontWeight: 600, marginBottom: 4 }}>Próxima reunión</div>
                <div style={{ fontSize: 13, fontWeight: 600 }}>Lun 11 may · 10:00</div>
                <div style={{ fontSize: 11, color: 'var(--navy-200)', marginTop: 4 }}>con Inma R.</div>
              </div>
            </aside>

            {/* Main */}
            <main style={{ padding: '24px 28px', background: 'var(--bg-3)' }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 20 }}>
                <div>
                  <div className="eyebrow" style={{ marginBottom: 6, color: tweaks.accent }}>Resumen mensual</div>
                  <h3 style={{ margin: 0, fontFamily: 'var(--font-display)', fontSize: 24, fontWeight: 700 }}>Mayo 2026<span style={{ color: tweaks.accent }}>.</span></h3>
                </div>
                <div style={{ display: 'flex', gap: 6 }}>
                  <button className="btn-ghost" style={{ padding: '8px 14px', fontSize: 12 }}>PDF</button>
                  <button className="btn-primary" style={{ background: tweaks.accent, padding: '8px 14px', fontSize: 12 }}>Reservar</button>
                </div>
              </div>

              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 10, marginBottom: 16 }}>
                {kpis.map(k => (
                  <div key={k.label} style={{ background: 'var(--white)', border: '1px solid var(--border-1)', borderRadius: 10, padding: 14 }}>
                    <div style={{ fontSize: 10, color: 'var(--fg-3)', textTransform: 'uppercase', letterSpacing: '0.06em', fontWeight: 700, marginBottom: 8 }}>{k.label}</div>
                    <div className="figure" style={{ fontSize: 17, fontWeight: 700, letterSpacing: '-0.01em', marginBottom: 4 }}>{k.value}</div>
                    <span className="figure" style={{
                      display: 'inline-block', padding: '1px 6px', borderRadius: 999,
                      fontSize: 10, fontWeight: 700,
                      background: 'var(--positive-bg)', color: 'var(--positive)',
                    }}>{k.delta}</span>
                  </div>
                ))}
              </div>

              <div style={{ display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 10 }}>
                <div style={{ background: 'var(--white)', border: '1px solid var(--border-1)', borderRadius: 10, padding: 16 }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 10 }}>
                    <div style={{ fontSize: 13, fontWeight: 700 }}>Ingresos por canal</div>
                    <div style={{ display: 'flex', gap: 4 }}>
                      <span style={{ padding: '2px 8px', borderRadius: 999, background: 'var(--navy-800)', color: 'var(--paper)', fontSize: 10, fontWeight: 600 }}>Mayo</span>
                      <span style={{ padding: '2px 8px', borderRadius: 999, color: 'var(--fg-3)', fontSize: 10, fontWeight: 600, border: '1px solid var(--border-2)' }}>YTD</span>
                    </div>
                  </div>
                  <table style={{ width: '100%', borderCollapse: 'collapse' }}>
                    <thead>
                      <tr>
                        {['Canal', 'Real', 'Pres.', 'Δ'].map((h, i) => (
                          <th key={h} style={{ fontSize: 10, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.06em', color: 'var(--fg-3)', textAlign: i === 0 ? 'left' : 'right', padding: '6px 8px', borderBottom: '1px solid var(--border-1)' }}>{h}</th>
                        ))}
                      </tr>
                    </thead>
                    <tbody>
                      {rows.map(r => (
                        <tr key={r[0]}>
                          <td style={{ padding: '10px 8px', fontSize: 12, color: 'var(--fg-1)', fontWeight: 500, borderBottom: '1px solid var(--border-1)' }}>{r[0]}</td>
                          <td style={{ padding: '10px 8px', textAlign: 'right', fontFamily: 'var(--font-mono)', fontVariantNumeric: 'tabular-nums', fontSize: 12, borderBottom: '1px solid var(--border-1)' }}>{r[1]}</td>
                          <td style={{ padding: '10px 8px', textAlign: 'right', fontFamily: 'var(--font-mono)', fontVariantNumeric: 'tabular-nums', fontSize: 12, color: 'var(--fg-2)', borderBottom: '1px solid var(--border-1)' }}>{r[2]}</td>
                          <td style={{ padding: '10px 8px', textAlign: 'right', fontFamily: 'var(--font-mono)', fontSize: 12, fontWeight: 700, color: r[4] === 'pos' ? 'var(--positive)' : 'var(--negative)', borderBottom: '1px solid var(--border-1)' }}>{r[3]}</td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>

                <div style={{ background: 'var(--white)', border: '1px solid var(--border-1)', borderRadius: 10, padding: 16 }}>
                  <div style={{ fontSize: 13, fontWeight: 700, marginBottom: 4 }}>Notas de Inncertia</div>
                  <div style={{ fontSize: 11, color: 'var(--fg-3)', marginBottom: 12 }}>Tu equipo · Inma R.</div>
                  <p style={{ fontSize: 12.5, color: 'var(--fg-1)', lineHeight: 1.55, margin: '0 0 12px' }}>
                    Buen mes. El canal online ya pesa <b className="figure">23,6 %</b> del total.
                    Mayoristas siguen flojos.
                  </p>
                  <div style={{ padding: 10, background: 'var(--orange-050)', borderRadius: 6, borderLeft: `3px solid ${tweaks.accent}` }}>
                    <div style={{ fontSize: 9, fontWeight: 700, color: 'var(--orange-700)', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 4 }}>A decidir</div>
                    <div style={{ fontSize: 11.5, color: 'var(--fg-1)', lineHeight: 1.5 }}>¿Subimos precio mayoristas un 4 %?</div>
                  </div>
                </div>
              </div>
            </main>
          </div>
        </div>

        <div style={{ marginTop: 28, display: 'flex', gap: 32, flexWrap: 'wrap', alignItems: 'center', justifyContent: 'center', color: 'var(--fg-3)', fontSize: 13 }}>
          {['Acceso desde web y móvil', 'Exportable a PDF y Excel', 'Histórico desde el primer mes', 'Datos cifrados'].map(t => (
            <div key={t} style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke={tweaks.accent} strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12l5 5L20 7"/></svg>
              {t}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Testimonios({ tweaks }) {
  const items = [
    {
      q: 'Pasé de no abrir mi Excel a tener una reunión mensual donde por fin entiendo qué está pasando. Ya no decido a ciegas.',
      n: 'Marta L.',
      r: 'Fundadora — Asesoría tecnológica',
    },
    {
      q: 'En la propuesta ya me ahorraron una contratación que iba a ser un error. Llevo 14 meses con ellas y no me lo planteo.',
      n: 'Carla G.',
      r: 'CEO — Estudio de diseño',
    },
    {
      q: 'Lo que más valoro es que me hablan en mi idioma. Inma me explica las cosas como si fuese una amiga que sabe mucho.',
      n: 'Lucía M.',
      r: 'Propietaria — Clínica dental',
    },
  ];
  return (
    <section style={{ padding: '120px 24px', background: 'var(--paper)' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <div style={{ maxWidth: 720, marginBottom: 56 }}>
          <div className="eyebrow" style={{ marginBottom: 16, color: tweaks.accent }}>Lo que cuentan</div>
          <h2 className="h2" style={{ margin: '0 0 20px', fontSize: 'clamp(32px, 4vw, 48px)' }}>
            Empresarias que ya viven con sus números<span style={{ color: tweaks.accent }}>.</span>
          </h2>
        </div>

        <div className="testimonios-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
          {items.map((it, i) => (
            <figure key={i} style={{
              margin: 0, background: 'var(--white)',
              border: '1px solid var(--border-1)', borderRadius: 'var(--radius-md)',
              padding: 32, boxShadow: 'var(--shadow-sm)',
              display: 'flex', flexDirection: 'column',
            }}>
              <svg width="32" height="24" viewBox="0 0 32 24" fill={tweaks.accent} style={{ marginBottom: 20, opacity: 0.9 }}>
                <path d="M0,24 V12 C0,5.4 5.4,0 12,0 V6 C8.7,6 6,8.7 6,12 H12 V24 H0 Z M20,24 V12 C20,5.4 25.4,0 32,0 V6 C28.7,6 26,8.7 26,12 H32 V24 H20 Z"/>
              </svg>
              <blockquote style={{ margin: '0 0 24px', fontSize: 17, color: 'var(--fg-1)', lineHeight: 1.55, flex: 1, fontStyle: 'normal' }}>
                {it.q}
              </blockquote>
              <figcaption style={{ display: 'flex', alignItems: 'center', gap: 12, paddingTop: 16, borderTop: '1px solid var(--border-1)' }}>
                <div style={{
                  width: 38, height: 38, borderRadius: 999,
                  background: ['var(--orange-200)', 'var(--navy-200)', 'var(--orange-300)'][i],
                  color: 'var(--navy-800)', display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontWeight: 800, fontSize: 14, fontFamily: 'var(--font-display)',
                }}>{it.n.split(' ').map(p => p[0]).join('')}</div>
                <div>
                  <div style={{ fontSize: 14, fontWeight: 700 }}>{it.n}</div>
                  <div style={{ fontSize: 12, color: 'var(--fg-3)', marginTop: 2 }}>{it.r}</div>
                </div>
              </figcaption>
            </figure>
          ))}
        </div>
      </div>
    </section>
  );
}

function HoldedPartner({ tweaks }) {
  const reasons = [
    {
      t: 'Una sola fuente de verdad',
      d: 'Facturación, contabilidad, banca y proyectos en el mismo sitio. Nada de exportar, cuadrar y rezar para que coincida.',
      i: 'M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z M9 22V12h6v10',
    },
    {
      t: 'Datos en tiempo real',
      d: 'La información se sincroniza desde el banco, el TPV y la facturación. Cuando preguntas, la respuesta está al día.',
      i: 'M21 12a9 9 0 1 1-6.2-8.55 M21 4v5h-5',
    },
    {
      t: 'Implantación más rápida y ajustada',
      d: 'Como Partners conocemos los recovecos de la herramienta. La configuramos para tu sector, no para uno genérico.',
      i: 'M12 2L2 7l10 5 10-5z M2 17l10 5 10-5 M2 12l10 5 10-5',
    },
    {
      t: 'Soporte preferente',
      d: 'Acceso directo al soporte y a las novedades de la plataforma. Si algo se mueve, lo sabemos antes que tú.',
      i: 'M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z',
    },
  ];

  return (
    <section style={{ padding: '120px 24px', background: 'linear-gradient(180deg, var(--paper) 0%, var(--bg-3) 100%)' }}>
      <div style={{ maxWidth: 1100, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', maxWidth: 760, margin: '0 auto 56px' }}>
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 8,
            padding: '6px 14px', borderRadius: 999,
            background: 'var(--orange-050)', color: 'var(--orange-700)',
            fontSize: 11, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.06em',
            marginBottom: 20,
          }}>
            <span style={{ width: 6, height: 6, borderRadius: 999, background: tweaks.accent }}/>
            Partner oficial
          </div>
          <h2 className="h2" style={{ margin: '0 0 20px', fontSize: 'clamp(32px, 4vw, 48px)' }}>
            Trabajamos sobre Holded<span style={{ color: tweaks.accent }}>.</span>
          </h2>
          <p className="body-lg" style={{ color: 'var(--fg-2)', margin: 0 }}>
            Es la herramienta sobre la que llevamos tu contabilidad, facturación, banca y reporting — todo conectado, todo al día, todo en el mismo sitio. La elegimos porque es la mejor para PYMEs en España y porque nos permite tenerte la información lista, no perseguirla.
          </p>
        </div>

        <div style={{
          background: 'var(--white)', border: '1px solid var(--border-1)',
          borderRadius: 'var(--radius-lg)', padding: '28px 36px',
          boxShadow: 'var(--shadow-md)',
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          gap: 32, flexWrap: 'wrap', marginBottom: 24,
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 24 }}>
            <a href="https://www.holded.com/es" target="_blank" rel="noopener noreferrer" style={{ display: 'inline-flex', textDecoration: 'none' }} aria-label="Ir a holded.com/es">
              <img src="assets/holded-logo.png" alt="Holded" style={{ height: 72, width: 'auto', display: 'block' }}/>
            </a>
            <div>
              <div className="caption" style={{ color: 'var(--fg-3)', marginBottom: 4 }}>Inncertia es</div>
              <div style={{ fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 700, letterSpacing: '-0.01em' }}>
                Partner oficial de Holded
              </div>
            </div>
          </div>
          <div style={{ display: 'flex', gap: 28, flexWrap: 'wrap' }}>
            {[
              { v: 'Certificadas', l: 'en la plataforma' },
              { v: 'Soporte', l: 'preferente del fabricante' },
              { v: 'Implantación', l: 'guiada por sector' },
            ].map(s => (
              <div key={s.l}>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 16, fontWeight: 700, color: 'var(--fg-1)' }}>{s.v}</div>
                <div style={{ fontSize: 12, color: 'var(--fg-3)', marginTop: 2 }}>{s.l}</div>
              </div>
            ))}
          </div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 16 }} className="holded-grid">
          {reasons.map(r => (
            <div key={r.t} style={{
              background: 'var(--white)', border: '1px solid var(--border-1)',
              borderRadius: 'var(--radius-md)', padding: 28,
              display: 'flex', gap: 18, alignItems: 'flex-start',
            }}>
              <div style={{
                width: 44, height: 44, borderRadius: 10, flexShrink: 0,
                background: tweaks.accent + '22', color: tweaks.accent,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}>
                <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d={r.i}/></svg>
              </div>
              <div>
                <h3 style={{ margin: '0 0 8px', fontFamily: 'var(--font-display)', fontSize: 18, fontWeight: 700, letterSpacing: '-0.01em' }}>{r.t}</h3>
                <p style={{ margin: 0, color: 'var(--fg-2)', fontSize: 14.5, lineHeight: 1.6 }}>{r.d}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.ParaQuien = ParaQuien;
window.HoldedPartner = HoldedPartner;
window.Testimonios = Testimonios;