// === sections/nav.jsx ===
function Nav() {
  return (
    <nav className="nav">
      <div className="nav-inner">
        <div className="nav-brand">
          <div className="mark"></div>
          <span>Pacta</span>
        </div>
        <div className="nav-links">
          <a href="#sales">Sales</a>
          <a href="#delivery">Delivery</a>
          <a href="#ai">AI Coach</a>
          <a href="#analytics">Analytics</a>
          <a href="#pricing">Prezzi</a>
        </div>
        <a href="#pricing" className="btn-ghost">Provalo gratis →</a>
      </div>
    </nav>
  );
}
window.Nav = Nav;

// === sections/hero.jsx ===
function Hero() {
  return (
    <section className="hero">
      <div className="hero-grid"></div>
      <div className="hero-orb orb-blue"></div>
      <div className="hero-orb orb-magenta"></div>
      <div className="hero-orb orb-cyan"></div>

      <div className="wrap hero-content">
        <span className="hero-pill">
          <span className="new">AI Coach</span>
          <span> — Il primo CRM che ti dice cosa dire al prossimo touchpoint</span>
        </span>

        <h1>
          Il CRM che fa <em>chiudere</em> di più<br />
          alla tua agenzia di marketing.
        </h1>

        <p className="lede">
          Pacta unisce pipeline commerciale, area delivery e un AI Coach che
          ascolta le tue call, legge i tuoi deal e dice al sales esattamente
          cosa fare al prossimo touchpoint.
        </p>

        <div className="hero-cta-row">
          <a href="#pricing" className="btn-primary">
            Provalo gratis per 14 giorni
            <span className="arrow">→</span>
          </a>
          <a href="#ai" className="btn-ghost">Vedi l'AI Coach in azione</a>
        </div>

        <div className="hero-trust">
          Nessuna carta di credito · Setup in 8 minuti · Cancelli quando vuoi
        </div>
      </div>

      <HeroDashboard />
    </section>
  );
}

function HeroDashboard() {
  return (
    <div className="stage3d">
      <div className="dash">
        <div className="dash-main">
          <div className="dash-topbar">
            <span className="dot"></span><span className="dot"></span><span className="dot"></span>
            <span className="url">app.pactacrm.com / sales / pipeline-q2</span>
          </div>
          <div className="dash-body">
            <aside className="dash-side">
              <div className="dash-side-section">Vendite</div>
              <div className="dash-side-item active"><span className="pip"></span>Pipeline Q2</div>
              <div className="dash-side-item"><span className="pip"></span>Trattative aperte</div>
              <div className="dash-side-item"><span className="pip"></span>Forecast</div>
              <div className="dash-side-item"><span className="pip"></span>Lead in entrata</div>

              <div className="dash-side-section">Delivery</div>
              <div className="dash-side-item"><span className="pip"></span>Progetti attivi</div>
              <div className="dash-side-item"><span className="pip"></span>Task team</div>

              <div className="dash-side-section">AI</div>
              <div className="dash-side-item"><span className="pip"></span>Coach</div>
              <div className="dash-side-item"><span className="pip"></span>Trascrizioni</div>
            </aside>
            <main className="dash-content">
              <div className="dash-header">
                <h3>Pipeline · Q2 2026</h3>
                <span className="meta">Aggiornato 12 sec fa</span>
              </div>
              <div className="dash-kpis">
                <div className="kpi up">
                  <div className="label">Pipeline value</div>
                  <div className="val">€ 482K</div>
                  <div className="delta">↑ 18.4%</div>
                </div>
                <div className="kpi up">
                  <div className="label">Win rate</div>
                  <div className="val">34%</div>
                  <div className="delta">↑ 6.1%</div>
                </div>
                <div className="kpi dn">
                  <div className="label">Cycle (gg)</div>
                  <div className="val">21</div>
                  <div className="delta">↓ 4 gg</div>
                </div>
                <div className="kpi up">
                  <div className="label">Deal/sales</div>
                  <div className="val">14</div>
                  <div className="delta">↑ 3</div>
                </div>
              </div>
              <div className="dash-graph">
                <DashSpark />
              </div>
            </main>
          </div>
        </div>

        <div className="float-card float-card-1">
          <div className="fc-label">AI Insight</div>
          <div className="fc-body">Marco ha citato budget 3 volte — leva price-anchoring sul prossimo touch.</div>
          <div className="fc-meta">Deal · Studio Volpe · 18K</div>
        </div>
        <div className="float-card float-card-2">
          <div className="fc-label">Trascrizione analizzata</div>
          <div className="fc-body"><strong>"Mi serve qualcosa che convinca il mio CFO."</strong> Personalità: Analitico · Rischio-avverso.</div>
          <div className="fc-meta">Call · 14 min · Pain detected ↗</div>
        </div>
        <div className="float-card float-card-3">
          <div className="fc-label">Team Delivery</div>
          <div className="fc-body">3 task assegnati a Giulia, 2 a Marco — capacity 78%.</div>
        </div>
      </div>
    </div>
  );
}

function DashSpark() {
  // Generate a smooth animated chart line
  const w = 800, h = 200;
  const points = [40, 60, 55, 80, 70, 95, 88, 120, 110, 140, 135, 160, 150, 175];
  const stepX = w / (points.length - 1);
  const max = Math.max(...points);
  const path = points.map((p, i) => `${i === 0 ? 'M' : 'L'} ${i * stepX} ${h - (p / max) * (h - 20) - 10}`).join(' ');
  const area = `${path} L ${w} ${h} L 0 ${h} Z`;

  return (
    <svg viewBox={`0 0 ${w} ${h}`} preserveAspectRatio="none">
      <defs>
        <linearGradient id="grad-line" x1="0" y1="0" x2="1" y2="0">
          <stop offset="0%" stopColor="#5E89FF" />
          <stop offset="50%" stopColor="#4FB7FF" />
          <stop offset="100%" stopColor="#C254FF" />
        </linearGradient>
        <linearGradient id="grad-fill" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#5E89FF" stopOpacity="0.35" />
          <stop offset="100%" stopColor="#5E89FF" stopOpacity="0" />
        </linearGradient>
      </defs>
      {/* grid lines */}
      {[0.25, 0.5, 0.75].map(y => (
        <line key={y} x1="0" x2={w} y1={h * y} y2={h * y} stroke="rgba(255,255,255,0.05)" strokeDasharray="4 4" />
      ))}
      <path d={area} fill="url(#grad-fill)" />
      <path d={path} stroke="url(#grad-line)" strokeWidth="2.5" fill="none" strokeLinecap="round" />
      {points.map((p, i) => {
        const x = i * stepX;
        const y = h - (p / max) * (h - 20) - 10;
        if (i === points.length - 1) {
          return (
            <g key={i}>
              <circle cx={x} cy={y} r="8" fill="#4FB7FF" opacity="0.3" />
              <circle cx={x} cy={y} r="4" fill="#4FB7FF" />
            </g>
          );
        }
        return null;
      })}
    </svg>
  );
}

window.Hero = Hero;

// === sections/origin.jsx ===
function Origin() {
  const [visible, setVisible] = React.useState(false);
  const ref = React.useRef(null);

  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;

    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          setVisible(true);
        }
      },
      { threshold: 0.15 }
    );

    observer.observe(el);
    return () => observer.disconnect();
  }, []);

  return (
    <section className="origin" ref={ref}>
      <div className="wrap">
        <span className="eyebrow origin-eyebrow eyebrow-dot">Perché Pacta</span>

        <div className={`origin-content ${visible ? 'origin-visible' : ''}`}>
          <div className="origin-quote-block">
            <p className="origin-lede">
              Da duemila anni il diritto commerciale poggia su tre parole:
            </p>
            <blockquote className="origin-latin">
              Pacta sunt servanda.
            </blockquote>
            <p className="origin-translation">
              I patti devono essere mantenuti.
            </p>
          </div>

          <div className="origin-body">
            <p>
              Vendere è prima di tutto fare promesse: "ti richiamo lunedì",
              "ti mando la proposta giovedì", "ci risentiamo dopo le ferie".
              I sales fanno bene a promettere. Il problema è che la metà
              di queste promesse sparisce nella loro testa entro 7 giorni —
              e con loro un terzo della pipeline.
            </p>
            <p>
              Non per cattiva fede. Per memoria umana, calendari pieni, troppe
              call in una settimana.
            </p>
          </div>

          <div className="origin-conclusion">
            <p>
              Pacta è il CRM che <strong>tiene memoria al posto tuo</strong> e
              soprattutto <strong>ti aiuta a chiudere di più</strong>: ascolta
              le call, capisce la personalità del prospect, ti suggerisce la
              prossima mossa, riattiva i deal che si stanno raffreddando e ti
              dice esattamente cosa dire al touchpoint successivo.
            </p>
            <p className="origin-punch">
              I patti che fai con i clienti, mantenuti.
              I deal che davi per persi, chiusi.
              Il fatturato che lasciavi sul tavolo, incassato.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Origin = Origin;

// === sections/pain.jsx ===
function Pain() {
  return (
    <section className="pain">
      <div className="wrap">
        <span className="eyebrow pain-eyebrow eyebrow-dot">Il problema</span>
        <h2 className="pain-headline">
          Vendere servizi di marketing è difficile.<br />
          Farlo con <span className="strike">un CRM generico</span> è <em>impossibile</em>.
        </h2>

        <div className="pain-grid">
          <div className="pain-card pc-1">
            <span className="pain-card-num">01 / Sales</span>
            <h3>Non sai perché i tuoi commerciali perdono le trattative</h3>
            <p>Hai 5 sales, 5 stili diversi, 5 risultati diversi. Nessuno sa cosa funziona davvero e ogni call resta nella testa di chi l'ha fatta.</p>
            <div className="quote">"Il mio top performer ha alzato la cornetta 800 volte. Non saprei dirti perché chiude."</div>
          </div>
          <div className="pain-card pc-2">
            <span className="pain-card-num">02 / Process</span>
            <h3>Tra sales e delivery c'è un baratro</h3>
            <p>Il commerciale chiude, il delivery riceve un PDF e mille email. Promesse perse, contesto perso, cliente confuso.</p>
            <div className="pain-graphic-arrow">
              <PainArrow />
            </div>
          </div>
          <div className="pain-card pc-3">
            <span className="pain-card-num">03 / Data</span>
            <h3>Pipeline al buio</h3>
            <p>Forecast su Excel, KPI ogni lunedì, decisioni a sentimento.</p>
          </div>
          <div className="pain-card pc-4">
            <span className="pain-card-num">04 / Coaching</span>
            <h3>Il sales coach non scala</h3>
            <p>Hai 40 call a settimana da ascoltare. Ne ascolti 2. I tuoi sales ripetono gli stessi errori per mesi.</p>
          </div>
          <div className="pain-card pc-5">
            <span className="pain-card-num">05 / Pipeline</span>
            <h3>Trattative che si arenano</h3>
            <p>Stage "in valutazione" da 47 giorni. Nessuno sa se è un deal vivo, morto o in standby.</p>
          </div>
          <div className="pain-card pc-6">
            <span className="pain-card-num">06 / Tools</span>
            <h3>Stack di 8 tool scollegati</h3>
            <p>CRM, project management, call recorder, sheet KPI, drive, slack. Il sales passa più tempo a copiare info che a vendere.</p>
          </div>
        </div>
      </div>
    </section>
  );
}

function PainArrow() {
  return (
    <svg viewBox="0 0 280 90" style={{ width: '100%', height: '90px', marginTop: '18px' }}>
      <defs>
        <linearGradient id="arrow-grad" x1="0" y1="0" x2="1" y2="0">
          <stop offset="0%" stopColor="#FF6A4D" stopOpacity="0.2" />
          <stop offset="100%" stopColor="#FF6A4D" />
        </linearGradient>
      </defs>
      <rect x="0" y="30" width="80" height="30" rx="6" fill="#0A1024" />
      <text x="40" y="49" textAnchor="middle" fill="white" fontFamily="Geist Mono" fontSize="11" fontWeight="500">SALES</text>
      <rect x="200" y="30" width="80" height="30" rx="6" fill="#0A1024" />
      <text x="240" y="49" textAnchor="middle" fill="white" fontFamily="Geist Mono" fontSize="11" fontWeight="500">DELIVERY</text>
      {/* broken arrow */}
      <path d="M 84 45 L 130 45" stroke="url(#arrow-grad)" strokeWidth="3" />
      <path d="M 150 45 L 196 45" stroke="#FF6A4D" strokeWidth="3" />
      <path d="M 188 38 L 198 45 L 188 52" stroke="#FF6A4D" strokeWidth="3" fill="none" strokeLinecap="round" strokeLinejoin="round" />
      {/* gap explosion */}
      <g transform="translate(140,45)">
        <circle r="14" fill="#FF6A4D" opacity="0.1" />
        <text textAnchor="middle" y="3" fill="#FF6A4D" fontSize="14" fontFamily="Geist Mono" fontWeight="600">✕</text>
      </g>
    </svg>
  );
}

window.Pain = Pain;

// === sections/sales.jsx ===
function Sales() {
  return (
    <section className="sales" id="sales">
      <div className="wrap">
        <div className="sec-head">
          <h2>
            Una pipeline che <em>capisce</em><br />
            come vende la tua agenzia.
          </h2>
          <p>Stage personalizzabili, automazioni native, deal management pensato per chi vende servizi — non SKU.</p>
        </div>

        <div className="sales-product">
          <div>
            <span className="tag"><span style={{ width: 6, height: 6, background: '#5E89FF', borderRadius: 99, display: 'inline-block', boxShadow: '0 0 8px #5E89FF' }}></span>Sales Hub</span>
            <h3>Pipeline che si muove<br />da sola.</h3>
            <p className="lede">
              Pipeline pensata per chi vende servizi. Stage configurabili, lead scoring AI basato sulle trascrizioni delle call, forecast in tempo reale.
            </p>
            <ul className="feat-list">
              <li><span className="marker"></span><span><strong>Stage configurabili</strong> — discovery, audit, proposta, negoziazione: definisci tu il flusso della tua agenzia.</span></li>
              <li><span className="marker"></span><span><strong>Deal score AI</strong> — l'AI legge call e note del deal e calcola probabilità di chiusura + leve da attivare.</span></li>
              <li><span className="marker"></span><span><strong>Trascrizioni & insight</strong> — collega Fathom, importi automaticamente. Pacta estrae personalità del prospect, obiezioni, prossimi passi.</span></li>
              <li><span className="marker"></span><span><strong>Forecast in tempo reale</strong> — sai cosa chiuderai questo mese senza chiedere niente a nessuno.</span></li>
            </ul>
          </div>

          <SalesPipeline />
        </div>
      </div>
    </section>
  );
}

function SalesPipeline() {
  const cols = [
    { name: 'Audit', count: 6, deals: [
      { c: 'Studio Volpe', v: '€ 18.000', o: 'GR', hot: false },
      { c: 'Brand & Co', v: '€ 9.500', o: 'AM', hot: false },
      { c: 'Northwood', v: '€ 32.000', o: 'GR', hot: true },
    ]},
    { name: 'Proposta', count: 4, deals: [
      { c: 'Marsala SRL', v: '€ 24.000', o: 'AM', hot: true },
      { c: 'Cinque Sensi', v: '€ 14.000', o: 'LU', hot: false },
    ]},
    { name: 'Negoz.', count: 3, deals: [
      { c: 'Aurora Lab', v: '€ 48.000', o: 'GR', hot: true },
      { c: 'Forme', v: '€ 12.000', o: 'LU', hot: false },
    ]},
    { name: 'Chiuso', count: 9, deals: [
      { c: 'Costa Studio', v: '€ 28.000', o: 'AM', hot: false },
      { c: 'Mezza Luna', v: '€ 16.000', o: 'GR', hot: false },
    ]},
  ];
  return (
    <div className="pipeline">
      <div className="pipeline-header">
        <h4>Pipeline Q2 · 22 deal · € 482K</h4>
        <span className="filter">filtra ▾</span>
      </div>
      <div className="pipeline-cols">
        {cols.map(col => (
          <div className="pipe-col" key={col.name}>
            <div className="pipe-col-head">
              <span>{col.name}</span>
              <span className="count">{col.count}</span>
            </div>
            {col.deals.map((d, i) => (
              <div key={i} className={"deal" + (d.hot ? ' hot' : '')}>
                <div className="company">{d.c}</div>
                <div className="value">{d.v}</div>
                <div className="owner">{d.o}</div>
              </div>
            ))}
          </div>
        ))}
      </div>
    </div>
  );
}

window.Sales = Sales;

// === sections/delivery.jsx ===
function Delivery() {
  return (
    <section className="delivery" id="delivery">
      <div className="wrap">
        <div className="sec-head delivery-sec-head">
          <h2>
            Quando il deal si chiude,<br />
            il <em>delivery</em> sa già cosa fare.
          </h2>
          <p>Un'area dedicata al team che esegue. Task, assegnazioni, SLA, brief, milestone — tutto agganciato al deal originale.</p>
        </div>

        <IsometricBoard />

        <div className="delivery-list">
          <div className="del-item">
            <span className="num">A · CONSEGNA</span>
            <h4>Handoff sales → delivery in zero click</h4>
            <p>Quando il deal entra in "won", Pacta crea il progetto, importa brief e contatti, e notifica i ruoli giusti del team delivery.</p>
          </div>
          <div className="del-item">
            <span className="num">B · ASSEGNAZIONE</span>
            <h4>Carichi di lavoro visibili</h4>
            <p>Vedi chi è in saturazione e chi ha banda. Riassegna in drag-and-drop, niente fogli Excel paralleli.</p>
          </div>
          <div className="del-item">
            <span className="num">C · CONTESTO</span>
            <h4>Tutto il sales context, dentro il task</h4>
            <p>Il delivery vede le call, le promesse fatte, le obiezioni emerse. Niente più "il commerciale mi ha detto che..."</p>
          </div>
        </div>
      </div>
    </section>
  );
}

function IsometricBoard() {
  return (
    <div className="iso-scene">
      <div className="iso-board">
        <div className="iso-floor"></div>

        {/* Column 1 — To do */}
        <div className="iso-card col" style={{ top: 80, left: '8%', transform: 'translateZ(20px)' }}>
          <div className="col-head"><span>Da fare</span><span className="pill">4</span></div>
          <div className="col-body">
            <div className="iso-task">
              <div>Audit SEO baseline — Studio Volpe</div>
              <div className="meta">
                <div className="team">
                  <div className="av" style={{ background: '#5E89FF' }}></div>
                  <div className="av" style={{ background: '#C254FF' }}></div>
                </div>
                <span>3 giorni</span>
              </div>
            </div>
            <div className="iso-task">
              <div>Brief copy landing — Marsala</div>
              <div className="meta">
                <div className="team">
                  <div className="av" style={{ background: '#4FB7FF' }}></div>
                </div>
                <span>2 giorni</span>
              </div>
            </div>
            <div className="iso-task">
              <div>Kickoff call con Aurora Lab</div>
              <div className="meta">
                <div className="team">
                  <div className="av" style={{ background: '#FF6A4D' }}></div>
                  <div className="av" style={{ background: '#5E89FF' }}></div>
                </div>
                <span>Domani</span>
              </div>
            </div>
          </div>
        </div>

        {/* Column 2 — Doing */}
        <div className="iso-card col" style={{ top: 80, left: '40%', transform: 'translateZ(50px)' }}>
          <div className="col-head"><span>In corso</span><span className="pill">3</span></div>
          <div className="col-body">
            <div className="iso-task">
              <div>Campagna Meta — Northwood Q2</div>
              <div className="meta">
                <div className="team">
                  <div className="av" style={{ background: '#C254FF' }}></div>
                  <div className="av" style={{ background: '#C4F060' }}></div>
                </div>
                <span>52%</span>
              </div>
            </div>
            <div className="iso-task">
              <div>Setup analytics — Cinque Sensi</div>
              <div className="meta">
                <div className="team">
                  <div className="av" style={{ background: '#5E89FF' }}></div>
                </div>
                <span>78%</span>
              </div>
            </div>
          </div>
        </div>

        {/* Column 3 — Done */}
        <div className="iso-card col" style={{ top: 80, left: '72%', transform: 'translateZ(80px)' }}>
          <div className="col-head"><span>Consegnato</span><span className="pill">12</span></div>
          <div className="col-body">
            <div className="iso-task">
              <div>Rebrand kit — Brand & Co</div>
              <div className="meta">
                <div className="team">
                  <div className="av" style={{ background: '#FF6A4D' }}></div>
                  <div className="av" style={{ background: '#4FB7FF' }}></div>
                </div>
                <span>✓</span>
              </div>
            </div>
            <div className="iso-task">
              <div>Audit ADV — Costa Studio</div>
              <div className="meta">
                <div className="team">
                  <div className="av" style={{ background: '#5E89FF' }}></div>
                </div>
                <span>✓</span>
              </div>
            </div>
          </div>
        </div>

        <div className="iso-card tag-card" style={{ top: 20, left: '15%', transform: 'translateZ(100px)' }}>
          Sprint 12 · attivo
        </div>
        <div className="iso-card tag-card" style={{ bottom: 30, left: '50%', transform: 'translateZ(120px)' }}>
          Capacity team · 78%
        </div>
      </div>
    </div>
  );
}

window.Delivery = Delivery;

// === sections/aicoach.jsx ===
function AICoach() {
  return (
    <section className="aicoach" id="ai">
      <div className="wrap">
        <div className="sec-head">
          <h2>
            <span className="label-aurora">Coach AI</span> — il sales manager<br />
            che <em>ascolta tutte</em> le call.
          </h2>
          <p>Importi le trascrizioni delle call via Fathom (integrazione nativa) — Zoom, Meet e Gong in arrivo. Pacta legge, capisce e dice al sales cosa fare al prossimo touch.</p>
        </div>

        <div className="coach-stage">
          <div className="coach-console">
            <div className="coach-head">
              <div className="coach-avatar"></div>
              <div className="coach-id">
                <div className="name">Pacta · AI Coach</div>
                <div className="role">analizzando deal · Studio Volpe</div>
              </div>
            </div>

            <div className="deal-context">
              <div className="dctx">
                <div className="lbl">Prospect</div>
                <div className="val">Marco R.</div>
              </div>
              <div className="dctx">
                <div className="lbl">Call analizzate</div>
                <div className="val">3 · 2h 14min</div>
              </div>
              <div className="dctx">
                <div className="lbl">Stage</div>
                <div className="val">Negoziazione</div>
              </div>
            </div>

            <div className="chat-row user">
              <div className="chat-bubble">Come chiudo Marco di Studio Volpe? È fermo da 12 giorni.</div>
            </div>

            <div className="chat-row ai">
              <div className="chat-bubble">
                <div className="insight-tag">Diagnosi</div>
                Marco è bloccato perché deve <strong>vendere il progetto al suo CFO</strong>, non perché non è convinto.
                Lui ti ha detto due volte: "devo riportarlo internamente". Non è una stalla, è un comprato senza ammo.
              </div>
            </div>

            <div className="chat-row ai">
              <div className="chat-bubble">
                <div className="insight-tag">Azione consigliata</div>
                Mandagli oggi un <strong>one-pager con ROI a 6 mesi</strong> usando i dati del suo settore (food D2C, ticket medio €85).
                Inserisci il caso Cinque Sensi: stessa industry, +34% MRR in 4 mesi.
              </div>
            </div>

            <div className="chat-row ai">
              <div className="chat-bubble">
                <div className="insight-tag">Tono</div>
                Marco è <strong>analitico-cauto</strong>. Niente urgency artificiale. Frasi corte, numeri puliti, niente claim emotivi.
              </div>
            </div>

            <div className="chat-input">
              <span className="ph">Chiedi al Coach...</span>
              <button className="send">↑</button>
            </div>
          </div>

          <div className="coach-side">
            <div className="insight-card psych">
              <div className="ic-eyebrow">Profilo psicologico</div>
              <h4>Decisore analitico, rischio-avverso, orientato al team.</h4>
              <p>Marco prende decisioni cercando consenso interno. Risponde meglio a dati che a storie.</p>
              <div className="traits">
                <span className="trait">Analitico</span>
                <span className="trait">Consenso</span>
                <span className="trait">Data-driven</span>
                <span className="trait">Avverso al rischio</span>
              </div>
            </div>

            <div className="insight-card lever">
              <div className="ic-eyebrow">Leve di chiusura</div>
              <h4>Cosa muove il tuo prospect</h4>
              <div className="bar-grp">
                <div className="bar-row">
                  <span>ROI provato</span>
                  <div className="bar-track"><div className="bar-fill" style={{ width: '92%' }}></div></div>
                  <span className="bar-val">92</span>
                </div>
                <div className="bar-row">
                  <span>Social proof</span>
                  <div className="bar-track"><div className="bar-fill" style={{ width: '78%' }}></div></div>
                  <span className="bar-val">78</span>
                </div>
                <div className="bar-row">
                  <span>Rischio basso</span>
                  <div className="bar-track"><div className="bar-fill" style={{ width: '85%' }}></div></div>
                  <span className="bar-val">85</span>
                </div>
                <div className="bar-row">
                  <span>Urgenza</span>
                  <div className="bar-track"><div className="bar-fill" style={{ width: '22%' }}></div></div>
                  <span className="bar-val">22</span>
                </div>
              </div>
            </div>

            <div className="insight-card timing">
              <div className="ic-eyebrow">Timing predittivo</div>
              <h4>Chiusura stimata: <span style={{ color: '#C4F060' }}>9 giorni</span></h4>
              <p>Probabilità di chiusura: <strong style={{ color: 'white' }}>68%</strong>. Se mandi l'one-pager entro 24h, sale a 81%.</p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.AICoach = AICoach;

// === sections/analytics.jsx ===
function Analytics() {
  return (
    <section className="analytics" id="analytics">
      <div className="wrap">
        <div className="sec-head">
          <h2>
            Ogni metrica del tuo<br />
            team commerciale <em>spiegata</em>.
          </h2>
          <p>Non solo dashboard: l'AI legge i numeri e ti dice cosa significano, dove agire, chi sta sotto-performando e perché.</p>
        </div>

        <div className="kpi-grid">
          <div className="kpi-card kc-1">
            <div className="lbl">Win rate · team</div>
            <div className="num">34<span className="unit">%</span></div>
            <div className="viz"><BarsViz /></div>
            <div className="desc">Sopra benchmark agenzia (28%). Pacta ha identificato 2 sales sotto media — guarda i suggerimenti per call review.</div>
          </div>
          <div className="kpi-card kc-2">
            <div className="lbl">Pipeline coverage</div>
            <div className="num">3.4<span className="unit">×</span></div>
            <div className="viz"><RingViz /></div>
            <div className="desc">Copertura del target Q2. Ideale: 3.5×. Stai per uscire dalla zona di sicurezza in stage "Negoziazione".</div>
          </div>
          <div className="kpi-card kc-3">
            <div className="lbl">Ciclo medio</div>
            <div className="num">21<span className="unit">gg</span></div>
            <div className="viz"><LineViz /></div>
            <div className="desc">-4 giorni vs Q1.</div>
          </div>
          <div className="kpi-card kc-4">
            <div className="lbl">Performance per sales</div>
            <div className="num">5<span className="unit">/team</span></div>
            <div className="viz" style={{ height: 140 }}><LeaderViz /></div>
            <div className="desc">Top: Giulia (52%) — usa di più la leva ROI. Bottom: Andrea (19%) — troppo focus su feature, poco su pain. Coach attivato.</div>
          </div>
          <div className="kpi-card kc-5">
            <div className="lbl">Call analizzate dall'AI</div>
            <div className="num">147<span className="unit"></span></div>
            <div className="viz" style={{ height: 140 }}><HeatViz /></div>
            <div className="desc">Top obiezione del trimestre: "budget non approvato" (38 menzioni). Pacta suggerisce 3 risposte testate sui deal chiusi.</div>
          </div>
        </div>
      </div>
    </section>
  );
}

function BarsViz() {
  const bars = [40, 65, 50, 80, 70, 95, 78, 88];
  return (
    <svg viewBox="0 0 240 90" preserveAspectRatio="none" style={{ width: '100%', height: '100%' }}>
      {bars.map((b, i) => (
        <rect key={i} x={i * 30 + 4} y={90 - b * 0.85} width="20" height={b * 0.85} rx="3"
          fill={i === bars.length - 1 ? "url(#g-bar)" : "rgba(94,137,255,0.5)"} />
      ))}
      <defs>
        <linearGradient id="g-bar" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#C254FF" />
          <stop offset="100%" stopColor="#3D6FFF" />
        </linearGradient>
      </defs>
    </svg>
  );
}

function RingViz() {
  const r = 36, c = 2 * Math.PI * r;
  const pct = 0.68;
  return (
    <svg viewBox="0 0 240 90" style={{ width: '100%', height: '100%' }}>
      <defs>
        <linearGradient id="g-ring" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stopColor="#4FB7FF" />
          <stop offset="100%" stopColor="#C254FF" />
        </linearGradient>
      </defs>
      <g transform="translate(50,45)">
        <circle r={r} fill="none" stroke="rgba(255,255,255,0.08)" strokeWidth="8" />
        <circle r={r} fill="none" stroke="url(#g-ring)" strokeWidth="8"
          strokeDasharray={`${c * pct} ${c}`}
          transform="rotate(-90)" strokeLinecap="round" />
      </g>
      <text x="130" y="40" fill="white" fontSize="14" fontFamily="Geist" fontWeight="500">3.4× target</text>
      <text x="130" y="60" fill="#8290B8" fontSize="11" fontFamily="Geist Mono">Q2 € 482K / € 142K</text>
    </svg>
  );
}

function LineViz() {
  return (
    <svg viewBox="0 0 240 90" preserveAspectRatio="none" style={{ width: '100%', height: '100%' }}>
      <defs>
        <linearGradient id="g-line2" x1="0" y1="0" x2="1" y2="0">
          <stop offset="0%" stopColor="#5E89FF" />
          <stop offset="100%" stopColor="#4FB7FF" />
        </linearGradient>
      </defs>
      <path d="M 0 70 Q 50 60, 100 50 T 200 35 L 240 25" stroke="url(#g-line2)" strokeWidth="2.5" fill="none" />
      <circle cx="240" cy="25" r="4" fill="#4FB7FF" />
    </svg>
  );
}

function LeaderViz() {
  const sales = [
    { name: 'Giulia', val: 52, pct: 100 },
    { name: 'Marco', val: 38, pct: 73 },
    { name: 'Luca', val: 31, pct: 60 },
    { name: 'Sara', val: 26, pct: 50 },
    { name: 'Andrea', val: 19, pct: 36 },
  ];
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 6, marginTop: 6 }}>
      {sales.map((s, i) => (
        <div key={s.name} style={{ display: 'grid', gridTemplateColumns: '60px 1fr 30px', gap: 8, alignItems: 'center' }}>
          <span style={{ fontSize: 11, color: '#C7CFE5' }}>{s.name}</span>
          <div style={{ height: 8, background: 'rgba(255,255,255,0.06)', borderRadius: 99, overflow: 'hidden' }}>
            <div style={{
              height: '100%', width: s.pct + '%',
              background: i === 0 ? 'linear-gradient(90deg, #C4F060, #4FB7FF)' : i === sales.length - 1 ? 'linear-gradient(90deg, #FF6A4D, #C254FF)' : 'rgba(94,137,255,0.5)',
              borderRadius: 99,
            }}></div>
          </div>
          <span style={{ fontSize: 11, fontFamily: 'Geist Mono', color: 'white' }}>{s.val}%</span>
        </div>
      ))}
    </div>
  );
}

function HeatViz() {
  const rows = 5, cols = 12;
  const cells = [];
  for (let r = 0; r < rows; r++) {
    for (let c = 0; c < cols; c++) {
      const intensity = Math.abs(Math.sin(r * 1.3 + c * 0.7)) * 0.9 + 0.1;
      cells.push({ r, c, intensity });
    }
  }
  return (
    <div style={{ display: 'grid', gridTemplateColumns: `repeat(${cols}, 1fr)`, gridTemplateRows: `repeat(${rows}, 1fr)`, gap: 3, height: '100%' }}>
      {cells.map((cell, i) => (
        <div key={i} style={{
          background: `rgba(79, 183, 255, ${cell.intensity})`,
          borderRadius: 3,
        }}></div>
      ))}
    </div>
  );
}

window.Analytics = Analytics;

// === sections/workflow.jsx ===
function Workflow() {
  return (
    <section className="workflow">
      <div className="wrap">
        <div className="sec-head">
          <h2>
            Da lead a cliente fidelizzato.<br />
            In <em>quattro mosse</em>.
          </h2>
          <p>Un flusso unico per sales, AI e delivery. Niente più handoff persi, niente più context-switch.</p>
        </div>

        <div className="wf-track">
          <div className="wf-step s1">
            <div className="node">
              <span className="num">01</span>
              <div className="shape3d"></div>
            </div>
            <h4>Cattura</h4>
            <p>Meta Lead Ads, TikTok, Google Ads, form, calendar. Inbox lead unificata: vedi tutto in un posto.</p>
          </div>
          <div className="wf-step s2">
            <div className="node">
              <span className="num">02</span>
              <div className="shape3d"></div>
            </div>
            <h4>Conversa</h4>
            <p>Le call vanno su Fathom, il CRM importa. Pacta sintetizza la trascrizione e analizza personalità del prospect.</p>
          </div>
          <div className="wf-step s3">
            <div className="node">
              <span className="num">03</span>
              <div className="shape3d"></div>
            </div>
            <h4>Chiudi</h4>
            <p>L'AI Coach guida ogni touchpoint: quali leve attivare, cosa dire al prossimo contatto.</p>
          </div>
          <div className="wf-step s4">
            <div className="node">
              <span className="num">04</span>
              <div className="shape3d"></div>
            </div>
            <h4>Consegna</h4>
            <p>Deal vinto → progetto creato automaticamente con brief, task e team assegnato.</p>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Workflow = Workflow;

// === sections/testimonials.jsx ===
function Testimonials() {
  return (
    <section className="testimonials">
      <div className="wrap">
        <div className="sec-head">
          <h2>Stiamo selezionando le<br /><em>prime agenzie</em> beta.</h2>
          <p>Pacta è in beta privata con un gruppo selezionato di agenzie italiane. Vuoi essere tra le prime?</p>
        </div>

        <div className="t-grid">
          <div className="t-card">
            <p className="t-quote">"Cerco un CRM che capisca davvero come vendiamo servizi, non SKU. Pacta sembra pensato per noi."</p>
            <div className="t-author">
              <div className="t-photo"></div>
              <div>
                <div className="t-name">Stiamo cercando te</div>
                <div className="t-role">Agenzia performance · 5-30 sales</div>
              </div>
            </div>
            <div className="t-metric">
              <span className="k">Posti beta</span>
              <span className="v">5 disponibili</span>
            </div>
          </div>
          <div className="t-card">
            <p className="t-quote">"Coachare 8 sales senza ascoltare le call era impossibile. Vediamo se l'AI Coach mantiene quello che promette."</p>
            <div className="t-author">
              <div className="t-photo" style={{ background: 'linear-gradient(135deg, #C254FF, #FF6A4D)' }}></div>
              <div>
                <div className="t-name">Stiamo cercando te</div>
                <div className="t-role">Head of Sales · agenzia 10+ pax</div>
              </div>
            </div>
            <div className="t-metric">
              <span className="k">Trial beta</span>
              <span className="v">1 anno gratis</span>
            </div>
          </div>
          <div className="t-card">
            <p className="t-quote">"Il vero unlock è il delivery. Vediamo se davvero non perdiamo più nulla nel passaggio sales→produzione."</p>
            <div className="t-author">
              <div className="t-photo" style={{ background: 'linear-gradient(135deg, #4FB7FF, #C4F060)' }}></div>
              <div>
                <div className="t-name">Stiamo cercando te</div>
                <div className="t-role">COO · agenzia full service</div>
              </div>
            </div>
            <div className="t-metric">
              <span className="k">Feedback diretto</span>
              <span className="v">Con il founder</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Testimonials = Testimonials;

// === sections/pricing.jsx ===
function Pricing() {
  const [seats, setSeats] = React.useState(3);
  const base = 59;
  const extra = Math.max(0, seats - 3) * 20;
  const total = base + extra;
  const maxSeats = 12;

  return (
    <section className="pricing" id="pricing">
      <div className="wrap">
        <div className="sec-head">
          <h2>Un piano semplice.<br /><em>Cresce</em> con il tuo team.</h2>
          <p>Nessun setup. Nessun "contattaci". Inizi oggi, scali quando il team scala.</p>
        </div>

        <div className="pricing-stage">
          <div className="price-card">
            <span className="price-tag">
              <span style={{ width: 6, height: 6, background: '#4FB7FF', borderRadius: 99, display: 'inline-block', boxShadow: '0 0 8px #4FB7FF' }}></span>
              Pacta · Piano Agenzia
            </span>
            <h3>Tutto incluso.<br />Paghi solo i sales.</h3>
            <p className="price-explain">
              €59/mese fino a 3 sales. Ogni sales in più: €20/mese. 300 crediti AI inclusi ogni mese — coprono l'agenzia media. Crediti extra acquistabili in pack.
            </p>

            <div className="seats">
              <div className="seats-head">
                <span className="lbl">Quanti sales nel tuo team?</span>
                <span className="v">{seats} {seats === 1 ? 'sales' : 'sales'}</span>
              </div>
              <div className="seats-controls">
                <button className="seats-btn" onClick={() => setSeats(Math.max(1, seats - 1))}>−</button>
                <div className="seats-bar">
                  <div className="seats-bar-fill" style={{ width: ((seats - 1) / (maxSeats - 1)) * 100 + '%' }}></div>
                </div>
                <button className="seats-btn" onClick={() => setSeats(Math.min(maxSeats, seats + 1))}>+</button>
              </div>
              <div className="seats-info">
                <span>Fino a 3 sales: inclusi</span>
                <span className="extra">+ {Math.max(0, seats - 3)} extra · € {extra}/mese</span>
              </div>
            </div>

            <div className="price-total">
              <span className="num"><span className="euro">€</span>{total}</span>
              <span className="per">/ mese</span>
            </div>
            <div className="price-breakdown">
              € 59 base{extra > 0 && ` + € ${extra} (${seats - 3} sales extra)`} · IVA esclusa · fatturazione mensile
            </div>

            <div className="price-cta">
              <a href="https://app.pactacrm.com/auth" className="btn-primary">
                Provalo gratis per 14 giorni
                <span className="arrow">→</span>
              </a>
              <a href="mailto:hello@pactacrm.com?subject=Pacta%20-%20consulenza%20demo" className="btn-ghost">Parla con un consulente</a>
            </div>

            <div className="reassure">
              14 giorni gratis · nessuna carta richiesta · cancelli quando vuoi
            </div>
          </div>

          <div className="price-feats">
            <h4>Tutto questo è incluso</h4>
            <ul>
              <li><span className="mk"></span><span><strong>Sales Hub</strong> — pipeline illimitate, deal illimitati, deal management completo.</span></li>
              <li><span className="mk"></span><span><strong>Delivery Hub</strong> — area progetti, task, assegnazione team.</span></li>
              <li><span className="mk"></span><span><strong>AI Coach</strong> — analisi trascrizioni, profili psicologici, suggerimenti per ogni deal — 300 crediti/mese inclusi.</span></li>
              <li><span className="mk"></span><span><strong>Analytics</strong> — KPI per sales, performance del team, win-loss patterns.</span></li>
              <li><span className="mk"></span><span><strong>Integrazioni</strong> — Fathom (trascrizioni call), Google Calendar, Slack, Telegram, webhook Zapier/Make.</span></li>
              <li><span className="mk"></span><span><strong>Lead generation</strong> — Meta Lead Ads, TikTok Lead Ads, Google Ads Lead Forms.</span></li>
              <li><span className="mk"></span><span><strong>Crediti AI extra</strong> — pack acquistabili in qualsiasi momento (100 / 500 / 2000).</span></li>
              <li><span className="mk"></span><span><strong>Supporto in italiano</strong> — supporto via email, risposta in giornata.</span></li>
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Pricing = Pricing;

// === sections/finalcta.jsx ===
function FinalCTA() {
  return (
    <section className="finalcta">
      <div className="wrap finalcta-content">
        <span className="eyebrow eyebrow-dot" style={{ color: '#C7CFE5' }}>Pronto a vendere di più?</span>
        <h2>
          Il tuo prossimo<br />
          deal vinto inizia <em>oggi</em>.
        </h2>
        <p>14 giorni di Pacta senza vincoli. Importa la tua pipeline, carica una call, vedi il coach all'opera.</p>
        <div className="hero-cta-row">
          <a href="https://app.pactacrm.com/auth" className="btn-primary">
            Provalo gratis per 14 giorni
            <span className="arrow">→</span>
          </a>
          <a href="mailto:hello@pactacrm.com?subject=Pacta%20-%20demo%20guidata" className="btn-ghost">Prenota una demo guidata</a>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer>
      <div className="wrap">
        <div className="foot-grid">
          <div>
            <div className="foot-brand">
              <div className="nav-brand"><div className="mark"></div></div>
              Pacta
            </div>
            <p style={{ fontSize: 13, color: '#8290B8', maxWidth: 320, lineHeight: 1.6 }}>
              Pacta è il CRM AI che mantiene i patti al posto tuo — così non perdi più nessuna trattativa.
            </p>
          </div>
          <div className="foot-col">
            <h5>Prodotto</h5>
            <ul>
              <li><a href="#sales">Sales Hub</a></li>
              <li><a href="#delivery">Delivery</a></li>
              <li><a href="#ai">AI Coach</a></li>
              <li><a href="#analytics">Analytics</a></li>
            </ul>
          </div>
          <div className="foot-col">
            <h5>Risorse</h5>
            <ul>
              <li><a href="https://app.pactacrm.com/cookies">Cookie Policy</a></li>
              <li><a href="https://app.pactacrm.com/privacy">Privacy Policy</a></li>
            </ul>
          </div>
          <div className="foot-col">
            <h5>Azienda</h5>
            <ul>
              <li><a href="mailto:hello@pactacrm.com">Contatti</a></li>
              <li><a href="https://app.pactacrm.com/auth">Accedi</a></li>
            </ul>
          </div>
        </div>
        <div className="foot-bottom">
          <span>© 2026 Pacta srl · P.IVA 12345678901</span>
          <span>Costruito in Italia · Server in EU · GDPR-ready</span>
        </div>
      </div>
    </footer>
  );
}

window.FinalCTA = FinalCTA;
window.Footer = Footer;