// SR SOFT — Section components: About, Services, WhyUs, Method,
// Solutions, Technologies, ConsultingApproach, FinalCTA, Footer.

// ── About (Chi siamo) ───────────────────────────────────────────
function About() {
  return (
    <section id="chi-siamo" data-screen-label="02 Chi siamo">
      <div className="container">
        <div className="about-grid">
          <div className="reveal">
            <div className="eyebrow" style={{ marginBottom: 28 }}>
              <span>Chi siamo</span>
            </div>
            <h2 className="h-section">
              Un partner tecnologico, non un semplice fornitore.
            </h2>
            <p className="lead" style={{ marginTop: 28 }}>
              SR SOFT è un'azienda di consulenza informatica e sviluppo software
              che aiuta le imprese a trasformare esigenze operative, processi
              interni e idee digitali in soluzioni concrete, scalabili e
              mantenibili nel tempo.
            </p>
            <p className="lead" style={{ marginTop: 14 }}>
              Lavoriamo al fianco del cliente: ascoltiamo, analizziamo, progettiamo
              e costruiamo — poi restiamo a supportare l'evoluzione della
              soluzione.
            </p>
          </div>

          <div className="about-stats reveal" style={{ "--delay": "150ms" }}>
            <div className="about-stat">
              <div className="v"><em><AnimatedCounter to={100} suffix="%" /></em></div>
              <div className="l">Soluzioni su misura</div>
            </div>
            <div className="about-stat">
              <div className="v"><AnimatedCounter to={12} suffix="+" /></div>
              <div className="l">Tecnologie nel nostro stack</div>
            </div>
            <div className="about-stat">
              <div className="v">B2B</div>
              <div className="l">Focus su aziende strutturate</div>
            </div>
            <div className="about-stat">
              <div className="v">∞</div>
              <div className="l">Supporto evolutivo continuo</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ── Services (Cosa facciamo) ────────────────────────────────────
const SERVICES = [
  { t: "Consulenza informatica",   d: "Affianchiamo le aziende nelle scelte tecnologiche, definendo la direzione digitale corretta.", i: "consult" },
  { t: "Analisi dei processi",     d: "Mappiamo flussi, ruoli e criticità per individuare dove la digitalizzazione genera valore reale.", i: "analyze" },
  { t: "Software su misura",       d: "Progettiamo e sviluppiamo applicazioni costruite intorno al modo in cui lavora la tua azienda.", i: "code" },
  { t: "Gestionali aziendali",     d: "Sistemi gestionali personalizzati che centralizzano dati, attività e responsabilità in un unico strumento.", i: "grid" },
  { t: "CRM & ERP personalizzati", d: "CRM e ERP cuciti sui processi reali: niente moduli inutili, solo le funzioni che servono.", i: "layers" },
  { t: "Web app",                  d: "Piattaforme web moderne, sicure e performanti, accessibili da ovunque e progettate per scalare.", i: "globe" },
  { t: "Mobile app",               d: "App native e cross-platform pensate per l'uso quotidiano sul campo, in produzione o in mobilità.", i: "phone" },
  { t: "API & integrazioni",       d: "Colleghiamo software esistenti, gestionali, e-commerce e servizi esterni in flussi coerenti.", i: "plug" },
  { t: "Automazioni",              d: "Automatizziamo attività ripetitive e flussi documentali per liberare tempo e ridurre errori.", i: "spark" },
  { t: "Dashboard & KPI",          d: "Cruscotti operativi e direzionali per tenere sotto controllo dati, performance e processi.", i: "chart" },
  { t: "Gestione documentale",     d: "Archivi digitali strutturati, ricercabili, sicuri e integrati con il resto del sistema aziendale.", i: "doc" },
  { t: "Manutenzione evolutiva",   d: "Manteniamo, aggiorniamo ed evolviamo le soluzioni nel tempo, in linea con la crescita aziendale.", i: "wrench" },
];

function Services() {
  return (
    <section id="servizi" data-screen-label="03 Servizi">
      <div className="container">
        <div className="section-head row reveal">
          <div>
            <div className="eyebrow" style={{ marginBottom: 22 }}>
              <span>Cosa facciamo</span>
            </div>
            <h2 className="h-section">
              Dodici servizi, una sola logica: <br/>
              <span style={{ color: "var(--text-muted)" }}>capire prima, costruire poi.</span>
            </h2>
          </div>
          <p className="lead">
            Dalla consulenza iniziale al supporto continuativo, copriamo l'intero
            ciclo di vita di una soluzione digitale aziendale.
          </p>
        </div>

        <div className="svc-grid">
          {SERVICES.map((s, i) => (
            <ServiceCard key={s.t} index={i} {...s} />
          ))}
        </div>
      </div>
    </section>
  );
}

function ServiceCard({ t, d, i, index }) {
  const ref = React.useRef(null);
  const onMove = (e) => {
    if (!ref.current) return;
    const r = ref.current.getBoundingClientRect();
    ref.current.style.setProperty("--mx", `${e.clientX - r.left}px`);
    ref.current.style.setProperty("--my", `${e.clientY - r.top}px`);
  };
  return (
    <div
      ref={ref}
      onMouseMove={onMove}
      className="svc-card reveal"
      style={{ "--delay": `${(index % 3) * 60}ms` }}
    >
      <div className="svc-num">{String(index + 1).padStart(2, "0")}</div>
      <div className="svc-icon"><Icon name={i} /></div>
      <h3 className="h-card">{t}</h3>
      <p className="svc-desc">{d}</p>
      <div className="svc-arrow">
        <svg width="18" height="18" viewBox="0 0 16 16" fill="none">
          <path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
        </svg>
      </div>
    </div>
  );
}

// ── Why us ──────────────────────────────────────────────────────
const WHY = [
  { t: "Approccio consulenziale", d: "Capiamo l'azienda prima di scrivere codice. Senza analisi non c'è soluzione duratura." },
  { t: "Processi reali, non template", d: "Non riadattiamo software preconfezionati: progettiamo intorno al tuo modo di lavorare." },
  { t: "Architetture scalabili", d: "Sistemi pensati per crescere: codice pulito, modularità, manutenibilità a lungo termine." },
  { t: "Integrazione con l'esistente", d: "Colleghiamo i nuovi sistemi a software, gestionali e dati già presenti in azienda." },
  { t: "Supporto nel tempo", d: "Restiamo a disposizione per evolvere la soluzione e accompagnare la crescita aziendale." },
  { t: "Comunicazione diretta", d: "Un rapporto trasparente, senza intermediari: contatto diretto con chi progetta e sviluppa." },
];

function WhyUs() {
  return (
    <section data-screen-label="04 Perché SR SOFT">
      <div className="container">
        <div className="section-head row reveal">
          <div>
            <div className="eyebrow" style={{ marginBottom: 22 }}>
              <span>Perché SR SOFT</span>
            </div>
            <h2 className="h-section">
              Sei ragioni per sceglierci come partner digitale.
            </h2>
          </div>
          <p className="lead">
            Non vendiamo licenze: progettiamo sistemi che lavorano per la tua
            azienda, oggi e nei prossimi anni.
          </p>
        </div>

        <div className="why-list">
          {WHY.map((w, i) => (
            <div key={w.t} className="why-item reveal" style={{ "--delay": `${(i % 2) * 80}ms` }}>
              <div className="why-num">/ {String(i + 1).padStart(2, "0")}</div>
              <div className="why-body">
                <h4>{w.t}</h4>
                <p>{w.d}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── Method ──────────────────────────────────────────────────────
const STEPS = [
  { t: "Analisi",       d: "Studiamo esigenze, flussi operativi, criticità e obiettivi aziendali." },
  { t: "Progettazione", d: "Definiamo architettura, funzionalità, interfacce e priorità del progetto." },
  { t: "Sviluppo",      d: "Realizziamo la soluzione con tecnologie moderne, codice pulito e componenti scalabili." },
  { t: "Integrazione",  d: "Colleghiamo il sistema con software, API, database e strumenti già presenti in azienda." },
  { t: "Test & rilascio", d: "Verifichiamo stabilità, usabilità, sicurezza e corretto funzionamento prima della messa online." },
  { t: "Evoluzione",    d: "Manteniamo, miglioriamo e facciamo crescere la soluzione nel tempo." },
];

function Method() {
  return (
    <section id="metodo" data-screen-label="05 Metodo">
      <div className="container">
        <div className="section-head row reveal">
          <div>
            <div className="eyebrow" style={{ marginBottom: 22 }}>
              <span>Metodo</span>
            </div>
            <h2 className="h-section">
              Sei step, un percorso lineare dall'idea alla messa in produzione.
            </h2>
          </div>
          <p className="lead">
            Ogni progetto attraversa le stesse fasi. Cambiano contenuto e
            complessità — non il rigore.
          </p>
        </div>

        <div className="method-process">
          {STEPS.map((s, i) => (
            <div key={s.t} className="method-node reveal" style={{ "--delay": `${i * 70}ms` }}>
              <div className="method-node-badge">
                <span>{String(i + 1).padStart(2, "0")}</span>
              </div>
              <div className="method-node-content">
                <h4>{s.t}</h4>
                <p>{s.d}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── Solutions ───────────────────────────────────────────────────
const SOLUTIONS = [
  { t: "Gestionale commesse", k: "01", w: "w-7", v: "kanban" },
  { t: "CRM commerciale", k: "02", w: "w-5", v: "pipeline" },
  { t: "Sistema documentale", k: "03", w: "w-4", v: "files" },
  { t: "App QR scan", k: "04", w: "w-4", v: "qr" },
  { t: "Dashboard KPI", k: "05", w: "w-4", v: "kpi" },
  { t: "Portale clienti", k: "06", w: "w-5", v: "portal" },
  { t: "Integrazioni esterne", k: "07", w: "w-3", v: "plug" },
  { t: "Automazione flussi", k: "08", w: "w-4", v: "flow" },
  { t: "Gestione magazzino", k: "09", w: "w-4", v: "stock" },
  { t: "Controllo accessi", k: "10", w: "w-4", v: "lock" },
  { t: "Piattaforma B2B", k: "11", w: "w-8", v: "b2b" },
];

function Solutions() {
  return (
    <section id="soluzioni" data-screen-label="06 Soluzioni">
      <div className="container">
        <div className="section-head row reveal">
          <div>
            <div className="eyebrow" style={{ marginBottom: 22 }}>
              <span>Soluzioni</span>
            </div>
            <h2 className="h-section">
              Esempi di sistemi digitali che possiamo costruire per te.
            </h2>
          </div>
          <p className="lead">
            Niente casi studio inventati: una mappa concreta di ciò che siamo in
            grado di realizzare quando ascoltiamo le esigenze di un cliente.
          </p>
        </div>

        <div className="sol-grid">
          {SOLUTIONS.map((s, i) => (
            <div key={s.t} className={"sol-card reveal " + s.w} style={{ "--delay": `${(i % 3) * 80}ms` }}>
              <div>
                <div className="tag">SOL · {s.k}</div>
                <h4 style={{ marginTop: 10 }}>{s.t}</h4>
              </div>
              <SolutionVisual kind={s.v} />
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function SolutionVisual({ kind }) {
  const stroke = "var(--accent)";
  const muted = "rgba(255,255,255,0.18)";
  switch (kind) {
    case "kanban":
      return (
        <svg viewBox="0 0 220 80" className="sol-visual" preserveAspectRatio="none">
          {[0,1,2].map((c) => (
            <g key={c} transform={`translate(${c*74},0)`}>
              <rect x="2" y="2" width="68" height="76" rx="6" fill="none" stroke={muted} />
              <rect x="8" y="10" width="56" height="10" rx="3" fill={c===1?stroke:muted} opacity={c===1?0.5:0.6}/>
              <rect x="8" y="26" width="56" height="10" rx="3" fill={muted} opacity="0.4"/>
              <rect x="8" y="42" width="40" height="10" rx="3" fill={muted} opacity="0.4"/>
            </g>
          ))}
        </svg>
      );
    case "pipeline":
      return (
        <svg viewBox="0 0 220 80" className="sol-visual" preserveAspectRatio="none">
          <path d="M 4 40 Q 60 4 110 40 T 216 40" stroke={stroke} fill="none" strokeWidth="1.4"/>
          {[20,75,135,195].map((cx,i)=>(<circle key={i} cx={cx} cy={i%2?54:26} r="5" fill="var(--bg)" stroke={stroke}/>))}
        </svg>
      );
    case "files":
      return (
        <svg viewBox="0 0 220 80" className="sol-visual" preserveAspectRatio="none">
          {[0,1,2].map(i=>(
            <rect key={i} x={20+i*8} y={14+i*8} width="120" height="50" rx="4" fill="none" stroke={i===2?stroke:muted}/>
          ))}
          <line x1="44" y1="36" x2="124" y2="36" stroke={stroke} strokeWidth="1"/>
          <line x1="44" y1="46" x2="104" y2="46" stroke={muted}/>
          <line x1="44" y1="54" x2="114" y2="54" stroke={muted}/>
        </svg>
      );
    case "qr":
      return (
        <svg viewBox="0 0 220 80" className="sol-visual" preserveAspectRatio="none">
          <g transform="translate(80,8)">
            {Array.from({length: 36}).map((_,k)=>{
              const x = (k%6)*10, y = Math.floor(k/6)*10;
              const on = [0,1,2,5,6,8,12,13,14,15,17,19,22,23,25,28,30,31,33,35].includes(k);
              return <rect key={k} x={x} y={y} width="8" height="8" fill={on?stroke:"transparent"} stroke={on?"none":muted}/>;
            })}
          </g>
          <rect x="40" y="20" width="2" height="14" fill={stroke}/>
          <rect x="170" y="48" width="2" height="14" fill={stroke}/>
        </svg>
      );
    case "kpi":
      return (
        <svg viewBox="0 0 220 80" className="sol-visual" preserveAspectRatio="none">
          {[10,40,70,100,130,160,190].map((x,i)=>{
            const h = 12 + ((i*37)%48);
            return <rect key={i} x={x} y={70-h} width="14" height={h} rx="2" fill={i===4?stroke:muted}/>;
          })}
        </svg>
      );
    case "portal":
      return (
        <svg viewBox="0 0 220 80" className="sol-visual" preserveAspectRatio="none">
          <rect x="6" y="6" width="208" height="68" rx="6" fill="none" stroke={muted}/>
          <rect x="6" y="6" width="208" height="14" rx="6" fill="rgba(255,255,255,0.04)"/>
          <circle cx="16" cy="13" r="2.5" fill={stroke}/>
          <rect x="14" y="34" width="60" height="32" rx="4" fill="none" stroke={muted}/>
          <rect x="82" y="34" width="60" height="32" rx="4" fill="none" stroke={stroke}/>
          <rect x="150" y="34" width="60" height="32" rx="4" fill="none" stroke={muted}/>
        </svg>
      );
    case "plug":
      return (
        <svg viewBox="0 0 220 80" className="sol-visual" preserveAspectRatio="none">
          <circle cx="48" cy="40" r="18" fill="none" stroke={muted}/>
          <circle cx="172" cy="40" r="18" fill="none" stroke={stroke}/>
          <line x1="66" y1="40" x2="154" y2="40" stroke={stroke} strokeWidth="1.4" strokeDasharray="3 3"/>
        </svg>
      );
    case "flow":
      return (
        <svg viewBox="0 0 220 80" className="sol-visual" preserveAspectRatio="none">
          {[24, 84, 144].map((x,i)=>(<rect key={i} x={x} y="30" width="48" height="20" rx="3" fill="none" stroke={i===1?stroke:muted}/>))}
          <line x1="72" y1="40" x2="84" y2="40" stroke={stroke}/>
          <line x1="132" y1="40" x2="144" y2="40" stroke={stroke}/>
          <path d="M 192 40 Q 212 40 212 60 L 212 64" stroke={stroke} fill="none"/>
        </svg>
      );
    case "stock":
      return (
        <svg viewBox="0 0 220 80" className="sol-visual" preserveAspectRatio="none">
          {Array.from({length: 6}).map((_,i)=>(
            <rect key={i} x={20+i*30} y={70-(20+(i%3)*14)} width="22" height={20+(i%3)*14} rx="2" fill="none" stroke={i%3===0?stroke:muted}/>
          ))}
        </svg>
      );
    case "lock":
      return (
        <svg viewBox="0 0 220 80" className="sol-visual" preserveAspectRatio="none">
          <rect x="86" y="34" width="48" height="36" rx="4" fill="none" stroke={stroke}/>
          <path d="M 96 34 V 24 a 14 14 0 0 1 28 0 V 34" fill="none" stroke={muted}/>
          <circle cx="110" cy="52" r="3" fill={stroke}/>
        </svg>
      );
    case "b2b":
      return (
        <svg viewBox="0 0 320 80" className="sol-visual" preserveAspectRatio="none">
          {Array.from({length: 12}).map((_,i)=>{
            const x = 10 + (i%6)*52, y = 12 + Math.floor(i/6)*32;
            return <rect key={i} x={x} y={y} width="42" height="22" rx="3" fill="none" stroke={[2,4,7].includes(i)?stroke:muted}/>;
          })}
        </svg>
      );
    default: return null;
  }
}

// ── Technologies ────────────────────────────────────────────────
const TECHS = [
  { n: "Next.js",    di: "devicon-nextjs-plain" },
  { n: "React",      di: "devicon-react-original" },
  { n: "TypeScript", di: "devicon-typescript-plain" },
  { n: "Java",       di: "devicon-java-plain" },
  { n: "Spring Boot",di: "devicon-spring-plain" },
  { n: "PostgreSQL", di: "devicon-postgresql-plain" },
  { n: "REST API",   i: "tech-api" },
  { n: "Docker",     di: "devicon-docker-plain" },
  { n: "Cloud",      i: "tech-cloud" },
  { n: "Mobile",     i: "tech-mobile" },
  { n: "Node.js",    di: "devicon-nodejs-plain" },
  { n: "CI/CD",      i: "tech-ci" },
];

function TechIcon({ item, size = 20 }) {
  if (item.di) return <i className={item.di} style={{ fontSize: size }} />;
  return <Icon name={item.i} size={size} />;
}

function Technologies() {
  return (
    <section id="tecnologie" data-screen-label="07 Tecnologie">
      <div className="container">
        <div className="tech-wrap">
          <div className="reveal">
            <div className="eyebrow" style={{ marginBottom: 22 }}>
              <span>Tecnologie</span>
            </div>
            <h2 className="h-section">
              Uno stack moderno per costruire prodotti affidabili.
            </h2>
            <p className="lead" style={{ marginTop: 24 }}>
              Utilizziamo tecnologie moderne e mature per costruire soluzioni
              solide, scalabili e pronte a evolvere insieme all'azienda. Niente
              tecnologie di moda — solo strumenti che reggono in produzione.
            </p>
          </div>
          <div className="tech-grid reveal" style={{ "--delay": "150ms" }}>
            {TECHS.map((tc) => (
              <div key={tc.n} className="tech-cell">
                <TechIcon item={tc} />
                <span>{tc.n}</span>
              </div>
            ))}
          </div>
        </div>
        <div className="reveal" style={{ marginTop: 60 }}>
          <TechMarquee items={TECHS} />
        </div>
      </div>
    </section>
  );
}

// ── Consulting Approach ─────────────────────────────────────────
const CONSULT_POINTS = [
  { t: "Analisi dei processi esistenti", d: "Capiamo come lavora davvero l'azienda, prima di proporre qualsiasi soluzione.", i: "analyze" },
  { t: "Inefficienze e attività ripetitive", d: "Individuiamo le aree dove la tecnologia genera risparmio di tempo concreto.", i: "spark" },
  { t: "Soluzioni sostenibili", d: "Proponiamo strumenti proporzionati: niente over-engineering, niente scorciatoie.", i: "layers" },
  { t: "Scelta tecnologica corretta", d: "Selezioniamo lo stack giusto per il contesto, le persone e gli obiettivi aziendali.", i: "code" },
];

function ConsultingApproach() {
  return (
    <section data-screen-label="08 Approccio consulenziale">
      <div className="container">
        <div className="consult reveal">
          <div>
            <div className="eyebrow" style={{ marginBottom: 22 }}>
              <span>Approccio consulenziale</span>
            </div>
            <h2 className="h-section">
              Prima di scrivere codice, capiamo come lavora la tua azienda.
            </h2>
            <p className="lead" style={{ marginTop: 24 }}>
              Lo sviluppo software senza analisi è una scommessa.
              Studiare il contesto, le persone e i flussi prima di progettare è
              ciò che distingue una soluzione che funziona da una che resta nei
              cassetti.
            </p>
          </div>
          <div className="consult-points">
            {CONSULT_POINTS.map((p, i) => (
              <div key={p.t} className="consult-point reveal" style={{ "--delay": `${i * 80}ms` }}>
                <div className="ic"><Icon name={p.i} size={16} /></div>
                <div className="tx">
                  <h5>{p.t}</h5>
                  <p>{p.d}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ── Final CTA ───────────────────────────────────────────────────
function FinalCTA() {
  const [status, setStatus] = React.useState('idle');
  const [errMsg, setErrMsg]  = React.useState('');
  const [fields, setFields]  = React.useState({
    nome: '', azienda: '', email: '', telefono: '', tipo: '', messaggio: ''
  });

  const set = k => e => setFields(f => ({ ...f, [k]: e.target.value }));

  async function handleSubmit(e) {
    e.preventDefault();
    setStatus('sending');
    setErrMsg('');
    try {
      const res  = await fetch('/api/contact', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(fields),
      });
      const data = await res.json();
      if (!res.ok) throw new Error(data.error || 'Errore sconosciuto.');
      setStatus('success');
    } catch (err) {
      setErrMsg(err.message);
      setStatus('error');
    }
  }

  return (
    <section id="contatti" data-screen-label="09 Contatti">
      <div className="container">
        <div className="cta reveal">
          <div className="cta-grid"></div>
          <div className="cta-inner">
            <div className="eyebrow"><span>Iniziamo</span></div>
            <h2 className="h-section">
              Hai un processo da digitalizzare o un'idea da trasformare in software?
            </h2>
            <p className="lead">
              Parliamone. Analizziamo le tue esigenze e costruiamo una soluzione
              digitale su misura per la tua azienda.
            </p>

            {status === 'success' ? (
              <div className="cf-success">
                <svg width="44" height="44" viewBox="0 0 44 44" fill="none">
                  <circle cx="22" cy="22" r="21" stroke="var(--accent)" strokeWidth="1.5"/>
                  <path d="M13 22l7 7 11-14" stroke="var(--accent)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                </svg>
                <p>Messaggio ricevuto.<br/>Ti risponderemo al più presto.</p>
              </div>
            ) : (
              <form className="contact-form" onSubmit={handleSubmit} noValidate>
                <div className="cf-row">
                  <div className="cf-field">
                    <label>Nome <span className="cf-req">*</span></label>
                    <input type="text" value={fields.nome} onChange={set('nome')}
                      placeholder="Mario Rossi" required disabled={status === 'sending'} />
                  </div>
                  <div className="cf-field">
                    <label>Azienda</label>
                    <input type="text" value={fields.azienda} onChange={set('azienda')}
                      placeholder="Acme S.r.l." disabled={status === 'sending'} />
                  </div>
                </div>
                <div className="cf-row">
                  <div className="cf-field">
                    <label>Email <span className="cf-req">*</span></label>
                    <input type="email" value={fields.email} onChange={set('email')}
                      placeholder="mario@azienda.it" required disabled={status === 'sending'} />
                  </div>
                  <div className="cf-field">
                    <label>Telefono</label>
                    <input type="tel" value={fields.telefono} onChange={set('telefono')}
                      placeholder="+39 333 000 0000" disabled={status === 'sending'} />
                  </div>
                </div>
                <div className="cf-field">
                  <label>Tipo di progetto</label>
                  <select value={fields.tipo} onChange={set('tipo')} disabled={status === 'sending'}>
                    <option value="">Seleziona...</option>
                    <option>Web app</option>
                    <option>Mobile app</option>
                    <option>Consulenza informatica</option>
                    <option>Gestionale / ERP</option>
                    <option>Integrazione API</option>
                    <option>Altro</option>
                  </select>
                </div>
                <div className="cf-field">
                  <label>Messaggio <span className="cf-req">*</span></label>
                  <textarea value={fields.messaggio} onChange={set('messaggio')} rows={5}
                    placeholder="Descrivici brevemente il processo o l'idea che vorresti digitalizzare..."
                    required disabled={status === 'sending'} />
                </div>
                {status === 'error' && <p className="cf-error">{errMsg}</p>}
                <button type="submit" className="btn" disabled={status === 'sending'}>
                  {status === 'sending' ? 'Invio in corso…' : 'Invia messaggio'}
                  {status !== 'sending' && <Arrow />}
                </button>
              </form>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

// ── Footer ──────────────────────────────────────────────────────
function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-top">
          <div className="footer-col footer-brand">
            <div style={{ marginBottom: 18, lineHeight: 0 }}>
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 420 100" height="60" role="img" aria-label="SR SOFT">
                <g fill="none" stroke="#e94f37" strokeWidth="13" strokeLinecap="square" strokeLinejoin="miter">
                  <path d="M 92 24 L 36 24 C 28 24 22 30 22 38 C 22 46 28 50 36 50 L 64 50 C 72 50 78 56 78 64 C 78 72 72 76 64 76 L 8 76" />
                </g>
                <path d="M 80 10 L 98 24 L 80 38 Z" fill="#e94f37" />
                <path d="M 20 62 L 2 76 L 20 90 Z" fill="#e94f37" />
                <text x="130" y="62" fontFamily="Inter,'Helvetica Neue',Arial,sans-serif" fontSize="44" fontWeight="700" letterSpacing="-1.5" fill="#ffffff">SR SOFT</text>
                <text x="130" y="84" fontFamily="ui-monospace,'Courier New',monospace" fontSize="11" fontWeight="400" letterSpacing="2.4" fill="#ffffff" fillOpacity="0.55">S.R.L.</text>
              </svg>
            </div>
            <p>
              Consulenza informatica e sviluppo software su misura per aziende
              che vogliono digitalizzare, ottimizzare e far evolvere i propri
              processi.
            </p>
          </div>
          <div className="footer-col">
            <h6>Sezioni</h6>
            <ul>
              <li><a href="#home">Home</a></li>
              <li><a href="#servizi">Servizi</a></li>
              <li><a href="#metodo">Metodo</a></li>
              <li><a href="#soluzioni">Soluzioni</a></li>
              <li><a href="#tecnologie">Tecnologie</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h6>Servizi</h6>
            <ul>
              <li><a href="#servizi">Consulenza informatica</a></li>
              <li><a href="#servizi">Software su misura</a></li>
              <li><a href="#servizi">CRM & ERP</a></li>
              <li><a href="#servizi">Web & Mobile</a></li>
              <li><a href="#servizi">Integrazioni API</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h6>Contatti</h6>
            <ul>
              <li><a href="mailto:info@srsoft.it">info@srsoft.it</a></li>
              <li><a href="#contatti">Richiedi un colloquio</a></li>
              <li style={{ color: "var(--text-faint)" }}>Italia · Europa</li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <div>© 2026 SR SOFT — P.IVA 06309260658 · Tutti i diritti riservati</div>
          <div>Made with care · v1.0</div>
        </div>
      </div>
    </footer>
  );
}

// ── Icon set ────────────────────────────────────────────────────
function Icon({ name, size = 20 }) {
  const s = { width: size, height: size, fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" };
  switch (name) {
    case "consult": return (<svg viewBox="0 0 24 24" {...s}><path d="M5 18l4-1 9-9-3-3-9 9-1 4z"/><path d="M14 6l3 3"/></svg>);
    case "analyze": return (<svg viewBox="0 0 24 24" {...s}><circle cx="11" cy="11" r="6"/><path d="M16 16l5 5"/></svg>);
    case "code":    return (<svg viewBox="0 0 24 24" {...s}><path d="M9 8l-5 4 5 4M15 8l5 4-5 4"/></svg>);
    case "grid":    return (<svg viewBox="0 0 24 24" {...s}><rect x="4" y="4" width="7" height="7" rx="1"/><rect x="13" y="4" width="7" height="7" rx="1"/><rect x="4" y="13" width="7" height="7" rx="1"/><rect x="13" y="13" width="7" height="7" rx="1"/></svg>);
    case "layers":  return (<svg viewBox="0 0 24 24" {...s}><path d="M12 3l9 5-9 5-9-5 9-5z"/><path d="M3 13l9 5 9-5"/></svg>);
    case "globe":   return (<svg viewBox="0 0 24 24" {...s}><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18"/></svg>);
    case "phone":   return (<svg viewBox="0 0 24 24" {...s}><rect x="7" y="3" width="10" height="18" rx="2"/><line x1="11" y1="18" x2="13" y2="18"/></svg>);
    case "plug":    return (<svg viewBox="0 0 24 24" {...s}><path d="M9 7V3M15 7V3M7 7h10v5a5 5 0 0 1-10 0V7zM12 17v4"/></svg>);
    case "spark":   return (<svg viewBox="0 0 24 24" {...s}><path d="M13 3L4 14h7l-1 7 9-11h-7l1-7z"/></svg>);
    case "chart":   return (<svg viewBox="0 0 24 24" {...s}><path d="M4 20V10M10 20V4M16 20v-8M22 20H2"/></svg>);
    case "doc":     return (<svg viewBox="0 0 24 24" {...s}><path d="M7 3h8l5 5v13H7V3z"/><path d="M15 3v5h5M10 13h7M10 17h7"/></svg>);
    case "wrench":  return (<svg viewBox="0 0 24 24" {...s}><path d="M14 7a4 4 0 0 0-5 5l-6 6 2 2 6-6a4 4 0 0 0 5-5l-2 2-2-2 2-2z"/></svg>);
    // tech icons
    case "tech-next":   return (<svg viewBox="0 0 24 24" {...s}><circle cx="12" cy="12" r="9"/><path d="M9 16V8l6 8V8"/></svg>);
    case "tech-react":  return (<svg viewBox="0 0 24 24" {...s}><circle cx="12" cy="12" r="1.6" fill="currentColor"/><ellipse cx="12" cy="12" rx="9" ry="3.5"/><ellipse cx="12" cy="12" rx="9" ry="3.5" transform="rotate(60 12 12)"/><ellipse cx="12" cy="12" rx="9" ry="3.5" transform="rotate(120 12 12)"/></svg>);
    case "tech-ts":     return (<svg viewBox="0 0 24 24" {...s}><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M8 11h6M11 11v6M15 16c0 .8.9 1.5 2 1.5s2-.7 2-1.5-1-1.2-2-1.5-2-.7-2-1.5.9-1.5 2-1.5 2 .7 2 1.5"/></svg>);
    case "tech-java":   return (<svg viewBox="0 0 24 24" {...s}><path d="M7 17c2 2 8 2 10 0M8 14c2 1 6 1 8 0M9 11c1 0 5 0 6 0M10 6c1 1 1 2-1 3M13 4c1 1 1 3-1 4"/></svg>);
    case "tech-spring": return (<svg viewBox="0 0 24 24" {...s}><path d="M20 6C14 4 6 7 4 17c4-2 9-5 16-11z"/><circle cx="19.5" cy="6.5" r="1.5" fill="currentColor" stroke="none"/></svg>);
    case "tech-pg":     return (<svg viewBox="0 0 24 24" {...s}><ellipse cx="12" cy="6" rx="8" ry="3"/><path d="M4 6v6c0 1.7 3.6 3 8 3s8-1.3 8-3V6"/><path d="M4 12v6c0 1.7 3.6 3 8 3s8-1.3 8-3v-6"/></svg>);
    case "tech-api":    return (<svg viewBox="0 0 24 24" {...s}><path d="M4 7h6M4 12h10M4 17h6M14 17l4-5-4-5"/></svg>);
    case "tech-docker": return (<svg viewBox="0 0 24 24" {...s}><rect x="3" y="12" width="3" height="3"/><rect x="7" y="12" width="3" height="3"/><rect x="11" y="12" width="3" height="3"/><rect x="7" y="8" width="3" height="3"/><rect x="11" y="8" width="3" height="3"/><rect x="11" y="4" width="3" height="3"/><path d="M3 16c0 2 3 4 8 4 7 0 11-3 12-7"/></svg>);
    case "tech-cloud":  return (<svg viewBox="0 0 24 24" {...s}><path d="M7 18a4 4 0 0 1-1-8 6 6 0 0 1 12 1 4 4 0 0 1-1 8H7z"/></svg>);
    case "tech-mobile": return (<svg viewBox="0 0 24 24" {...s}><rect x="7" y="2" width="10" height="20" rx="2"/><line x1="11" y1="18" x2="13" y2="18"/></svg>);
    case "tech-node":   return (<svg viewBox="0 0 24 24" {...s}><path d="M12 3l9 5v8l-9 5-9-5V8l9-5z"/></svg>);
    case "tech-ci":     return (<svg viewBox="0 0 24 24" {...s}><circle cx="6" cy="6" r="2"/><circle cx="6" cy="18" r="2"/><circle cx="18" cy="12" r="2"/><path d="M6 8v8M8 6c4 0 8 2 8 6M8 18c4 0 8-2 8-6"/></svg>);
    default: return null;
  }
}

// Export everything to window so app.jsx can use them
Object.assign(window, {
  About, Services, WhyUs, Method, Solutions, Technologies,
  ConsultingApproach, FinalCTA, Footer, Icon, TechIcon
});