/* Pillars + Servicios (with tabs) + Proceso */

const { useState: useStateA } = React;

function Pillars({ tweaks }) {
  const items = [
    { n: '01', t: 'Ordenar', d: 'Estructuramos tus cuentas para que tengan sentido. Plan contable claro, categorías útiles, datos al día y conciliados.', icon: 'M8 6h13 M8 12h13 M8 18h13 M3 6h.01 M3 12h.01 M3 18h.01' },
    { n: '02', t: 'Entender', d: 'Te explicamos qué dicen tus números. Reuniones periódicas, sin jerga, con foco en lo que importa para tu negocio.', icon: 'M9 18h6 M10 22h4 M12 2a7 7 0 0 0-4 12.7V18h8v-3.3A7 7 0 0 0 12 2z' },
    { n: '03', t: 'Decidir', d: 'Decisiones con base, no con corazonadas. Te ayudamos a leer escenarios, ver opciones y elegir el siguiente paso.', icon: 'M12 2a10 10 0 1 0 10 10 M12 12L16 8' },
  ];

  return (
    <section id="metodo" style={{ background: 'linear-gradient(180deg, var(--navy-800) 0%, var(--navy-700) 100%)', color: 'var(--paper)', padding: '120px 24px' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <div style={{ maxWidth: 720, marginBottom: 72 }}>
          <div className="eyebrow" style={{ marginBottom: 16, color: tweaks.accent }}>El método</div>
          <h2 className="h2" style={{ color: 'var(--paper)', margin: '0 0 20px', fontSize: 'clamp(32px, 4vw, 48px)' }}>
            Tres pasos que repetimos contigo, periódicamente<span style={{ color: tweaks.accent }}>.</span>
          </h2>
          <p className="body-lg" style={{ color: 'var(--navy-200)', margin: 0 }}>
            Primero estabilizamos la base administrativa, contable y fiscal. Después convertimos la información en comprensión real. Y, finalmente, acompañamos en la toma de decisiones estratégicas con criterio y anticipación.
          </p>
        </div>

        <div className="pillars-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 1, background: 'var(--navy-600)', border: '1px solid var(--navy-600)', borderRadius: 'var(--radius-lg)', overflow: 'hidden' }}>
          {items.map((it, i) => (
            <div key={it.n} style={{ background: 'var(--navy-800)', padding: 40, position: 'relative', minHeight: 280 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 28 }}>
                <div style={{ width: 48, height: 48, border: `1.5px solid ${tweaks.accent}`, borderRadius: 12, display: 'flex', alignItems: 'center', justifyContent: 'center', color: tweaks.accent }}>
                  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d={it.icon}/></svg>
                </div>
                <div className="figure" style={{ fontSize: 18, fontWeight: 700, color: tweaks.accent, opacity: 0.6 }}>{it.n}</div>
              </div>
              <div style={{ fontFamily: 'var(--font-display)', fontSize: 32, fontWeight: 700, marginBottom: 14, letterSpacing: '-0.01em' }}>
                {it.t}<span style={{ color: tweaks.accent }}>.</span>
              </div>
              <div style={{ color: 'var(--navy-200)', lineHeight: 1.6, fontSize: 15 }}>{it.d}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Servicios({ tweaks }) {
  const [active, setActive] = useStateA(0);
  const services = [
    {
      key: 'orden',
      tag: 'Servicio periódico',
      t: 'Cuentas en orden',
      tagline: 'Contabilidad, administración y fiscalidad al día — llevadas internamente.',
      d: 'Asumimos directamente tu contabilidad y obligaciones fiscales. Para nosotras tener los datos en casa es la única forma de garantizar información fiel y siempre actualizada — esa es la base sobre la que se construye entender y decidir.',
      bullets: [
        'Contabilidad llevada internamente, al día',
        'Obligaciones fiscales: IVA, modelos periódicos y cierre anual',
        'Administración cotidiana: facturación, conciliación y archivo',
        'Información fiable como base para tomar decisiones',
      ],
      pricing: 'Desde 150 € / mes',
      icon: 'M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z M14 2v6h6 M9 13h6 M9 17h6',
    },
    {
      key: 'control',
      tag: 'Proyecto + acompañamiento',
      t: 'Control de gestión',
      tagline: 'De la intuición al plan. Construimos tu cuadro de mando contigo.',
      d: 'Definimos juntas qué medir, cómo medirlo y qué hacer cuando los números se mueven. Salimos con un presupuesto anual, KPIs claros y alertas tempranas que sí se entienden.',
      bullets: [
        'Presupuesto anual con escenarios y supuestos explícitos',
        'Cuadro de mando con KPIs ajustados a tu sector',
        'Alertas periódicas y planes de acción concretos',
        'Acompañamiento trimestral en revisión y ajuste',
      ],
      pricing: 'Desde 390 € / mes + Proyecto inicial',
      icon: 'M3 12l2-2 4 4 8-8 4 4 M3 21h18',
    },
    {
      key: 'asesor',
      tag: 'Sesiones a medida',
      t: 'Asesoramiento puntual',
      tagline: 'Una decisión grande sobre la mesa. Te ayudamos a tomarla bien.',
      d: 'Precio, inversión, contratación, financiación, una nueva línea de negocio. Tú nos facilitas la información necesaria y trabajamos contigo en los números, los riesgos y el siguiente paso — sin pasarte una factura por hora cada vez que escribes.',
      bullets: [
        'Sesiones de 90 min con preparación previa',
        'Modelo numérico y escenarios entregables',
        'Recomendación escrita con pros y contras',
        'Seguimiento durante el mes posterior incluido',
      ],
      pricing: 'Desde 300 € / sesión',
      icon: 'M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z',
    },
  ];

  const s = services[active];

  return (
    <section id="servicios" style={{ padding: '120px 24px', background: 'var(--paper)' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 48, gap: 24, flexWrap: 'wrap' }}>
          <div style={{ maxWidth: 640 }}>
            <div className="eyebrow" style={{ marginBottom: 16, color: tweaks.accent }}>Servicios</div>
            <h2 className="h2" style={{ margin: '0 0 16px', fontSize: 'clamp(32px, 4vw, 48px)' }}>
              Tres formas de trabajar contigo<span style={{ color: tweaks.accent }}>.</span>
            </h2>
            <p className="body-lg" style={{ color: 'var(--fg-2)', margin: 0 }}>
              Desde el reporting recurrente hasta decisiones puntuales. Empezamos por donde más te aporte.
            </p>
          </div>
        </div>

        {/* Tabs */}
        <div role="tablist" style={{ display: 'flex', gap: 8, marginBottom: 32, flexWrap: 'wrap' }}>
          {services.map((sv, i) => (
            <button
              key={sv.key}
              role="tab"
              aria-selected={active === i}
              onClick={() => setActive(i)}
              style={{
                padding: '14px 22px',
                background: active === i ? 'var(--navy-800)' : 'var(--white)',
                color: active === i ? 'var(--paper)' : 'var(--fg-1)',
                border: '1px solid ' + (active === i ? 'var(--navy-800)' : 'var(--border-1)'),
                borderRadius: 'var(--radius-pill)',
                fontFamily: 'inherit', fontSize: 14, fontWeight: 600,
                cursor: 'pointer', transition: 'all 200ms var(--ease-out)',
                display: 'flex', alignItems: 'center', gap: 10,
              }}>
              <span style={{
                width: 22, height: 22, borderRadius: 999,
                background: active === i ? tweaks.accent : 'var(--bg-3)',
                color: active === i ? 'var(--navy-800)' : 'var(--fg-3)',
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                fontSize: 11, fontWeight: 800, fontFamily: 'var(--font-mono)',
              }}>{String(i + 1).padStart(2, '0')}</span>
              {sv.t}
            </button>
          ))}
        </div>

        <div className="services-detail" style={{
          display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 0,
          background: 'var(--white)', border: '1px solid var(--border-1)',
          borderRadius: 'var(--radius-lg)', overflow: 'hidden',
          boxShadow: 'var(--shadow-md)',
        }}>
          <div style={{ padding: '48px 48px 56px' }}>
            <div style={{
              display: 'inline-flex', alignItems: 'center', gap: 8,
              padding: '6px 12px', borderRadius: 999,
              background: 'var(--orange-050)', color: 'var(--orange-700)',
              fontSize: 11, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.06em',
              marginBottom: 24,
            }}>
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 8v4l2 2"/></svg>
              {s.tag}
            </div>
            <h3 className="h2" style={{ margin: '0 0 14px', fontSize: 36 }}>
              {s.t}<span style={{ color: tweaks.accent }}>.</span>
            </h3>
            <p style={{ fontSize: 18, color: 'var(--fg-2)', fontStyle: 'italic', margin: '0 0 20px', lineHeight: 1.5 }}>{s.tagline}</p>
            <p style={{ color: 'var(--fg-2)', margin: '0 0 28px', lineHeight: 1.65 }}>{s.d}</p>

            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 12 }}>
              {s.bullets.map(b => (
                <li key={b} style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
                  <span style={{
                    flexShrink: 0, width: 22, height: 22, borderRadius: 999,
                    background: tweaks.accent + '22', color: tweaks.accent,
                    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                    marginTop: 2,
                  }}>
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12l5 5L20 7"/></svg>
                  </span>
                  <span style={{ fontSize: 15, color: 'var(--fg-1)', lineHeight: 1.55 }}>{b}</span>
                </li>
              ))}
            </ul>
          </div>

          <div style={{ background: 'var(--bg-3)', padding: '48px', borderLeft: '1px solid var(--border-1)', display: 'flex', flexDirection: 'column' }}>
            <div style={{
              width: 56, height: 56, borderRadius: 14,
              background: tweaks.accent, color: 'var(--navy-800)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              marginBottom: 24,
            }}>
              <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d={s.icon}/></svg>
            </div>
            <div className="caption" style={{ color: 'var(--fg-3)', marginBottom: 8 }}>Inversión orientativa</div>
            <div className="figure" style={{ fontSize: 28, fontWeight: 800, letterSpacing: '-0.02em', color: 'var(--fg-1)', marginBottom: 8, lineHeight: 1.1 }}>{tweaks.showPricing ? s.pricing : 'A medida'}</div>
            <div style={{ fontSize: 13, color: 'var(--fg-3)', marginBottom: 28 }}>
              IVA no incluido. Ajustamos al tamaño y momento de tu negocio.
            </div>
            <div style={{ marginTop: 'auto', display: 'flex', flexDirection: 'column', gap: 10 }}>
              <a href="#contacto" className="btn-primary" style={{ background: tweaks.accent, textAlign: 'center', textDecoration: 'none' }}>
                Reservar diagnóstico
              </a>
              <a href="#contacto" className="btn-ghost" style={{ textAlign: 'center', textDecoration: 'none' }}>
                Pedir propuesta detallada
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Proceso({ tweaks }) {
  const steps = [
    { n: '01', t: 'Diagnóstico gratuito', d: '30 minutos. Tú nos cuentas dónde estás, nosotras te decimos por dónde empezaríamos. Sin compromiso, salgas o no como cliente.', dur: '30 min' },
    { n: '02', t: 'Propuesta y encaje', d: 'Te enviamos una propuesta clara: alcance, calendario, inversión y entregables. Si encaja, firmamos. Si no, te ahorramos el contrato.', dur: '3-5 días' },
    { n: '03', t: 'Onboarding ordenado', d: 'Conectamos tus fuentes (banco, facturación, contabilidad), revisamos el año en curso y dejamos el plan contable bien afinado.', dur: '2-3 semanas' },
    { n: '04', t: 'Reportes periódicos', d: 'En cada cierre: panel actualizado y reunión de revisión. Recibes notas escritas con lo importante y las decisiones a tomar.', dur: 'según contrato' },
    { n: '05', t: 'Decisiones con base', d: 'Cuando aparezca una decisión grande — una contratación, un precio, una inversión — la analizamos juntas con números encima de la mesa.', dur: 'cuando toque' },
  ];

  return (
    <section style={{ padding: '120px 24px', background: 'var(--paper)' }}>
      <div style={{ maxWidth: 1100, margin: '0 auto' }}>
        <div style={{ maxWidth: 700, marginBottom: 64 }}>
          <div className="eyebrow" style={{ marginBottom: 16, color: tweaks.accent }}>Cómo trabajamos</div>
          <h2 className="h2" style={{ margin: '0 0 20px', fontSize: 'clamp(32px, 4vw, 48px)' }}>
            Transparencia, claridad y acompañamiento<span style={{ color: tweaks.accent }}>.</span>
          </h2>
          <p className="body-lg" style={{ color: 'var(--fg-2)', margin: 0 }}>
            Desde la primera llamada hasta la quinta reunión mensual: cada paso tiene un objetivo y un entregable concreto.
          </p>
        </div>

        <ol style={{ listStyle: 'none', padding: 0, margin: 0, position: 'relative' }}>
          {steps.map((st, i) => (
            <li key={st.n} className="proceso-row" style={{
              display: 'grid', gridTemplateColumns: '120px 1fr auto', gap: 32, alignItems: 'flex-start',
              padding: '32px 0', borderTop: '1px solid var(--border-1)',
              borderBottom: i === steps.length - 1 ? '1px solid var(--border-1)' : 'none',
            }}>
              <div className="figure" style={{ fontSize: 56, fontWeight: 800, color: tweaks.accent, letterSpacing: '-0.04em', lineHeight: 1 }}>{st.n}</div>
              <div>
                <h3 style={{ margin: '0 0 8px', fontFamily: 'var(--font-display)', fontSize: 24, fontWeight: 700, letterSpacing: '-0.01em' }}>{st.t}</h3>
                <p style={{ margin: 0, color: 'var(--fg-2)', fontSize: 16, lineHeight: 1.6, maxWidth: 640 }}>{st.d}</p>
              </div>
              <div style={{
                padding: '6px 14px', borderRadius: 999, background: 'var(--navy-050)',
                color: 'var(--navy-600)', fontSize: 12, fontWeight: 600, whiteSpace: 'nowrap',
                fontFamily: 'var(--font-mono)',
              }}>{st.dur}</div>
            </li>
          ))}
        </ol>
      </div>
    </section>
  );
}

window.Pillars = Pillars;
window.Servicios = Servicios;
window.Proceso = Proceso;