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

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

const STEPS = [
  {
    n: '01',
    title: 'Ti ascoltiamo, 30 minuti',
    duration: 'Giorno 1',
    desc: 'In videochiamata ci racconti come lavori oggi. Ci mostri un giorno tipo, le email più frequenti, le seccature. Capiamo se possiamo aiutarti — e se non possiamo te lo diciamo subito.',
    tag: 'Gratis · Senza impegno',
    bullets: ['Mappiamo il lavoro ripetitivo', 'Identifichiamo 2-3 priorità', 'Ti facciamo una proposta su misura'],
  },
  {
    n: '02',
    title: 'Costruiamo per te, in 2-3 settimane',
    duration: 'Settimane 1-3',
    desc: 'Configuriamo l\'AI sui tuoi strumenti (Gmail, WhatsApp, gestionale). La addestriamo col tuo tono di voce e le tue regole. Tu fai un test affiancato: rispondi tu, risponde l\'AI, scegli tu.',
    tag: 'Lavoriamo noi · Tu controlli',
    bullets: ['Setup completo sui tuoi sistemi', 'Test affiancato per 5 giorni', 'Aggiustiamo finché non ti convince'],
  },
  {
    n: '03',
    title: 'Restiamo con te, ogni mese',
    duration: 'Da settimana 4',
    desc: 'Il sistema lavora. Tu ricevi un report settimanale di cosa ha fatto. Se cambia qualcosa (nuovi servizi, nuovi prezzi, nuova stagione), lo aggiorniamo noi. Il canone copre tutto.',
    tag: 'Manutenzione · Modifiche illimitate',
    bullets: ['Report settimanale automatico', 'Modifiche illimitate', 'Supporto entro 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="Come lavoriamo"
          title="Tre passi. Tre settimane. Su misura per te."
          lede="Lo so cosa stai pensando: 'sembra complicato'. Non lo è. La parte complicata la facciamo noi. Ecco esattamente cosa succede."
        />

        <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://calendly.com/valentina-aresi/30min" 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)'}
          >
            Inizia con il passo 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="Guardalo in azione"
          title={<>Un sistema vero <span style={{
            background: 'linear-gradient(120deg, var(--accent) 0%, var(--accent-deep) 100%)',
            WebkitBackgroundClip: 'text',
            WebkitTextFillColor: 'transparent',
            backgroundClip: 'text',
          }}>che lavora per te.</span></>}
          lede={<>Una <strong style={{ color: 'var(--fg)', fontWeight: 700 }}>piccola parte</strong> di quello che Solvera fa per te. Oltre a questo: <strong style={{ color: 'var(--fg)', fontWeight: 700 }}>preventivi automatici, follow-up, gestione chiamate, promemoria appuntamenti</strong> e molto altro — tutto <strong style={{ color: 'var(--fg)', fontWeight: 700 }}>cucito sui tuoi processi</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="Apri il video a schermo intero 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>
                Guarda il video
              </span>
            </span>
          </button>
        </div>

        {/* Fullscreen modal — video with audio + controls */}
        {expanded && (
          <div
            role="dialog"
            aria-modal="true"
            aria-label="Video 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="Chiudi video"
              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>● REGISTRAZIONE REALE</span>
          <span>● NESSUN MONTAGGIO</span>
          <span>● DASHBOARD 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: 'Recensione Google',       icon: '⭐', n: '02' },
    { id: 'quote',    label: 'Preventivo',              icon: '🧾', n: '03' },
    { id: 'reminder', label: 'Promemoria appuntamento', icon: '⏰', n: '04' },
  ];

  return (
    <section id="esempi" style={{ padding: '100px 0' }}>
      <div className="container">
        <SectionHeader
          kicker="Esempi di cosa costruiamo"
          title="Quattro casi reali. Quattro sistemi su misura."
          lede="Ogni cliente ha problemi diversi. Questi sono quattro esempi concreti di automazioni che abbiamo cucito per situazioni vere. Il tuo caso sarà diverso — ma il metodo è lo stesso."
        />

        {/* 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',
            }} />
            Clicca su un caso per vederlo
          </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="Rispondere a ogni email come se fosse l'unica."
                body="Il cliente scrive alle 22. L'AI capisce la richiesta, controlla i tuoi orari, formula una risposta nel tuo stile, la invia. Tu vedi il riepilogo la mattina dopo."
                metrics={[
                  ['Tempo medio risposta', '< 2 min'],
                  ['Email gestite / mese', '~ 420'],
                  ['Errori in 6 mesi', '0'],
                ]}
              />
            )}
            {active === 'review' && (
              <ExampleSide
                eyebrow="Caso 02"
                title="Ogni recensione ha la sua risposta. Anche le brutte."
                body="L'AI risponde a ogni recensione Google con tono adeguato: ringrazia le buone, gestisce le negative senza essere difensivi. Tu approvi prima dell'invio, sempre."
                metrics={[
                  ['Tasso di risposta', '100%'],
                  ['Punteggio medio', '+0.4 ★'],
                  ['Recensioni recuperate', '+ 24%'],
                ]}
              />
            )}
            {active === 'quote' && (
              <ExampleSide
                eyebrow="Caso 03"
                title="Il preventivo è pronto prima che il cliente abbia messo giù il telefono."
                body="Dal modulo di richiesta (o da una foto del lavoro da fare) l'AI compila il preventivo con i tuoi prezzi, lo invia in PDF e fa il follow-up se non risponde entro 48h."
                metrics={[
                  ['Tempo medio preventivo', '< 5 min'],
                  ['Conversione lead', '+ 35%'],
                  ['Follow-up automatici', '∞'],
                ]}
              />
            )}
            {active === 'reminder' && (
              <ExampleSide
                eyebrow="Caso 04"
                title="Nessun cliente si dimentica più dell'appuntamento."
                body="24h prima del tuo appuntamento, il cliente riceve un promemoria personalizzato. Se non conferma, parte un secondo messaggio. Se cancella, l'AI propone subito un'alternativa."
                metrics={[
                  ['No-show', '- 78%'],
                  ['Conferme automatiche', '94%'],
                  ['Tempo speso da te', '0 min/sett.'],
                ]}
              />
            )}
          </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@studio.it" subtitle="Risposta automatica · 1 nuova 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,
          }}>GR</span>
          <div style={{ minWidth: 0 }}>
            <div style={{
              fontSize: 13, fontWeight: 700, color: 'var(--fg)',
              whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
            }}>Giulia Rinaldi</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,
          }}>Bozza generata · pronta da inviare</div>
          <div style={{
            background: 'var(--bg)',
            border: '1px solid var(--rule)',
            borderRadius: 10,
            padding: 18,
            fontSize: 14, lineHeight: 1.55, color: 'var(--fg)',
          }}>
            Gentile Sig.ra Rinaldi,{' '}<br />{' '}<br />
            Grazie per averci contattato. Il costo per la dichiarazione dei redditi dipende dal regime fiscale (forfettario, ordinario) e dal numero di documenti.{' '}<br />{' '}<br />
            Per il forfettario partiamo da <strong>€220 + IVA</strong>. Le propongo un appuntamento di 15 minuti per capire la sua situazione: <span style={{ color: 'var(--accent)' }}>https://studiobianchi.it/cal</span>{' '}<br />{' '}<br />
            Cordialmente,{' '}<br />
            Studio Bianchi
          </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)',
            }}>Approva e invia</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 · Risposta automatica" subtitle="Recensione · 3 ore fa">
      <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 carino e personale gentile, ma abbiamo aspettato 40 minuti per ricevere il conto.
          Per il resto bene, ci torneremo ma servirebbe più organizzazione.
        </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">AI · Risposta proposta</Pill>
            <span style={{
              fontSize: 11, color: 'var(--fg-mute)', fontFamily: 'var(--mono)',
            }}>Tono: cordiale · costruttivo</span>
          </div>
          <p style={{
            margin: 0, fontSize: 14, lineHeight: 1.55, color: 'var(--fg)',
          }}>
            Grazie Andrea per il feedback onesto. Hai ragione: i tempi del conto a fine pasto non sono accettabili,
            è una cosa su cui stiamo lavorando con il personale di sala questa settimana.
            Ci farebbe piacere risentirti — la prossima volta scrivici a <strong>conto@locale.it</strong>
            prima di andare via, ti diamo precedenza. Grazie ancora.
          </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)',
            }}>Pubblica risposta</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)',
            }}>Riscrivi</button>
          </div>
        </div>
      </div>
    </MockFrame>
  );
}

// — Quote mockup
function QuoteMockup() {
  return (
    <MockFrame title="Preventivi · Officina Rossi" subtitle="Richiesta da modulo · Generato 2 min fa">
      <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 }}>
              PREVENTIVO #2026-0418
            </div>
            <div style={{ fontSize: 17, fontWeight: 700 }}>Tagliando completo · BMW X3</div>
            <div style={{ fontSize: 13, color: 'var(--fg-soft)', marginTop: 4 }}>
              Cliente: Marco Conti · Targa: AB123CD
            </div>
          </div>
          <Pill tone="positive">✓ Bozza pronta</Pill>
        </div>

        <table style={{ width: '100%', fontSize: 13, borderCollapse: 'collapse' }}>
          <tbody>
            {[
              ['Cambio olio motore + filtro', '€85'],
              ['Filtro aria + filtro abitacolo', '€48'],
              ['Controllo freni + sostituzione pastiglie ant.', '€140'],
              ['Diagnosi computerizzata', '€35'],
              ['Manodopera (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 }}>Totale IVA inclusa</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>📎 Invio automatico via email + WhatsApp</span>
          <span style={{ fontFamily: 'var(--mono)', color: 'var(--fg-mute)' }}>Follow-up se non aperto in 48h</span>
        </div>
      </div>
    </MockFrame>
  );
}

// — Reminder mockup
function ReminderMockup() {
  return (
    <MockFrame title="Promemoria automatici · oggi" subtitle="3 appuntamenti domani · 100% confermati">
      <div style={{ padding: 0 }}>
        {[
          { name: 'Laura B.', time: '09:30', service: 'Manicure + ricostruzione', status: 'confirmed', delta: 'Confermato 14 min fa' },
          { name: 'Roberto S.', time: '11:00', service: 'Taglio + barba', status: 'sent', delta: 'Promemoria inviato 2h fa' },
          { name: 'Elena P.', time: '15:30', service: 'Trattamento viso 60 min', status: 'rescheduled', delta: 'Spostato a venerdì · proposta AI accettata' },
        ].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">✓ Confermato</Pill>}
              {a.status === 'sent' && <Pill tone="accent">📤 Inviato</Pill>}
              {a.status === 'rescheduled' && <Pill tone="warm">🔁 Spostato</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: 'Studi professionali', desc: 'Commercialisti, avvocati, consulenti', hours: '~12h/sett.', uses: 'Smistamento richieste, bozze documenti, promemoria scadenze.' },
  { icon: '🛒', name: 'E-commerce', desc: 'Shopify, WooCommerce, magazzini autonomi', hours: '~20h/sett.', uses: 'Customer care H24, carrelli abbandonati, upselling.' },
  { icon: '💅', name: 'Centri estetici & SPA', desc: 'Prenotazioni e clienti fidelizzati', hours: '~8h/sett.', uses: 'WhatsApp fuori orario, conferme, recupero clienti.' },
  { icon: '🔧', name: 'Officine & service', desc: 'Meccanica, idraulica, elettrico', hours: '~10h/sett.', uses: 'Preventivi da foto, follow-up post intervento, recensioni.' },
  { icon: '🍝', name: 'Ristorazione & hospitality', desc: 'Ristoranti, B&B, agriturismi', hours: '~15h/sett.', uses: 'Prenotazioni, recensioni, promemoria automatici.' },
  { icon: '🏥', name: 'Studi medici & dentistici', desc: 'Cliniche, poliambulatori, dentisti', hours: '~14h/sett.', uses: 'Promemoria visite, no-show, smistamento richieste.' },
];

function Industries() {
  return (
    <section id="settori" style={{ padding: '100px 0' }}>
      <div className="container">
        <SectionHeader
          kicker="Per chi"
          title="Per chi è questo servizio?"
          lede={<>Non siamo legati a un singolo settore: la nostra specialità è mappare i flussi di lavoro e ottimizzarli ovunque ci sia un processo ripetitivo. <strong style={{ color: 'var(--fg)', fontWeight: 700 }}>Ma se sei in una di queste categorie, sappiamo già dove guardare.</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 }}>La tua attività non è tra queste?</strong> Non ti preoccupare, l'AI funziona per ogni business.
          </p>
          <a href="https://calendly.com/valentina-aresi/30min" 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)'}
          >
            Sentiamoci <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 }}>Chi siamo</Eyebrow>
            <h2 style={{
              margin: '0 0 28px',
              fontSize: 'clamp(30px, 3.6vw, 44px)',
              fontWeight: 700, letterSpacing: '-0.025em', lineHeight: 1.12,
            }}>
              Un'agenzia piccola,{' '}<br />
              <span style={{
                background: 'linear-gradient(120deg, var(--accent) 0%, var(--accent-deep) 100%)',
                WebkitBackgroundClip: 'text',
                WebkitTextFillColor: 'transparent',
                backgroundClip: 'text',
              }}>che pensa in grande.</span>
            </h2>

            <p style={{
              margin: '0 0 16px', fontSize: 17,
              color: 'var(--fg-soft)', lineHeight: 1.6,
            }}>
              Siamo <strong style={{ color: 'var(--fg)', fontWeight: 700 }}>Solvera</strong>, una boutique
              di integrazione AI. Abbiamo scelto di lavorare esclusivamente al fianco
              dei titolari di PMI italiane, perché è un mondo che conosciamo da vicino.
            </p>
            <p style={{
              margin: '0 0 16px', fontSize: 17,
              color: 'var(--fg-soft)', lineHeight: 1.6,
            }}>
              Sappiamo esattamente cosa significa trovarsi alle sette di sera con
              dieci schede aperte sul computer, la stanchezza addosso e un cliente
              importante che aspetta una risposta da ieri.
            </p>
            <p style={{
              margin: '0 0 16px', fontSize: 17,
              color: 'var(--fg-soft)', lineHeight: 1.6,
            }}>
              Il nostro metodo si riassume in due mosse: <strong style={{ color: 'var(--fg)', fontWeight: 700 }}>prima ascoltiamo, poi costruiamo</strong>.
            </p>
            <p style={{
              margin: '0 0 32px', fontSize: 17,
              color: 'var(--fg-soft)', lineHeight: 1.6,
            }}>
              Non ti vendiamo un software preconfezionato da installare e dimenticare.
              Ti offriamo una partnership: studiamo come lavori, creiamo la soluzione
              su misura per te e restiamo al tuo fianco nel tempo per mantenerla,
              modificarla e aggiornarla. <em style={{ color: 'var(--fg)', fontStyle: 'italic' }}>Noi gestiamo la tecnologia, tu torni a guidare la tua azienda.</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, non dieci app',
    desc: <>Niente abbonamenti a tool diversi per email, chat, calendario, CRM. Tutto vive in <strong style={{ color: 'var(--fg)', fontWeight: 700 }}>un'unica integrazione AI</strong> costruita per te. <strong style={{ color: 'var(--fg)', fontWeight: 700 }}>Una sola dashboard, una sola bolletta.</strong></>,
  },
  {
    icon: '🔌',
    title: 'Non cambi quello che usi già',
    desc: <>Ci innestiamo sopra <strong style={{ color: 'var(--fg)', fontWeight: 700 }}>Gmail, WhatsApp, Excel, il tuo gestionale e il tuo calendario</strong>. <strong style={{ color: 'var(--fg)', fontWeight: 700 }}>Non ti chiediamo di migrare niente</strong>, né di imparare nuovi software.</>,
  },
  {
    icon: '✂️',
    title: "L'AI si adatta a te, non viceversa",
    desc: <>Niente template preconfezionati né flussi standard. Studiamo come lavori e <strong style={{ color: 'var(--fg)', fontWeight: 700 }}>cuciamo il sistema sul tuo modo di lavorare</strong>. <strong style={{ color: 'var(--fg)', fontWeight: 700 }}>Lo strumento si piega all'azienda, non il contrario.</strong></>,
  },
  {
    icon: '👋',
    title: 'Persone vere, non un ticket',
    desc: <>Parli sempre con chi ha costruito il tuo sistema. Niente call center, niente form di assistenza: <strong style={{ color: 'var(--fg)', fontWeight: 700 }}>WhatsApp diretto, risposta entro 24h, modifiche illimitate.</strong></>,
  },
  {
    icon: '🇮🇹',
    title: 'Pensata per la tua azienda',
    desc: <>Stesso fuso, stessa lingua, stessi clienti tipo. Conosciamo <strong style={{ color: 'var(--fg)', fontWeight: 700 }}>come si comunica qui</strong>, quali strumenti girano negli uffici italiani e cosa chiede davvero la <strong style={{ color: 'var(--fg)', fontWeight: 700 }}>GDPR</strong>.</>,
  },
  {
    icon: '🛟',
    title: 'Restiamo con te dopo il lancio',
    desc: <>Il canone copre <strong style={{ color: 'var(--fg)', fontWeight: 700 }}>manutenzione, aggiornamenti e modifiche per sempre</strong>. Quando cambia un processo o un listino, lo cambiamo insieme. <strong style={{ color: 'var(--fg)', fontWeight: 700 }}>Non spariamo dopo la fattura.</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="Perché Solvera"
          title={<>Cosa ci rende diversi.{' '}<br /><span style={{
            background: 'linear-gradient(120deg, var(--accent) 0%, var(--accent-deep) 100%)',
            WebkitBackgroundClip: 'text',
            WebkitTextFillColor: 'transparent',
            backgroundClip: 'text',
          }}>Sei motivi concreti, non slogan.</span></>}
          lede="Le agenzie ti vendono software. Noi costruiamo un sistema cucito sulla tua azienda — e ti restiamo accanto per 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',
          }}>
            In una frase: <strong style={{ color: 'var(--fg)', fontWeight: 700 }}>noi gestiamo la tecnologia, tu torni a guidare la tua azienda.</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: 'Marco R.',
    role: 'Titolare',
    business: 'Studio commercialista',
    place: 'Brescia',
    since: 'Cliente da 8 mesi',
    color: '#2a5cf5',
    quote: "L'estate scorsa ho perso un cliente da 6.000€ all'anno perché non avevo risposto a un'email arrivata di sabato. Quel lunedì ho chiamato Solvera. Tre settimane dopo, ogni richiesta aveva una risposta entro 5 minuti — anche di domenica. Non mi è più capitato.",
    before: { v: '15+', label: 'email/sett. senza risposta' },
    after: { v: '0', label: 'email senza risposta' },
  },
  {
    name: 'Alessia V.',
    role: 'Titolare',
    business: 'Centro estetico',
    place: 'Torino',
    since: 'Cliente da 11 mesi',
    color: '#d6388b',
    quote: 'Su WhatsApp arrivano richieste a tutte le ore — molte la sera, quando io ho già chiuso. Prima rispondevo a colazione, e nel frattempo alcune clienti avevano già prenotato altrove. Da quando il sistema risponde subito e propone gli slot liberi, ho 6-7 appuntamenti in più ogni settimana.',
    before: { v: '80', label: 'appuntamenti / mese' },
    after: { v: '110', label: 'appuntamenti / mese' },
  },
  {
    name: 'Giuseppe T.',
    role: 'Titolare',
    business: 'Officina meccanica',
    place: 'Bergamo',
    since: 'Cliente da 6 mesi',
    color: '#14a263',
    quote: "Pensavo l'AI fosse roba da multinazionali. Ho fatto la chiamata per curiosità. In 20 giorni mi hanno tolto due ore al giorno di amministrazione: preventivi, conferme, follow-up. In quattro persone, è come averne uno in più — senza assumere.",
    before: { v: '10h', label: 'amministrazione/sett.' },
    after: { v: '2h', label: 'amministrazione/sett.' },
  },
];

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="Cosa dicono i clienti"
          title={<>Risultati misurabili.{' '}<br /><span style={{
            background: 'linear-gradient(120deg, var(--accent) 0%, var(--accent-deep) 100%)',
            WebkitBackgroundClip: 'text',
            WebkitTextFillColor: 'transparent',
            backgroundClip: 'text',
          }}>Case study di tre aziende italiane.</span></>}
          lede="Zero giri di parole. Solo fatti concreti: cosa è cambiato davvero nelle loro settimane, con i dati prima e dopo."
        />

        {/* 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="su 5 — soddisfazione media" stars />
          <TrustDivider />
          <TrustItem v="32" l="aziende italiane attive" />
          <TrustDivider />
          <TrustItem v="96%" l="rinnova dopo 6 mesi" />
        </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: 'Siete un\'agenzia o un software?', a: 'Un\'agenzia. Non c\'è niente da scaricare, niente da imparare, nessuna piattaforma da aprire. Ci porti il problema, noi lo risolviamo con l\'AI. Ti seguiamo prima, durante e dopo — il sistema rimane sempre nostra responsabilità.' },
  { q: 'Devo essere bravo con la tecnologia?', a: 'No. Se sai usare WhatsApp e l\'email, basta. L\'AI gira sui tuoi strumenti attuali e la gestiamo noi — non devi imparare niente di nuovo, non c\'è una piattaforma da aprire ogni giorno.' },
  { q: 'Quanto tempo serve per partire?', a: 'Dalla prima chiamata al primo flusso attivo: 2-3 settimane. Le automazioni più complesse arrivano nel mese successivo. Niente progetti da sei mesi.' },
  { q: 'E se l\'AI sbaglia una risposta importante?', a: 'Ogni automazione ha soglie di sicurezza: sotto una certa soglia il sistema non risponde, ti notifica e basta. Tu decidi cosa è troppo delicato per essere automatizzato.' },
  { q: 'I dati dei miei clienti sono al sicuro?', a: 'Usiamo provider con server in Europa, conformità GDPR e contratti di trattamento dati. I tuoi dati non vengono usati per addestrare modelli di AI. Mettiamo tutto nero su bianco.' },
  { q: 'Devo cambiare i miei strumenti?', a: 'No. Costruiamo sopra Gmail, WhatsApp Business, Excel, il tuo CRM, il tuo gestionale. Se hai uno strumento, ci colleghiamo. Non vendiamo software.' },
  { q: 'Quanto costa?', a: 'Setup una tantum + canone mensile. Il prezzo dipende da quante automazioni costruiamo per te — ne parliamo nella prima chiamata di 30 minuti. Non vendiamo pacchetti standard, quindi non c\'è un listino: ti facciamo una proposta solo dopo averti ascoltato.' },
  { q: 'E dopo? Chi mantiene tutto?', a: 'Noi. Il canone mensile copre manutenzione, aggiornamenti, modifiche illimitate. Tu non devi imparare niente di tecnico — è un servizio continuativo, non un software che ti consegniamo e ciao.' },
  { q: 'Cosa serve da parte mia?', a: '30 minuti per la prima chiamata, poi 1-2 ore distribuite nelle prime settimane per farci vedere come lavori oggi. Dopo: zero impegno settimanale. Lavoriamo noi, ti tieni aggiornato con un report settimanale.' },
];

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 }}>Domande frequenti</Eyebrow>
            <h2 style={{
              margin: '0 0 20px',
              fontSize: 'clamp(28px, 3.4vw, 40px)',
              fontWeight: 700, letterSpacing: '-0.025em', lineHeight: 1.1,
            }}>Le domande che ci fate più spesso.</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',
                  }}>Assistente AI · Online</div>
                </div>
              </div>

              <p style={{
                margin: '0 0 16px', fontSize: 14,
                color: 'var(--fg-soft)', lineHeight: 1.55,
                position: 'relative',
              }}>
                Hai altre domande prima di prenotare la chiamata?
                Parla con <strong style={{ color: 'var(--fg)', fontWeight: 700 }}>Solvy</strong>, il nostro assistente.
                Risponde subito, anche di notte.
              </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 });