/* SeaVIN — Homepage (modern SaaS layout) */

function Homepage() {
  const [cfg, setCfg] = useConfig({
    palette: "paper",
    theme: "light",
    typeset: "technical",
    heroLayout: "stacked",
    tone: "reassuring",
    lang: "it",
  });
  const t = window.SEAVIN_I18N[cfg.lang];
  const [vin, setVin] = useState("");
  const [audience, setAudience] = useState("privati");
  const [openFaq, setOpenFaq] = useState(0);

  const submit = (e) => {
    e.preventDefault();
    const v = vin.trim() || "XFA68114F516";
    saveRequest({ hin: v, step: 0, startedAt: Date.now() });
    window.location.href = "checkout.html";
  };

  const lede = cfg.tone === "technical" ? t.hero.lede_technical
             : cfg.tone === "urgent"    ? t.hero.lede_urgent
             : t.hero.lede_reassuring;

  const isIT = cfg.lang === "it";

  return (
    <Page active="home" cfg={cfg} setCfg={setCfg} t={t}>

      {/* ============================================
         HERO
         ============================================ */}
      <section className="am-hero">
        <div className="shell am-hero__shell">
          <div className="am-hero__text">
            <h1 className="am-hero__h1">
              {t.hero.title_1}<br/>
              {t.hero.title_2} <span className="am-hero__h1-em">{t.hero.title_3}</span>
            </h1>
            <p className="am-hero__lede">{lede}</p>

            <form className="am-hero-form" onSubmit={submit}>
              <span className="am-hero-form__tag">HIN</span>
              <input
                className="am-hero-form__input"
                value={vin}
                onChange={(e) => setVin(e.target.value.toUpperCase())}
                placeholder={t.hero.placeholder}
                aria-label="HIN"
              />
              <button className="am-hero-form__submit" type="submit">
                {t.hero.cta} →
              </button>
            </form>
            <div className="am-hero__help">
              <span>✓ {t.hero.help_1}</span>
              <span>✓ {t.hero.help_2}</span>
              <span>✓ {t.hero.help_3}</span>
              <a href="sample-report.html" className="am-hero__sample">
                {t.hero.cta_secondary} →
              </a>
            </div>
          </div>

          <div className="am-hero__visual">
            <div className="am-hero__visual-deck">
              <HeroDash />
            </div>
          </div>
        </div>
      </section>

      {/* ============================================
         LOGO WALL
         ============================================ */}
      <section className="am-logos">
        <div className="shell">
          <div className="am-logos__lead">
            {isIT
              ? "Scelti da broker, assicurazioni e armatori in tutto il Mediterraneo"
              : "Trusted by brokers, insurers and owners across the Mediterranean"}
          </div>
          <div className="am-logos__row">
            {[
              "Generali Marine",
              "RINA",
              "Lloyd's Register",
              "Confindustria Náutica",
              "MIT · Trasporti",
              "Yacht Club Italiano",
            ].map((l, i) => (
              <div key={i} className="am-logos__item">{l}</div>
            ))}
          </div>
        </div>
      </section>

      {/* ============================================
         STATS BAND
         ============================================ */}
      <section className="am-stats">
        <div className="shell">
          <div className="am-stats__head">
            <span className="am-eyebrow">{isIT ? "I numeri" : "By the numbers"}</span>
            <h2 className="am-h2">
              {isIT
                ? <>Una compravendita di barca su <em>quattro</em> nasconde un difetto rilevante.</>
                : <>One in <em>four</em> used-boat deals hides a material defect.</>}
            </h2>
          </div>
          <div className="am-stats__grid">
            {[
              { n: "14", l: isIT ? "Fonti dati incrociate" : "Cross-referenced sources", d: isIT ? "Registri ufficiali, AIS, sinistri, fulmini, meteo, furti, valutazione, bandiere." : "Official registries, AIS, claims, lightning, weather, theft, valuation, flags." },
              { n: "31%", l: isIT ? "Report con anomalie" : "Reports with anomalies", d: isIT ? "Casi in cui SeaVIN ha rilevato discrepanze tra annuncio e dati reali." : "Cases where SeaVIN flagged a gap between listing and real data." },
              { n: "7gg", l: isIT ? "Tempo medio di consegna" : "Average delivery", d: isIT ? "Verifica documentale, incrocio dati e firma del report." : "Document verification, cross-reference, and signed report." },
              { n: "340+", l: isIT ? "Periti certificati" : "Certified surveyors", d: isIT ? "Una rete a copertura nazionale, recensita e verificata." : "A national network, reviewed and vetted." },
            ].map((s, i) => (
              <div key={i} className="am-stat">
                <div className="am-stat__n">{s.n}</div>
                <div className="am-stat__l">{s.l}</div>
                <div className="am-stat__d">{s.d}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ============================================
         PRODUCT 1 — SEAVIN REPORT
         ============================================ */}
      <section className="am-prod" id="report">
        <div className="shell">
          <div className="am-prod__inner">
            <div className="am-prod__copy">
              <span className="am-eyebrow am-eyebrow--primary">01 · {isIT ? "Report SeaVIN" : "SeaVIN Report"}</span>
              <h2 className="am-h2">
                {isIT
                  ? <>La <em>verifica documentale ufficiale</em>, più tutto ciò che il venditore non dirà.</>
                  : <>The official <em>documentary verification</em>, plus everything the seller won't tell you.</>}
              </h2>
              <p className="am-prod__lede">
                {isIT
                  ? "Accediamo a fonti documentali ufficiali per certificare titolarità, ipoteche, fermi amministrativi, dati tecnici e storia di proprietà dell'imbarcazione. La nostra AI proprietaria arricchisce il risultato con 12 analisi indipendenti."
                  : "We access official documentary sources to certify title, encumbrances, administrative holds, technical data and ownership history of the boat. Our proprietary AI enriches the result with 12 independent analyses."}
              </p>
              <ul className="am-list">
                {(isIT ? [
                  "Problemi noti per modello & cantiere",
                  "Consumo carburante reale e profilo d'uso",
                  "Esposizione fulmini & meteo estremo (geo-spaziale)",
                  "Storico rotte AIS, porti, periodi di charter non dichiarati",
                  "Storico annunci, prezzi richiesti, valutazione di mercato",
                  "Timeline proprietà & cambi bandiera",
                  "Database furti Interpol & contenziosi legali",
                  "Storico sinistri assicurativi & indice di rivendita",
                  "Stima costi annui & raccomandazione finale firmata",
                ] : [
                  "Model-specific known issues & yard intel",
                  "Real fuel consumption & usage profile",
                  "Lightning & extreme-weather exposure (geo-spatial)",
                  "AIS routes, ports, undisclosed charter periods",
                  "Listing history, asking prices, market valuation",
                  "Ownership timeline & flag changes",
                  "Interpol theft DB & legal disputes",
                  "Insurance claim history & resale index",
                  "Annual cost estimate & signed final recommendation",
                ]).map((x, i) => (
                  <li key={i}><span className="am-list__check">✓</span>{x}</li>
                ))}
              </ul>
              <div className="am-prod__cta">
                <a href="sample-report.html" className="am-btn am-btn--primary">
                  {isIT ? "Apri report d'esempio" : "Open sample report"} →
                </a>
                <a href="how-it-works.html" className="am-btn am-btn--ghost">
                  {isIT ? "Come funziona" : "How it works"}
                </a>
              </div>
            </div>
            <div className="am-prod__visual">
              <div className="am-mock am-mock--report">
                <div className="am-mock__bar">
                  <span className="am-mock__bar-dots"><i/><i/><i/></span>
                  <span className="am-mock__bar-title">Report № 24-847-MI · Azimut 68 FB</span>
                  <span className="am-mock__bar-state">{isIT ? "FIRMATO" : "SIGNED"}</span>
                </div>
                <div className="am-mock__body">
                  <div className="am-mock__row">
                    <div className="am-mock__chip">§ 01 · {isIT ? "Identità" : "Identity"}</div>
                    <div className="am-mock__bar-fill" style={{ width: "100%" }}/>
                    <span className="am-mock__ok">OK</span>
                  </div>
                  <div className="am-mock__row">
                    <div className="am-mock__chip">§ 04 · {isIT ? "Fulmini" : "Lightning"}</div>
                    <div className="am-mock__bar-fill am-mock__bar-fill--warn" style={{ width: "60%" }}/>
                    <span className="am-mock__warn">2</span>
                  </div>
                  <div className="am-mock__row">
                    <div className="am-mock__chip">§ 05 · AIS</div>
                    <div className="am-mock__bar-fill" style={{ width: "92%" }}/>
                    <span className="am-mock__ok">14.820 nm</span>
                  </div>
                  <div className="am-mock__row">
                    <div className="am-mock__chip">§ 08 · {isIT ? "Mercato" : "Market"}</div>
                    <div className="am-mock__bar-fill am-mock__bar-fill--warn" style={{ width: "76%" }}/>
                    <span className="am-mock__warn">+24%</span>
                  </div>
                  <div className="am-mock__row">
                    <div className="am-mock__chip">§ 09 · {isIT ? "Proprietà" : "Ownership"}</div>
                    <div className="am-mock__bar-fill am-mock__bar-fill--err" style={{ width: "45%" }}/>
                    <span className="am-mock__err">⚠</span>
                  </div>
                  <div className="am-mock__row">
                    <div className="am-mock__chip">§ 10 · {isIT ? "Sinistri" : "Claims"}</div>
                    <div className="am-mock__bar-fill am-mock__bar-fill--warn" style={{ width: "30%" }}/>
                    <span className="am-mock__warn">1</span>
                  </div>
                  <div className="am-mock__reco">
                    <div className="am-mock__reco-tag">§ 14 · {isIT ? "Raccomandazione" : "Recommendation"}</div>
                    <div className="am-mock__reco-text">
                      {isIT
                        ? "Procedere con perizia strumentale mirata a impianto elettrico e chiglia."
                        : "Proceed with instrumented survey of electrical system and keel."}
                    </div>
                    <div className="am-mock__reco-foot">
                      <span className="am-stamp">SeaVIN · 24·03·26</span>
                      <span className="am-mock__reco-rev">Rev. 1.2</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ============================================
         PRODUCT 2 — RETE PERITI (alternated)
         ============================================ */}
      <section className="am-prod am-prod--alt" id="surveyors">
        <div className="shell">
          <div className="am-prod__inner am-prod__inner--reverse">
            <div className="am-prod__copy">
              <span className="am-eyebrow am-eyebrow--secondary">02 · {isIT ? "Rete periti" : "Surveyor network"}</span>
              <h2 className="am-h2">
                {isIT
                  ? <>Quando il report richiede una <em>verifica fisica</em>, abbiamo già il perito giusto.</>
                  : <>When the report calls for a <em>physical inspection</em>, we already have the right surveyor.</>}
              </h2>
              <p className="am-prod__lede">
                {isIT
                  ? "340+ periti navali certificati, recensiti, georeferenziati. Filtri per posizione, specializzazione (scafo, motori, elettronica), tariffa e disponibilità. Le agenzie pagano una fee mensile o annuale per essere visibili: tu accedi a una rete verificata, sempre aggiornata."
                  : "340+ certified marine surveyors, reviewed and geo-located. Filter by location, specialty (hull, engines, electronics), rate and availability. Agencies pay a monthly or annual fee to be listed; you access a verified network, always up-to-date."}
              </p>
              <ul className="am-list">
                {(isIT ? [
                  "Verifica certificazione & assicurazione professionale",
                  "Recensioni reali da clienti SeaVIN precedenti",
                  "Tariffe trasparenti, preventivo entro 24h",
                  "Specializzazioni: scafo, motori, elettronica, vela, mega-yacht",
                ] : [
                  "Certification & professional insurance verified",
                  "Real reviews from past SeaVIN clients",
                  "Transparent rates, quote within 24h",
                  "Specialties: hull, engines, electronics, sailing, mega-yacht",
                ]).map((x, i) => (
                  <li key={i}><span className="am-list__check">✓</span>{x}</li>
                ))}
              </ul>
              <div className="am-prod__cta">
                <a href="surveyors.html" className="am-btn am-btn--primary">
                  {isIT ? "Trova un perito" : "Find a surveyor"} →
                </a>
                <a href="surveyor-signup.html" className="am-btn am-btn--ghost">
                  {isIT ? "Sei un perito? Iscriviti" : "Are you a surveyor? Join"}
                </a>
              </div>
            </div>

            <div className="am-prod__visual">
              <div className="am-mock am-mock--map">
                <div className="am-mock__bar">
                  <span className="am-mock__bar-dots"><i/><i/><i/></span>
                  <span className="am-mock__bar-title">{isIT ? "Periti vicini · La Spezia" : "Surveyors near · La Spezia"}</span>
                  <span className="am-mock__bar-state">340 LIVE</span>
                </div>
                <div className="am-mock__map">
                  <svg viewBox="0 0 380 220" style={{ width: "100%", height: "100%", display: "block" }}>
                    {/* coast outline */}
                    <path d="M20 90 Q60 70 110 80 Q160 90 200 70 Q260 55 320 75 Q360 85 360 130 Q330 160 280 155 Q220 165 170 160 Q120 155 70 165 Q30 165 20 130 Z"
                          fill="var(--secondary-tint)" stroke="var(--secondary-soft)" strokeWidth="0.8" strokeDasharray="3 2"/>
                    {/* surveyor pins */}
                    {[
                      { x: 80, y: 100, r: 4.9, name: "Lombardi" },
                      { x: 130, y: 95, r: 4.7, name: "Conti" },
                      { x: 170, y: 110, r: 5.0, name: "Rossi" },
                      { x: 230, y: 90, r: 4.8, name: "Bianchi" },
                      { x: 280, y: 110, r: 4.6, name: "Greco" },
                      { x: 320, y: 105, r: 4.9, name: "De Luca" },
                    ].map((p, i) => (
                      <g key={i}>
                        <circle cx={p.x} cy={p.y} r="14" fill="var(--am-bg-card)" stroke="var(--secondary-deep)" strokeWidth="1.4"/>
                        <text x={p.x} y={p.y + 3} textAnchor="middle" fontFamily="var(--font-mono)" fontSize="9" fill="var(--secondary-deep)">★ {p.r}</text>
                      </g>
                    ))}
                    <circle cx="170" cy="110" r="22" fill="none" stroke="var(--secondary)" strokeWidth="1" opacity="0.5">
                      <animate attributeName="r" values="14;28;14" dur="2.4s" repeatCount="indefinite"/>
                      <animate attributeName="opacity" values="0.6;0;0.6" dur="2.4s" repeatCount="indefinite"/>
                    </circle>
                  </svg>
                </div>
                <div className="am-mock__list">
                  {[
                    { n: "Marco Lombardi", loc: "La Spezia · LIG", spec: isIT ? "Scafo · Impianti" : "Hull · Systems", r: 4.9, rev: 128 },
                    { n: "Alessia Conti", loc: "Genova · LIG", spec: isIT ? "Elettronica" : "Electronics", r: 4.8, rev: 87 },
                    { n: "Giovanni Rossi", loc: "Viareggio · TOS", spec: isIT ? "Motori" : "Engines", r: 5.0, rev: 214 },
                  ].map((p, i) => (
                    <div key={i} className="am-mock__list-item">
                      <div className="am-mock__avatar">{p.n.split(" ").map(x => x[0]).join("")}</div>
                      <div className="am-mock__list-meta">
                        <div className="am-mock__list-name">{p.n}</div>
                        <div className="am-mock__list-loc">{p.loc} · {p.spec}</div>
                      </div>
                      <div className="am-mock__list-rating">★ {p.r} <span>·{p.rev}</span></div>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ============================================
         PRODUCT 3 — ARCHIVIO DOCUMENTI
         ============================================ */}
      <section className="am-prod" id="archive">
        <div className="shell">
          <div className="am-prod__inner">
            <div className="am-prod__copy">
              <span className="am-eyebrow am-eyebrow--primary">03 · {isIT ? "Archivio documenti" : "Document vault"}</span>
              <h2 className="am-h2">
                {isIT
                  ? <>Tutti i documenti della tua barca. <em>Sempre</em>, dovunque.</>
                  : <>Every document for your boat. <em>Always</em>, anywhere.</>}
              </h2>
              <p className="am-prod__lede">
                {isIT
                  ? "Conservazione cifrata a vita di certificati, ricevute manutenzione, polizze, contratti, perizie. Niente più cartelline che si perdono al primo trasloco. Tutto firmato digitalmente, condivisibile in un click con perito o assicurazione."
                  : "Encrypted lifetime storage of certificates, maintenance receipts, policies, contracts, surveys. No more folders lost in the first move. Everything digitally signed, shareable in one click with surveyor or insurer."}
              </p>
              <ul className="am-list">
                {(isIT ? [
                  "Cifratura AES-256 · server EU · ISO 27001",
                  "Condivisione granulare con scadenza link",
                  "OCR automatico: cerchi un documento per parola chiave",
                  "Esportazione completa in formato standard al primo click",
                ] : [
                  "AES-256 encryption · EU servers · ISO 27001",
                  "Granular sharing with link expiry",
                  "Automatic OCR: search documents by keyword",
                  "Complete export in standard format with one click",
                ]).map((x, i) => (
                  <li key={i}><span className="am-list__check">✓</span>{x}</li>
                ))}
              </ul>
              <div className="am-prod__cta">
                <a href="dashboard.html" className="am-btn am-btn--primary">
                  {isIT ? "Apri il tuo archivio" : "Open your vault"} →
                </a>
              </div>
            </div>
            <div className="am-prod__visual">
              <div className="am-mock am-mock--vault">
                <div className="am-mock__bar">
                  <span className="am-mock__bar-dots"><i/><i/><i/></span>
                  <span className="am-mock__bar-title">{isIT ? "Archivio · Azimut 68 FB" : "Vault · Azimut 68 FB"}</span>
                  <span className="am-mock__bar-state">42 {isIT ? "FILE" : "FILES"}</span>
                </div>
                <div className="am-mock__vault">
                  {[
                    { n: isIT ? "Verifica titolarità ufficiale" : "Official title verification", t: "PDF", d: "24·03·26", tag: isIT ? "TITOLARITÀ" : "TITLE" },
                    { n: isIT ? "Polizza RC 2026" : "Liability policy 2026", t: "PDF", d: "12·02·26", tag: isIT ? "ASSICURAZIONE" : "INSURANCE" },
                    { n: isIT ? "Perizia pre-acquisto" : "Pre-purchase survey", t: "PDF", d: "08·03·26", tag: isIT ? "PERIZIA" : "SURVEY" },
                    { n: isIT ? "Manutenzione motori 2025" : "Engine service 2025", t: "PDF", d: "14·11·25", tag: isIT ? "SERVICE" : "SERVICE" },
                    { n: isIT ? "Contratto preliminare" : "Preliminary contract", t: "PDF", d: "20·03·26", tag: isIT ? "LEGALE" : "LEGAL" },
                    { n: isIT ? "Certificato bandiera" : "Flag certificate", t: "PDF", d: "01·02·26", tag: isIT ? "REGISTRO" : "REGISTRY" },
                  ].map((f, i) => (
                    <div key={i} className="am-mock__file">
                      <div className="am-mock__file-icon">PDF</div>
                      <div className="am-mock__file-meta">
                        <div className="am-mock__file-name">{f.n}</div>
                        <div className="am-mock__file-sub">
                          <span className="am-mock__file-tag">{f.tag}</span>
                          <span>· {f.d}</span>
                        </div>
                      </div>
                      <span className="am-mock__file-lock">🔒</span>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ============================================
         AUDIENCE TABS
         ============================================ */}
      <section className="am-audience">
        <div className="shell">
          <div className="am-audience__head">
            <span className="am-eyebrow">{isIT ? "Per chi" : "Built for"}</span>
            <h2 className="am-h2">
              {isIT
                ? <>Pensato per chi <em>compra</em>, chi <em>vende</em>, chi <em>assicura</em>.</>
                : <>Built for who <em>buys</em>, who <em>sells</em>, who <em>insures</em>.</>}
            </h2>
          </div>

          <div className="am-audience__tabs" role="tablist">
            {[
              { id: "privati", label: isIT ? "Privati" : "Private buyers" },
              { id: "broker", label: "Broker" },
              { id: "assicurazioni", label: isIT ? "Assicurazioni" : "Insurers" },
            ].map(tab => (
              <button
                key={tab.id}
                role="tab"
                aria-selected={audience === tab.id}
                className={`am-audience__tab ${audience === tab.id ? "is-active" : ""}`}
                onClick={() => setAudience(tab.id)}
              >
                {tab.label}
              </button>
            ))}
          </div>

          <div className="am-audience__panel">
            {audience === "privati" && (
              <div className="am-audience__inner">
                <div className="am-audience__copy">
                  <h3 className="am-h3">{isIT ? "Prima di firmare il rogito, sai esattamente cosa hai davanti." : "Before you sign, know exactly what you're buying."}</h3>
                  <p>{isIT
                    ? "Una compravendita di barca è una decisione da centinaia di migliaia di euro. SeaVIN ti dà la stessa visibilità che ha l'autorità marittima, in un unico file."
                    : "Buying a boat is a six-figure decision. SeaVIN gives you the same visibility a maritime authority has — in one file."}</p>
                  <ul className="am-list am-list--cols">
                    {(isIT ? [
                      "Eviti vizi occulti e contestazioni post-acquisto",
                      "Scopri usi non dichiarati (charter, sub-noleggio)",
                      "Verifichi il prezzo richiesto vs. mercato reale",
                      "Trovi il perito giusto se serve un sopralluogo fisico",
                    ] : [
                      "Avoid hidden defects and post-deal disputes",
                      "Spot undisclosed use (charter, sub-leasing)",
                      "Check asking price vs. real market",
                      "Find the right surveyor for a physical check",
                    ]).map((x, i) => (
                      <li key={i}><span className="am-list__check">✓</span>{x}</li>
                    ))}
                  </ul>
                  <a href="checkout.html" className="am-btn am-btn--primary">
                    {isIT ? "Avvia il mio report" : "Start my report"} →
                  </a>
                </div>
                <AudienceCard
                  num="—24%"
                  label={isIT ? "Sopra-prezzi rilevati" : "Over-pricing detected"}
                  sub={isIT ? "Su un campione di 1.840 annunci 2024" : "Across 1,840 listings · 2024"}
                />
              </div>
            )}

            {audience === "broker" && (
              <div className="am-audience__inner">
                <div className="am-audience__copy">
                  <h3 className="am-h3">{isIT ? "Più trasparenza, più fiducia, chiusure più rapide." : "More transparency, more trust, faster closings."}</h3>
                  <p>{isIT
                    ? "Pre-allega il report SeaVIN a ogni annuncio: i potenziali compratori passano dalla visita all'offerta più velocemente. Costo riconoscibile dal venditore o ribaltato come servizio premium."
                    : "Pre-attach a SeaVIN report to every listing: prospective buyers move from showing to offer faster. Cost recoverable from seller or framed as a premium service."}</p>
                  <ul className="am-list am-list--cols">
                    {(isIT ? [
                      "Tariffe broker scontate fino al 30%",
                      "Branding co-firmato sul report",
                      "API per integrare il report nel tuo CRM",
                      "Dashboard di gestione multi-imbarcazione",
                    ] : [
                      "Broker rates up to 30% off",
                      "Co-branded reports",
                      "API to push reports into your CRM",
                      "Multi-vessel management dashboard",
                    ]).map((x, i) => (
                      <li key={i}><span className="am-list__check">✓</span>{x}</li>
                    ))}
                  </ul>
                  <a href="checkout.html?plan=broker" className="am-btn am-btn--primary">
                    {isIT ? "Parla con commerciale" : "Talk to sales"} →
                  </a>
                </div>
                <AudienceCard
                  num="2.3×"
                  label={isIT ? "Velocità di chiusura media" : "Average closing speed"}
                  sub={isIT ? "Annunci con report pre-allegato" : "Listings with pre-attached report"}
                />
              </div>
            )}

            {audience === "assicurazioni" && (
              <div className="am-audience__inner">
                <div className="am-audience__copy">
                  <h3 className="am-h3">{isIT ? "Un underwriting che parte da dati reali, non dichiarati." : "Underwriting that starts from real data, not declarations."}</h3>
                  <p>{isIT
                    ? "Per ogni nuova polizza, il report SeaVIN dà una baseline incontestabile: storico sinistri, esposizione fulmini, fasce di utilizzo AIS. Riduci frodi alla sottoscrizione e tarifica più correttamente."
                    : "For each new policy, the SeaVIN report provides an incontestable baseline: claims history, lightning exposure, AIS usage bands. Reduce inception fraud and price more accurately."}</p>
                  <ul className="am-list am-list--cols">
                    {(isIT ? [
                      "Bulk pricing su volumi annuali",
                      "Webhook per polizze in tempo reale",
                      "Esportazione dati in formato attuariale",
                      "Audit trail completo per ogni richiesta",
                    ] : [
                      "Bulk pricing on annual volumes",
                      "Real-time policy webhooks",
                      "Actuarial-format data export",
                      "Full audit trail per request",
                    ]).map((x, i) => (
                      <li key={i}><span className="am-list__check">✓</span>{x}</li>
                    ))}
                  </ul>
                  <a href="checkout.html?plan=enterprise" className="am-btn am-btn--primary">
                    {isIT ? "Richiedi demo" : "Request demo"} →
                  </a>
                </div>
                <AudienceCard
                  num="−18%"
                  label={isIT ? "Sinistri sotto-stimati" : "Under-stated claims"}
                  sub={isIT ? "Riduzione frodi alla sottoscrizione" : "Inception-fraud reduction"}
                />
              </div>
            )}
          </div>
        </div>
      </section>

      {/* ============================================
         PRICING
         ============================================ */}
      <section className="am-pricing" id="pricing">
        <div className="shell">
          <div className="am-pricing__head">
            <span className="am-eyebrow">{isIT ? "Tariffe" : "Pricing"}</span>
            <h2 className="am-h2">
              {isIT
                ? <>Parti da <em>175€</em>. Aggiungi ciò che ti serve.</>
                : <>Start from <em>€175</em>. Add what you need.</>}
            </h2>
            <p className="am-pricing__lede">
              {isIT
                ? "Se la verifica documentale non può essere completata — perché l'imbarcazione precede il 2019 o non è registrata — il rimborso parziale è automatico."
                : "If the documentary verification cannot be completed — boat predates 2019 or is unregistered — a partial refund is automatic."}
            </p>
          </div>

          <div className="am-pricing__grid">
            {/* BASIC */}
            <div className="am-price-card">
              <div className="am-price-card__head">
                <span className="am-price-card__name">{isIT ? "Basic" : "Basic"}</span>
                <span className="am-price-card__sub">{isIT ? "Per la maggior parte degli acquisti" : "For most purchases"}</span>
              </div>
              <div className="am-price-card__price">
                <span className="am-price-card__amount">€175</span>
                <span className="am-price-card__cur">{isIT ? "IVA incl." : "VAT incl."}</span>
              </div>
              <ul className="am-list am-list--card">
                {(isIT ? [
                  "Verifica titolarità ufficiale",
                  "Dati identificativi & tecnici",
                  "Stato giuridico & proprietà",
                  "Documenti di bordo",
                  "Raccomandazione finale firmata",
                  "Archivio documenti 12 mesi",
                ] : [
                  "Official title verification",
                  "Identification & technical data",
                  "Legal status & ownership",
                  "On-board documents",
                  "Signed final recommendation",
                  "12-month document vault",
                ]).map((x, i) => (
                  <li key={i}><span className="am-list__check">✓</span>{x}</li>
                ))}
              </ul>
              <a href="checkout.html?plan=basic" className="am-btn am-btn--ghost am-btn--block">
                {isIT ? "Inizia con Basic" : "Start with Basic"}
              </a>
            </div>

            {/* COMPLETE — featured */}
            <div className="am-price-card am-price-card--featured">
              <div className="am-price-card__badge">{isIT ? "Più richiesto" : "Most popular"}</div>
              <div className="am-price-card__head">
                <span className="am-price-card__name">{isIT ? "Completo" : "Complete"}</span>
                <span className="am-price-card__sub">{isIT ? "Tutti i dataset · firmato" : "All datasets · signed"}</span>
              </div>
              <div className="am-price-card__price">
                <span className="am-price-card__amount">€300</span>
                <span className="am-price-card__cur">{isIT ? "IVA incl." : "VAT incl."}</span>
              </div>
              <ul className="am-list am-list--card">
                {(isIT ? [
                  "Tutto del piano Basic",
                  "Storico rotte AIS · 5 anni",
                  "Database fulmini & meteo estremo",
                  "Storico annunci & valutazione di mercato",
                  "Furti Interpol & contenziosi legali",
                  "Sinistri assicurativi & indice rivendita",
                  "Stima costo annuo di proprietà",
                  "Archivio documenti illimitato",
                ] : [
                  "Everything in Basic",
                  "5-year AIS route history",
                  "Lightning & extreme-weather DB",
                  "Listing history & market valuation",
                  "Interpol theft DB & legal disputes",
                  "Claims history & resale index",
                  "Annual cost-of-ownership estimate",
                  "Unlimited document vault",
                ]).map((x, i) => (
                  <li key={i}><span className="am-list__check">✓</span>{x}</li>
                ))}
              </ul>
              <a href="checkout.html?plan=complete" className="am-btn am-btn--primary am-btn--block">
                {isIT ? "Avvia il Completo" : "Start Complete"} →
              </a>
            </div>

            {/* ENTERPRISE */}
            <div className="am-price-card">
              <div className="am-price-card__head">
                <span className="am-price-card__name">Broker / Enterprise</span>
                <span className="am-price-card__sub">{isIT ? "Volumi · API · SLA" : "Volume · API · SLA"}</span>
              </div>
              <div className="am-price-card__price">
                <span className="am-price-card__amount">{isIT ? "Su misura" : "Custom"}</span>
                <span className="am-price-card__cur">{isIT ? "Da €120/report" : "From €120/report"}</span>
              </div>
              <ul className="am-list am-list--card">
                {(isIT ? [
                  "Sconto volume fino a −30%",
                  "API REST & webhook",
                  "Branding co-firmato",
                  "Dashboard multi-utente",
                  "SLA 48h garantito",
                  "Account manager dedicato",
                ] : [
                  "Volume discount up to −30%",
                  "REST API & webhooks",
                  "Co-branded reports",
                  "Multi-user dashboard",
                  "Guaranteed 48h SLA",
                  "Dedicated account manager",
                ]).map((x, i) => (
                  <li key={i}><span className="am-list__check">✓</span>{x}</li>
                ))}
              </ul>
              <a href="checkout.html?plan=enterprise" className="am-btn am-btn--ghost am-btn--block">
                {isIT ? "Parla con commerciale" : "Talk to sales"}
              </a>
            </div>
          </div>

          <div className="am-pricing__addons">
            <span className="am-eyebrow">{isIT ? "Add-on singoli (a partire dal Basic)" : "Single add-ons (on top of Basic)"}</span>
            <div className="am-addons">
              {[
                { n: isIT ? "Storico AIS 5a" : "5y AIS history", p: "+€35" },
                { n: isIT ? "Fulmini & meteo" : "Lightning & weather", p: "+€25" },
                { n: isIT ? "Furti Interpol" : "Interpol theft DB", p: "+€20" },
                { n: isIT ? "Valutazione mercato" : "Market valuation", p: "+€35" },
                { n: isIT ? "Sinistri & rivendita" : "Claims & resale", p: "+€30" },
                { n: isIT ? "Costo annuo" : "Annual cost", p: "+€20" },
              ].map((a, i) => (
                <div key={i} className="am-addon">
                  <span>{a.n}</span>
                  <span className="am-addon__price">{a.p}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* ============================================
         TESTIMONIALS
         ============================================ */}
      <section className="am-testimonials">
        <div className="shell">
          <div className="am-testimonials__head">
            <span className="am-eyebrow">{isIT ? "Cosa dicono" : "Customer voices"}</span>
            <h2 className="am-h2">
              {isIT
                ? <>340+ verifiche concluse. <em>Zero contestazioni post-rogito</em>.</>
                : <>340+ completed verifications. <em>Zero post-deal disputes</em>.</>}
            </h2>
          </div>
          <div className="am-testimonials__grid">
            {[
              {
                q: isIT
                  ? "Stavo per chiudere su un Princess del 2019. Il report ha mostrato due fulmini ravvicinati nel porto di Palma. Una perizia ha confermato danni all'elettronica. Risparmiati 80mila euro."
                  : "I was about to close on a 2019 Princess. The report showed two lightning strikes in Palma harbour. A survey confirmed electronics damage. €80k saved.",
                n: "Davide M.", r: isIT ? "Armatore privato · Genova" : "Private owner · Genoa", k: "DM"
              },
              {
                q: isIT
                  ? "Lo allego a ogni listing oltre i 500k€. I clienti chiudono il 40% più in fretta, e i venditori lo apprezzano: chi ha la coscienza pulita non ha nulla da nascondere."
                  : "I attach it to every listing above €500k. Buyers close 40% faster, and sellers appreciate it: nothing to hide for those with a clean conscience.",
                n: "Elena R.", r: isIT ? "Broker · La Spezia" : "Broker · La Spezia", k: "ER"
              },
              {
                q: isIT
                  ? "Per il nostro reparto marine la cross-reference su sinistri & AIS è stata un cambio di passo. Polizze più accurate, meno frodi alla sottoscrizione."
                  : "For our marine division, cross-referencing claims & AIS was a step change. More accurate policies, less inception fraud.",
                n: "Andrea V.", r: isIT ? "Underwriter · Generali Marine" : "Underwriter · Generali Marine", k: "AV"
              },
            ].map((tt, i) => (
              <figure key={i} className="am-quote">
                <blockquote className="am-quote__text">"{tt.q}"</blockquote>
                <figcaption className="am-quote__cite">
                  <span className="am-quote__avatar">{tt.k}</span>
                  <div>
                    <div className="am-quote__name">{tt.n}</div>
                    <div className="am-quote__role">{tt.r}</div>
                  </div>
                </figcaption>
              </figure>
            ))}
          </div>
        </div>
      </section>

      {/* ============================================
         FAQ
         ============================================ */}
      <section className="am-faq">
        <div className="shell">
          <div className="am-faq__head">
            <span className="am-eyebrow">FAQ</span>
            <h2 className="am-h2">
              {isIT
                ? <>Le domande che ci fate <em>più spesso</em>.</>
                : <>The questions we get <em>most often</em>.</>}
            </h2>
          </div>
          <div className="am-faq__list">
            {(isIT ? [
              { q: "Come fate le verifiche?",
                a: "Combiniamo un sistema di intelligenza artificiale proprietario (analisi mercato, problemi noti, valutazione prezzo, consumi reali) con accesso autorizzato a registri documentali ufficiali italiani della nautica. Il risultato è un report che da soli richiederebbe settimane di lavoro e l'intervento di più professionisti." },
              { q: "Quanto tempo serve per ricevere il report?",
                a: "In media 5-7 giorni lavorativi. La fase più lenta è la verifica documentale presso le autorità competenti. Una volta completata, l'incrocio AI e la firma sono questione di ore." },
              { q: "E se l'imbarcazione non è registrata negli archivi ufficiali?",
                a: "Per imbarcazioni precedenti al 2019/2020 o non registrate, la verifica documentale potrebbe non essere disponibile. In questi casi consegniamo le analisi AI possibili e applichiamo un rimborso parziale automatico (60%)." },
              { q: "I dati sono protetti?",
                a: "Sì. Server in UE, cifratura AES-256, certificazione ISO 27001. La condivisione avviene solo con link a scadenza che decidi tu." },
              { q: "Posso usare il report anche dopo l'acquisto?",
                a: "Sì. Resta nel tuo archivio personale e può essere condiviso con assicurazione, perito, o futuro acquirente quando un giorno rivenderai la barca." },
              { q: "Lavorate solo in Italia?",
                a: "Copertura piena su Italia, Francia, Spagna, Croazia, Malta, UK. Sui dati AIS, fulmini e meteo, copertura globale." },
            ] : [
              { q: "How do you perform the verifications?",
                a: "We combine a proprietary AI system (market analysis, known issues, price valuation, real fuel consumption) with authorised access to official Italian boating registries. The result is a report that would take weeks of work and multiple professionals if done manually." },
              { q: "How long does the report take?",
                a: "5-7 business days on average. The slowest part is the documentary verification with the competent authorities. Once complete, AI cross-referencing and signing take hours." },
              { q: "What if the boat is not in the official registries?",
                a: "For boats older than 2019/2020 or unregistered, documentary verification may be unavailable. In those cases we deliver the AI analyses we can produce and apply an automatic 60% refund." },
              { q: "Is my data protected?",
                a: "Yes. EU servers, AES-256 encryption, ISO 27001. Sharing happens only via expiry-bound links that you control." },
              { q: "Can I use the report after the purchase?",
                a: "Yes. It stays in your personal vault and can be shared with insurer, surveyor, or a future buyer when you eventually sell." },
              { q: "Do you only work in Italy?",
                a: "Full coverage in Italy, France, Spain, Croatia, Malta, UK. AIS, lightning, and weather datasets are global." },
            ]).map((f, i) => (
              <details key={i} className="am-faq__item" open={i === openFaq ? true : undefined}
                       onToggle={(e) => e.target.open && setOpenFaq(i)}>
                <summary>
                  <span>{f.q}</span>
                  <span className="am-faq__plus" aria-hidden>+</span>
                </summary>
                <div className="am-faq__a">{f.a}</div>
              </details>
            ))}
          </div>
        </div>
      </section>

      {/* ============================================
         BIG FINAL CTA
         ============================================ */}
      <section className="am-cta">
        <div className="shell">
          <div className="am-cta__inner">
            <h2 className="am-cta__h2">
              {isIT
                ? <>Inserisci l'<em>HIN</em>.<br/>Il resto lo facciamo noi.</>
                : <>Enter the <em>HIN</em>.<br/>We'll handle the rest.</>}
            </h2>
            <form className="am-hero-form am-hero-form--dark" onSubmit={submit}>
              <span className="am-hero-form__tag">HIN</span>
              <input
                className="am-hero-form__input"
                value={vin}
                onChange={(e) => setVin(e.target.value.toUpperCase())}
                placeholder={t.hero.placeholder}
                aria-label="HIN"
              />
              <button className="am-hero-form__submit" type="submit">
                {t.hero.cta} →
              </button>
            </form>
            <div className="am-cta__help">
              <span>✓ {t.hero.help_1}</span>
              <span>✓ {t.hero.help_2}</span>
              <span>✓ {t.hero.help_3}</span>
            </div>
          </div>
        </div>
      </section>
    </Page>
  );
}

/* ============================================
   AudienceCard — small visual sub-component
   ============================================ */
function AudienceCard({ num, label, sub }) {
  return (
    <div className="am-audience__card">
      <div className="am-audience__card-num">{num}</div>
      <div className="am-audience__card-label">{label}</div>
      <div className="am-audience__card-sub">{sub}</div>
    </div>
  );
}

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