/* global React */
const { useState, useMemo, useEffect } = React;

// ─── Logo Impresoft (wordmark + chevron pittogramma)
function ImpresoftLogo({ scale = 1, color = "var(--black)", chevronColor = "var(--yellow)", showPayoff = true }) {
  return (
    <div style={{ display: "inline-flex", alignItems: "center", gap: 8 * scale, lineHeight: 1 }}>
      <div style={{ display: "flex", alignItems: "baseline", gap: 6 * scale }}>
        <span style={{
          fontFamily: "Manrope, Arial, Helvetica, sans-serif",
          fontWeight: 800,
          fontSize: 22 * scale,
          letterSpacing: "-0.04em",
          color,
          lineHeight: 1,
        }}>impresoft</span>
        <span style={{
          fontFamily: "Manrope, Arial, Helvetica, sans-serif",
          fontWeight: 800,
          fontSize: 22 * scale,
          color: chevronColor,
          lineHeight: 1,
        }}>&gt;</span>
      </div>
      {showPayoff && (
        <div style={{
          paddingLeft: 10 * scale,
          marginLeft: 2 * scale,
          borderLeft: `1.5px solid ${color === "var(--white)" ? "rgba(255,255,255,0.3)" : "rgba(0,0,0,0.18)"}`,
          display: "flex", flexDirection: "column", gap: 1,
        }}>
          <span style={{
            fontFamily: "Manrope, Arial, Helvetica, sans-serif",
            fontWeight: 700,
            fontSize: 11 * scale,
            color,
            letterSpacing: "0.02em",
            lineHeight: 1.1,
          }}>engage</span>
          <span style={{
            fontFamily: "Manrope, Arial, Helvetica, sans-serif",
            fontWeight: 500,
            fontSize: 8 * scale,
            color: color === "var(--white)" ? "rgba(255,255,255,0.6)" : "rgba(0,0,0,0.55)",
            letterSpacing: "0.14em",
            textTransform: "uppercase",
            lineHeight: 1.1,
          }}>RevOps Assessment</span>
        </div>
      )}
    </div>
  );
}

// Pattern decorativo: ripetizione del chevron
function ChevronPattern({ density = 8, opacity = 0.08, color = "currentColor", rotate = -20 }) {
  const rows = Array.from({ length: density });
  const cols = Array.from({ length: density * 2 });
  return (
    <div style={{
      position: "absolute", inset: 0, overflow: "hidden", pointerEvents: "none",
      transform: `rotate(${rotate}deg) scale(1.4)`, transformOrigin: "center",
    }}>
      {rows.map((_, r) => (
        <div key={r} style={{ display: "flex", justifyContent: "center", gap: 16, marginBottom: 8 }}>
          {cols.map((_, c) => (
            <span key={c} style={{
              fontFamily: "Manrope, sans-serif",
              fontWeight: 800, fontSize: 22, color, opacity,
              userSelect: "none",
            }}>&gt;</span>
          ))}
        </div>
      ))}
    </div>
  );
}

// ─── Scala 1-10
function StageScale({ score }) {
  const stage = Math.max(1, Math.min(10, Math.round(score)));
  return (
    <div className="scale-wrap">
      <div className="stage-scale">
        {STAGES.map((s) => {
          const active = s.n === stage;
          return (
            <div key={s.n} className={`stage ${active ? "active" : ""}`}>
              <div className="num">{s.n}</div>
              <div className="lbl">{s.name}</div>
            </div>
          );
        })}
      </div>
      <div className="phase-bar">
        <div className="p1">&gt; Crescita Accelerata</div>
        <div className="p2">&gt; Crescita Composita</div>
        <div className="p3">&gt; Crescita Autonoma</div>
      </div>
      {score != null && (
        <div className="stage-marker" style={{ left: `calc(${(stage - 0.5) * 10}% )` }}>
          <div className="dot" />
          <div className="lbl-pill">La tua azienda · Fase {stage}</div>
        </div>
      )}
    </div>
  );
}

// Hero heading
function HeroHeading() {
  return (
    <h1 className="display" style={{ fontSize: "clamp(34px, 4.5vw, 56px)", textAlign: "center", margin: 0, fontWeight: 800, letterSpacing: "-0.025em" }}>
      Primo step per passare da
      <br />
      <span style={{ fontWeight: 500, fontStyle: "italic", color: "var(--ink-3)" }}>eseguire</span>
      <span style={{ color: "var(--ink-3)", fontWeight: 500 }}> la Crescita a </span>
      <span style={{ background: "var(--yellow)", padding: "0 14px", display: "inline-block", transform: "skew(-3deg)" }}>orchestrarla</span>
      <span style={{ color: "var(--ink-3)", fontWeight: 500 }}>:</span>
      <br />
      <span style={{ fontWeight: 500, color: "var(--ink-3)", fontSize: "0.7em" }}>
        capire dove si trova la tua azienda <em>oggi</em>.
      </span>
    </h1>
  );
}

// ─── Costruisce il messaggio HubSpot con Q&A numerato + risultati assessment
function buildHubSpotMessage(answers, lead) {
  // ── Sezione Q&A ──
  const qa = [];
  let qNum = 0;
  PILLARS.forEach((p) => {
    p.questions.forEach((q, i) => {
      qNum++;
      const v = answers[`${p.id}-${i}`];
      const optIdx = q.opts.findIndex((o) => o.v === v);
      const opt = q.opts[optIdx];
      const letter = ["A", "B", "C", "D"][optIdx] ?? "?";
      qa.push(`${qNum}) ${p.name} - ${q.q}`);
      qa.push(`${letter}) ${opt ? opt.t : "(non risposto)"}`);
      qa.push("");
    });
  });

  // ── Sezione risultati ──
  const { pillarScores, global, phase, stdev } = computeScores(answers);
  const stage = stageFromScore(global);
  const ph = PHASES[phase];
  const pattern = matchPattern(pillarScores, answers, global, stdev);
  const criticalPillars = getCriticalPillars(pillarScores, global);
  const strongPillars = getStrongPillars(pillarScores, global);
  const actions = generateActions(pillarScores, global, pattern);

  const res = [];
  res.push("════════════════════════════════════");
  res.push(`RISULTATI ASSESSMENT — ${(lead?.azienda || "").toUpperCase()}`);
  res.push("════════════════════════════════════");
  res.push("");
  res.push(`Score globale:   ${global.toFixed(1)} / 10`);
  res.push(`Fase:            ${stage} — ${STAGES[stage - 1].name}`);
  res.push(`Macro-fase:      ${ph.label} (${ph.range})`);
  res.push(`Pattern:         ${pattern.name}`);
  res.push(`Tagline:         ${pattern.tagline}`);
  res.push("");
  res.push("── Breakdown pillar ──────────────────");
  pillarScores.forEach((p) => {
    const bar = "█".repeat(Math.round(p.score)) + "░".repeat(10 - Math.round(p.score));
    const label = getLabelForScore(p.score);
    res.push(`${p.n} ${p.name.padEnd(20)} ${bar}  ${p.score.toFixed(1)}/10  [${label}]`);
  });
  res.push("");
  if (criticalPillars.length > 0) {
    res.push("── Pillar critici ────────────────────");
    criticalPillars.forEach((p) => res.push(`• ${p.name}: ${p.score.toFixed(1)}/10`));
    res.push("");
  }
  if (strongPillars.length > 0) {
    res.push("── Punti di forza ────────────────────");
    strongPillars.forEach((p) => res.push(`• ${p.name}: ${p.score.toFixed(1)}/10`));
    res.push("");
  }
  res.push("── 3 azioni prioritarie ─────────────");
  actions.forEach((a, i) => {
    res.push(`${i + 1}. [${a.pillar}] ${a.action}`);
  });

  return [...qa, ...res].join("\n").trim();
}

// HubSpot Forms API — submit EU portal
async function submitToHubSpot({ lead, answers }) {
  const cfg       = (window.REVOPS_CONFIG || {});
  const PORTAL_ID = cfg.portalId || "26601386";
  const FORM_ID   = cfg.formId   || "ef738ac1-6967-4966-a244-cc2929266fc2";
  const message   = buildHubSpotMessage(answers, lead);

  const sourceSubmission = new URLSearchParams(window.location.search).get("engage__source_submission") || "";
  const fields = [
    { objectTypeId: "0-1", name: "firstname",    value: lead.nome      || "" },
    { objectTypeId: "0-1", name: "lastname",     value: lead.cognome   || "" },
    { objectTypeId: "0-1", name: "email",        value: lead.email     || "" },
    { objectTypeId: "0-1", name: "company",      value: lead.azienda   || "" },
    { objectTypeId: "0-1", name: "mobilephone",  value: lead.cellulare || "" },
    { objectTypeId: "0-1", name: "message",      value: message        },
  ];
  if (sourceSubmission) {
    fields.push({ objectTypeId: "0-1", name: "engage__source_submission", value: sourceSubmission });
  }

  const body = {
    fields,
    legalConsentOptions: {
      consent: {
        consentToProcess: true,
        text: "Cliccando sul pulsante sottostante dichiaro di aver letto e compreso l'informativa privacy",
        communications: [
          {
            value: !!lead.marketing,
            subscriptionTypeId: 289759401,
            text: "Acconsento al trattamento dei dati per finalità di marketing da parte del Titolare Impresoft Engage come indicato al paragrafo 3 punto 8 dell'informativa privacy, nonché per la ricezione di newsletter di marketing da parte del Titolare Impresoft Engage come indicato al paragrafo 3 punto 14 dell'informativa privacy",
          },
          {
            value: !!lead.marketing2,
            subscriptionTypeId: 263710602,
            text: "Acconsento alla comunicazione da parte del Titolare Impresoft Engage dei dati alle Società del Gruppo per il trattamento da parte di queste ultime dei dati per finalità di marketing sui prodotti e servizi propri e delle società del Gruppo come indicato al paragrafo 3 punto 9 dell'informativa privacy",
          },
        ],
      },
    },
    context: { pageUri: window.location.href, pageName: document.title },
    submittedAt: Date.now(),
  };

  try {
    const res = await fetch(
      `https://api.hsforms.com/submissions/v3/integration/submit/${PORTAL_ID}/${FORM_ID}`,
      { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(body) }
    );
    const data = await res.json().catch(() => ({}));
    if (!res.ok) {
      console.error("HubSpot error", res.status, data);
      return { ok: false, status: res.status, data };
    }
    return { ok: true, status: res.status, data };
  } catch (e) {
    console.error("HubSpot fetch error", e);
    return { ok: false, error: e.message };
  }
}

// HubSpot Forms API — email capture (fiera / trade fair)
async function submitEmailCapture({ nome, cognome, email, marketing, marketing2, source }) {
  const cfg       = (window.REVOPS_CONFIG || {});
  const PORTAL_ID = cfg.portalId           || "26601386";
  const FORM_ID   = cfg.emailCaptureFormId || "46ec11a8-0400-4361-8951-0c536ce8c48d";

  const fields = [
    { objectTypeId: "0-1", name: "firstname", value: nome    || "" },
    { objectTypeId: "0-1", name: "lastname",  value: cognome || "" },
    { objectTypeId: "0-1", name: "email",     value: email   || "" },
  ];
  if (source) {
    fields.push({ objectTypeId: "0-1", name: "engage__source_submission", value: source });
  }

  const body = {
    fields,
    legalConsentOptions: {
      consent: {
        consentToProcess: true,
        text: "Cliccando sul pulsante sottostante dichiaro di aver letto e compreso l'informativa privacy",
        communications: [
          {
            value: !!marketing,
            subscriptionTypeId: 289759401,
            text: "Acconsento al trattamento dei dati per finalità di marketing da parte del Titolare Impresoft Engage come indicato al paragrafo 3 punto 8 dell'informativa privacy, nonché per la ricezione di newsletter di marketing da parte del Titolare Impresoft Engage come indicato al paragrafo 3 punto 14 dell'informativa privacy",
          },
          {
            value: !!marketing2,
            subscriptionTypeId: 263710602,
            text: "Acconsento alla comunicazione da parte del Titolare Impresoft Engage dei dati alle Società del Gruppo per il trattamento da parte di queste ultime dei dati per finalità di marketing sui prodotti e servizi propri e delle società del Gruppo come indicato al paragrafo 3 punto 9 dell'informativa privacy",
          },
        ],
      },
    },
    context: { pageUri: window.location.href, pageName: document.title },
    submittedAt: Date.now(),
  };

  try {
    const res = await fetch(
      `https://api.hsforms.com/submissions/v3/integration/submit/${PORTAL_ID}/${FORM_ID}`,
      { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(body) }
    );
    const data = await res.json().catch(() => ({}));
    if (!res.ok) {
      console.error("HubSpot emailCapture error", res.status, data);
      return { ok: false, status: res.status, data };
    }
    return { ok: true, status: res.status, data };
  } catch (e) {
    console.error("HubSpot emailCapture fetch error", e);
    return { ok: false, error: e.message };
  }
}

// Validazione cellulare italiano
function isValidPhone(v) {
  return /^(\+39|0039)?\s?3\d{2}[\s\-]?\d{3}[\s\-]?\d{4}$/.test(v.trim());
}

// ─── Lead form (gating)
function LeadForm({ onSubmit, answers }) {
  const [data, setData] = useState({
    nome: "", cognome: "", azienda: "", email: "", ruolo: "",
    cellulare: "", marketing: false, marketing2: false,
  });
  const [phoneErr, setPhoneErr] = useState(false);
  const [submitting, setSubmitting] = useState(false);
  const [err, setErr] = useState(null);

  const phoneOk = data.cellulare === "" || isValidPhone(data.cellulare);
  const valid = data.nome && data.cognome && data.email && data.azienda
    && data.cellulare && isValidPhone(data.cellulare);

  async function handleSubmit(e) {
    e.preventDefault();
    if (!isValidPhone(data.cellulare)) { setPhoneErr(true); return; }
    if (!valid || submitting) return;
    setSubmitting(true);
    setErr(null);
    const res = await submitToHubSpot({ lead: data, answers: answers || {} });
    setSubmitting(false);
    if (!res.ok) {
      setErr("Si è verificato un errore nell'invio. La tua diagnosi è comunque pronta — riproveremo a inviare i dati. Errore: " + (res.data?.message || res.error || res.status));
    }
    onSubmit(data);
  }

  return (
    <form className="lead-form" onSubmit={handleSubmit}>
      <div className="lf-grid">
        <label><span>Nome *</span>
          <input required value={data.nome} onChange={(e)=>setData({...data, nome:e.target.value})} placeholder="Mario"/>
        </label>
        <label><span>Cognome *</span>
          <input required value={data.cognome} onChange={(e)=>setData({...data, cognome:e.target.value})} placeholder="Rossi"/>
        </label>
        <label><span>Email business *</span>
          <input required type="email" value={data.email} onChange={(e)=>setData({...data, email:e.target.value})} placeholder="m.rossi@azienda.com"/>
        </label>
        <label><span>Azienda *</span>
          <input required value={data.azienda} onChange={(e)=>setData({...data, azienda:e.target.value})} placeholder="Nome azienda"/>
        </label>
        <label><span>Cellulare *</span>
          <input
            required
            type="tel"
            value={data.cellulare}
            onChange={(e) => { setPhoneErr(false); setData({...data, cellulare: e.target.value}); }}
            onBlur={() => setPhoneErr(data.cellulare !== "" && !isValidPhone(data.cellulare))}
            placeholder="+39 333 000 0000"
            style={phoneErr ? { borderColor: "var(--err)" } : {}}
          />
          {phoneErr && <span style={{ color: "var(--err)", fontSize: 11, marginTop: 2 }}>Inserisci un numero di cellulare italiano valido (es. +39 333 000 0000)</span>}
        </label>
        <label className="lf-full"><span>Ruolo</span>
          <input value={data.ruolo} onChange={(e)=>setData({...data, ruolo:e.target.value})} placeholder="es. CRO, COO, Head of RevOps, Sales Director"/>
        </label>
      </div>

      <label className="check">
        <input type="checkbox" checked={data.marketing} onChange={(e)=>setData({...data, marketing:e.target.checked})} />
        <span>Acconsento al trattamento dei dati per finalità di marketing da parte del Titolare Impresoft Engage come indicato al paragrafo 3 punto 8 dell'informativa privacy, nonché per la ricezione di newsletter di marketing da parte del Titolare Impresoft Engage come indicato al paragrafo 3 punto 14 dell'informativa privacy. <em>(facoltativo)</em></span>
      </label>
      <label className="check">
        <input type="checkbox" checked={data.marketing2} onChange={(e)=>setData({...data, marketing2:e.target.checked})} />
        <span>Acconsento alla comunicazione da parte del Titolare Impresoft Engage dei dati alle Società del Gruppo per il trattamento da parte di queste ultime dei dati per finalità di marketing sui prodotti e servizi propri e delle società del Gruppo come indicato al paragrafo 3 punto 9 dell'informativa privacy. <em>(facoltativo)</em></span>
      </label>

      <p style={{ fontSize: 12, color: "var(--ink-3)", lineHeight: 1.5, margin: "4px 0 0" }}>
        Cliccando sul pulsante sottostante dichiaro di aver letto e compreso l'<u style={{ cursor: "pointer" }}>informativa privacy</u>.
      </p>

      <button type="submit" className="btn btn-primary lf-submit" disabled={!valid || submitting}>
        {submitting ? "Invio in corso…" : "Sblocca la mia diagnosi >"}
      </button>
      {err && <div className="lf-err">⚠ {err}</div>}
    </form>
  );
}

// ─── HubSpot Meetings embed
function MeetingsEmbed({ lead }) {
  // Precompila i campi del form di prenotazione con i dati già inseriti dall'utente
  const base = "https://impresoftengage.com/meetings/a-bruti/revops-assessment-review?embed=true";
  const params = new URLSearchParams();
  if (lead?.nome)    params.set("firstName", lead.nome);
  if (lead?.cognome) params.set("lastName",  lead.cognome);
  if (lead?.email)   params.set("email",     lead.email);
  const qs = params.toString();
  const src = qs ? `${base}&${qs}` : base;

  useEffect(() => {
    const s = document.createElement("script");
    s.type = "text/javascript";
    s.src = "https://static.hsappstatic.net/MeetingsEmbed/ex/MeetingsEmbedCode.js";
    s.async = true;
    document.body.appendChild(s);
    return () => { document.body.removeChild(s); };
  }, []);
  return (
    <div
      className="meetings-iframe-container"
      data-src={src}
      style={{ minHeight: 720, width: "100%", background: "var(--white)" }}
    />
  );
}

// ─── Schermata risultato
function ResultScreen({ answers, lead, aiData, onRestart }) {
  const { pillarScores, global, phase, stdev } = useMemo(() => computeScores(answers), [answers]);
  const stage = stageFromScore(global);
  const ph = PHASES[phase];

  const pattern      = useMemo(() => matchPattern(pillarScores, answers, global, stdev),  []);
  const criticalPillars = useMemo(() => getCriticalPillars(pillarScores, global), []);
  const strongPillars   = useMemo(() => getStrongPillars(pillarScores, global),   []);
  const actions         = useMemo(() => generateActions(pillarScores, global, pattern), []);

  const nextLevel = Math.min(stage + 1, 10);
  const ctaHeading = stage >= 10
    ? "Confronta la tua maturità con altre aziende leader. Prenota una call con Alessandro Bruti."
    : `Prenota una call con Alessandro Bruti per capire come passare alla fase ${nextLevel}.`;

  // Paragrafo diagnostico composto (Parte A + B + C)
  const diagnosticParts = [];
  if (strongPillars.length > 0) {
    const sNames = strongPillars.map((p) => `${p.name} (${p.score.toFixed(1)}/10)`).join(" e ");
    diagnosticParts.push(`I tuoi punti di forza sono ${sNames}: asset competitivi reali nel contesto mid-market.`);
  }
  diagnosticParts.push(pattern.diagnosis);
  if (criticalPillars.length > 0) {
    const critText = criticalPillars.length === 1
      ? `Il pillar ${criticalPillars[0].name} è a ${criticalPillars[0].score.toFixed(1)}/10: è il principale collo di bottiglia del sistema.`
      : `${criticalPillars.map((p) => `${p.name} è a ${p.score.toFixed(1)}/10`).join(", mentre ")}: questi gap pesano sull'efficienza dell'intera macchina commerciale.`;
    diagnosticParts.push(critText);
    diagnosticParts.push("Ogni mese senza intervento aumenta il costo di recupero. I gap operativi si amplificano: il debito tecnico e organizzativo cresce più in fretta del fatturato.");
  }

  return (
    <div className="result-screen">

      {/* ── 1. Hero block ── */}
      <div className="r-hero">
        <div className="kicker">Diagnosi RevOps · {lead?.azienda || "la tua azienda"}</div>
        <h1 className="display" style={{
          fontSize: "clamp(28px, 4.6vw, 58px)",
          margin: "16px 0 16px",
          fontWeight: 800,
          letterSpacing: "-0.025em",
          wordBreak: "break-word",
          overflowWrap: "break-word",
        }}>
          {lead?.azienda || "La tua azienda"} è in fase{" "}
          <span style={{ background: "var(--yellow)", padding: "0 10px", display: "inline-block", lineHeight: 1.2 }}>
            {stage} · {STAGES[stage - 1].name}
          </span>
        </h1>
        <p className="r-tagline">"{pattern.tagline}"</p>
      </div>

      {/* ── 2. Scala ── */}
      <div className="r-scale">
        <StageScale score={global} />
      </div>

      {/* ── 3 + 4. Macro-fase + Score globale ── */}
      <div className="r-summary">
        <div className="r-phase-card">
          <div className="kicker">Macro-fase {ph.range} · {ph.label}</div>
          <p style={{ fontSize: 16, lineHeight: 1.6, marginTop: 14, color: "var(--ink-2)" }}>{ph.description}</p>
          <div className="r-risk">⚠ {ph.risk}</div>
        </div>
        <div className="r-global">
          <div className="kicker">Score globale</div>
          <div className="score-big">{global.toFixed(1)}<span>/10</span></div>
          <div style={{ color: "rgba(255,255,255,.6)", fontSize: 12, marginTop: 6, lineHeight: 1.5, position: "relative", zIndex: 1 }}>
            Score medio pesato sui 5 pillar<br />(corretto per squilibrio)
          </div>
        </div>
      </div>

      {/* ── 5. AI insight (se disponibile) ── */}
      {aiData?.globalInsight && (
        <div style={{ margin: "0 0 36px", padding: "28px 32px", background: "var(--black)", color: "var(--white)", borderRadius: "var(--radius-md)" }}>
          <div className="kicker" style={{ color: "var(--yellow)", marginBottom: 12 }}>
            Analisi AI · {aiData.businessModel}
            {aiData.urgency === "high" && (
              <span style={{ marginLeft: 12, background: "var(--err)", color: "var(--white)", padding: "2px 8px", borderRadius: "999px", fontSize: 10 }}>PRIORITÀ ALTA</span>
            )}
          </div>
          <p style={{ fontSize: 16, lineHeight: 1.65, margin: 0, color: "rgba(255,255,255,.88)" }}>{aiData.globalInsight}</p>
        </div>
      )}

      {/* ── 6. Paragrafo diagnostico ── */}
      <div className="r-diagnostic">
        <div className="kicker" style={{ marginBottom: 16 }}>Analisi diagnostica · {pattern.name}</div>
        {diagnosticParts.map((part, i) => (
          <p key={i} style={{ fontSize: 16, lineHeight: 1.7, color: "var(--ink-2)", margin: "0 0 10px" }}>{part}</p>
        ))}
      </div>

      {/* ── 7. Breakdown per pillar ── */}
      <div className="r-pillars">
        <div className="kicker" style={{ marginBottom: 22 }}>Breakdown per pillar · 5 dimensioni della Revenue Architecture</div>
        <div className="pillar-grid">
          {pillarScores.map((p) => {
            const pct = (p.score / 10) * 100;
            const label = getLabelForScore(p.score);
            const tone = p.score <= 5.4 ? "low" : p.score <= 7.4 ? "mid" : "high";
            const isCritical = criticalPillars.some((c) => c.id === p.id);
            return (
              <div key={p.id} className={`pillar-card t-${tone}${isCritical ? " is-critical" : ""}`}>
                <div className="pc-top">
                  <span className="pc-n">{p.n}</span>
                  <span className="pc-name">{p.name}</span>
                  <span className="pc-score">{p.score.toFixed(1)}</span>
                </div>
                <div className="pc-bar"><div className="pc-fill" style={{ width: `${pct}%` }} /></div>
                <div className="pc-label">{label}</div>
                <div className="pc-rec">&gt; {getAction(p.id, p.score)}</div>
                {aiData?.pillarComments?.[p.name] && (
                  <div style={{ marginTop: 10, padding: "10px 12px", background: "var(--yellow-soft)", borderLeft: "3px solid var(--yellow)", fontSize: 13, lineHeight: 1.55, color: "var(--ink-2)" }}>
                    {aiData.pillarComments[p.name]}
                  </div>
                )}
              </div>
            );
          })}
        </div>
      </div>

      {/* ── 8. Le 3 azioni prioritarie ── */}
      <div className="r-actions">
        <div className="kicker r-actions-kicker">Le 3 azioni prioritarie</div>
        <div className="actions-list">
          {actions.map((a, i) => (
            <div key={i} className="action-item">
              <div className="action-n">{i + 1}</div>
              <div className="action-body">
                <div className="action-pillar">
                  {a.pillar === "Sistema" ? "Azione di Sistema" : `Pillar ${a.pillar}`}
                </div>
                <div className="action-text">{a.action}</div>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* ── 9. CTA ── */}
      <div className="r-cta">
        <div className="r-cta-head">
          <div className="kicker" style={{ color: "var(--yellow)" }}>Prossimo passo · call gratuita 30 minuti</div>
          <h2 className="display" style={{
            fontSize: "clamp(24px, 3.5vw, 42px)",
            margin: "16px 0 12px",
            color: "var(--white)",
            fontWeight: 800,
            letterSpacing: "-0.025em",
          }}>
            {ctaHeading}
          </h2>
          <p style={{ fontSize: 16, color: "rgba(255,255,255,.72)", lineHeight: 1.55, margin: "0 auto", maxWidth: 680 }}>
            Revenue Operations Manager di Impresoft Engage. Analizziamo insieme i 3 gap principali della tua diagnosi e definiamo un percorso di intervento concreto. Nessun impegno.
          </p>
        </div>
        <div className="r-meetings">
          <MeetingsEmbed lead={lead} />
        </div>
        <div style={{ textAlign: "center", marginTop: 24 }}>
          <button className="btn btn-ghost" onClick={onRestart} style={{ color: "rgba(255,255,255,.7)" }}>
            ↻ Rifai la diagnosi
          </button>
        </div>
      </div>

    </div>
  );
}

window.StageScale = StageScale;
window.HeroHeading = HeroHeading;
window.LeadForm = LeadForm;
window.ResultScreen = ResultScreen;
window.ImpresoftLogo = ImpresoftLogo;
window.ChevronPattern = ChevronPattern;
window.MeetingsEmbed = MeetingsEmbed;
window.submitEmailCapture = submitEmailCapture;