// pages-studio.jsx   Servizi, Portfolio, Processo, Stack, Prodotti, Contatti pages

// ═══ SERVIZI ════════════════════════════════════════════════════════════════
function ServiziPage() {
  const services = [
    {
      icon: 'cube',
      eyebrow: '01 · SaaS',
      title: 'Sviluppo SaaS su misura',
      body: [
        "Progettiamo e sviluppiamo piattaforme web complete: dalla landing all'app autenticata, dalla dashboard ai pagamenti.",
        "Architetture multi-tenant pronte per scalare, sicurezza pensata fin dal primo commit.",
      ],
      bullets: [
        'Multi-tenant + ruoli e permessi',
        'Autenticazione (email, magic link, SSO)',
        'Pagamenti & abbonamenti con Stripe',
        'Dashboard amministrativa completa',
        'API REST/GraphQL documentate',
        'Deploy su infrastruttura EU',
      ],
      visual: <ServiziVisual variant="saas"/>,
    },
    {
      icon: 'globe',
      eyebrow: '02 · Web',
      title: 'Siti web & landing premium',
      body: [
        "Siti aziendali, marketing site, landing ad alta conversione. Stile premium di default, performance da test Lighthouse al primo deploy.",
        "Animazioni curate, CMS quando serve, SEO tecnica e contenutistica.",
      ],
      bullets: [
        'Marketing site & corporate',
        'Landing ad alta conversione',
        'CMS headless (Sanity, Payload)',
        'SEO tecnica & Open Graph',
        'Performance Lighthouse 95+',
        'A/B testing su CTA',
      ],
      visual: <ServiziVisual variant="web"/>,
    },
    {
      icon: 'sparkle',
      eyebrow: '03 · AI',
      title: 'Integrazione AI & Agenti',
      body: [
        "Assistenti, agenti vocali, RAG e tool calling su misura per il tuo dominio.",
        "L'AI non è un layer cosmetico: la integriamo dove crea valore reale per gli utenti.",
      ],
      bullets: [
        'Assistenti conversazionali in-app',
        'RAG su documenti aziendali',
        'Agenti che eseguono azioni (tool calling)',
        'Voice realtime con LiveKit',
        'Workflow agentici complessi',
        'Valutazione e monitoraggio output',
      ],
      visual: <ServiziVisual variant="ai"/>,
    },
    {
      icon: 'bolt',
      eyebrow: '04 · Workflow',
      title: 'Automazioni AI & workflow',
      body: [
        "Automatizziamo email, lead, report, processi ripetitivi. Risparmi ore, riduci errori, mantieni il controllo.",
        "Costruiamo automazioni custom oppure orchestriamo strumenti come n8n e Make.",
      ],
      bullets: [
        'Flussi email & nurturing automatico',
        'Sincronizzazione tra CRM, calendar, gestionali',
        'Report generati e inviati su programma',
        'Bot Telegram / WhatsApp per operations',
        'Webhook & event-driven workflows',
        'Monitoring & alerting integrato',
      ],
      visual: <ServiziVisual variant="auto"/>,
    },
    {
      icon: 'layers',
      eyebrow: '05 · CRM',
      title: 'CRM su misura',
      body: [
        "CRM verticali costruiti sulla tua azienda, non sulla media. Pipeline, contatti, automazioni commerciali, integrazione email e WhatsApp.",
        "Vai oltre i CRM generici: la struttura segue il tuo processo, non il contrario.",
      ],
      bullets: [
        'Pipeline & deal stages personalizzati',
        'Anagrafica contatti & aziende',
        'Email tracking & sequenze',
        'Integrazione WhatsApp Business',
        'Calendar & promemoria automatici',
        'Reportistica vendite & forecast',
      ],
      visual: <ServiziVisual variant="crm"/>,
    },
    {
      icon: 'compass',
      eyebrow: '06 · Sprint',
      title: 'Consulenza & MVP rapidi',
      body: [
        "Dall'idea al prototipo funzionante in tempi record. Validi sul mercato prima di investire mesi.",
        "Sprint di 2 6 settimane, output concreto, decisione informata.",
      ],
      bullets: [
        'Discovery + UX in una settimana',
        'MVP funzionante in 4 6 settimane',
        'Code review e advisory tecnica',
        'Affiancamento al team interno',
      ],
      visual: <ServiziVisual variant="mvp"/>,
    },
  ];

  const faqs = [
    ['Quanto costa costruire un SaaS?',
     "Dipende dalla complessità. Un MVP parte da circa 25 40k€, una piattaforma completa multi-tenant si colloca tra 60 e 150k€. Facciamo sempre un preventivo dettagliato dopo la fase di discovery."],
    ['Quanto costa un sito web premium?',
     "Un sito vetrina da 6 a 12k€, un marketing site con CMS da 12 a 25k€, una landing singola da 3 a 6k€. Prezzo chiaro dopo un primo brief."],
    ['Posso farvi gestire solo le automazioni?',
     "Sì. Costruiamo singole automazioni o pacchetti completi (CRM, email, reportistica). Partiamo da un audit dei processi attuali."],
    ['In quanto tempo è pronto?',
     "Un sito 3 6 settimane, un MVP 4 6 settimane, una piattaforma completa 3 5 mesi. Lavoriamo a sprint settimanali, vedi avanzamento ogni 7 giorni."],
    ['Lavorate con startup o solo aziende?',
     "Entrambi. Una fetta importante del nostro lavoro è con PMI italiane che vogliono digitalizzare processi, ma costruiamo MVP per startup pre-seed."],
    ['Dove vengono ospitati i dati?',
     "Hosting in Europa (Vercel, Supabase EU). Tutto GDPR-compliant, niente trasferimenti extra-UE."],
    ['Posso integrare AI in un prodotto esistente?',
     "Sì, è uno dei nostri servizi più richiesti. Auditiamo il prodotto, identifichiamo dove l'AI crea valore, e la integriamo senza riscrivere tutto."],
  ];

  return (
    <>
      <PageHero
        eyebrow="Servizi"
        title={<>Sei modi in cui possiamo <span className="grad-text">costruire insieme</span>.</>}
        sub="Dalla piattaforma SaaS al CRM verticale, dalle automazioni AI al sito vetrina premium: scegli il punto d'ingresso giusto."
        actions={<>
          <a href="contatti.html" className="btn btn-grad btn-lg">Prenota una demo <Icon name="arrow" size={14}/></a>
          <a href="portfolio.html" className="btn btn-outline btn-lg">Vedi i progetti</a>
        </>}
      />

      <ContentSection alt>
        {services.map((s, i) => (
          <DetailRow
            key={i}
            eyebrow={<>{s.eyebrow}</>}
            title={s.title}
            body={s.body}
            bullets={s.bullets}
            visual={s.visual}
            reverse={i % 2 === 1}
          />
        ))}
      </ContentSection>

      <ContentSection>
        <SectionHeader
          eyebrow="Domande frequenti"
          title="Le risposte alle domande che ci fanno più spesso."
        />
        <div className="faq-list">
          {faqs.map(([q, a], i) => (
            <details key={i} className="faq-item mo-reveal" style={{ '--mo-delay': `${i * 50}ms` }}>
              <summary className="faq-summary">{q}</summary>
              <div className="faq-body">{a}</div>
            </details>
          ))}
        </div>
      </ContentSection>

      <CtaBand
        title="Pronto a partire?"
        sub="Raccontaci la tua idea. Quindici minuti, zero impegno."
      />
    </>
  );
}

// Servizi visual cards (abstract)
function ServiziVisual({ variant }) {
  if (variant === 'saas') return (
    <div className="visual-card">
      <div className="visual-card-mesh"></div>
      <div className="visual-card-body">
        <div className="mock" style={{ background: 'transparent' }}>
          <div className="mock-chrome" style={{ borderRadius: 12, background: 'var(--bg)' }}>
            <i></i><i></i><i></i><span>app.tuobrand.it</span>
          </div>
          <div className="mock-body" style={{ marginTop: 8, borderRadius: 12, border: '1px solid var(--border)', background: 'var(--bg)' }}>
            <div className="mock-side">
              <div className="mock-sb-item active"><span></span>Home</div>
              <div className="mock-sb-item"><span></span>Utenti</div>
              <div className="mock-sb-item"><span></span>Billing</div>
              <div className="mock-sb-item"><span></span>API</div>
            </div>
            <div className="mock-main">
              <div className="mock-stat-row">
                <div className="mock-stat"><b>+24%</b><span>MRR</span></div>
                <div className="mock-stat"><b>1.4k</b><span>utenti</span></div>
                <div className="mock-stat mock-stat-accent"><b>99.9</b><span>uptime</span></div>
              </div>
              <div className="mock-chart">
                {[40,60,55,72,68,82,75,88,76,90,84,95].map((v,i)=>(<i key={i} style={{height: v + '%'}}></i>))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
  if (variant === 'ai') return (
    <div className="visual-card">
      <div className="visual-card-mesh"></div>
      <div className="visual-card-body">
        <div className="mock-body-agent" style={{ display: 'flex', flexDirection: 'column', gap: 8, fontFamily: 'Geist Mono, ui-monospace, monospace', fontSize: 11 }}>
          <div className="msg msg-user">Trova i 5 contratti scaduti</div>
          <div className="msg msg-bot">
            <span className="msg-bot-mark"><Icon name="sparkle" size={10}/></span>
            <span>Analizzo i documenti...</span>
          </div>
          <div className="msg msg-tool">
            <div className="tool-row"><span className="tool-tag">tool</span><span className="tool-name">search_documents</span><span className="tool-status">✓</span></div>
            <div className="tool-row"><span className="tool-tag">tool</span><span className="tool-name">filter_by_date</span><span className="tool-status">✓</span></div>
            <div className="tool-row"><span className="tool-tag">tool</span><span className="tool-name">generate_summary</span><span className="tool-status">✓</span></div>
          </div>
          <div className="msg msg-bot">
            <span className="msg-bot-mark"><Icon name="sparkle" size={10}/></span>
            <span>Trovati 5 contratti. Ti mando il PDF riepilogo.</span>
          </div>
        </div>
      </div>
    </div>
  );
  if (variant === 'vertical') return (
    <div className="visual-card">
      <div className="visual-card-mesh"></div>
      <div className="visual-card-body" style={{ display: 'flex', flexDirection: 'column', gap: 12, justifyContent: 'center', alignItems: 'center', minHeight: 320 }}>
        {['Legal Tech', 'PropTech', 'FinTech', 'HealthTech'].map((cat, i) => (
          <div key={cat} className="card" style={{
            padding: '14px 22px', display: 'flex', alignItems: 'center', gap: 14,
            width: '85%', background: 'var(--bg)',
            transform: `translateX(${i % 2 === 0 ? -10 : 10}px)`
          }}>
            <span style={{
              width: 30, height: 30, borderRadius: 8,
              background: 'var(--gradient)', color: 'white',
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center'
            }}><Icon name={['scale','building','wallet','shield'][i]} size={16}/></span>
            <b style={{ fontWeight: 600 }}>{cat}</b>
            <span style={{ marginLeft: 'auto', fontSize: 11, color: 'var(--muted)', fontFamily: 'Geist Mono, monospace' }}>verticale</span>
          </div>
        ))}
      </div>
    </div>
  );
  if (variant === 'web') return (
    <div className="visual-card">
      <div className="visual-card-mesh"></div>
      <div className="visual-card-body" style={{ padding: 22 }}>
        <div className="mock-chrome" style={{ borderRadius: 10, background: 'var(--bg)', border: '1px solid var(--border)' }}>
          <i></i><i></i><i></i><span>www.tuobrand.it</span>
        </div>
        <div style={{
          marginTop: 10, padding: '24px 20px',
          background: 'var(--bg)', borderRadius: 10, border: '1px solid var(--border)',
          minHeight: 240, display: 'flex', flexDirection: 'column', gap: 14,
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <span style={{ width: 18, height: 18, borderRadius: 5, background: 'var(--gradient)' }}/>
            <span style={{ fontSize: 11, fontWeight: 600 }}>Brand</span>
            <span style={{ marginLeft: 'auto', display: 'flex', gap: 12, fontSize: 10, color: 'var(--muted)' }}>
              <span>Servizi</span><span>Lavori</span><span>Contatti</span>
            </span>
          </div>
          <div style={{
            fontFamily: 'Geist, sans-serif',
            fontSize: 22, fontWeight: 600, letterSpacing: '-0.02em',
            lineHeight: 1.1, marginTop: 6,
          }}>
            Costruiamo cose<br/>
            <span className="grad-text">che funzionano</span>.
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 4, opacity: .6 }}>
            <i style={{ height: 4, width: '90%', borderRadius: 2, background: 'var(--muted)', opacity: .25 }}/>
            <i style={{ height: 4, width: '70%', borderRadius: 2, background: 'var(--muted)', opacity: .25 }}/>
          </div>
          <div style={{ display: 'flex', gap: 8, marginTop: 6 }}>
            <span style={{
              padding: '7px 12px', borderRadius: 999,
              background: 'var(--gradient)', color: 'white',
              fontSize: 10, fontWeight: 600,
            }}>Inizia</span>
            <span style={{
              padding: '7px 12px', borderRadius: 999,
              border: '1px solid var(--border)',
              fontSize: 10, fontWeight: 500, color: 'var(--muted)',
            }}>Scopri di più</span>
          </div>
          <div style={{
            marginTop: 'auto', display: 'flex', gap: 14, alignItems: 'center',
            paddingTop: 12, borderTop: '1px solid var(--border)',
            fontFamily: 'Geist Mono, monospace', fontSize: 10, color: 'var(--accent)',
          }}>
            <span>● 98 perf</span>
            <span>● 100 a11y</span>
            <span>● 100 SEO</span>
          </div>
        </div>
      </div>
    </div>
  );
  if (variant === 'auto') return (
    <div className="visual-card">
      <div className="visual-card-mesh"></div>
      <div className="visual-card-body" style={{
        padding: 24, minHeight: 320,
        display: 'flex', flexDirection: 'column', gap: 12, justifyContent: 'center',
      }}>
        {[
          ['mail', 'New lead', 'detect',   '#10b981'],
          ['gear', 'Enrich data', 'tool',  'var(--accent)'],
          ['sparkle', 'AI scoring', 'AI',  'var(--accent2)'],
          ['message', 'Notifica team', 'send', '#10b981'],
        ].map(([icon, label, tag, color], i, arr) => (
          <React.Fragment key={i}>
            <div className="card" style={{
              padding: '12px 14px', display: 'flex', alignItems: 'center', gap: 12,
              background: 'var(--bg)', borderRadius: 10,
            }}>
              <span style={{
                width: 30, height: 30, borderRadius: 8,
                background: 'var(--chip-bg)', color: 'var(--accent)',
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                border: '1px solid color-mix(in oklab, var(--accent) 14%, transparent)',
              }}><Icon name={icon} size={15}/></span>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 13, fontWeight: 600 }}>{label}</div>
                <div style={{ fontSize: 10.5, color: 'var(--muted)', fontFamily: 'Geist Mono, monospace', letterSpacing: '0.04em' }}>{tag}</div>
              </div>
              <span style={{ color, fontSize: 14, fontWeight: 700 }}>✓</span>
            </div>
            {i < arr.length - 1 && (
              <span aria-hidden style={{
                width: 1, height: 14, marginLeft: 28,
                background: 'linear-gradient(to bottom, var(--accent), transparent)',
              }}/>
            )}
          </React.Fragment>
        ))}
      </div>
    </div>
  );
  if (variant === 'crm') return (
    <div className="visual-card">
      <div className="visual-card-mesh"></div>
      <div className="visual-card-body" style={{ padding: 22, minHeight: 320 }}>
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10, height: '100%',
        }}>
          {[
            { title: 'Nuovi', n: 8, items: [['Rossi srl', '€ 12k'], ['M. Bianchi', '€ 4k'], ['Tech Lab', '€ 28k']] },
            { title: 'Proposta', n: 5, items: [['Studio X', '€ 22k'], ['ACME', '€ 9k']] },
            { title: 'Chiusi',  n: 3, items: [['BetaCo', '€ 18k'], ['Delta', '€ 7k']] },
          ].map((col, i) => (
            <div key={i} style={{
              background: 'var(--bg)', border: '1px solid var(--border)',
              borderRadius: 10, padding: 10, display: 'flex', flexDirection: 'column', gap: 6,
            }}>
              <div style={{
                display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                fontFamily: 'Geist Mono, monospace', fontSize: 10,
                color: 'var(--muted)', textTransform: 'uppercase', letterSpacing: '0.06em',
              }}>
                <span>{col.title}</span>
                <span style={{
                  background: i === 2 ? 'var(--gradient)' : 'var(--chip-bg)',
                  color: i === 2 ? 'white' : 'var(--accent)',
                  padding: '2px 6px', borderRadius: 4, fontSize: 9, fontWeight: 600,
                }}>{col.n}</span>
              </div>
              {col.items.map(([name, amt], j) => (
                <div key={j} style={{
                  background: 'var(--bg-alt)', borderRadius: 6, padding: '7px 9px',
                  display: 'flex', flexDirection: 'column', gap: 3,
                  borderLeft: '2px solid var(--accent)',
                }}>
                  <span style={{ fontSize: 11, fontWeight: 600, color: 'var(--ink)' }}>{name}</span>
                  <span style={{
                    fontFamily: 'Geist Mono, monospace', fontSize: 10, color: 'var(--accent)',
                  }}>{amt}</span>
                </div>
              ))}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
  // mvp
  return (
    <div className="visual-card">
      <div className="visual-card-mesh"></div>
      <div className="visual-card-body" style={{ padding: 28 }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
          {[
            ['Sett. 1', 'Discovery', '✓'],
            ['Sett. 2', 'Wireframe + UX', '✓'],
            ['Sett. 3', 'Build core', '✓'],
            ['Sett. 4', 'Build features', '→'],
            ['Sett. 5', 'QA + tuning', ''],
            ['Sett. 6', 'Lancio MVP', ''],
          ].map(([w, t, s], i) => (
            <div key={i} className="card" style={{
              padding: '12px 18px', display: 'flex', alignItems: 'center', gap: 14,
              background: 'var(--bg)', borderRadius: 10
            }}>
              <span style={{
                fontFamily: 'Geist Mono, monospace', fontSize: 11, fontWeight: 600,
                color: 'var(--accent)', minWidth: 50
              }}>{w}</span>
              <span style={{ flex: 1, fontWeight: 500 }}>{t}</span>
              <span style={{
                color: s === '✓' ? '#10b981' : s === '→' ? 'var(--accent)' : 'var(--muted)',
                fontWeight: 700
              }}>{s || ' '}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// ═══ PORTFOLIO ══════════════════════════════════════════════════════════════
function PortfolioCard({ p }) {
  return (
    <article className="port-card">
      {p.url && (
        <div className="port-card-preview">
          <SitePreview url={p.url} label={p.name}/>
        </div>
      )}
      <div className="port-card-body">
        <span className="port-card-sector">{p.sector}</span>
        <h3 className="port-card-name">{p.name}</h3>
        <p className="port-card-tagline">{p.tagline}</p>
        <p className="port-card-desc">{p.desc}</p>
        <div className="port-card-footer">
          <div className="port-card-tags chips">
            {p.tags.map(t => <span key={t} className="chip">{t}</span>)}
          </div>
          <div className="port-card-links">
            {p.internalPage && (
              <a href={p.internalPage} className="link-muted" style={{ fontSize: 13 }}>
                Dettagli
              </a>
            )}
            {p.url && (
              <a href={p.url} target="_blank" rel="noopener noreferrer" className="link-arrow" style={{ fontSize: 13 }}>
                Sito <Icon name="external" size={12}/>
              </a>
            )}
          </div>
        </div>
      </div>
    </article>
  );
}

function PortfolioPage() {
  const stats = [
    { value: 5, suffix: '',  label: 'Progetti in produzione' },
    { value: 5, suffix: '',  label: 'Settori verticali' },
    { value: 'EU',         label: 'Hosting & GDPR', accent: true },
    { value: 99.9, suffix: '%', decimals: 1, label: 'Uptime medio' },
  ];

  return (
    <>
      <PageHero
        eyebrow="Portfolio"
        title={<>I progetti che abbiamo <span className="grad-text">costruito</span>.</>}
        sub="Una selezione di prodotti SaaS, agenti AI e siti premium realizzati dallo studio. Tutti live, con utenti reali."
      />

      <ContentSection>
        <StatRow stats={stats}/>

        <div className="port-grid" style={{ marginTop: 60 }}>
          {REAL_PROJECTS.map((p, i) => (
            <div key={p.id} className="mo-reveal" style={{ '--mo-delay': `${i * 80}ms` }}>
              <PortfolioCard p={p}/>
            </div>
          ))}
        </div>
      </ContentSection>

      <ContentSection alt>
        <SectionHeader
          eyebrow="Cosa significa"
          title="Diverse industrie, stesso approccio."
          sub="Ogni progetto è progettato per il suo dominio: legale, immobiliare, beauty, voice AI. Quello che condividiamo è lo stack, lo stile e la velocità."
        />
        <Stagger className="feature-grid">
          <article className="feature-card">
            <span className="feature-icon"><Icon name="sparkle" size={20}/></span>
            <h3 className="feature-h">SaaS AI-native</h3>
            <p className="feature-p">LexAI, DomusFlow AI e VoxFlow AI sono piattaforme che mettono l'AI al centro del prodotto, non come ornamento.</p>
          </article>
          <article className="feature-card">
            <span className="feature-icon"><Icon name="globe" size={20}/></span>
            <h3 className="feature-h">Marketing site premium</h3>
            <p className="feature-p">Estetica Iris e Savintex sono siti vetrina costruiti per convertire: design pulito, performance Lighthouse 95+, SEO solida.</p>
          </article>
          <article className="feature-card">
            <span className="feature-icon"><Icon name="shield" size={20}/></span>
            <h3 className="feature-h">Hosting EU, GDPR-ready</h3>
            <p className="feature-p">Ogni progetto vive su infrastruttura europea. DPA firmate, privacy by design, niente sorprese.</p>
          </article>
        </Stagger>
      </ContentSection>

      <CtaBand
        title="Vuoi essere il prossimo nel portfolio?"
        sub="Una call, capiamo se possiamo costruirlo insieme."
      />
    </>
  );
}

// ═══ PROCESSO ═══════════════════════════════════════════════════════════════
function ProcessoPage() {
  const phases = [
    {
      n: '01',
      icon: 'compass',
      title: 'Discovery',
      duration: '1 settimana',
      body: "Capiamo il problema, mappiamo gli utenti, definiamo l'MVP. Una settimana di immersione nel tuo business.",
      deliverables: [
        'Mappa degli utenti e dei loro problemi',
        'Definizione dello scope dell\'MVP',
        'Lista funzionalità prioritizzata',
        'Stima tempi e costi',
      ],
    },
    {
      n: '02',
      icon: 'layers',
      title: 'Design & Architettura',
      duration: '1-2 settimane',
      body: "UI premium, schema dati, integrazioni, scelte di stack. Tutto documentato prima di scrivere codice.",
      deliverables: [
        'Wireframe + design system di prodotto',
        'Schema dati e diagramma di architettura',
        'Lista integrazioni esterne',
        'Repository e ambienti pronti',
      ],
    },
    {
      n: '03',
      icon: 'sparkle',
      title: 'Sviluppo AI-first',
      duration: '4-12 settimane',
      body: "Iterazioni rapide, AI integrata dal giorno zero. Build settimanali, review continue con il cliente.",
      deliverables: [
        'Build dimostrabile ogni venerdì',
        'Testing automatizzato e CI/CD',
        'Deploy continuo in ambiente staging',
        'Documentazione tecnica aggiornata',
      ],
    },
    {
      n: '04',
      icon: 'rocket',
      title: 'Lancio & Crescita',
      duration: 'Continuo',
      body: "Deploy in produzione, monitoraggio, evoluzione continua. Restiamo il tuo team tecnico se serve.",
      deliverables: [
        'Deploy in produzione',
        'Monitoraggio uptime e errori',
        'Roadmap di evoluzione',
        'SLA di supporto opzionale',
      ],
    },
  ];

  return (
    <>
      <PageHero
        eyebrow="Come lavoriamo"
        title={<>Quattro fasi. <span className="grad-text">Niente burocrazia</span>, più prodotto funzionante.</>}
        sub="Lavoriamo in modo iterativo e AI-native. Vedi l'output ogni settimana, non ogni trimestre. Decidi con dati, non con promesse."
      />

      <ContentSection alt>
        {phases.map((p, i) => (
          <DetailRow
            key={p.n}
            eyebrow={<>{p.n} · {p.duration}</>}
            title={p.title}
            body={p.body}
            bullets={p.deliverables}
            visual={
              <div className="visual-card">
                <div className="visual-card-mesh"></div>
                <div className="visual-card-body" style={{
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  flexDirection: 'column', gap: 24, minHeight: 320
                }}>
                  <div style={{
                    width: 100, height: 100, borderRadius: 28,
                    background: 'var(--gradient)',
                    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                    color: 'white',
                    boxShadow: '0 20px 50px -16px color-mix(in oklab, var(--accent) 60%, transparent)',
                  }}>
                    <Icon name={p.icon} size={42}/>
                  </div>
                  <div style={{ textAlign: 'center' }}>
                    <div style={{
                      fontFamily: 'Geist Mono, monospace',
                      fontSize: 12, color: 'var(--muted)',
                      letterSpacing: '0.08em', textTransform: 'uppercase',
                      marginBottom: 6,
                    }}>Fase {p.n}</div>
                    <div style={{ fontSize: 22, fontWeight: 600, letterSpacing: '-0.01em' }}>{p.title}</div>
                    <div style={{ fontSize: 13, color: 'var(--muted)', marginTop: 6 }}>{p.duration}</div>
                  </div>
                </div>
              </div>
            }
            reverse={i % 2 === 1}
          />
        ))}
      </ContentSection>

      <ContentSection dark>
        <SectionHeader
          eyebrow="Principi"
          title="Cosa significa lavorare AI-native."
          sub="Tre principi che guidano ogni progetto. Non sono buzzword: sono il motivo per cui spediamo prima."
        />
        <Stagger className="feature-grid">
          <article className="feature-card" style={{ background: 'rgba(255,255,255,0.04)', borderColor: 'rgba(255,255,255,0.10)' }}>
            <span className="feature-icon" style={{ background: 'var(--gradient)', color: 'white', border: 0 }}>
              <Icon name="sparkle" size={20}/>
            </span>
            <h3 className="feature-h" style={{ color: 'var(--on-dark)' }}>AI come strumento, non come slogan</h3>
            <p className="feature-p" style={{ color: 'var(--on-dark-muted)' }}>
              Usiamo agenti, copilot e automazioni per scrivere codice, generare test e fare review.
              Più qualità, meno errori, tempi di consegna ridotti del 40-60%.
            </p>
          </article>
          <article className="feature-card" style={{ background: 'rgba(255,255,255,0.04)', borderColor: 'rgba(255,255,255,0.10)' }}>
            <span className="feature-icon" style={{ background: 'var(--gradient)', color: 'white', border: 0 }}>
              <Icon name="bolt" size={20}/>
            </span>
            <h3 className="feature-h" style={{ color: 'var(--on-dark)' }}>Iterazione settimanale</h3>
            <p className="feature-p" style={{ color: 'var(--on-dark-muted)' }}>
              Ogni venerdì vedi qualcosa di nuovo. Decisioni rapide, niente specifiche scritte mesi fa
              che invecchiano prima di essere implementate.
            </p>
          </article>
          <article className="feature-card" style={{ background: 'rgba(255,255,255,0.04)', borderColor: 'rgba(255,255,255,0.10)' }}>
            <span className="feature-icon" style={{ background: 'var(--gradient)', color: 'white', border: 0 }}>
              <Icon name="shield" size={20}/>
            </span>
            <h3 className="feature-h" style={{ color: 'var(--on-dark)' }}>Codice tuo, niente lock-in</h3>
            <p className="feature-p" style={{ color: 'var(--on-dark-muted)' }}>
              Repository, infrastruttura, dati: tutto tuo. Stack mainstream, documentazione completa,
              possibilità di portare il progetto in casa quando vuoi.
            </p>
          </article>
        </Stagger>
      </ContentSection>

      <CtaBand title="Iniziamo dalla Discovery." sub="Una settimana, output concreti, decisione informata."/>
    </>
  );
}

// ═══ STACK ══════════════════════════════════════════════════════════════════
function StackPage() {
  const categories = [
    {
      title: 'Frontend & Framework',
      items: [
        ['Next.js',     'App router, SSR, edge functions.'],
        ['TypeScript',  'Type-safe ovunque, refactor sicuri.'],
        ['Tailwind CSS','Design system veloce e consistente.'],
        ['React',       'Composable, ecosistema enorme.'],
      ],
    },
    {
      title: 'Backend & Dati',
      items: [
        ['Supabase',  'Postgres, auth, storage, realtime.'],
        ['PostgreSQL','Database relazionale solido.'],
        ['Drizzle',   'ORM tipizzato, query SQL-first.'],
        ['Redis',     'Cache e code di lavoro.'],
      ],
    },
    {
      title: 'AI & Realtime',
      items: [
        ['OpenAI',    'GPT-4o, Whisper, embedding.'],
        ['Claude',    'Anthropic Sonnet per ragionamento complesso.'],
        ['LiveKit',   'Voice realtime con bassa latenza.'],
        ['LangChain', 'Orchestrazione agenti e RAG.'],
      ],
    },
    {
      title: 'Pagamenti & Comunicazione',
      items: [
        ['Stripe',    'Abbonamenti, fatturazione, tax.'],
        ['Resend',    'Email transazionali affidabili.'],
        ['Twilio',    'SMS e WhatsApp Business.'],
        ['Telegram',  'Bot per agenti AI.'],
      ],
    },
    {
      title: 'Infrastruttura & Monitoring',
      items: [
        ['Vercel',    'Hosting EU, deploy globali.'],
        ['Sentry',    'Error tracking in real-time.'],
        ['PostHog',   'Product analytics e session replay.'],
        ['GitHub',    'Versioning + Actions CI/CD.'],
      ],
    },
  ];

  return (
    <>
      <PageHero
        eyebrow="Tech stack"
        title={<>Lo stack su cui <span className="grad-text">costruiamo</span>.</>}
        sub="Strumenti maturi, hosting in Europa, GDPR-ready. Nessuna sorpresa in produzione, nessun lock-in proprietario."
      />

      <ContentSection alt>
        {categories.map((cat, i) => (
          <div key={cat.title} style={{ marginBottom: 60 }} className="mo-reveal">
            <h2 style={{
              font: "600 22px/1.2 'Geist', sans-serif",
              letterSpacing: '-0.018em',
              margin: '0 0 22px',
              color: 'var(--ink)',
            }}>
              <span style={{
                fontFamily: 'Geist Mono, monospace',
                fontSize: 13, color: 'var(--accent)',
                marginRight: 12, letterSpacing: '0.04em',
              }}>{String(i + 1).padStart(2, '0')}</span>
              {cat.title}
            </h2>
            <div className="feature-grid">
              {cat.items.map(([name, desc]) => (
                <div key={name} className="stack-pill" style={{ padding: '18px 20px' }}>
                  <span className="stack-dot" style={{ background: 'var(--gradient)' }}></span>
                  <div className="stack-text">
                    <b style={{ fontSize: 15 }}>{name}</b>
                    <span style={{ fontSize: 13 }}>{desc}</span>
                  </div>
                </div>
              ))}
            </div>
          </div>
        ))}
      </ContentSection>

      <ContentSection>
        <SectionHeader
          eyebrow="Standard"
          title="Cose che diamo per scontate."
          sub="Non è una checklist commerciale: è il minimo sindacale per dormire la notte."
        />
        <Stagger className="feature-grid">
          <article className="feature-card">
            <span className="feature-icon"><Icon name="shield" size={20}/></span>
            <h3 className="feature-h">Hosting UE, GDPR-ready</h3>
            <p className="feature-p">Tutti i dati restano in Europa. DPA, consensi, diritto all'oblio: tutto contemplato dal giorno uno.</p>
          </article>
          <article className="feature-card">
            <span className="feature-icon"><Icon name="bolt" size={20}/></span>
            <h3 className="feature-h">CI/CD continuo</h3>
            <p className="feature-p">Ogni commit testato e deployato in staging. Niente "release party" stressanti.</p>
          </article>
          <article className="feature-card">
            <span className="feature-icon"><Icon name="check" size={20}/></span>
            <h3 className="feature-h">Monitoring 24/7</h3>
            <p className="feature-p">Errori in produzione tracciati con Sentry, performance con PostHog. Sappiamo se rompiamo qualcosa prima del tuo cliente.</p>
          </article>
        </Stagger>
      </ContentSection>

      <CtaBand title="Vuoi parlare di architettura?" sub="Audit tecnico gratuito sul tuo stack attuale. Una call, una review."/>
    </>
  );
}

// ═══ PRODOTTI ═══════════════════════════════════════════════════════════════
function ProdottiPage() {
  const products = [
    {
      tag: 'PropTech',
      name: 'DomusFlow AI',
      tagline: 'Gestione condominiale intelligente.',
      desc: "Verbali assemblea automatici, smistamento segnalazioni con AI, riconciliazione bancaria, bilancio sempre pronto. Tutto in un'unica piattaforma.",
      page: 'domusflow.html',
      mock: <DomusMock/>,
      stats: [['34', 'condomini gestiti'], ['€ 128k', 'incassato mese'], ['2m', 'verbale AI']],
    },
    {
      tag: 'Legal Tech',
      name: 'LexAI',
      tagline: 'Legal tech per studi legali italiani.',
      desc: "Assistente AI che redige documenti, calcola scadenze e cita la normativa italiana con motore RAG verticale.",
      page: 'lexai.html',
      mock: <LexMock/>,
      stats: [['10k+', 'documenti analizzati'], ['1.2s', 'risposta media'], ['98%', 'precisione citazioni']],
    },
    {
      tag: 'AI Agent',
      name: 'MetaAgent',
      tagline: 'Assistente AI personale.',
      desc: "Agente vocale e testuale via Telegram che cerca sul web, gestisce email, genera report, legge metriche.",
      page: 'metaagent.html',
      mock: <AgentMock/>,
      stats: [['24/7', 'sempre attivo'], ['12+', 'tool integrati'], ['Voice', 'realtime']],
    },
  ];

  return (
    <>
      <PageHero
        eyebrow="Prodotti"
        title={<>I nostri <span className="grad-text">prodotti</span>.</>}
        sub="Piattaforme verticali e agenti AI costruiti dallo studio. Ogni prodotto risolve un problema reale di un settore reale."
        actions={<>
          <a href="tools.html" className="btn btn-outline btn-lg">Vedi anche i tool gratuiti</a>
        </>}
      />

      <ContentSection alt>
        {products.map((p, i) => (
          <div key={p.name} className="detail-row mo-reveal"
               style={i === 0 ? { paddingTop: 60 } : null}>
            <div className="detail-left">
              <div className="detail-eyebrow">{p.tag}</div>
              <h3 className="detail-h" style={{ fontSize: 'clamp(28px, 3.4vw, 38px)' }}>{p.name}</h3>
              <p className="detail-p" style={{ fontWeight: 500, color: 'var(--ink)' }}>{p.tagline}</p>
              <p className="detail-p">{p.desc}</p>
              <div style={{ display: 'flex', gap: 24, marginTop: 22, marginBottom: 22, flexWrap: 'wrap' }}>
                {p.stats.map(([v, l]) => (
                  <div key={l}>
                    <div style={{
                      font: "600 22px/1 'Geist', sans-serif",
                      letterSpacing: '-0.02em',
                      background: 'var(--gradient)',
                      WebkitBackgroundClip: 'text', backgroundClip: 'text',
                      color: 'transparent',
                    }}>{v}</div>
                    <div style={{ fontSize: 12, color: 'var(--muted)', marginTop: 4, fontFamily: 'Geist Mono, monospace', textTransform: 'uppercase', letterSpacing: '0.06em' }}>{l}</div>
                  </div>
                ))}
              </div>
              <a href={p.page} className="btn btn-grad">
                Scopri {p.name} <Icon name="arrow" size={14}/>
              </a>
            </div>
            <div className="detail-right" style={{ '--mo-delay': '120ms' }}>
              <div className="visual-card" style={{ padding: 0 }}>
                <div style={{ height: 320 }}>{p.mock}</div>
              </div>
            </div>
          </div>
        ))}
      </ContentSection>

      <CtaBand
        title="Vuoi un prodotto simile per il tuo settore?"
        sub="Ne costruiamo uno per te. Verticali, integrazioni, AI: tutto su misura."
      />
    </>
  );
}

// ═══ CONTATTI ═══════════════════════════════════════════════════════════════
function ContattiPage() {
  return (
    <>
      <PageHero
        eyebrow="Contatti"
        title={<>Parliamo del tuo <span className="grad-text">progetto</span>.</>}
        sub="Quindici minuti, zero impegno. Capiamo se possiamo aiutarti e come. Risposta entro 24h lavorative."
      />

      <ContentSection alt id="demo">
        <Demo/>
      </ContentSection>

      <ContentSection>
        <SectionHeader
          eyebrow="Altri canali"
          title="Preferisci scriverci direttamente?"
        />
        <div className="feature-grid">
          <a href="mailto:hello@metawebstudio.it" className="feature-card mo-reveal" style={{ textDecoration: 'none' }}>
            <span className="feature-icon"><Icon name="mail" size={20}/></span>
            <h3 className="feature-h">Email</h3>
            <p className="feature-p">hello@metawebstudio.it</p>
            <span className="link-arrow" style={{ marginTop: 'auto' }}>
              Scrivici <Icon name="arrow" size={14}/>
            </span>
          </a>
          <a href="https://linkedin.com/company/metawebstudio" className="feature-card mo-reveal" style={{ textDecoration: 'none', '--mo-delay': '80ms' }}>
            <span className="feature-icon"><Icon name="linkedin" size={20}/></span>
            <h3 className="feature-h">LinkedIn</h3>
            <p className="feature-p">linkedin.com/company/metawebstudio</p>
            <span className="link-arrow" style={{ marginTop: 'auto' }}>
              Seguici <Icon name="arrow" size={14}/>
            </span>
          </a>
          <div className="feature-card mo-reveal" style={{ '--mo-delay': '160ms' }}>
            <span className="feature-icon"><Icon name="building" size={20}/></span>
            <h3 className="feature-h">Studio</h3>
            <p className="feature-p">Napoli, Italia</p>
            <p className="feature-p" style={{ fontFamily: 'Geist Mono, monospace', fontSize: 12, marginTop: 'auto', textTransform: 'uppercase', letterSpacing: '0.04em' }}>
              P.IVA [inserire]
            </p>
          </div>
        </div>
      </ContentSection>

      <CtaBand
        title="Risposta entro 24h lavorative."
        sub="Niente attese, niente burocrazia. Lavoriamo come uno studio dovrebbe lavorare."
        primary={['Compila il form', '#demo']}
      />
    </>
  );
}

Object.assign(window, {
  ServiziPage, PortfolioPage, ProcessoPage, StackPage, ProdottiPage, ContattiPage,
});