/* FinBalance Pro — Landing v4 · modern + playful, reference-inspired */

/* ─── NAV ────────────────────────────────────────────────────────────────── */

function Nav() {
  const [p, setP] = React.useState(0); // 0 → 1 over the first 160px of scroll
  React.useEffect(() => {
    const onScroll = () => setP(Math.min(1, window.scrollY / 160));
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  return (
    <header style={{
      position: "fixed", top: 0, left: 0, right: 0, zIndex: 50,
      background: `rgba(255,255,255,${(0.85 * p).toFixed(3)})`,
      borderBottom: `1px solid rgba(13,34,64,${(0.10 * p).toFixed(3)})`,
      backdropFilter: p > 0.01 ? `saturate(150%) blur(${(14 * p).toFixed(1)}px)` : "none",
      WebkitBackdropFilter: p > 0.01 ? `saturate(150%) blur(${(14 * p).toFixed(1)}px)` : "none",
      transition: "background .15s ease, border-color .15s ease",
    }}>
      <Container>
        <div style={{ display: "flex", alignItems: "center", padding: "16px 0", gap: 36 }}>
          <Logo height={34} />
          <div style={{ flex: 1 }}></div>
          <nav style={{ display: "flex", gap: 32, fontSize: 14.5, color: "var(--ink-mid)" }} className="nav-links">
            <a style={navLink} href="#prodotto">Prodotto</a>
            <a style={navLink} href="#faq">FAQ</a>
          </nav>
          <div className="nav-cta">
            <PrimaryCTA size="md">Prenota una demo</PrimaryCTA>
          </div>
        </div>
      </Container>
      <style>{`
        @media (max-width: 980px){ .nav-links { display: none !important; } }
      `}</style>
    </header>
  );
}
const navLink = { color: "var(--ink-mid)", textDecoration: "none" };

/* ─── HERO — pastel mesh + chevron geometry + inline chips (decluttered) ── */

function Hero() {
  return (
    <section style={{ position: "relative", overflow: "hidden", minHeight: "92vh", display: "flex", flexDirection: "column" }}>
      <HeroBackdrop />

      <Container>
        <div className="fbp-hero-anim" style={{ position: "relative", zIndex: 2, paddingTop: 120, paddingBottom: 80 }}>
          {/* headline */}
          <h1 style={{
            marginTop: 32,
            fontSize: "clamp(40px, 5.6vw, 82px)",
            fontWeight: 800,
            lineHeight: 1.08,
            letterSpacing: "-0.03em",
            color: "var(--navy)",
            maxWidth: 1200,
            textWrap: "balance",
          }}>
            Il piano di cassa a 30–60–90 giorni che funziona con i <em style={{ fontStyle: "italic", fontWeight: 600, color: "var(--teal-dark)" }}>dati che hai già</em>.
          </h1>

          {/* subhead */}
          <p style={{
            marginTop: 36, maxWidth: 680,
            fontSize: "clamp(17px, 1.4vw, 20px)",
            color: "var(--ink-mid)", lineHeight: 1.55, fontWeight: 400,
          }}>
            Senza integrazioni, senza IT, senza consulenti. Operativo in meno di due ore.
          </p>

          {/* CTAs */}
          <div style={{ marginTop: 40, display: "flex", flexWrap: "wrap", alignItems: "center", gap: 24 }}>
            <PrimaryCTA size="lg">Prenota una demo di 20 minuti</PrimaryCTA>
            <GhostLink href="#prodotto">Scopri il prodotto</GhostLink>
          </div>
        </div>

        {/* Footer of hero: stars + meta — like reference, anchored at bottom */}
        <div style={{
          position: "relative", zIndex: 2,
          marginTop: "auto",
          paddingTop: 40, paddingBottom: 40,
          display: "flex", flexDirection: "column", gap: 28,
        }}>
          <StarRating value={4.9} count={28} />
          <HeroPromise />
        </div>
      </Container>
    </section>
  );
}

/* ─── Hero promise sentence — gray body w/ colored highlight + icon chips ── */

function HiTag({ tone, children }) {
  const bg = {
    peach: "var(--peach)",
    sky:   "var(--sky)",
    lilac: "var(--lilac)",
    mint:  "var(--mint)",
  };
  return (
    <span style={{
      background: bg[tone] || bg.sky,
      color: "var(--navy)",
      fontWeight: 600,
      padding: "0.04em 0.34em",
      borderRadius: "0.34em",
      boxDecorationBreak: "clone",
      WebkitBoxDecorationBreak: "clone",
    }}>
      {children}
    </span>
  );
}

function HiIcon({ kind }) {
  const s = "0.62em";
  const sw = 2.2;
  const common = { width: s, height: s, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: sw, strokeLinecap: "round", strokeLinejoin: "round" };
  switch (kind) {
    case "chart": return <svg {...common}><path d="M4 20V10M10 20V4M16 20v-7M22 20V8"/></svg>;
    case "cal":   return <svg {...common}><rect x="4" y="5" width="16" height="16" rx="2"/><path d="M4 9h16M9 3v4M15 3v4"/></svg>;
    case "doc":   return <svg {...common}><path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z"/><path d="M14 3v5h5"/></svg>;
    case "grid":  return <svg {...common}><rect x="4" y="4" width="7" height="7" rx="1"/><rect x="13" y="4" width="7" height="7" rx="1"/><rect x="4" y="13" width="7" height="7" rx="1"/><rect x="13" y="13" width="7" height="7" rx="1"/></svg>;
    default: return null;
  }
}

function HeroPromise() {
  return (
    <p style={{
      maxWidth: 760,
      fontSize: "clamp(19px, 1.7vw, 25px)",
      lineHeight: 1.5,
      fontWeight: 400,
      color: "var(--ink-soft)",
      letterSpacing: "-0.01em",
      textWrap: "pretty",
    }}>
      <span style={{ color: "var(--navy)", fontWeight: 500 }}>Aiutiamo</span> i responsabili amministrativi delle PMI a{" "}
      <HiTag tone="peach">prevedere la cassa a 30–60–90 giorni</HiTag>,{" "}
      <HiTag tone="sky">governare le scadenze per fornitore</HiTag> e costruire un{" "}
      <HiTag tone="lilac">piano operativo pronto</HiTag> — partendo dai{" "}
      <HiTag tone="mint">dati che hanno già</HiTag>, senza integrazioni e senza consulenti, con la flessibilità di excel.
    </p>
  );
}

/* ─── Product screenshot frame with a soft floating effect ──────────────── */

function ProductFrame({ src, alt }) {
  return (
    <div style={{ position: "relative" }}>
      {/* soft glow underneath */}
      <div aria-hidden style={{
        position: "absolute", left: "8%", right: "8%", top: 20, bottom: -30,
        background: "radial-gradient(60% 80% at 50% 50%, rgba(24,197,168,0.18) 0%, transparent 70%)",
        filter: "blur(40px)",
      }}></div>

      <div style={{
        position: "relative",
        borderRadius: 18,
        overflow: "hidden",
        background: "var(--white)",
        boxShadow: "var(--shadow-product)",
        border: "1px solid var(--line)",
      }}>
        <img src={src} alt={alt} style={{ display: "block", width: "100%", height: "auto" }} />
      </div>
    </div>
  );
}

/* ─── PRODUCT INTRO — first proper showcase, anchored after the hero ────── */

function ProductIntro() {
  return (
    <section id="prodotto" style={{
      background: "var(--white)",
      padding: "100px 0 120px",
      position: "relative",
    }}>
      <Container>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 56, alignItems: "end", marginBottom: 48 }} className="intro-head">
          <div>
            <Eyebrow>Il prodotto</Eyebrow>
            <h2 style={{
              marginTop: 18,
              fontSize: "clamp(32px, 4vw, 50px)",
              fontWeight: 800, lineHeight: 1.08, letterSpacing: "-0.022em",
              color: "var(--navy)", textWrap: "balance",
            }}>
              Tutto in un'unica vista.<br/>
              <em style={{ fontStyle: "italic", fontWeight: 600, color: "var(--teal-dark)" }}>
                Saldi, scadenze, azioni.
              </em>
            </h2>
          </div>
          <div style={{ maxWidth: 480 }}>
            <p style={{ fontSize: 17, color: "var(--ink-mid)", lineHeight: 1.6 }}>
              Il <strong style={{ color: "var(--navy)" }}>Piano di cassa a 90 giorni</strong> aggrega i tuoi
              conti e ti mostra il saldo previsto giorno per giorno. Sposta una scadenza
              e vedi subito l'impatto.
            </p>
            <div style={{ display: "flex", flexWrap: "wrap", gap: 8, marginTop: 18 }}>
              <MiniTag>Saldo 30 / 60 / 90 gg</MiniTag>
              <MiniTag>Scenario in tempo reale</MiniTag>
              <MiniTag>Multi-banca</MiniTag>
              <MiniTag>Esporta PDF</MiniTag>
            </div>
          </div>
        </div>

        <ProductMockup />

        <div style={{ marginTop: 28, display: "grid", gridTemplateColumns: "minmax(0, 1fr) minmax(0, 1.35fr)", gap: 48, alignItems: "center" }} className="plan-row">
          <div style={{ maxWidth: 460 }}>
            <h3 style={{ fontSize: "clamp(24px, 2.4vw, 32px)", fontWeight: 800, color: "var(--navy)", letterSpacing: "-0.018em", lineHeight: 1.12 }}>
              Un piano d'azione, non solo un grafico.
            </h3>
            <p style={{ marginTop: 16, fontSize: 16.5, color: "var(--ink-mid)", lineHeight: 1.6 }}>
              Giroconti, finanziamenti e autoliquidanti — ogni azione con data, importo e conto,
              generata a partire dal piano di cassa e pronta da condividere con la banca.
            </p>
          </div>
          <div style={{ minWidth: 0 }}>
            <PlanMockup />
          </div>
        </div>
      </Container>
      <style>{`
        @media(max-width:880px){
          .intro-head { grid-template-columns: 1fr !important; gap: 28px !important; }
          .plan-row { grid-template-columns: 1fr !important; gap: 28px !important; }
        }
      `}</style>
    </section>
  );
}

/* ─── COLORED BAR LIST (reference signature) ─────────────────────────────── */

/* ─── WHAT CHANGES — multi-color stacked expandable bars ────────────────── */

function WhatChanges() {
  const [open, setOpen] = React.useState(0);
  const bars = [
    {
      tone: "peach",
      n: "01",
      tag: "Hai il controllo del saldo a 30–60–90 giorni",
      body: "Vedi giorno per giorno dove e quando la cassa si restringe — prima che diventi un problema.",
    },
    {
      tone: "sky",
      n: "02",
      tag: "Conosci le scadenze clienti e fornitori mese per mese",
      body: "Sai in anticipo quale mese è a rischio e dove intervenire — per ogni controparte, senza cercare nei fogli.",
    },
    {
      tone: "lilac",
      n: "03",
      tag: "Ripianifichi le scadenze e vedi subito cosa cambia",
      body: "Sposta entrate e uscite in base alle tue priorità operative. L'impatto sul saldo futuro si aggiorna in tempo reale.",
    },
    {
      tone: "mint",
      n: "04",
      tag: "Ottieni un piano operativo senza doverci lavorare",
      body: "Giroconti, autoliquidanti, tiraggi di fido — pianificati e in PDF. Condividilo internamente o con la banca senza preparazione extra.",
    },
  ];

  const toneBg = {
    peach: "var(--peach)", sky: "var(--sky)", lilac: "var(--lilac)", mint: "var(--mint)",
  };

  return (
    <section style={{ background: "var(--white)", padding: "120px 0" }}>
      <Container>
        <div style={{ display: "grid", gridTemplateColumns: "1fr auto", gap: 32, alignItems: "end", marginBottom: 48 }} className="bars-head">
          <div>
            <Eyebrow>Cosa cambia da subito</Eyebrow>
            <h2 style={{
              marginTop: 18,
              fontSize: "clamp(34px, 4.4vw, 56px)",
              fontWeight: 800, lineHeight: 1.06, letterSpacing: "-0.025em",
              color: "var(--navy)", textWrap: "balance", maxWidth: 820,
            }}>
              Quattro cose che cambiano <em style={{ fontStyle: "italic", fontWeight: 500, color: "var(--teal-dark)" }}>da subito</em>.
            </h2>
          </div>
          <PrimaryCTA size="md" variant="navy" href="#demo">Prenota la demo</PrimaryCTA>
        </div>

        <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
          {bars.map((b, i) => {
            const isOpen = open === i;
            return (
              <button
                key={i}
                onClick={() => setOpen(isOpen ? -1 : i)}
                style={{
                  textAlign: "left",
                  background: toneBg[b.tone],
                  color: "var(--navy)",
                  border: "none",
                  cursor: "pointer",
                  borderRadius: 12,
                  padding: isOpen ? "26px 32px" : "22px 32px",
                  display: "flex",
                  flexDirection: "column",
                  gap: isOpen ? 12 : 0,
                  fontFamily: "inherit",
                  transition: "padding .25s ease, transform .15s ease",
                }}
                onMouseOver={(e)=>{ if (!isOpen) e.currentTarget.style.transform = "translateX(4px)"; }}
                onMouseOut={(e)=>{ e.currentTarget.style.transform = ""; }}
              >
                <div style={{ display: "flex", alignItems: "center", gap: 20 }}>
                  <span style={{ fontSize: 13, fontWeight: 600, color: "var(--navy)", opacity: 0.5, letterSpacing: ".06em", minWidth: 24 }}>{b.n}</span>
                  <span style={{ fontSize: "clamp(16px, 1.4vw, 21px)", fontWeight: 700, lineHeight: 1.3 }}>{b.tag}</span>
                  <span style={{ flex: 1 }}></span>
                  <span style={{
                    width: 34, height: 34, borderRadius: "50%",
                    background: isOpen ? "var(--navy)" : "rgba(13,34,64,0.08)",
                    color: isOpen ? "var(--white)" : "var(--navy)",
                    display: "inline-flex", alignItems: "center", justifyContent: "center",
                    fontSize: 16, fontWeight: 400, flexShrink: 0,
                    transform: isOpen ? "rotate(45deg)" : "none",
                    transition: "transform .25s ease, background .2s ease, color .2s ease",
                  }}>+</span>
                </div>
                <div style={{
                  maxHeight: isOpen ? 160 : 0,
                  overflow: "hidden",
                  transition: "max-height .3s ease, margin-top .3s ease",
                  marginTop: isOpen ? 6 : 0,
                  marginLeft: 44,
                  fontSize: 15.5, lineHeight: 1.55, color: "var(--navy)", opacity: 0.78,
                  maxWidth: 720, fontWeight: 400, paddingRight: 48,
                }}>
                  {b.body}
                </div>
              </button>
            );
          })}
        </div>
      </Container>
      <style>{`
        @media(max-width: 760px){
          .bars-head { grid-template-columns: 1fr !important; gap: 18px !important; align-items: start !important; }
        }
      `}</style>
    </section>
  );
}

/* ─── PROBLEM — cause/consequence (kept from v3, slightly modernized) ───── */

function Problem() {
  const items = [
    { tone: "peach", t: "Un addebito non passa", s: "Il conto non aveva la copertura giusta." },
    { tone: "lilac", t: "Segnalazione in Centrale Rischi", s: "Un problema che ti porti dietro per mesi." },
    { tone: "sky",   t: "Telefonata scomoda con la banca", s: "Quella che non vorresti mai fare." },
  ];
  const toneBg = { peach: "var(--peach)", lilac: "var(--lilac)", sky: "var(--sky)", mint: "var(--mint)" };
  return (
    <section id="problema" style={{ background: "var(--paper)", padding: "120px 0", position: "relative" }}>
      <Container>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "center" }} className="prob-grid">
          <div>
            <Eyebrow>La situazione</Eyebrow>
            <h2 style={{
              marginTop: 18,
              fontSize: "clamp(34px, 4.2vw, 54px)",
              fontWeight: 800, lineHeight: 1.08, letterSpacing: "-0.022em",
              color: "var(--navy)", textWrap: "balance",
            }}>
              Sai quanto hai in banca <em style={{ fontStyle: "italic", fontWeight: 600, color: "var(--teal-dark)" }}>oggi</em>.<br/>
              Il problema è{" "}
              <Chip tone="butter">tra 30 e 90 giorni</Chip>.
            </h2>
            <p style={{
              marginTop: 24,
              fontSize: 18, lineHeight: 1.6, color: "var(--ink-mid)",
              maxWidth: 540, textWrap: "pretty",
            }}>
              Paghi questo fornitore prima di quell'altro — e cosa succede al saldo a fine mese?
              Lavori su fogli Excel costruiti da te, che funzionano. Finché la situazione non si complica.
              E quando si complica, non hai il tempo per ricostruire tutto da capo.
            </p>
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
            {items.map((it, i) => (
              <div key={i} style={{ display: "grid", gridTemplateColumns: "auto 1fr", gap: 16, alignItems: "center" }}>
                <div style={{
                  fontSize: 13, fontWeight: 600, color: "var(--ink-soft)",
                  letterSpacing: ".05em",
                  width: 28, textAlign: "right",
                }}>0{i+1}</div>
                <div style={{
                  padding: "22px 28px",
                  background: toneBg[it.tone],
                  borderRadius: 14,
                  color: "var(--navy)",
                  position: "relative",
                  transform: `translateX(${i * 14}px)`,
                }} className="prob-card">
                  <div style={{ fontSize: 21, fontWeight: 700, lineHeight: 1.25, marginBottom: 4 }}>{it.t}</div>
                  <div style={{ fontSize: 14.5, color: "var(--navy)", opacity: 0.7 }}>{it.s}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </Container>
      <style>{`
        @media(max-width: 880px){
          .prob-grid { grid-template-columns: 1fr !important; gap: 48px !important; }
          .prob-card { transform: none !important; }
        }
      `}</style>
    </section>
  );
}

/* ─── PRODUCT BIG SHOWCASE — aging screenshot ────────────────────────────── */

function Showcase() {
  return (
    <section style={{
      background: "linear-gradient(180deg, var(--paper) 0%, var(--white) 100%)",
      padding: "120px 0",
    }}>
      <Container>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 56, marginBottom: 48 }} className="show-head">
          <div>
            <Eyebrow>Aging Crediti e Debiti</Eyebrow>
            <h2 style={{
              marginTop: 18,
              fontSize: "clamp(32px, 4vw, 50px)",
              fontWeight: 800, lineHeight: 1.1, letterSpacing: "-0.022em",
              color: "var(--navy)", textWrap: "balance",
            }}>
              <ArrowMark tone="teal" />
              Chi pagare, chi aspettare.<br/>
              <Chip tone="mint">Per controparte</Chip>, in un'unica vista.
            </h2>
          </div>
          <div style={{ display: "flex", flexDirection: "column", justifyContent: "center", gap: 14, maxWidth: 480 }}>
            <p style={{ fontSize: 16.5, color: "var(--ink-mid)", lineHeight: 1.6 }}>
              Scaduto e a scadere in un'unica tabella, raggruppato per blocchi di 10 / 20 / 30 / 60 / 90 / 120 giorni.
              Esportabile in PDF o Excel.
            </p>
            <div style={{ display: "flex", flexWrap: "wrap", gap: 8, marginTop: 8 }}>
              <MiniTag>Scaduto vs. a scadere</MiniTag>
              <MiniTag>Per fornitore / cliente</MiniTag>
            </div>
          </div>
        </div>

        <AgingMockup />
      </Container>
      <style>{`@media(max-width:880px){ .show-head { grid-template-columns: 1fr !important; gap: 28px !important; } }`}</style>
    </section>
  );
}

function MiniTag({ children }) {
  return (
    <span style={{
      display: "inline-flex", alignItems: "center", gap: 6,
      padding: "5px 12px", borderRadius: 999,
      background: "var(--white)", border: "1px solid var(--line)",
      fontSize: 13, color: "var(--navy)", fontWeight: 500,
      whiteSpace: "nowrap",
    }}>{children}</span>
  );
}

/* ─── COMPARISON ─────────────────────────────────────────────────────────── */

function Comparison() {
  const cols = [
    { tag: "Excel",       tone: "peach", claim: "Flessibile, ma fragile. Ogni aggiornamento è manuale. Ogni condivisione è una trattativa.", pull: "La flessibilità di Excel, senza i rischi di Excel." },
    { tag: "Agicap",      tone: "sky",   claim: "Richiede integrazioni, onboarding lungo, costo alto per PMI sotto i 50 dipendenti.",         pull: "Niente implementazione da 3 mesi. Niente consulente esterno." },
    { tag: "DocFinance",  tone: "lilac", claim: "Pensato per chi ha già un CFO. Setup complesso, percepito come strumento enterprise.",         pull: "Progettato per chi ha la cassa tesa, non per chi ha un CFO." },
  ];
  const toneBg = { peach: "var(--peach-soft)", sky: "var(--sky-soft)", lilac: "var(--lilac-soft)" };
  const toneAccent = { peach: "var(--peach)", sky: "var(--sky)", lilac: "var(--lilac)" };
  return (
    <section id="confronto" style={{ background: "var(--white)", padding: "120px 0" }}>
      <Container>
        <div style={{ maxWidth: 760, marginBottom: 56 }}>
          <Eyebrow>Rispetto a Excel, Agicap, DocFinance</Eyebrow>
          <h2 style={{
            marginTop: 18,
            fontSize: "clamp(34px, 4.2vw, 56px)",
            fontWeight: 800, lineHeight: 1.08, letterSpacing: "-0.022em",
            color: "var(--navy)", textWrap: "balance",
          }}>
            La via di mezzo che <em style={{ fontStyle: "italic", color: "var(--teal-dark)" }}>mancava</em>.
          </h2>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 22 }} className="cmp-grid">
          {cols.map((c, i) => (
            <div key={i} style={{
              padding: 28,
              borderRadius: 16,
              background: toneBg[c.tone],
              display: "flex", flexDirection: "column", gap: 18,
              minHeight: 320,
              position: "relative",
              overflow: "hidden",
            }}>
              <div style={{
                position: "absolute", top: -40, right: -40,
                width: 140, height: 140, borderRadius: "50%",
                background: toneAccent[c.tone], opacity: 0.5,
              }}></div>
              <div style={{ position: "relative", zIndex: 1, display: "flex", alignItems: "center", gap: 8 }}>
                <span style={{ fontSize: 11.5, fontWeight: 700, color: "var(--ink-soft)", letterSpacing: ".12em", textTransform: "uppercase" }}>vs</span>
                <span style={{ fontSize: 20, fontWeight: 800, color: "var(--navy)", letterSpacing: "-0.01em" }}>{c.tag}</span>
              </div>
              <p style={{ position: "relative", zIndex: 1, fontSize: 15, color: "var(--ink-mid)", lineHeight: 1.6 }}>
                {c.claim}
              </p>
              <div style={{ flex: 1 }}></div>
              <blockquote style={{
                position: "relative", zIndex: 1,
                margin: 0, fontSize: 18, fontWeight: 600,
                color: "var(--navy)", lineHeight: 1.35,
                paddingTop: 18, borderTop: "1px solid rgba(13,34,64,0.12)",
                fontStyle: "italic",
              }}>
                "{c.pull}"
              </blockquote>
            </div>
          ))}
        </div>
      </Container>
      <style>{`@media(max-width:960px){ .cmp-grid { grid-template-columns: 1fr !important; } }`}</style>
    </section>
  );
}

/* ─── TRUST + founder ────────────────────────────────────────────────────── */

function Trust() {
  return (
    <section style={{ background: "var(--paper)", padding: "120px 0" }}>
      <Container narrow>
        <blockquote style={{
          margin: "24px 0 0",
          fontSize: "clamp(28px, 3.6vw, 42px)",
          fontWeight: 600, lineHeight: 1.22,
          letterSpacing: "-0.015em",
          color: "var(--navy)",
          textWrap: "balance",
        }}>
          "Finalmente uno strumento che funziona con i dati che ho,
          <em style={{ fontStyle: "italic", color: "var(--teal-dark)" }}> non con quelli che dovrei avere."</em>
        </blockquote>
        <div style={{ marginTop: 28, display: "flex", alignItems: "center", gap: 16 }}>
          <img src="assets/testimonial-pmi.png" alt="Sede PMI cliente"
               style={{ width: 76, height: 76, borderRadius: "50%", objectFit: "cover", border: "1px solid var(--line)", flexShrink: 0 }} />
          <span style={{ fontSize: 14.5, color: "var(--ink-soft)", lineHeight: 1.4 }}>
            <strong style={{ color: "var(--navy)", fontWeight: 600 }}>Responsabile amministrativo</strong><br/>
            PMI metalmeccanica · Veneto
          </span>
        </div>

        <div style={{
          marginTop: 56,
          paddingTop: 32,
          borderTop: "1px solid var(--line)",
          display: "grid", gridTemplateColumns: "200px 1fr", gap: 32,
        }} className="trust-foot">
          <Eyebrow>Sviluppato da</Eyebrow>
          <p style={{ margin: 0, fontSize: 16.5, color: "var(--ink-mid)", lineHeight: 1.6 }}>
            Chi ha gestito la tesoreria di aziende strutturate per oltre dieci anni —
            e ha visto, da dentro, dove Excel smette di funzionare e dove i software enterprise diventano un peso.
            FinBalance Pro è la via di mezzo che mancava.
          </p>
        </div>
      </Container>
      <style>{`@media(max-width:700px){ .trust-foot { grid-template-columns: 1fr !important; gap: 12px !important; } }`}</style>
    </section>
  );
}

/* ─── FAQ ───────────────────────────────────────────────────────────────── */

function FAQ({ mode = "accordion" }) {
  const items = [
    { q: "Funziona davvero senza integrazioni con il gestionale?",
      a: "Sì. FinBalance Pro parte da file Excel, estratti conto e scadenziari — qualunque formato abbiate già. Non richiede connessioni automatiche con ERP o software contabili." },
    { q: "Quanto tempo ci vuole per impostarlo?",
      a: "Meno di due ore, in autonomia. Non serve coinvolgere il reparto IT o un consulente esterno." },
    { q: "Cosa succede nella demo?",
      a: "Ti mostriamo il tool su un caso simile al tuo. 20 minuti, nessun impegno commerciale." },
    { q: "In cosa è diverso da Excel, Agicap o DocFinance?",
      a: "Ha la flessibilità di Excel ma senza i suoi rischi: niente formule che si rompono, niente versioni da rifare a ogni condivisione. Rispetto ad Agicap non richiede integrazioni, onboarding lunghi o costi pensati per aziende più grandi. E a differenza di DocFinance è progettato per chi ha la cassa tesa, non per chi ha già un CFO e un reparto IT: lo imposti da solo, in meno di due ore." },
  ];
  const [open, setOpen] = React.useState(0);

  return (
    <section id="faq" style={{ background: "var(--white)", padding: "120px 0" }}>
      <Container>
        <div style={{ display: "grid", gridTemplateColumns: "minmax(0, 360px) 1fr", gap: 80 }} className="faq-grid">
          <div>
            <Eyebrow>Domande</Eyebrow>
            <h2 style={{
              marginTop: 18,
              fontSize: "clamp(30px, 3.6vw, 46px)",
              fontWeight: 800, lineHeight: 1.1, letterSpacing: "-0.022em",
              color: "var(--navy)", textWrap: "balance",
            }}>
              Quattro risposte <em style={{ fontStyle: "italic", fontWeight: 500, color: "var(--teal-dark)" }}>prima della demo</em>.
            </h2>
          </div>
          <div>
            {items.map((it, i) => {
              const isOpen = mode === "open" || open === i;
              return (
                <div key={i} style={{
                  borderTop: i === 0 ? "1px solid var(--line-strong)" : "1px solid var(--line)",
                  ...(i === items.length - 1 ? { borderBottom: "1px solid var(--line-strong)" } : {}),
                }}>
                  <button
                    onClick={() => mode === "accordion" && setOpen(isOpen ? -1 : i)}
                    style={{
                      width: "100%", textAlign: "left",
                      background: "transparent", border: "none",
                      padding: "26px 0",
                      display: "grid", gridTemplateColumns: "1fr 28px", gap: 14, alignItems: "baseline",
                      cursor: mode === "accordion" ? "pointer" : "default",
                      color: "var(--navy)",
                      fontFamily: "inherit",
                    }}
                  >
                    <span style={{ fontSize: "clamp(18px, 1.6vw, 24px)", fontWeight: 700, lineHeight: 1.35 }}>{it.q}</span>
                    {mode === "accordion" ? (
                      <span style={{ fontSize: 22, color: "var(--teal-dark)", textAlign: "right", transform: isOpen ? "rotate(45deg)" : "none", transition: "transform .2s ease", fontWeight: 300 }}>+</span>
                    ) : <span></span>}
                  </button>
                  <div style={{
                    maxHeight: isOpen ? 200 : 0,
                    overflow: "hidden",
                    transition: "max-height .25s ease, padding .2s ease",
                    paddingBottom: isOpen ? 26 : 0,
                  }}>
                    <p style={{ margin: 0, color: "var(--ink-mid)", fontSize: 16.5, lineHeight: 1.6, maxWidth: 640 }}>{it.a}</p>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </Container>
      <style>{`@media(max-width:820px){ .faq-grid { grid-template-columns: 1fr !important; gap: 36px !important; } }`}</style>
    </section>
  );
}

/* ─── FINAL CTA ─────────────────────────────────────────────────────────── */

function FinalCTA() {
  return (
    <section id="demo" style={{
      background: "var(--navy)",
      color: "var(--white)",
      padding: "120px 0",
      position: "relative", overflow: "hidden",
    }}>
      {/* signature concentric circles */}
      <div aria-hidden style={{
        position: "absolute", top: -260, right: -260,
        width: 820, height: 820,
        border: "130px solid rgba(24,197,168,0.07)", borderRadius: "50%",
      }}></div>
      <div aria-hidden style={{
        position: "absolute", top: -100, right: -100,
        width: 540, height: 540,
        border: "72px solid rgba(24,197,168,0.05)", borderRadius: "50%",
      }}></div>
      {/* peach blob bottom-left */}
      <div aria-hidden style={{
        position: "absolute", left: "-10%", bottom: "-30%",
        width: 600, height: 600,
        background: "radial-gradient(circle, rgba(255,216,168,0.18) 0%, transparent 60%)",
        filter: "blur(30px)",
      }}></div>

      <Container>
        <div style={{ position: "relative", zIndex: 2, maxWidth: 920 }}>
          <Eyebrow tone="light">Il prossimo passo</Eyebrow>
          <h2 style={{
            marginTop: 18,
            fontSize: "clamp(40px, 5.4vw, 76px)",
            fontWeight: 800, lineHeight: 1.04,
            letterSpacing: "-0.025em",
            color: "var(--white)", textWrap: "balance",
          }}>
            Vale una chiamata di{" "}
            <Chip tone="teal">20 minuti</Chip>.
          </h2>
          <p style={{
            marginTop: 28, maxWidth: 620,
            fontSize: 19, lineHeight: 1.55,
            color: "rgba(255,255,255,0.72)", fontWeight: 300,
          }}>
            Ti mostriamo il tool su un caso simile al tuo. Nessun impegno, nessun IT,
            nessuna integrazione da preparare.
          </p>
          <div style={{ marginTop: 40, display: "flex", alignItems: "center", gap: 24, flexWrap: "wrap" }}>
            <PrimaryCTA size="lg" variant="teal">Prenota la demo</PrimaryCTA>
            <a href="mailto:info@finbalance.pro" style={{
              color: "rgba(255,255,255,0.8)", textDecoration: "none",
              fontSize: 15, fontWeight: 500,
              display: "inline-flex", alignItems: "center", gap: 8,
            }}>
              <span>oppure scrivici:</span>
              <span style={{ color: "var(--teal)", borderBottom: "1px solid rgba(24,197,168,0.5)" }}>info@finbalance.pro</span>
            </a>
          </div>
        </div>
      </Container>
      <style>{`@media(max-width:760px){ .cta-meta { grid-template-columns: 1fr !important; gap: 16px !important; } }`}</style>
    </section>
  );
}

function MetaItem({ label, value }) {
  return (
    <div>
      <div style={{ fontSize: 11.5, fontWeight: 600, color: "var(--teal)", letterSpacing: "0.12em", textTransform: "uppercase", marginBottom: 6 }}>{label}</div>
      <div style={{ fontSize: 16, color: "rgba(255,255,255,0.92)", fontWeight: 500 }}>{value}</div>
    </div>
  );
}

/* ─── FOOTER ────────────────────────────────────────────────────────────── */

function Footer() {
  return (
    <footer style={{ background: "var(--navy-deep)", color: "rgba(255,255,255,0.55)", padding: "32px 0" }}>
      <Container>
        <div style={{ display: "flex", alignItems: "center", flexWrap: "wrap", gap: 24 }}>
          <Logo height={22} light />
          <div style={{ flex: 1 }}></div>
          <div style={{ fontSize: 13.5, display: "flex", gap: 22, flexWrap: "wrap", alignItems: "center" }}>
            <a style={{ color: "rgba(255,255,255,0.75)", textDecoration: "none" }} href="mailto:info@finbalance.pro">info@finbalance.pro</a>
            <a style={{ color: "rgba(255,255,255,0.55)", textDecoration: "none" }} href="#">Privacy policy</a>
            <span>© 2026 MAS PLUS S.r.l.</span>
          </div>
        </div>
      </Container>
    </footer>
  );
}

/* ─── TWEAKS ────────────────────────────────────────────────────────────── */

function TweakControls({ t, setTweak }) {
  return (
    <React.Fragment>
      <TweakSection label="FAQ" />
      <TweakRadio
        label="Formato"
        value={t.faq_open}
        onChange={(v) => setTweak("faq_open", v)}
        options={[
          { label: "Accordion", value: "accordion" },
          { label: "Tutte aperte", value: "open" },
        ]}
      />
    </React.Fragment>
  );
}

/* ─── DEMO MODAL — Cal.com embed ─────────────────────────────────────────── */

const CAL_URL = "https://cal.com/michele-catera-p7ombf/call-finbalance-pro";

function DemoModal() {
  const [open, setOpen] = React.useState(false);
  const [loaded, setLoaded] = React.useState(false);

  React.useEffect(() => {
    window.openDemoModal = () => setOpen(true);
    return () => { delete window.openDemoModal; };
  }, []);

  React.useEffect(() => {
    const onKey = (e) => { if (e.key === "Escape") setOpen(false); };
    if (open) {
      document.addEventListener("keydown", onKey);
      document.body.style.overflow = "hidden";
    }
    return () => {
      document.removeEventListener("keydown", onKey);
      document.body.style.overflow = "";
    };
  }, [open]);

  if (!open) return null;

  return (
    <div
      onClick={() => setOpen(false)}
      style={{
        position: "fixed", inset: 0, zIndex: 1000,
        display: "flex", alignItems: "center", justifyContent: "center",
        padding: "max(20px, 4vh) 20px",
        background: "rgba(10,26,51,0.55)",
        backdropFilter: "blur(6px)", WebkitBackdropFilter: "blur(6px)",
        animation: "fbp-modal-bg .2s ease",
      }}
    >
      <div
        onClick={(e) => e.stopPropagation()}
        style={{
          position: "relative",
          width: "min(960px, 100%)",
          height: "min(760px, 92vh)",
          background: "var(--white)",
          borderRadius: 18,
          overflow: "hidden",
          boxShadow: "0 40px 100px -30px rgba(10,26,51,0.6)",
          border: "1px solid var(--line)",
          display: "flex", flexDirection: "column",
          animation: "fbp-modal-in .28s cubic-bezier(.2,.8,.25,1)",
        }}
      >
        {/* header */}
        <div style={{
          display: "flex", alignItems: "center", gap: 12,
          padding: "16px 20px",
          borderBottom: "1px solid var(--line)",
          background: "var(--paper)",
          flexShrink: 0,
        }}>
          <Logo height={22} />
          <span style={{ fontSize: 13.5, color: "var(--ink-soft)", fontWeight: 500 }}>
            Prenota una demo di 20 minuti
          </span>
          <span style={{ flex: 1 }}></span>
          <button
            onClick={() => setOpen(false)}
            aria-label="Chiudi"
            style={{
              width: 34, height: 34, borderRadius: "50%",
              border: "1px solid var(--line)", background: "var(--white)",
              color: "var(--ink-mid)", cursor: "pointer",
              display: "inline-flex", alignItems: "center", justifyContent: "center",
              fontSize: 18, lineHeight: 1, fontFamily: "inherit",
              transition: "background .15s ease, color .15s ease, border-color .15s ease",
            }}
            onMouseOver={(e)=>{ e.currentTarget.style.background = "var(--paper)"; e.currentTarget.style.color = "var(--navy)"; e.currentTarget.style.borderColor = "var(--line-strong)"; }}
            onMouseOut={(e)=>{ e.currentTarget.style.background = "var(--white)"; e.currentTarget.style.color = "var(--ink-mid)"; e.currentTarget.style.borderColor = "var(--line)"; }}
          >×</button>
        </div>

        {/* embed */}
        <div style={{ position: "relative", flex: 1, minHeight: 0 }}>
          {!loaded ? (
            <div style={{
              position: "absolute", inset: 0,
              display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center",
              gap: 14, color: "var(--ink-soft)",
            }}>
              <div style={{
                width: 30, height: 30, borderRadius: "50%",
                border: "3px solid var(--line)", borderTopColor: "var(--teal)",
                animation: "fbp-spin .8s linear infinite",
              }}></div>
              <span style={{ fontSize: 13.5 }}>Caricamento del calendario…</span>
            </div>
          ) : null}
          <iframe
            src={CAL_URL}
            title="Prenota una demo — FinBalance Pro"
            onLoad={() => setLoaded(true)}
            style={{ width: "100%", height: "100%", border: "none", display: "block" }}
          ></iframe>
        </div>
      </div>

      <style>{`
        @keyframes fbp-modal-bg { from { opacity: 0; } to { opacity: 1; } }
        @keyframes fbp-modal-in { from { opacity: 0; transform: translateY(16px) scale(0.98); } to { opacity: 1; transform: none; } }
        @keyframes fbp-spin { to { transform: rotate(360deg); } }
      `}</style>
    </div>
  );
}

/* ─── APP ───────────────────────────────────────────────────────────────── */

function App() {
  const [t, setTweak] = useTweaks({
    faq_open: "accordion",
    hero_chips: true,
    bar_layout: "stacked",
  });

  return (
    <div>
      <Nav />
      <Hero />
      <Reveal><WhatChanges /></Reveal>
      <Reveal><ProductIntro /></Reveal>
      <Reveal><Showcase /></Reveal>
      <Reveal><Trust /></Reveal>
      <Reveal><FAQ mode={t.faq_open} /></Reveal>
      <Reveal><FinalCTA /></Reveal>
      <Footer />
      <DemoModal />
      <TweaksPanel title="Tweaks">
        <TweakControls t={t} setTweak={setTweak} />
      </TweaksPanel>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);