// sections2.jsx — Come funziona, Esempi, Settori, Chi sono, Testimonianze, FAQ

// ─────────────────────────────────────────────────────────────────
// HOW IT WORKS — 3 steps
// ─────────────────────────────────────────────────────────────────

const STEPS = [
  {
    n: '01',
    title: 'Te escuchamos, 30 minutos',
    duration: 'Día 1',
    desc: 'En videollamada nos cuentas cómo trabajas hoy. Nos muestras un día tipo, los emails más frecuentes, los problemas. Entendemos si podemos ayudarte — y si no podemos te lo decimos de inmediato.',
    tag: 'Gratis · Sin compromiso',
    bullets: ['Mapeamos el trabajo repetitivo', 'Identificamos 2-3 prioridades', 'Te hacemos una propuesta a medida'],
  },
  {
    n: '02',
    title: 'Construimos para ti, en 2-3 semanas',
    duration: 'Semanas 1-3',
    desc: 'Configuramos la IA en tus herramientas (Gmail, WhatsApp, gestión). La entrenamos con tu tono de voz y tus reglas. Tú haces una prueba en paralelo: respondes tú, responde la IA, decides tú.',
    tag: 'Trabajamos nosotros · Tú controlas',
    bullets: ['Setup completo en tus sistemas', 'Prueba en paralelo 5 días', 'Ajustamos hasta que te convenza'],
  },
  {
    n: '03',
    title: 'Nos quedamos contigo, cada mes',
    duration: 'Desde semana 4',
    desc: 'El sistema trabaja. Tú recibes un informe semanal de lo que ha hecho. Si cambia algo (nuevos servicios, nuevos precios, nueva temporada), lo actualizamos nosotros. La cuota cubre todo.',
    tag: 'Mantenimiento · Modificaciones ilimitadas',
    bullets: ['Informe semanal automático', 'Modificaciones ilimitadas', 'Soporte en 24h'],
  },
];

function HowItWorks() {
  return (
    <section id="come" style={{
      padding: '100px 0',
      background: 'var(--bg-2)',
      borderTop: '1px solid var(--rule)',
      borderBottom: '1px solid var(--rule)',
    }}>
      <div className="container">
        <SectionHeader
          align="center"
          kicker="Cómo trabajamos"
          title="Tres pasos. Tres semanas. A medida para ti."
          lede="Sé lo que estás pensando: 'parece complicado'. No lo es. La parte complicada la hacemos nosotros. Esto es exactamente lo que ocurre."
        />

        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(3, 1fr)',
          gap: 24,
          position: 'relative',
        }} className="steps-grid">

          {/* Connecting line */}
          <div aria-hidden="true" style={{
            position: 'absolute',
            top: 36, left: '16.6%', right: '16.6%',
            height: 2,
            background: 'repeating-linear-gradient(90deg, var(--rule-strong) 0 6px, transparent 6px 12px)',
            zIndex: 0,
          }} className="steps-line" />

          {STEPS.map((s, i) => (
            <div key={s.n} style={{
              position: 'relative', zIndex: 1,
              display: 'flex', flexDirection: 'column', gap: 16,
            }}>
              <div style={{
                width: 72, height: 72, borderRadius: '50%',
                background: 'var(--bg-2)',
                border: '2px solid var(--fg)',
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                fontSize: 26, fontWeight: 700,
                letterSpacing: '-0.02em',
                color: 'var(--fg)',
              }}>{s.n}</div>

              <div style={{
                background: 'var(--bg)',
                border: '1px solid var(--rule)',
                borderRadius: 'var(--radius-lg)',
                padding: 28,
                flex: 1,
                display: 'flex', flexDirection: 'column', gap: 14,
              }}>
                <div style={{
                  display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                  gap: 8, flexWrap: 'wrap',
                }}>
                  <Pill tone="accent">{s.duration}</Pill>
                  <span style={{
                    fontSize: 11, color: 'var(--fg-mute)',
                    fontFamily: 'var(--mono)', fontWeight: 600,
                    letterSpacing: '0.02em', textTransform: 'uppercase',
                  }}>{s.tag}</span>
                </div>

                <h3 style={{
                  margin: 0, fontSize: 22, fontWeight: 700,
                  letterSpacing: '-0.02em', lineHeight: 1.2,
                }}>{s.title}</h3>

                <p style={{
                  margin: 0, color: 'var(--fg-soft)',
                  fontSize: 15, lineHeight: 1.55,
                }}>{s.desc}</p>

                <ul style={{
                  margin: '6px 0 0', padding: 0, listStyle: 'none',
                  display: 'flex', flexDirection: 'column', gap: 8,
                  borderTop: '1px solid var(--rule)', paddingTop: 16,
                }}>
                  {s.bullets.map((b, k) => (
                    <li key={k} style={{
                      display: 'flex', alignItems: 'flex-start', gap: 10,
                      fontSize: 14, color: 'var(--fg-soft)',
                    }}>
                      <span style={{
                        width: 16, height: 16, borderRadius: '50%',
                        background: 'var(--positive-soft)', color: 'var(--positive)',
                        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                        fontSize: 10, fontWeight: 700, flexShrink: 0,
                        marginTop: 2,
                      }}>✓</span>
                      {b}
                    </li>
                  ))}
                </ul>
              </div>
            </div>
          ))}
        </div>

        <div style={{
          marginTop: 48, textAlign: 'center',
        }}>
          <a href="https://wa.me/393793762553?text=Hola%20Solvera%2C%20quisiera%20informaci%C3%B3n" target="_blank" rel="noopener" style={{
            display: 'inline-flex', alignItems: 'center', gap: 10,
            background: 'var(--accent)', color: '#fff',
            padding: '15px 24px', borderRadius: 999,
            textDecoration: 'none', fontWeight: 600, fontSize: 16,
            boxShadow: 'var(--shadow-md)',
            transition: 'transform .15s ease',
          }}
            onMouseEnter={(e) => e.currentTarget.style.transform = 'translateY(-2px)'}
            onMouseLeave={(e) => e.currentTarget.style.transform = 'translateY(0)'}
          >
            Empieza con el paso 01 <ArrowRight />
          </a>
        </div>

        <style>{`
          @media (max-width: 860px) {
            .steps-grid { grid-template-columns: 1fr !important; }
            .steps-line { display: none; }
          }
        `}</style>
      </div>
    </section>
  );
}
window.HowItWorks = HowItWorks;

// ─────────────────────────────────────────────────────────────────
// DEMO — product video
// ─────────────────────────────────────────────────────────────────

function Demo() {
  const [expanded, setExpanded] = React.useState(false);

  React.useEffect(() => {
    if (!expanded) return;
    const prev = document.body.style.overflow;
    document.body.style.overflow = 'hidden';
    const onKey = (e) => { if (e.key === 'Escape') setExpanded(false); };
    window.addEventListener('keydown', onKey);
    return () => {
      document.body.style.overflow = prev;
      window.removeEventListener('keydown', onKey);
    };
  }, [expanded]);

  return (
    <section id="demo" style={{
      padding: '110px 0 120px',
      background: 'var(--bg)',
      position: 'relative',
      overflow: 'hidden',
    }}>
      {/* Backdrop gradient */}
      <div aria-hidden="true" style={{
        position: 'absolute',
        inset: '-10% -10% auto -10%',
        height: '70%',
        background: 'radial-gradient(ellipse at 50% 0%, var(--accent-soft) 0%, transparent 60%)',
        pointerEvents: 'none',
        opacity: 0.55,
      }} />

      <div className="container" style={{ position: 'relative' }}>
        <SectionHeader
          align="center"
          kicker="Míralo en acción"
          title={<>Un sistema real <span style={{
            background: 'linear-gradient(120deg, var(--accent) 0%, var(--accent-deep) 100%)',
            WebkitBackgroundClip: 'text',
            WebkitTextFillColor: 'transparent',
            backgroundClip: 'text',
          }}>que trabaja para ti.</span></>}
          lede={<>Una <strong style={{ color: 'var(--fg)', fontWeight: 700 }}>pequeña parte</strong> de lo que Solvera hace por ti. Además: <strong style={{ color: 'var(--fg)', fontWeight: 700 }}>presupuestos automáticos, seguimiento, gestión de llamadas, recordatorios de citas</strong> y mucho más — todo <strong style={{ color: 'var(--fg)', fontWeight: 700 }}>adaptado a tus procesos</strong>.</>}
        />

        {/* Browser chrome wrapper */}
        <div style={{
          maxWidth: 1100,
          margin: '12px auto 0',
          borderRadius: 18,
          overflow: 'hidden',
          background: '#0c0d10',
          border: '1px solid var(--rule-strong)',
          boxShadow: '0 30px 80px -20px rgba(0,0,0,0.45), 0 8px 24px -8px rgba(0,0,0,0.25)',
          position: 'relative',
        }}>
          {/* Traffic-light bar */}
          <div style={{
            display: 'flex', alignItems: 'center',
            gap: 14, padding: '12px 16px',
            background: 'linear-gradient(180deg, #1a1c20 0%, #14161a 100%)',
            borderBottom: '1px solid #25272c',
          }}>
            <div style={{ display: 'flex', gap: 7 }}>
              <span style={{ width: 12, height: 12, borderRadius: '50%', background: '#ff5f57' }} />
              <span style={{ width: 12, height: 12, borderRadius: '50%', background: '#febc2e' }} />
              <span style={{ width: 12, height: 12, borderRadius: '50%', background: '#28c840' }} />
            </div>
            <div style={{
              flex: 1, textAlign: 'center',
              fontFamily: 'var(--mono)', fontSize: 12,
              color: 'rgba(255,255,255,0.55)',
              letterSpacing: '0.02em',
            }}>
              dashboard.solvera.it
            </div>
            <div style={{
              fontFamily: 'var(--mono)', fontSize: 11,
              color: 'rgba(255,255,255,0.4)',
              letterSpacing: '0.08em',
            }}>
              LIVE
            </div>
          </div>

          {/* Vimeo embed — loop muto con tap-to-expand */}
          <button
            type="button"
            onClick={() => setExpanded(true)}
            aria-label="Abrir el vídeo a pantalla completa con audio"
            style={{
              position: 'relative',
              display: 'block',
              width: '100%',
              padding: 0,
              paddingBottom: '56.25%',
              background: '#000',
              border: 'none',
              cursor: 'pointer',
              overflow: 'hidden',
              appearance: 'none',
              font: 'inherit',
              color: 'inherit',
            }}
          >
            <video
              src="media/solvera-demo.mp4"
              autoPlay
              muted
              loop
              playsInline
              tabIndex={-1}
              style={{
                position: 'absolute',
                top: 0, left: 0,
                width: '100%', height: '100%',
                objectFit: 'cover',
                border: 'none',
                display: 'block',
                pointerEvents: 'none',
              }}
            />

            {/* Play overlay — tap to expand */}
            <span style={{
              position: 'absolute', inset: 0,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              background: 'linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.35) 100%)',
              zIndex: 2, pointerEvents: 'none',
            }}>
              <span style={{
                display: 'inline-flex', alignItems: 'center', gap: 10,
                padding: '12px 18px 12px 14px',
                borderRadius: 999,
                background: 'rgba(255,255,255,0.94)',
                color: '#0c0e13',
                fontSize: 14, fontWeight: 700,
                letterSpacing: '-0.005em',
                boxShadow: '0 12px 30px rgba(0,0,0,0.35)',
              }}>
                <span style={{
                  width: 30, height: 30, borderRadius: '50%',
                  background: '#0c0e13', color: '#fff',
                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                }}>
                  <svg width="11" height="13" viewBox="0 0 11 13" fill="currentColor" aria-hidden="true">
                    <path d="M0 0.5L11 6.5L0 12.5V0.5Z" />
                  </svg>
                </span>
                Ver el vídeo
              </span>
            </span>
          </button>
        </div>

        {/* Fullscreen modal — video with audio + controls */}
        {expanded && (
          <div
            role="dialog"
            aria-modal="true"
            aria-label="Vídeo demo Solvera"
            onClick={() => setExpanded(false)}
            style={{
              position: 'fixed', inset: 0, zIndex: 1000,
              background: 'rgba(8, 10, 14, 0.92)',
              backdropFilter: 'blur(6px)',
              WebkitBackdropFilter: 'blur(6px)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              padding: 'clamp(16px, 4vw, 48px)',
            }}
          >
            <button
              type="button"
              onClick={() => setExpanded(false)}
              aria-label="Cerrar vídeo"
              style={{
                position: 'absolute', top: 16, right: 16,
                width: 44, height: 44, borderRadius: '50%',
                background: 'rgba(255,255,255,0.12)',
                border: '1px solid rgba(255,255,255,0.18)',
                color: '#fff', cursor: 'pointer',
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                zIndex: 2,
              }}
            >
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" aria-hidden="true">
                <path d="M3 3L13 13M13 3L3 13" />
              </svg>
            </button>

            <div
              onClick={(e) => e.stopPropagation()}
              style={{
                position: 'relative',
                width: '100%',
                maxWidth: 1280,
                aspectRatio: '16 / 9',
                background: '#000',
                borderRadius: 12,
                overflow: 'hidden',
                boxShadow: '0 30px 80px rgba(0,0,0,0.6)',
              }}
            >
              <video
                src="media/solvera-demo.mp4"
                autoPlay
                muted
                controls
                playsInline
                style={{
                  position: 'absolute', inset: 0,
                  width: '100%', height: '100%',
                  objectFit: 'contain',
                  border: 'none',
                  display: 'block',
                  background: '#000',
                }}
              />
            </div>
          </div>
        )}

        {/* Caption row */}
        <div style={{
          marginTop: 32, display: 'flex', justifyContent: 'center',
          gap: 28, flexWrap: 'wrap',
          fontSize: 13.5, color: 'var(--fg-mute)',
          fontFamily: 'var(--mono)', letterSpacing: '0.04em',
        }}>
          <span>● LGABACIÓN REAL</span>
          <span>● SIN EDICIÓN</span>
          <span>● DASHBOARD DEL CLIENTE</span>
        </div>
      </div>
    </section>
  );
}
window.Demo = Demo;


// ─────────────────────────────────────────────────────────────────
// EXAMPLES — concrete mockups
// ─────────────────────────────────────────────────────────────────

function Examples() {
  const [active, setActive] = React.useState('email');
  const TABS = [
    { id: 'email',    label: 'Email cliente',         icon: '📧', n: '01' },
    { id: 'review',   label: 'Reseña Google',         icon: '⭐', n: '02' },
    { id: 'quote',    label: 'Presupuesto',           icon: '🧾', n: '03' },
    { id: 'reminder', label: 'Recordatorio de cita',  icon: '⏰', n: '04' },
  ];

  return (
    <section id="esempi" style={{ padding: '100px 0' }}>
      <div className="container">
        <SectionHeader
          kicker="Ejemplos de lo que construimos"
          title="Cuatro casos reales. Cuatro sistemas a medida."
          lede="Cada cliente tiene problemas distintos. Estos son cuatro ejemplos concretos de automatizaciones que hemos diseñado para situaciones reales. Tu caso será diferente — pero el método es el mismo."
        />

        {/* Tab prompt */}
        <div style={{
          display: 'flex', alignItems: 'center', gap: 12,
          marginBottom: 16,
        }}>
          <span style={{
            fontFamily: 'var(--mono)', fontSize: 12,
            color: 'var(--accent)', fontWeight: 700,
            letterSpacing: '0.08em', textTransform: 'uppercase',
            display: 'inline-flex', alignItems: 'center', gap: 8,
          }}>
            <span style={{
              width: 6, height: 6, borderRadius: '50%',
              background: 'var(--accent)',
              animation: 'pulse 1.6s ease-in-out infinite',
            }} />
            Haz clic en un caso para verlo
          </span>
          <span style={{
            flex: 1, height: 1, background: 'var(--rule)',
            minWidth: 20,
          }} />
        </div>

        {/* Tabs — full-width segmented buttons */}
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(4, minmax(0, 1fr))',
          gap: 10, marginBottom: 28,
        }} className="examples-tabs">
          {TABS.map(t => {
            const isActive = active === t.id;
            return (
              <button key={t.id} onClick={() => setActive(t.id)}
                aria-pressed={isActive}
                style={{
                  appearance: 'none',
                  textAlign: 'left',
                  background: isActive ? 'var(--bg-2)' : 'var(--bg-2)',
                  color: isActive ? 'var(--fg)' : 'var(--fg-soft)',
                  border: isActive ? '2px solid var(--accent)' : '1.5px solid var(--rule-strong)',
                  padding: isActive ? '15px 17px' : '16px 18px',
                  borderRadius: 14,
                  cursor: 'pointer',
                  display: 'flex', flexDirection: 'column', gap: 10,
                  boxShadow: isActive ? '0 0 0 4px var(--accent-soft), var(--shadow-md)' : 'var(--shadow-sm)',
                  transition: 'all .15s ease',
                  fontFamily: 'var(--sans)',
                  position: 'relative',
                  minHeight: 92,
                }}
                onMouseEnter={(e) => {
                  if (!isActive) {
                    e.currentTarget.style.borderColor = 'var(--fg-soft)';
                    e.currentTarget.style.transform = 'translateY(-2px)';
                    e.currentTarget.style.boxShadow = 'var(--shadow-md)';
                  }
                }}
                onMouseLeave={(e) => {
                  if (!isActive) {
                    e.currentTarget.style.borderColor = 'var(--rule-strong)';
                    e.currentTarget.style.transform = 'translateY(0)';
                    e.currentTarget.style.boxShadow = 'var(--shadow-sm)';
                  }
                }}
              >
                <div style={{
                  display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                }}>
                  <span style={{
                    width: 36, height: 36, borderRadius: 10,
                    background: isActive ? 'var(--accent-soft)' : 'var(--bg-3)',
                    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                    fontSize: 18,
                    transition: 'background .15s ease',
                  }}>{t.icon}</span>
                  <span style={{
                    fontFamily: 'var(--mono)', fontSize: 11,
                    color: isActive ? 'var(--accent)' : 'var(--fg-mute)',
                    fontWeight: 700, letterSpacing: '0.06em',
                  }}>CASO {t.n}</span>
                </div>
                <span style={{
                  fontSize: 15, fontWeight: 700,
                  letterSpacing: '-0.01em',
                  lineHeight: 1.25,
                  color: 'inherit',
                }}>
                  {t.label}
                </span>
              </button>
            );
          })}
        </div>

        <style>{`
          @media (max-width: 880px) {
            .examples-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
          }
          @media (max-width: 480px) {
            .examples-tabs { grid-template-columns: 1fr !important; }
          }
        `}</style>

        <div style={{
          display: 'grid',
          gridTemplateColumns: 'minmax(0, 1.4fr) minmax(0, 1fr)',
          gap: 40,
          alignItems: 'flex-start',
        }} className="examples-grid">
          <div>
            {active === 'email' && <EmailMockup />}
            {active === 'review' && <ReviewMockup />}
            {active === 'quote' && <QuoteMockup />}
            {active === 'reminder' && <ReminderMockup />}
          </div>

          <div style={{ paddingTop: 12 }}>
            {active === 'email' && (
              <ExampleSide
                eyebrow="Caso 01"
                title="Responder a cada email como si fuera el único."
                body="El cliente escribe a las 22h. La IA entiende la solicitud, revisa tus horarios, formula una respuesta en tu estilo y la envía. Tú ves el resumen a la mañana siguiente."
                metrics={[
                  ['Tiempo medio respuesta', '< 2 min'],
                  ['Emails gestionados / mes', '~ 420'],
                  ['Errores en 6 meses', '0'],
                ]}
              />
            )}
            {active === 'review' && (
              <ExampleSide
                eyebrow="Caso 02"
                title="Cada reseña tiene su respuesta. También las malas."
                body="La IA responde a cada reseña de Google con el tono adecuado: agradece las buenas, gestiona las negativas sin ser defensivos. Tú apruebas antes del envío, siempre."
                metrics={[
                  ['Tasa de respuesta', '100%'],
                  ['Puntuación media', '+0.4 ★'],
                  ['Reseñas recuperadas', '+ 24%'],
                ]}
              />
            )}
            {active === 'quote' && (
              <ExampleSide
                eyebrow="Caso 03"
                title="El presupuesto está listo antes de que el cliente cuelgue el teléfono."
                body="Desde el formulario de solicitud (o una foto del trabajo) la IA rellena el presupuesto con tus precios, lo envía en PDF y hace el seguimiento si no responde en 48h."
                metrics={[
                  ['Tiempo medio presupuesto', '< 5 min'],
                  ['Conversión de leads', '+ 35%'],
                  ['Seguimientos automáticos', '∞'],
                ]}
              />
            )}
            {active === 'reminder' && (
              <ExampleSide
                eyebrow="Caso 04"
                title="Ningún cliente se olvida más de la cita."
                body="24h antes de tu cita, el cliente recibe un recordatorio personalizado. Si no confirma, parte un segundo mensaje. Si cancela, la IA propone de inmediato una alternativa."
                metrics={[
                  ['No-shows', '- 78%'],
                  ['Confirmaciones automáticas', '94%'],
                  ['Tiempo dedicado por ti', '0 min/sem.'],
                ]}
              />
            )}
          </div>
        </div>

        <style>{`
          @media (max-width: 860px) {
            .examples-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
          }
        `}</style>
      </div>
    </section>
  );
}

function ExampleSide({ eyebrow, title, body, metrics }) {
  return (
    <div>
      <Eyebrow style={{ marginBottom: 14 }}>{eyebrow}</Eyebrow>
      <h3 style={{
        margin: '0 0 16px',
        fontSize: 'clamp(22px, 2.2vw, 28px)',
        fontWeight: 700, letterSpacing: '-0.02em',
        lineHeight: 1.2,
      }}>{title}</h3>
      <p style={{
        margin: '0 0 28px',
        color: 'var(--fg-soft)',
        fontSize: 16, lineHeight: 1.6,
      }}>{body}</p>

      <div style={{
        background: 'var(--bg-2)',
        border: '1px solid var(--rule)',
        borderRadius: 'var(--radius)',
        padding: 4,
      }}>
        {metrics.map(([k, v], i) => (
          <div key={i} style={{
            display: 'flex', justifyContent: 'space-between',
            padding: '14px 18px',
            borderBottom: i < metrics.length - 1 ? '1px solid var(--rule)' : 'none',
            alignItems: 'baseline', gap: 16,
          }}>
            <span style={{ fontSize: 13, color: 'var(--fg-mute)', fontWeight: 500 }}>{k}</span>
            <span style={{
              fontFamily: 'var(--mono)', fontSize: 15,
              fontWeight: 700, color: 'var(--accent-deep)',
              letterSpacing: '-0.01em',
            }}>{v}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

// — Email mockup
function EmailMockup() {
  return (
    <MockFrame title="Gmail · cliente@estudio.es" subtitle="Respuesta automática · 1 nuevo email">
      {/* Email list */}
      <div style={{ padding: '0' }}>
        <div style={{
          display: 'grid', gridTemplateColumns: '32px 1fr auto',
          gap: 14, alignItems: 'center',
          padding: '14px 20px',
          borderBottom: '1px solid var(--rule)',
          background: 'var(--accent-tint)',
        }}>
          <span style={{
            width: 32, height: 32, borderRadius: '50%',
            background: 'var(--warm)', color: 'white',
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
            fontWeight: 700, fontSize: 13,
          }}>LG</span>
          <div style={{ minWidth: 0 }}>
            <div style={{
              fontSize: 13, fontWeight: 700, color: 'var(--fg)',
              whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
            }}>Laura García</div>
            <div style={{
              fontSize: 12, color: 'var(--fg-soft)',
              whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
            }}>Domanda su dichiarazione redditi — Salve, vorrei sapere quanto costa…</div>
          </div>
          <span style={{ fontSize: 11, color: 'var(--fg-mute)', fontFamily: 'var(--mono)' }}>23:47</span>
        </div>

        <div style={{ padding: 20 }}>
          <div style={{
            fontSize: 14, fontWeight: 600, color: 'var(--fg-mute)',
            marginBottom: 8,
          }}>Borrador generado · listo para enviar</div>
          <div style={{
            background: 'var(--bg)',
            border: '1px solid var(--rule)',
            borderRadius: 10,
            padding: 18,
            fontSize: 14, lineHeight: 1.55, color: 'var(--fg)',
          }}>
            Estimada Sra. Rinaldi,{' '}<br />{' '}<br />
            Gracias por contactarnos. El coste de la declaración de la renta depende del régimen fiscal y del número de documentos.{' '}<br />{' '}<br />
            Para el régimen simplificado empezamos desde <strong>€220 + IVA</strong>. Le propongo una cita de 15 minutos para entender su situación: <span style={{ color: 'var(--accent)' }}>https://estudioblanchi.es/cal</span>{' '}<br />{' '}<br />
            Atentamente,{' '}<br />
            Estudio Blanchi
          </div>
          <div style={{
            marginTop: 14, display: 'flex', gap: 8, alignItems: 'center',
            flexWrap: 'wrap',
          }}>
            <button style={{
              background: 'var(--accent)', color: 'white',
              border: 'none', padding: '9px 18px', borderRadius: 8,
              fontSize: 13, fontWeight: 600, cursor: 'pointer',
              fontFamily: 'var(--sans)',
            }}>Aprobar y enviar</button>
            <button style={{
              background: 'transparent', color: 'var(--fg-soft)',
              border: '1px solid var(--rule)',
              padding: '9px 16px', borderRadius: 8,
              fontSize: 13, fontWeight: 500, cursor: 'pointer',
              fontFamily: 'var(--sans)',
            }}>Modifica</button>
            <span style={{
              marginLeft: 'auto',
              fontSize: 11, color: 'var(--fg-mute)',
              fontFamily: 'var(--mono)',
            }}>Generato in 1.8s · Confidenza 96%</span>
          </div>
        </div>
      </div>
    </MockFrame>
  );
}

// — Review mockup
function ReviewMockup() {
  return (
    <MockFrame title="Google Business · Respuesta automática" subtitle="Reseña · hace 3 horas">
      <div style={{ padding: 22 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 12 }}>
          <span style={{
            width: 36, height: 36, borderRadius: '50%',
            background: 'var(--bg-3)', color: 'var(--fg)',
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
            fontWeight: 700, fontSize: 14,
          }}>AM</span>
          <div>
            <div style={{ fontSize: 14, fontWeight: 700 }}>Andrea M.</div>
            <div style={{ fontSize: 12, color: 'var(--fg-mute)' }}>2 recensioni · Locale di Milano</div>
          </div>
          <div style={{ marginLeft: 'auto', display: 'flex', gap: 1 }}>
            {[1,2,3,4].map(i => <span key={i} style={{ color: '#f5b50a', fontSize: 16 }}>★</span>)}
            <span style={{ color: 'var(--bg-3)', fontSize: 16 }}>★</span>
          </div>
        </div>

        <p style={{
          margin: '0 0 18px',
          fontSize: 14, lineHeight: 1.55, color: 'var(--fg-soft)',
          padding: 14,
          background: 'var(--bg)',
          borderRadius: 10,
          border: '1px solid var(--rule)',
        }}>
          Ambiente agradable y personal amable, pero esperamos 40 minutos para recibir la cuenta.
          Por lo demás bien, volveremos pero necesitaría más organización.
        </p>

        <div style={{
          padding: 16, background: 'var(--accent-tint)',
          borderRadius: 10, border: '1px dashed var(--accent)',
        }}>
          <div style={{
            display: 'flex', alignItems: 'center', gap: 8,
            marginBottom: 10,
          }}>
            <Pill tone="accent">IA · Respuesta propuesta</Pill>
            <span style={{
              fontSize: 11, color: 'var(--fg-mute)', fontFamily: 'var(--mono)',
            }}>Tono: cordial · constructivo</span>
          </div>
          <p style={{
            margin: 0, fontSize: 14, lineHeight: 1.55, color: 'var(--fg)',
          }}>
            Gracias Antonio por el feedback honesto. Tienes razón: los tiempos de la cuenta al final no son aceptables,
            es algo en lo que estamos trabajando con el personal de sala esta semana.
            Nos encantaría volverte a ver — la próxima vez escríbenos a <strong>cuenta@local.es</strong>
            antes de irte, te damos prioridad. Gracias de nuevo.
          </p>
          <div style={{
            marginTop: 14, display: 'flex', gap: 8, alignItems: 'center',
          }}>
            <button style={{
              background: 'var(--accent)', color: '#fff',
              border: 'none', padding: '8px 14px', borderRadius: 8,
              fontSize: 13, fontWeight: 600, cursor: 'pointer',
              fontFamily: 'var(--sans)',
            }}>Publicar respuesta</button>
            <button style={{
              background: 'transparent', color: 'var(--fg-soft)',
              border: 'none', padding: '8px 12px', borderRadius: 8,
              fontSize: 13, fontWeight: 500, cursor: 'pointer',
              fontFamily: 'var(--sans)',
            }}>Reescribir</button>
          </div>
        </div>
      </div>
    </MockFrame>
  );
}

// — Quote mockup
function QuoteMockup() {
  return (
    <MockFrame title="Presupuestos · Taller Sánchez" subtitle="Solicitud de formulario · Generado hace 2 min">
      <div style={{ padding: 24 }}>
        <div style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start',
          marginBottom: 24, paddingBottom: 18,
          borderBottom: '1px solid var(--rule)',
        }}>
          <div>
            <div style={{ fontSize: 11, color: 'var(--fg-mute)', fontFamily: 'var(--mono)', marginBottom: 4 }}>
              PRESUPUESTO #2026-0418
            </div>
            <div style={{ fontSize: 17, fontWeight: 700 }}>Revisión completa · BMW X3</div>
            <div style={{ fontSize: 13, color: 'var(--fg-soft)', marginTop: 4 }}>
              Cliente: Carlos García · Matrícula: 1234 ABC
            </div>
          </div>
          <Pill tone="positive">✓ Borrador listo</Pill>
        </div>

        <table style={{ width: '100%', fontSize: 13, borderCollapse: 'collapse' }}>
          <tbody>
            {[
              ['Cambio de aceite motor + filtro', '€85'],
              ['Filtro de aire + filtro de habitáculo', '€48'],
              ['Revisión frenos + sustitución pastillas del.', '€140'],
              ['Diagnóstico computerizado', '€35'],
              ['Mano de obra (2.5h)', '€95'],
            ].map(([k, v], i) => (
              <tr key={i} style={{ borderBottom: '1px solid var(--rule)' }}>
                <td style={{ padding: '10px 0', color: 'var(--fg-soft)' }}>{k}</td>
                <td style={{ padding: '10px 0', textAlign: 'right', fontWeight: 600, fontFamily: 'var(--mono)' }}>{v}</td>
              </tr>
            ))}
            <tr>
              <td style={{ padding: '14px 0 0', fontSize: 15, fontWeight: 700 }}>Total IVA incluido</td>
              <td style={{
                padding: '14px 0 0', textAlign: 'right',
                fontSize: 20, fontWeight: 700, fontFamily: 'var(--mono)',
                color: 'var(--accent-deep)',
              }}>€ 491,38</td>
            </tr>
          </tbody>
        </table>

        <div style={{
          marginTop: 18, padding: 14,
          background: 'var(--bg)',
          borderRadius: 10, border: '1px solid var(--rule)',
          fontSize: 12, color: 'var(--fg-soft)',
          display: 'flex', justifyContent: 'space-between',
          alignItems: 'center', gap: 12,
        }}>
          <span>📎 Envío automático por email + WhatsApp</span>
          <span style={{ fontFamily: 'var(--mono)', color: 'var(--fg-mute)' }}>Seguimiento si no abierto en 48h</span>
        </div>
      </div>
    </MockFrame>
  );
}

// — Reminder mockup
function ReminderMockup() {
  return (
    <MockFrame title="Recordatorios automáticos · hoy" subtitle="3 citas mañana · 100% confirmadas">
      <div style={{ padding: 0 }}>
        {[
          { name: 'Laura B.', time: '09:30', service: 'Manicura + reconstrucción', status: 'confirmed', delta: 'Confirmada hace 14 min' },
          { name: 'Roberto S.', time: '11:00', service: 'Corte + barba', status: 'sent', delta: 'Recordatorio enviado hace 2h' },
          { name: 'Elena P.', time: '15:30', service: 'Tratamiento facial 60 min', status: 'rescheduled', delta: 'Cambiada al viernes · propuesta IA aceptada' },
        ].map((a, i) => (
          <div key={i} style={{
            padding: '18px 22px',
            borderBottom: i < 2 ? '1px solid var(--rule)' : 'none',
            display: 'grid',
            gridTemplateColumns: '60px 1fr auto',
            gap: 16, alignItems: 'center',
          }}>
            <div style={{
              textAlign: 'center',
              padding: '8px 0',
              background: 'var(--bg-3)',
              borderRadius: 8,
            }}>
              <div style={{ fontSize: 11, color: 'var(--fg-mute)', fontWeight: 600 }}>DOM</div>
              <div style={{ fontSize: 16, fontWeight: 700, lineHeight: 1, marginTop: 2 }}>
                {a.time}
              </div>
            </div>
            <div>
              <div style={{ fontSize: 14, fontWeight: 700 }}>{a.name}</div>
              <div style={{ fontSize: 12, color: 'var(--fg-soft)' }}>{a.service}</div>
              <div style={{
                fontSize: 11, color: 'var(--fg-mute)', marginTop: 4,
                fontFamily: 'var(--mono)',
              }}>{a.delta}</div>
            </div>
            <div>
              {a.status === 'confirmed' && <Pill tone="positive">✓ Confirmada</Pill>}
              {a.status === 'sent' && <Pill tone="accent">📤 Enviado</Pill>}
              {a.status === 'rescheduled' && <Pill tone="warm">🔁 Cambiada</Pill>}
            </div>
          </div>
        ))}
        <div style={{
          padding: '14px 22px',
          background: 'var(--bg)',
          borderTop: '1px solid var(--rule)',
          fontSize: 12, color: 'var(--fg-mute)',
          display: 'flex', justifyContent: 'space-between',
          fontFamily: 'var(--mono)',
          letterSpacing: '0.02em',
        }}>
          <span>Notifiche inviate oggi: 12</span>
          <span>Tempo speso da te: 0 min</span>
        </div>
      </div>
    </MockFrame>
  );
}

function MockFrame({ title, subtitle, children }) {
  return (
    <div style={{
      background: 'var(--bg-2)',
      borderRadius: 'var(--radius-lg)',
      boxShadow: 'var(--shadow-md)',
      border: '1px solid var(--rule)',
      overflow: 'hidden',
    }}>
      <div style={{
        padding: '12px 18px',
        borderBottom: '1px solid var(--rule)',
        background: 'var(--bg)',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        gap: 12, flexWrap: 'wrap',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <div style={{ display: 'flex', gap: 5 }}>
            <span style={{ width: 10, height: 10, borderRadius: '50%', background: '#ff5f57' }} />
            <span style={{ width: 10, height: 10, borderRadius: '50%', background: '#febc2e' }} />
            <span style={{ width: 10, height: 10, borderRadius: '50%', background: '#28c840' }} />
          </div>
          <div>
            <div style={{ fontSize: 12, fontWeight: 700 }}>{title}</div>
            <div style={{ fontSize: 11, color: 'var(--fg-mute)' }}>{subtitle}</div>
          </div>
        </div>
        <Pill tone="accent">
          <span style={{
            width: 6, height: 6, borderRadius: '50%', background: 'var(--accent)',
            animation: 'pulse 1.6s ease-in-out infinite',
          }} />
          AI attiva
        </Pill>
      </div>
      {children}
    </div>
  );
}

window.Examples = Examples;

// ─────────────────────────────────────────────────────────────────
// INDUSTRIES — for whom
// ─────────────────────────────────────────────────────────────────

const INDUSTRIES = [
  { icon: '⚖️', name: 'Estudios profesionales', desc: 'Asesores, abogados, consultores', hours: '~12h/sem.', uses: 'Clasificación de solicitudes, borradores de documentos, recordatorios de vencimientos.' },
  { icon: '🛒', name: 'E-commerce', desc: 'Shopify, WooCommerce, almacenes propios', hours: '~20h/sem.', uses: 'Atención al cliente 24h, carritos abandonados, upselling.' },
  { icon: '💅', name: 'Centros estéticos & SPA', desc: 'Reservas y clientes fidelizados', hours: '~8h/sem.', uses: 'WhatsApp fuera de horario, confirmaciones, recuperación de clientes.' },
  { icon: '🔧', name: 'Talleres & servicios', desc: 'Mecánica, fontanería, electricidad', hours: '~10h/sem.', uses: 'Presupuestos desde foto, seguimiento post-intervención, reseñas.' },
  { icon: '🍝', name: 'Restauración & hospitality', desc: 'Restaurantes, B&B, casas rurales', hours: '~15h/sem.', uses: 'Reservas, reseñas, recordatorios automáticos.' },
  { icon: '🏥', name: 'Clínicas médicas & dentales', desc: 'Clínicas, policlínicas, dentistas', hours: '~14h/sem.', uses: 'Recordatorios de visitas, no-shows, clasificación de solicitudes.' },
];

function Industries() {
  return (
    <section id="settori" style={{ padding: '100px 0' }}>
      <div className="container">
        <SectionHeader
          kicker="Para quién"
          title="¿Para quién es este servicio?"
          lede={<>No estamos ligados a un solo sector: nuestra especialidad es mapear los flujos de trabajo y optimizarlos donde haya un proceso repetitivo. <strong style={{ color: 'var(--fg)', fontWeight: 700 }}>Pero si estás en una de estas categorías, ya sabemos dónde mirar.</strong></>}
        />

        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(3, minmax(0, 1fr))',
          gap: 16,
        }} className="industries-grid">
          {INDUSTRIES.map((ind, i) => (
            <div key={i} style={{
              background: 'var(--bg-2)',
              border: '1px solid var(--rule)',
              borderRadius: 'var(--radius)',
              padding: 24,
              display: 'flex', flexDirection: 'column', gap: 14,
              transition: 'transform .15s ease, border-color .15s ease',
              cursor: 'default',
            }}
              onMouseEnter={(e) => {
                e.currentTarget.style.transform = 'translateY(-3px)';
                e.currentTarget.style.borderColor = 'var(--accent)';
              }}
              onMouseLeave={(e) => {
                e.currentTarget.style.transform = 'translateY(0)';
                e.currentTarget.style.borderColor = 'var(--rule)';
              }}
            >
              <div style={{
                display: 'flex', justifyContent: 'space-between', alignItems: 'center',
              }}>
                <span style={{
                  width: 48, height: 48, borderRadius: 12,
                  background: 'var(--bg-3)',
                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                  fontSize: 24,
                }}>{ind.icon}</span>
                <Pill tone="positive">{ind.hours}</Pill>
              </div>
              <div>
                <h3 style={{
                  margin: '0 0 4px',
                  fontSize: 18, fontWeight: 700, letterSpacing: '-0.01em',
                }}>{ind.name}</h3>
                <div style={{
                  fontSize: 12, color: 'var(--fg-mute)',
                  fontFamily: 'var(--mono)', fontWeight: 500,
                }}>{ind.desc}</div>
              </div>
              <p style={{
                margin: 0, color: 'var(--fg-soft)', fontSize: 14, lineHeight: 1.5,
              }}>{ind.uses}</p>
            </div>
          ))}
        </div>

        <div style={{
          marginTop: 40,
          padding: '24px 28px',
          background: 'var(--bg-2)',
          border: '1.5px dashed var(--rule-strong)',
          borderRadius: 'var(--radius-lg)',
          textAlign: 'center',
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
          gap: 14,
        }}>
          <p style={{
            margin: 0,
            fontSize: 'clamp(18px, 1.8vw, 22px)',
            fontWeight: 500,
            color: 'var(--fg-soft)',
            letterSpacing: '-0.01em',
            lineHeight: 1.4,
          }}>
            <strong style={{ color: 'var(--fg)', fontWeight: 700 }}>¿Tu negocio no está entre estos?</strong> No te preocupes, la IA funciona para cualquier empresa.
          </p>
          <a href="https://wa.me/393793762553?text=Hola%20Solvera%2C%20quisiera%20informaci%C3%B3n" target="_blank" rel="noopener" style={{
            display: 'inline-flex', alignItems: 'center', gap: 8,
            background: 'var(--accent)', color: '#fff',
            padding: '12px 22px', borderRadius: 999,
            textDecoration: 'none', fontWeight: 600, fontSize: 15,
            boxShadow: '0 8px 20px -8px var(--accent)',
            transition: 'transform .15s ease',
          }}
            onMouseEnter={(e) => e.currentTarget.style.transform = 'translateY(-2px)'}
            onMouseLeave={(e) => e.currentTarget.style.transform = 'translateY(0)'}
          >
            Hablemos <ArrowRight />
          </a>
        </div>

        <style>{`
          @media (max-width: 880px) {
            .industries-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
          }
          @media (max-width: 520px) {
            .industries-grid { grid-template-columns: 1fr !important; }
          }
        `}</style>
      </div>
    </section>
  );
}
window.Industries = Industries;

// ─────────────────────────────────────────────────────────────────
// ABOUT
// ─────────────────────────────────────────────────────────────────

function About() {
  const team = [
    { src: 'images/team-1.jpg', pos: 'center 20%', name: 'Valentina' },
    { src: 'images/team-2.jpg', pos: 'center 20%', name: 'Mariaelena' },
  ];

  return (
    <section style={{
      padding: '100px 0',
      background: 'var(--bg-2)',
      borderTop: '1px solid var(--rule)',
      borderBottom: '1px solid var(--rule)',
    }}>
      <div className="container">
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1.15fr)',
          gap: 56, alignItems: 'center',
        }} className="about-grid">
          {/* Team photos — 2 portraits, same ratio & treatment */}
          <div style={{
            display: 'grid',
            gridTemplateColumns: '1fr 1fr',
            gap: 12,
          }} className="about-photos">
            {team.map((p, i) => (
              <div key={i} style={{
                position: 'relative',
                aspectRatio: '4/5',
                borderRadius: 'var(--radius-lg)',
                overflow: 'hidden',
                background: 'var(--bg-3)',
                border: '1px solid var(--rule)',
                boxShadow: 'var(--shadow-md)',
                transform: i === 0 ? 'translateY(-12px)' : 'translateY(12px)',
              }}>
                <img
                  src={p.src}
                  alt=""
                  style={{
                    position: 'absolute', inset: 0,
                    width: '100%', height: '100%',
                    objectFit: 'cover',
                    objectPosition: p.pos,
                    display: 'block',
                  }}
                />
                {/* subtle gradient at bottom for label legibility */}
                <div aria-hidden="true" style={{
                  position: 'absolute', left: 0, right: 0, bottom: 0, height: 80,
                  background: 'linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.55) 100%)',
                  pointerEvents: 'none',
                }} />
                <div style={{
                  position: 'absolute', left: 14, bottom: 12,
                  fontFamily: 'var(--mono)', fontSize: 11,
                  color: '#fff', letterSpacing: '0.06em',
                  textTransform: 'uppercase', fontWeight: 600,
                  opacity: 0.92,
                }}>
                  {p.name}
                </div>
              </div>
            ))}
          </div>

          <div>
            <Eyebrow style={{ marginBottom: 16 }}>Quiénes somos</Eyebrow>
            <h2 style={{
              margin: '0 0 28px',
              fontSize: 'clamp(30px, 3.6vw, 44px)',
              fontWeight: 700, letterSpacing: '-0.025em', lineHeight: 1.12,
            }}>
              Una agencia pequeña,{' '}<br />
              <span style={{
                background: 'linear-gradient(120deg, var(--accent) 0%, var(--accent-deep) 100%)',
                WebkitBackgroundClip: 'text',
                WebkitTextFillColor: 'transparent',
                backgroundClip: 'text',
              }}>que piensa en grande.</span>
            </h2>

            <p style={{
              margin: '0 0 16px', fontSize: 17,
              color: 'var(--fg-soft)', lineHeight: 1.6,
            }}>
              Somos <strong style={{ color: 'var(--fg)', fontWeight: 700 }}>Solvera</strong>, una boutique
              de integración de IA. Hemos elegido trabajar exclusivamente junto a
              propietarios de PYMEs, porque es un mundo que conocemos muy de cerca.
            </p>
            <p style={{
              margin: '0 0 16px', fontSize: 17,
              color: 'var(--fg-soft)', lineHeight: 1.6,
            }}>
              Sabemos exactamente lo que significa estar a las siete de la tarde con
              diez pestañas abiertas en el ordenador, el cansancio encima y un cliente
              importante que lleva desde ayer esperando una respuesta.
            </p>
            <p style={{
              margin: '0 0 16px', fontSize: 17,
              color: 'var(--fg-soft)', lineHeight: 1.6,
            }}>
              Nuestro método se resume en dos pasos: <strong style={{ color: 'var(--fg)', fontWeight: 700 }}>primero escuchamos, luego construimos</strong>.
            </p>
            <p style={{
              margin: '0 0 32px', fontSize: 17,
              color: 'var(--fg-soft)', lineHeight: 1.6,
            }}>
              No te vendemos un software prefabricado para instalar y olvidar.
              Te ofrecemos una asociación: estudiamos cómo trabajas, creamos la solución
              a medida para ti y permanecemos a tu lado en el tiempo para mantenerla,
              modificarla y actualizarla. <em style={{ color: 'var(--fg)', fontStyle: 'italic' }}>Nosotros gestionamos la tecnología, tú vuelves a dirigir tu empresa.</em>
            </p>
          </div>
        </div>

        <style>{`
          @media (max-width: 860px) {
            .about-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
            .about-photos > div { transform: none !important; }
          }
        `}</style>
      </div>
    </section>
  );
}
window.About = About;

// ─────────────────────────────────────────────────────────────────
// WHY US
// ─────────────────────────────────────────────────────────────────

const WHY_US = [
  {
    icon: '🧩',
    title: 'Un sistema, no diez apps',
    desc: <>Sin suscripciones a herramientas distintas para email, chat, calendario, CRM. Todo vive en <strong style={{ color: 'var(--fg)', fontWeight: 700 }}>una única integración de IA</strong> construida para ti. <strong style={{ color: 'var(--fg)', fontWeight: 700 }}>Un solo panel, una sola factura.</strong></>,
  },
  {
    icon: '🔌',
    title: 'No cambias lo que ya usas',
    desc: <>Nos integramos sobre <strong style={{ color: 'var(--fg)', fontWeight: 700 }}>Gmail, WhatsApp, Excel, tu gestión y tu calendario</strong>. <strong style={{ color: 'var(--fg)', fontWeight: 700 }}>No te pedimos migrar nada</strong>, ni aprender nuevos programas.</>,
  },
  {
    icon: '✂️',
    title: "La IA se adapta a ti, no al revés",
    desc: <>Sin plantillas prefabricadas ni flujos estándar. Estudiamos cómo trabajas y <strong style={{ color: 'var(--fg)', fontWeight: 700 }}>adaptamos el sistema a tu forma de trabajar</strong>. <strong style={{ color: 'var(--fg)', fontWeight: 700 }}>La herramienta se adapta a la empresa, no al revés.</strong></>,
  },
  {
    icon: '👋',
    title: 'Personas reales, no un ticket',
    desc: <>Siempre hablas con quien ha construido tu sistema. Sin call center, sin formularios de soporte: <strong style={{ color: 'var(--fg)', fontWeight: 700 }}>WhatsApp directo, respuesta en 24h, modificaciones ilimitadas.</strong></>,
  },
  {
    icon: '🤝',
    title: 'Pensada para tu empresa',
    desc: <>Mismo idioma, mismos clientes tipo. Sabemos <strong style={{ color: 'var(--fg)', fontWeight: 700 }}>cómo se comunica aquí</strong>, qué herramientas se usan en las empresas españolas y qué exige el <strong style={{ color: 'var(--fg)', fontWeight: 700 }}>RGPD</strong>.</>,
  },
  {
    icon: '🛟',
    title: 'Nos quedamos contigo tras el lanzamiento',
    desc: <>La cuota cubre <strong style={{ color: 'var(--fg)', fontWeight: 700 }}>mantenimiento, actualizaciones y modificaciones para siempre</strong>. Cuando cambia un proceso o una tarifa, lo cambiamos juntos. <strong style={{ color: 'var(--fg)', fontWeight: 700 }}>No desaparecemos tras la factura.</strong></>,
  },
];

function WhyUs() {
  return (
    <section id="perche-noi" style={{
      padding: '110px 0 110px',
      background: 'var(--bg-3)',
      borderTop: '1px solid var(--rule)',
      borderBottom: '1px solid var(--rule)',
      position: 'relative',
      overflow: 'hidden',
    }}>
      {/* Subtle decorative grid */}
      <div aria-hidden="true" style={{
        position: 'absolute', inset: 0,
        backgroundImage: 'radial-gradient(circle at 1px 1px, var(--rule) 1px, transparent 0)',
        backgroundSize: '24px 24px',
        opacity: 0.5,
        pointerEvents: 'none',
        maskImage: 'radial-gradient(ellipse at center, black 30%, transparent 80%)',
        WebkitMaskImage: 'radial-gradient(ellipse at center, black 30%, transparent 80%)',
      }} />

      <div className="container" style={{ position: 'relative' }}>
        <SectionHeader
          align="center"
          kicker="Por qué Solvera"
          title={<>Qué nos hace diferentes.{' '}<br /><span style={{
            background: 'linear-gradient(120deg, var(--accent) 0%, var(--accent-deep) 100%)',
            WebkitBackgroundClip: 'text',
            WebkitTextFillColor: 'transparent',
            backgroundClip: 'text',
          }}>Seis motivos concretos, no eslóganes.</span></>}
          lede="Las agencias te venden software. Nosotros construimos un sistema adaptado a tu empresa — y permanecemos a tu lado para mantenerlo."
        />

        <div className="why-grid" style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(3, minmax(0, 1fr))',
          gap: 16,
          marginTop: 8,
        }}>
          {WHY_US.map((w, i) => (
            <article key={i} style={{
              background: 'var(--bg-2)',
              border: '1px solid var(--rule)',
              borderRadius: 'var(--radius-lg)',
              padding: '28px 26px 26px',
              position: 'relative',
              display: 'flex', flexDirection: 'column',
              transition: 'transform .2s ease, box-shadow .2s ease, border-color .2s ease',
            }}
              onMouseEnter={(e) => {
                e.currentTarget.style.transform = 'translateY(-3px)';
                e.currentTarget.style.boxShadow = 'var(--shadow-md)';
                e.currentTarget.style.borderColor = 'var(--rule-strong)';
              }}
              onMouseLeave={(e) => {
                e.currentTarget.style.transform = 'translateY(0)';
                e.currentTarget.style.boxShadow = 'none';
                e.currentTarget.style.borderColor = 'var(--rule)';
              }}
            >
              <div style={{
                display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                marginBottom: 18,
              }}>
                <div style={{
                  fontSize: 26,
                  width: 52, height: 52, borderRadius: 14,
                  background: 'var(--accent-soft)',
                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                  border: '1px solid var(--rule)',
                }}>{w.icon}</div>
                <span style={{
                  fontFamily: 'var(--mono)', fontSize: 11,
                  fontWeight: 600, color: 'var(--fg-mute)',
                  letterSpacing: '0.08em',
                }}>0{i + 1}</span>
              </div>

              <h3 style={{
                margin: '0 0 10px',
                fontSize: 19, fontWeight: 700,
                letterSpacing: '-0.015em', lineHeight: 1.25,
                textWrap: 'balance',
              }}>{w.title}</h3>
              <p style={{
                margin: 0, color: 'var(--fg-soft)',
                fontSize: 14.5, lineHeight: 1.55,
              }}>{w.desc}</p>
            </article>
          ))}
        </div>

        {/* Closing line */}
        <div style={{
          marginTop: 56,
          textAlign: 'center',
          maxWidth: 720, marginLeft: 'auto', marginRight: 'auto',
        }}>
          <p style={{
            margin: 0, fontSize: 'clamp(18px, 1.6vw, 22px)',
            color: 'var(--fg-soft)', lineHeight: 1.5,
            letterSpacing: '-0.005em',
          }}>
            En una frase: <strong style={{ color: 'var(--fg)', fontWeight: 700 }}>nosotros gestionamos la tecnología, tú vuelves a dirigir tu empresa.</strong>
          </p>
        </div>

        <style>{`
          @media (max-width: 980px) {
            .why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
          }
          @media (max-width: 580px) {
            .why-grid { grid-template-columns: 1fr !important; }
          }
        `}</style>
      </div>
    </section>
  );
}
window.WhyUs = WhyUs;

// ─────────────────────────────────────────────────────────────────
// TESTIMONIALS
// ─────────────────────────────────────────────────────────────────

const TESTIMONIALS = [
  {
    name: 'Miguel R.',
    role: 'Propietario',
    business: 'Asesoría fiscal',
    place: 'Madrid',
    since: 'Cliente desde hace 8 meses',
    color: '#2a5cf5',
    quote: "El verano pasado perdí un cliente de 6.000€ al año porque no respondí a un email que llegó un sábado. Ese lunes llamé a Solvera. Tres semanas después, cada solicitud tenía respuesta en 5 minutos — incluso los domingos. No me ha vuelto a ocurrir.",
    before: { v: '15+', label: 'emails/sem. sin respuesta' },
    after: { v: '0', label: 'emails sin respuesta' },
  },
  {
    name: 'Alejandra V.',
    role: 'Propietaria',
    business: 'Centro estético',
    place: 'Barcelona',
    since: 'Cliente desde hace 11 meses',
    color: '#d6388b',
    quote: 'Por WhatsApp llegan solicitudes a todas horas — muchas por la noche, cuando ya he cerrado. Antes respondía en el desayuno, y mientras tanto algunas clientas ya habían reservado en otro sitio. Desde que el sistema responde al instante y propone los huecos libres, tengo 6-7 citas más cada semana.',
    before: { v: '80', label: 'citas / mes' },
    after: { v: '110', label: 'citas / mes' },
  },
  {
    name: 'Jorge T.',
    role: 'Propietario',
    business: 'Taller mecánico',
    place: 'Valencia',
    since: 'Cliente desde hace 6 meses',
    color: '#14a263',
    quote: "Pensaba que la IA era cosa de multinacionales. Hice la llamada por curiosidad. En 20 días me quitaron dos horas al día de administración: presupuestos, confirmaciones, seguimientos. Somos cuatro personas, y es como tener una más — sin contratar.",
    before: { v: '10h', label: 'administración/sem.' },
    after: { v: '2h', label: 'administración/sem.' },
  },
];

function LinkedInIcon({ size = 14 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" style={{ verticalAlign: 'middle' }}>
      <path d="M20.45 20.45h-3.55v-5.57c0-1.33-.02-3.04-1.85-3.04-1.86 0-2.14 1.45-2.14 2.95v5.66H9.36V9h3.41v1.56h.05c.48-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.45v6.29zM5.34 7.43a2.06 2.06 0 1 1 0-4.12 2.06 2.06 0 0 1 0 4.12zM7.12 20.45H3.56V9h3.56v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.72v20.56C0 23.23.79 24 1.77 24h20.45c.98 0 1.78-.77 1.78-1.72V1.72C24 .77 23.2 0 22.22 0z" />
    </svg>
  );
}

function StarRow({ count = 5 }) {
  return (
    <div style={{ display: 'flex', gap: 2 }}>
      {Array.from({ length: count }).map((_, i) => (
        <svg key={i} width="14" height="14" viewBox="0 0 24 24" fill="#f5b50a">
          <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
        </svg>
      ))}
    </div>
  );
}

function Testimonials() {
  return (
    <section style={{ padding: '100px 0' }}>
      <div className="container">
        <SectionHeader
          align="center"
          kicker="Qué dicen los clientes"
          title={<>Resultados medibles.{' '}<br /><span style={{
            background: 'linear-gradient(120deg, var(--accent) 0%, var(--accent-deep) 100%)',
            WebkitBackgroundClip: 'text',
            WebkitTextFillColor: 'transparent',
            backgroundClip: 'text',
          }}>Casos de estudio de tres empresas.</span></>}
          lede="Sin rodeos. Solo hechos concretos: qué cambió realmente en su día a día, con datos de antes y después."
        />

        {/* Trust strip */}
        <div style={{
          display: 'flex', flexWrap: 'wrap',
          alignItems: 'center', justifyContent: 'center', gap: 32,
          marginBottom: 48, padding: '20px 28px',
          background: 'var(--bg-2)',
          border: '1px solid var(--rule)',
          borderRadius: 999,
          maxWidth: 'fit-content',
          marginLeft: 'auto', marginRight: 'auto',
        }}>
          <TrustItem v="4.9" l="sobre 5 — satisfacción media" stars />
          <TrustDivider />
          <TrustItem v="32" l="empresas activas" />
          <TrustDivider />
          <TrustItem v="96%" l="renueva después de 6 meses" />
        </div>

        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))',
          gap: 20,
        }}>
          {TESTIMONIALS.map((t, i) => (
            <figure key={i} style={{
              margin: 0,
              background: 'var(--bg-2)',
              border: '1px solid var(--rule)',
              borderRadius: 'var(--radius-lg)',
              padding: 0,
              display: 'flex', flexDirection: 'column',
              position: 'relative',
              overflow: 'hidden',
              transition: 'transform .2s ease, box-shadow .2s ease',
            }}
              onMouseEnter={(e) => {
                e.currentTarget.style.transform = 'translateY(-4px)';
                e.currentTarget.style.boxShadow = 'var(--shadow-md)';
              }}
              onMouseLeave={(e) => {
                e.currentTarget.style.transform = 'translateY(0)';
                e.currentTarget.style.boxShadow = 'none';
              }}
            >
              {/* Header band */}
              <div style={{
                padding: '20px 24px',
                borderBottom: '1px solid var(--rule)',
                display: 'flex', alignItems: 'center', gap: 14,
              }}>
                <span style={{
                  width: 44, height: 44, borderRadius: '50%',
                  background: t.color,
                  color: '#fff',
                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                  fontWeight: 700, fontSize: 16,
                  letterSpacing: '-0.01em',
                  flexShrink: 0,
                  boxShadow: `0 0 0 3px ${t.color}22`,
                }}>{t.name.split(' ').map(p => p[0]).join('')}</span>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{
                    display: 'flex', alignItems: 'center', gap: 6,
                    fontSize: 15, fontWeight: 700,
                    letterSpacing: '-0.01em',
                  }}>
                    {t.name}
                    <span style={{
                      display: 'inline-flex', alignItems: 'center',
                      width: 14, height: 14, borderRadius: '50%',
                      background: '#1d8de8', color: '#fff',
                      fontSize: 9, fontWeight: 700,
                      justifyContent: 'center', flexShrink: 0,
                    }} title="Verificato">✓</span>
                  </div>
                  <div style={{
                    fontSize: 12, color: 'var(--fg-soft)',
                    whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
                  }}>{t.role} · <strong style={{ fontWeight: 600, color: 'var(--fg)' }}>{t.business}</strong></div>
                  <div style={{
                    fontSize: 11, color: 'var(--fg-mute)',
                    marginTop: 2,
                  }}>{t.place}</div>
                </div>
              </div>

              {/* Quote body */}
              <div style={{ padding: 24, flex: 1, display: 'flex', flexDirection: 'column', gap: 14 }}>
                <div style={{
                  display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 12,
                }}>
                  <StarRow />
                  <span style={{
                    fontSize: 10, fontWeight: 600,
                    color: 'var(--fg-mute)', fontFamily: 'var(--mono)',
                    letterSpacing: '0.04em', textTransform: 'uppercase',
                  }}>{t.since}</span>
                </div>

                <blockquote style={{
                  margin: 0, padding: 0,
                  fontSize: 15, lineHeight: 1.55,
                  color: 'var(--fg)',
                  flex: 1,
                }}>
                  "{t.quote}"
                </blockquote>
              </div>

              {/* Before / After */}
              <div style={{
                margin: '0 24px 24px',
                background: 'var(--bg)',
                border: '1px solid var(--rule)',
                borderRadius: 'var(--radius)',
                padding: 14,
                display: 'grid',
                gridTemplateColumns: '1fr auto 1fr',
                gap: 10, alignItems: 'center',
              }}>
                <div>
                  <div style={{
                    fontSize: 10, fontWeight: 700,
                    color: 'var(--fg-mute)', letterSpacing: '0.04em',
                    textTransform: 'uppercase', marginBottom: 4,
                  }}>Prima</div>
                  <div style={{
                    fontSize: 20, fontWeight: 700,
                    color: 'var(--fg-mute)', letterSpacing: '-0.02em',
                    lineHeight: 1, textDecoration: 'line-through',
                    textDecorationColor: 'var(--rule-strong)',
                    fontVariantNumeric: 'tabular-nums',
                  }}>{t.before.v}</div>
                  <div style={{ fontSize: 10, color: 'var(--fg-mute)', marginTop: 4, lineHeight: 1.2 }}>
                    {t.before.label}
                  </div>
                </div>
                <span style={{
                  color: 'var(--positive)', fontSize: 20, fontWeight: 700,
                }}>→</span>
                <div style={{ textAlign: 'right' }}>
                  <div style={{
                    fontSize: 10, fontWeight: 700,
                    color: 'var(--positive)', letterSpacing: '0.04em',
                    textTransform: 'uppercase', marginBottom: 4,
                  }}>Oggi</div>
                  <div style={{
                    fontSize: 20, fontWeight: 700,
                    color: 'var(--positive)', letterSpacing: '-0.02em',
                    lineHeight: 1,
                    fontVariantNumeric: 'tabular-nums',
                  }}>{t.after.v}</div>
                  <div style={{ fontSize: 10, color: 'var(--fg-soft)', marginTop: 4, lineHeight: 1.2 }}>
                    {t.after.label}
                  </div>
                </div>
              </div>
            </figure>
          ))}
        </div>

        {/* Reachable customers strip */}
      </div>
    </section>
  );
}

function TrustItem({ v, l, stars }) {
  return (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 10,
    }}>
      <span style={{
        fontSize: 22, fontWeight: 700, letterSpacing: '-0.02em',
        color: 'var(--accent-deep)',
        fontVariantNumeric: 'tabular-nums',
      }}>{v}</span>
      <div style={{
        fontSize: 12, color: 'var(--fg-soft)',
        lineHeight: 1.3, maxWidth: 140,
        display: 'flex', flexDirection: 'column', gap: 2,
      }}>
        {stars && (
          <span style={{ display: 'inline-flex', gap: 1 }}>
            {Array.from({ length: 5 }).map((_, i) => (
              <svg key={i} width="10" height="10" viewBox="0 0 24 24" fill="#f5b50a">
                <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
              </svg>
            ))}
          </span>
        )}
        <span>{l}</span>
      </div>
    </div>
  );
}

function TrustDivider() {
  return (
    <span aria-hidden="true" style={{
      width: 1, height: 32, background: 'var(--rule)',
    }} className="trust-divider" />
  );
}

window.Testimonials = Testimonials;

// ─────────────────────────────────────────────────────────────────
// FAQ
// ─────────────────────────────────────────────────────────────────

const FAQ_ITEMS = [
  { q: '¿Sois una agencia o un software?', a: 'Una agencia. No hay nada que descargar, nada que aprender, ninguna plataforma que abrir. Nos traes el problema, nosotros lo resolvemos con IA. Te acompañamos antes, durante y después — el sistema es siempre responsabilidad nuestra.' },
  { q: '¿Tengo que ser bueno con la tecnología?', a: 'No. Si sabes usar WhatsApp y el email, es suficiente. La IA funciona sobre tus herramientas actuales y la gestionamos nosotros — no tienes que aprender nada nuevo, no hay ninguna plataforma que abrir cada día.' },
  { q: '¿Cuánto tiempo se necesita para empezar?', a: 'Desde la primera llamada hasta el primer flujo activo: 2-3 semanas. Las automatizaciones más complejas llegan el mes siguiente. Sin proyectos de seis meses.' },
  { q: '¿Y si la IA se equivoca en una respuesta importante?', a: 'Cada automatización tiene umbrales de seguridad: por debajo de cierta confianza el sistema no responde, solo te notifica. Tú decides qué es demasiado delicado para automatizar.' },
  { q: '¿Los datos de mis clientes están seguros?', a: 'Usamos proveedores con servidores en Europa, cumplimiento del RGPD y contratos de tratamiento de datos. Tus datos no se usan para entrenar modelos de IA. Lo ponemos todo por escrito.' },
  { q: '¿Tengo que cambiar mis herramientas?', a: 'No. Construimos sobre Gmail, WhatsApp Business, Excel, tu CRM, tu gestión. Si tienes una herramienta, nos conectamos. No vendemos software.' },
  { q: '¿Cuánto cuesta?', a: 'Setup inicial + cuota mensual. El precio depende de cuántas automatizaciones construimos para ti — lo hablamos en la primera llamada de 30 minutos. No vendemos paquetes estándar, así que no hay una tarifa fija: te hacemos una propuesta solo después de escucharte.' },
  { q: '¿Y después? ¿Quién mantiene todo?', a: 'Nosotros. La cuota mensual cubre mantenimiento, actualizaciones, modificaciones ilimitadas. No tienes que aprender nada técnico — es un servicio continuo, no un software que te entregamos y adiós.' },
  { q: '¿Qué necesito de mi parte?', a: '30 minutos para la primera llamada, luego 1-2 horas distribuidas en las primeras semanas para mostrarnos cómo trabajas hoy. Después: cero dedicación semanal. Trabajamos nosotros, te mantienes informado con un informe semanal.' },
];

function FAQ() {
  const [open, setOpen] = React.useState(0);
  return (
    <section id="faq" style={{
      padding: '100px 0',
      background: 'var(--bg-2)',
      borderTop: '1px solid var(--rule)',
      borderBottom: '1px solid var(--rule)',
    }}>
      <div className="container">
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'minmax(0, 0.85fr) minmax(0, 1.3fr)',
          gap: 64,
        }} className="faq-grid">
          <div style={{ position: 'sticky', top: 100, alignSelf: 'flex-start' }}>
            <Eyebrow style={{ marginBottom: 16 }}>Preguntas frecuentes</Eyebrow>
            <h2 style={{
              margin: '0 0 20px',
              fontSize: 'clamp(28px, 3.4vw, 40px)',
              fontWeight: 700, letterSpacing: '-0.025em', lineHeight: 1.1,
            }}>Las preguntas que nos hacéis más a menudo.</h2>

            {/* Solvy card */}
            <div style={{
              padding: 20,
              background: 'var(--bg)',
              border: '1px solid var(--rule)',
              borderRadius: 'var(--radius-lg)',
              position: 'relative',
              overflow: 'hidden',
            }}>
              <div aria-hidden="true" style={{
                position: 'absolute', top: -40, right: -40,
                width: 140, height: 140, borderRadius: '50%',
                background: 'radial-gradient(circle, var(--accent-tint) 0%, transparent 70%)',
                pointerEvents: 'none',
              }} />

              <div style={{
                display: 'flex', alignItems: 'center', gap: 12, marginBottom: 14,
                position: 'relative',
              }}>
                <div style={{ position: 'relative' }}>
                  <div style={{
                    width: 44, height: 44, borderRadius: '50%',
                    background: 'linear-gradient(135deg, var(--accent) 0%, var(--accent-deep) 100%)',
                    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                    fontSize: 20, fontWeight: 800, color: '#fff',
                    boxShadow: '0 6px 16px -6px var(--accent)',
                  }}>S</div>
                  <span aria-hidden="true" style={{
                    position: 'absolute', bottom: 0, right: 0,
                    width: 12, height: 12, borderRadius: '50%',
                    background: 'var(--positive)',
                    border: '2px solid var(--bg)',
                  }} />
                </div>
                <div>
                  <div style={{
                    fontSize: 15, fontWeight: 700, letterSpacing: '-0.01em',
                  }}>Solvy</div>
                  <div style={{
                    fontSize: 12, color: 'var(--fg-mute)',
                    fontFamily: 'var(--mono)', letterSpacing: '0.02em',
                  }}>Asistente IA · Online</div>
                </div>
              </div>

              <p style={{
                margin: '0 0 16px', fontSize: 14,
                color: 'var(--fg-soft)', lineHeight: 1.55,
                position: 'relative',
              }}>
                ¿Tienes más preguntas antes de contactarnos?
                Habla con <strong style={{ color: 'var(--fg)', fontWeight: 700 }}>Solvy</strong>, nuestro asistente.
                Responde de inmediato, incluso de noche.
              </p>

              <button
                onClick={() => window.openSolvy && window.openSolvy()}
                style={{
                  appearance: 'none', border: 'none',
                  display: 'inline-flex', alignItems: 'center', gap: 8,
                  background: 'var(--accent)', color: '#fff',
                  padding: '11px 18px', borderRadius: 999,
                  fontSize: 14, fontWeight: 600,
                  cursor: 'pointer',
                  fontFamily: 'inherit',
                  boxShadow: '0 8px 20px -8px var(--accent)',
                  transition: 'transform .15s ease',
                  position: 'relative',
                }}
                onMouseEnter={(e) => e.currentTarget.style.transform = 'translateY(-2px)'}
                onMouseLeave={(e) => e.currentTarget.style.transform = 'translateY(0)'}
              >
                <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
                  <path d="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"/>
                </svg>
                Chatta con Solvy
              </button>
            </div>
          </div>

          <div>
            {FAQ_ITEMS.map((f, i) => {
              const active = i === open;
              return (
                <div key={i} style={{
                  borderTop: i === 0 ? '1px solid var(--rule)' : 'none',
                  borderBottom: '1px solid var(--rule)',
                }}>
                  <button
                    onClick={() => setOpen(active ? -1 : i)}
                    style={{
                      width: '100%', appearance: 'none', border: 'none',
                      background: 'transparent', cursor: 'pointer',
                      padding: '22px 0', textAlign: 'left',
                      display: 'flex', alignItems: 'center', gap: 20,
                      fontFamily: 'var(--sans)',
                    }}>
                    <span style={{
                      fontFamily: 'var(--mono)', fontSize: 12,
                      color: active ? 'var(--accent)' : 'var(--fg-mute)',
                      fontWeight: 700, letterSpacing: '0.02em',
                      minWidth: 24,
                    }}>0{i + 1}</span>
                    <span style={{
                      flex: 1, fontSize: 17, fontWeight: 600,
                      color: 'var(--fg)', letterSpacing: '-0.01em',
                    }}>{f.q}</span>
                    <span style={{
                      width: 28, height: 28, borderRadius: '50%',
                      background: active ? 'var(--accent)' : 'var(--bg-3)',
                      color: active ? '#fff' : 'var(--fg-soft)',
                      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                      fontSize: 16, transition: 'all .25s ease',
                      transform: active ? 'rotate(45deg)' : 'rotate(0)',
                      fontWeight: 500,
                    }}>+</span>
                  </button>
                  <div style={{
                    display: 'grid',
                    gridTemplateRows: active ? '1fr' : '0fr',
                    transition: 'grid-template-rows .35s ease',
                  }}>
                    <div style={{ overflow: 'hidden' }}>
                      <p style={{
                        margin: 0, paddingBottom: 24,
                        paddingLeft: 44,
                        fontSize: 16, lineHeight: 1.6,
                        color: 'var(--fg-soft)',
                        maxWidth: 640,
                      }}>{f.a}</p>
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
        </div>

        <style>{`
          @media (max-width: 860px) {
            .faq-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
          }
        `}</style>
      </div>
    </section>
  );
}
window.FAQ = FAQ;

Object.assign(window, { HowItWorks, Demo, Examples, Industries, About, WhyUs, Testimonials, FAQ });