// fa-landing.jsx — Marketing landing page (agent hosting positioning)

const Landing = () => {
  const { t, lang } = useT();
  const isMobile = window.innerWidth < 769;

  return (
    <div className="fa-root fa-page">
      <TopBar current="landing"/>

      {/* HERO */}
      <section id="hero" style={{ padding: isMobile ? "32px 20px 24px" : "72px 80px 56px", position: "relative" }}>
        <div style={{
          position: "absolute", inset: 0, pointerEvents: "none",
          background: "radial-gradient(60% 70% at 80% 30%, var(--fa-accent-soft) 0%, transparent 60%)",
          opacity: 0.7,
        }}/>
        <div style={{ position: "relative", display: isMobile ? "flex" : "grid", gridTemplateColumns: "1.2fr 0.8fr", gap: 56, alignItems: "center", flexDirection: "column" }}>
          <div style={{ display: "flex", flexDirection: "column", gap: 28 }}>
            <span className="fa-eyebrow"><span className="dot"/>{t("eyebrow")}</span>
            <h1 className="fa-display" style={{
              fontSize: isMobile ? 44 : 88, lineHeight: 0.98, letterSpacing: "-0.03em", fontWeight: 700,
            }}>
              {t("hero_title_a")}<br/>
              <span style={{ color: "var(--fa-ink-2)", fontStyle: "italic" }}>{t("hero_title_b")}</span>
            </h1>
            <p style={{ fontSize: isMobile ? 15 : 19, lineHeight: 1.55, color: "var(--fa-ink-2)", maxWidth: 560 }}>
              {t("hero_sub")}
            </p>
            <div className="fa-row" style={{ gap: 12, marginTop: 4, flexWrap: "wrap" }}>
              <Btn kind="primary" size="lg" iconRight="arrow-right" onClick={() => location.href = '/signup'}>
                {t("cta_join")}
              </Btn>
              <Btn kind="ghost" size="lg" icon="play" onClick={() => document.getElementById('how')?.scrollIntoView({ behavior: 'smooth' })}>{t("cta_demo")}</Btn>
            </div>
            <div className="fa-row fa-hide-mobile" style={{ gap: 16, marginTop: 8 }}>
              <span style={{ fontSize: 13.5, color: "var(--fa-ink-3)", maxWidth: 380, lineHeight: 1.4 }}>
                {t("hero_caption")}
              </span>
            </div>
          </div>
          <div className="fa-hide-mobile">
            <HeroCard />
          </div>
        </div>
      </section>

      {/* VALUES BAR */}
      <section style={{
        borderTop: "1px solid var(--fa-border)", borderBottom: "1px solid var(--fa-border)",
        background: "var(--fa-bg-2)", padding: "20px 0", overflow: "hidden",
      }}>
        <div className="fa-row" style={{ gap: isMobile ? 24 : 56, justifyContent: "center", flexWrap: "wrap", padding: "0 40px" }}>
          {[
            { i: "message", k: lang === "it" ? "Nativo su Telegram" : "Native on Telegram" },
            { i: "book", k: lang === "it" ? "Knowledge base" : "Knowledge base" },
            { i: "shield", k: lang === "it" ? "Niente allucinazioni" : "No hallucinations" },
            { i: "chart", k: lang === "it" ? "Analytics integrati" : "Built-in analytics" },
            { i: "heart", k: lang === "it" ? "Costruito con cura" : "Built with care" },
          ].map((x, i) => (
            <div key={i} className="fa-row" style={{ gap: 8, color: "var(--fa-ink-2)", font: "600 13px var(--fa-font-sans)" }}>
              <Icon name={x.i} size={16}/> {x.k}
            </div>
          ))}
        </div>
      </section>

      {/* FEATURES */}
      <section id="features" style={{ padding: isMobile ? "48px 20px" : "96px 80px" }}>
        <div style={{ maxWidth: 720, marginBottom: isMobile ? 32 : 56 }}>
          <Badge kind="accent">{lang === "it" ? "Funzionalità" : "Features"}</Badge>
          <h2 className="fa-display" style={{ fontSize: isMobile ? 30 : 56, lineHeight: 1.05, marginTop: 16, letterSpacing: "-0.025em", fontWeight: 700 }}>
            {t("feat_title")}
          </h2>
          <p style={{ fontSize: 17, color: "var(--fa-ink-2)", marginTop: 14, lineHeight: 1.5 }}>{t("feat_sub")}</p>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "repeat(2, 1fr)", gap: 20 }}>
          {[
            { i: "target", t: t("feat_1_t"), b: t("feat_1_b") },
            { i: "book", t: t("feat_2_t"), b: t("feat_2_b") },
            { i: "message", t: t("feat_3_t"), b: t("feat_3_b") },
            { i: "chart", t: t("feat_4_t"), b: t("feat_4_b") },
          ].map((f, i) => (
            <div key={i} className="fa-card" style={{ padding: 28, display: "flex", flexDirection: "column", gap: 18 }}>
              <div style={{
                width: 48, height: 48, borderRadius: 14, background: "var(--fa-accent-soft)",
                color: "var(--fa-accent-ink)", display: "inline-flex", alignItems: "center", justifyContent: "center",
              }}>
                <Icon name={f.i} size={22}/>
              </div>
              <div style={{ font: "700 22px/1.2 var(--fa-font-sans)", letterSpacing: "-0.015em" }}>{f.t}</div>
              <div style={{ fontSize: 14.5, color: "var(--fa-ink-2)", lineHeight: 1.55 }}>{f.b}</div>
            </div>
          ))}
        </div>
      </section>

      {/* CHAT SHOWCASE */}
      {!isMobile && (
        <section style={{ padding: "0 80px 96px" }}>
          <div className="fa-card" style={{
            padding: 0, overflow: "hidden", background: "var(--fa-ink)", color: "var(--fa-bg)",
            borderColor: "var(--fa-ink)", borderRadius: 28,
            display: "grid", gridTemplateColumns: "1fr 1fr",
          }}>
            <div style={{ padding: "64px", display: "flex", flexDirection: "column", gap: 22 }}>
              <Badge kind="accent" icon="message">{lang === "it" ? "Nativo su Telegram" : "Native on Telegram"}</Badge>
              <h3 className="fa-display" style={{ fontSize: 48, lineHeight: 1.05, letterSpacing: "-0.02em", fontWeight: 700 }}>
                {lang === "it"
                  ? <>Sull'app che <span style={{ color: "var(--fa-accent)" }}>usano già</span>.<br/>Non un'altra.</>
                  : <>On the app they <span style={{ color: "var(--fa-accent)" }}>already use</span>.<br/>Not another one.</>}
              </h3>
              <p style={{ fontSize: 16, color: "#d3c8bd", lineHeight: 1.6, maxWidth: 460 }}>
                {lang === "it"
                  ? "I tuoi clienti scrivono al tuo bot Telegram come a un contatto qualsiasi. Niente app da scaricare, niente login. Risposte precise dalla tua knowledge base, con il tuo brand e la tua voce."
                  : "Your customers message your Telegram bot like any other contact. No app to download, no login. Accurate answers from your knowledge base, with your brand and tone."}
              </p>
            </div>
            <div style={{ padding: 40, background: "#181412", borderLeft: "1px solid #2c2521", display: "flex", flexDirection: "column", gap: 14 }}>
              <ChatShowcase />
            </div>
          </div>
        </section>
      )}

      {/* HOW IT WORKS */}
      <section id="how" style={{ padding: isMobile ? "48px 20px" : "0 80px 96px" }}>
        <div style={{ maxWidth: 720, marginBottom: 48 }}>
          <Badge kind="accent">{lang === "it" ? "Come funziona" : "How it works"}</Badge>
          <h2 className="fa-display" style={{ fontSize: isMobile ? 30 : 56, lineHeight: 1.05, marginTop: 16, letterSpacing: "-0.025em", fontWeight: 700 }}>
            {t("how_title")}
          </h2>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "repeat(4, 1fr)", gap: 16 }}>
          {[t("how_1"), t("how_2"), t("how_3"), t("how_4")].map((s, i) => (
            <div key={i} className="fa-card-flat" style={{ padding: 24, display: "flex", flexDirection: "column", gap: 16, minHeight: 200 }}>
              <div className="fa-display" style={{ fontSize: 52, lineHeight: 1, color: "var(--fa-accent)", fontWeight: 700, letterSpacing: "-0.04em" }}>
                {String(i + 1).padStart(2, "0")}
              </div>
              <div style={{ fontSize: 14.5, color: "var(--fa-ink-2)", lineHeight: 1.5 }}>{s}</div>
            </div>
          ))}
        </div>
      </section>

      {/* PRICING */}
      <section id="pricing" style={{ padding: isMobile ? "48px 20px" : "0 80px 96px" }}>
        <div style={{ maxWidth: 720, marginBottom: 48 }}>
          <Badge kind="accent">{lang === "it" ? "Prezzi" : "Pricing"}</Badge>
          <h2 className="fa-display" style={{ fontSize: isMobile ? 30 : 56, lineHeight: 1.05, marginTop: 16, letterSpacing: "-0.025em", fontWeight: 700 }}>
            {t("price_title")}
          </h2>
          <p style={{ fontSize: 17, color: "var(--fa-ink-2)", marginTop: 14, lineHeight: 1.5 }}>{t("price_sub")}</p>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "repeat(3, 1fr)", gap: 20 }}>
          {[
            { name: t("price_free"), price: t("price_free_p"), features: [t("price_free_f1"), t("price_free_f2"), t("price_free_f3")], accent: false },
            { name: t("price_starter"), price: t("price_starter_p"), features: [t("price_starter_f1"), t("price_starter_f2"), t("price_starter_f3")], accent: true },
            { name: t("price_pro"), price: t("price_pro_p"), features: [t("price_pro_f1"), t("price_pro_f2"), t("price_pro_f3")], accent: false },
          ].map((plan, i) => (
            <div key={i} className="fa-card" style={{
              padding: 32, display: "flex", flexDirection: "column", gap: 20,
              border: plan.accent ? "2px solid var(--fa-accent)" : undefined,
              position: "relative",
            }}>
              {plan.accent && (
                <div style={{
                  position: "absolute", top: -12, left: "50%", transform: "translateX(-50%)",
                  background: "var(--fa-accent)", color: "#fff", padding: "4px 14px",
                  borderRadius: 999, font: "700 11px var(--fa-font-sans)", textTransform: "uppercase",
                }}>{lang === "it" ? "Popolare" : "Popular"}</div>
              )}
              <div style={{ font: "700 18px var(--fa-font-sans)" }}>{plan.name}</div>
              <div className="fa-display" style={{ fontSize: 40, letterSpacing: "-0.02em", fontWeight: 700 }}>{plan.price}</div>
              <div style={{ display: "flex", flexDirection: "column", gap: 10, flex: 1 }}>
                {plan.features.map((f, fi) => (
                  <div key={fi} className="fa-row" style={{ gap: 10, fontSize: 14, color: "var(--fa-ink-2)" }}>
                    <Icon name="check" size={16} style={{ color: "var(--fa-accent)", flexShrink: 0 }}/> {f}
                  </div>
                ))}
              </div>
              <Btn kind={plan.accent ? "primary" : "secondary"} full
                onClick={() => location.href = '/signup'}>
                {t("cta_join")}
              </Btn>
            </div>
          ))}
        </div>
      </section>

      {/* COMPARISON */}
      {!isMobile && (
        <section style={{ padding: "0 80px 96px" }}>
          <div style={{ maxWidth: 720, marginBottom: 32 }}>
            <Badge kind="accent">{lang === "it" ? "Confronto" : "Comparison"}</Badge>
            <h2 className="fa-display" style={{ fontSize: 56, lineHeight: 1.05, marginTop: 16, letterSpacing: "-0.025em", fontWeight: 700 }}>
              {t("cmp_title")}
            </h2>
          </div>
          <div className="fa-card" style={{ padding: 0, overflow: "hidden", display: "grid", gridTemplateColumns: "1fr 1fr" }}>
            <div style={{ padding: "32px 36px", borderRight: "1px solid var(--fa-border)", background: "var(--fa-surface-2)" }}>
              <div style={{ font: "600 13px var(--fa-font-sans)", color: "var(--fa-ink-3)", textTransform: "uppercase", letterSpacing: ".06em", marginBottom: 16 }}>
                {t("cmp_left")}
              </div>
              <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
                {[t("cmp_l1"), t("cmp_l2"), t("cmp_l3"), t("cmp_l4")].map((x, i) => (
                  <div key={i} className="fa-row fa-strike" style={{ fontSize: 18, gap: 12 }}>
                    <Icon name="x" size={18}/> {x}
                  </div>
                ))}
              </div>
            </div>
            <div style={{ padding: "32px 36px" }}>
              <div style={{ font: "600 13px var(--fa-font-sans)", color: "var(--fa-accent-ink)", textTransform: "uppercase", letterSpacing: ".06em", marginBottom: 16 }}>
                {t("cmp_right")}
              </div>
              <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
                {[t("cmp_r1"), t("cmp_r2"), t("cmp_r3"), t("cmp_r4")].map((x, i) => (
                  <div key={i} className="fa-row" style={{ fontSize: 18, gap: 12, color: "var(--fa-ink)" }}>
                    <Icon name="check" size={18} style={{ color: "var(--fa-accent)" }}/> {x}
                  </div>
                ))}
              </div>
            </div>
          </div>
        </section>
      )}

      {/* PROOF */}
      <section id="proof" style={{ padding: isMobile ? "48px 20px" : "0 80px 96px" }}>
        <div style={{ maxWidth: 720, marginBottom: 48 }}>
          <Badge kind="accent">{lang === "it" ? "Testimonianze" : "Proof"}</Badge>
          <h2 className="fa-display" style={{ fontSize: isMobile ? 30 : 56, lineHeight: 1.05, marginTop: 16, letterSpacing: "-0.025em", fontWeight: 700 }}>
            {t("proof_title")}
          </h2>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "repeat(3, 1fr)", gap: 20 }}>
          {[
            { q: t("proof_1_quote"), n: t("proof_1_name"), r: t("proof_1_role"), c: "#E07856" },
            { q: t("proof_2_quote"), n: t("proof_2_name"), r: t("proof_2_role"), c: "#7BA686" },
            { q: t("proof_3_quote"), n: t("proof_3_name"), r: t("proof_3_role"), c: "#8B7DC4" },
          ].map((p, i) => (
            <div key={i} className="fa-card" style={{ padding: 28, display: "flex", flexDirection: "column", gap: 20, minHeight: 280, justifyContent: "space-between" }}>
              <div className="fa-display" style={{ fontSize: 18, lineHeight: 1.45, letterSpacing: "-0.005em" }}>
                "{p.q}"
              </div>
              <div className="fa-row" style={{ gap: 12 }}>
                <Avatar color={p.c}>{p.n[0]}</Avatar>
                <div style={{ display: "flex", flexDirection: "column", lineHeight: 1.3 }}>
                  <span style={{ font: "700 13.5px var(--fa-font-sans)" }}>{p.n}</span>
                  <span style={{ font: "500 12.5px var(--fa-font-sans)", color: "var(--fa-ink-3)" }}>{p.r}</span>
                </div>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* LEAD FORM */}
      <section id="lead-form" style={{ padding: isMobile ? "48px 20px" : "0 80px 96px" }}>
        <LeadForm />
      </section>

      {/* FOOTER */}
      <footer style={{ borderTop: "1px solid var(--fa-border)", padding: isMobile ? "24px 20px" : "32px 80px", background: "var(--fa-bg-2)" }}>
        <div className="fa-row" style={{ justifyContent: "space-between", flexWrap: "wrap", gap: 12 }}>
          <div className="fa-row" style={{ gap: 10 }}>
            <Icon name="logo" size={22}/>
            <span style={{ font: "700 14px var(--fa-font-sans)" }}>Freedom Agent</span>
            <span style={{ color: "var(--fa-ink-3)", fontSize: 13, marginLeft: 8 }}>{t("footer_made")}</span>
          </div>
          <div className="fa-row" style={{ gap: 20, color: "var(--fa-ink-2)", font: "500 13px var(--fa-font-sans)" }}>
            <a href="/privacy" style={{ color: "inherit", textDecoration: "none" }}>Privacy</a>
            <a href="/terms" style={{ color: "inherit", textDecoration: "none" }}>Terms</a>
            <span>© 2026</span>
          </div>
        </div>
      </footer>
    </div>
  );
};

/* ───── Lead capture form (connected to /api/lead) ───── */
const LeadForm = () => {
  const { t, lang } = useT();
  const [email, setEmail] = useState(__PAGE_DATA__?.prefillEmail || '');
  const [why, setWhy] = useState(__PAGE_DATA__?.prefillWhy || '');
  const [submitting, setSubmitting] = useState(false);
  const isMobile = window.innerWidth < 769;

  // Full-page POST to /api/lead: the server renders the "thanks" page with the real,
  // one-time invite link. No AJAX that swallows the link, no false "check your email".
  return (
    <form method="POST" action="/api/lead" onSubmit={() => setSubmitting(true)}>
      <input type="hidden" name="_csrf" value={CSRF} />
      <input type="hidden" name="variant" value={__PAGE_DATA__?.variant || 'a'} />
      {/* honeypot: bots fill hidden fields; server rejects when `website` is non-empty */}
      <input type="text" name="website" tabIndex={-1} autoComplete="off" aria-hidden="true"
        style={{ position: "absolute", left: "-9999px", width: 1, height: 1, opacity: 0 }} />
      <div className="fa-card" style={{
        padding: 0, overflow: "hidden", display: isMobile ? "flex" : "grid", gridTemplateColumns: "1fr 1fr",
        borderRadius: 28, background: "var(--fa-bg-2)", flexDirection: "column",
      }}>
        <div style={{ padding: isMobile ? "40px 24px" : "64px 56px", display: "flex", flexDirection: "column", gap: 20 }}>
          <h3 className="fa-display" style={{ fontSize: isMobile ? 30 : 56, lineHeight: 1.02, letterSpacing: "-0.025em", fontWeight: 700 }}>
            {t("final_t")}
          </h3>
          <p style={{ fontSize: 17, color: "var(--fa-ink-2)", lineHeight: 1.5, maxWidth: 440 }}>
            {t("final_b")}
          </p>
          <div className="fa-row" style={{ gap: 12, marginTop: 8, color: "var(--fa-ink-3)" }}>
            <Icon name="shield" size={16}/>
            <span style={{ fontSize: 13 }}>{t("lead_tos")}</span>
          </div>
        </div>
        <div style={{ padding: isMobile ? "24px" : "64px 56px", background: "var(--fa-surface)", borderLeft: isMobile ? "none" : "1px solid var(--fa-border)", borderTop: isMobile ? "1px solid var(--fa-border)" : "none", display: "flex", flexDirection: "column", gap: 14 }}>
          <Field label="Email">
            <input className="fa-input fa-input-lg" type="email" name="email" required placeholder={t("email_ph")}
              value={email} onChange={e => setEmail(e.target.value)}/>
          </Field>
          <Field label={lang === "it" ? "Cosa farà il tuo agente?" : "What will your agent do?"}>
            <textarea className="fa-textarea" name="why" placeholder={t("why_ph")} style={{ minHeight: 110 }}
              value={why} onChange={e => setWhy(e.target.value)}/>
          </Field>
          <Btn kind="primary" size="lg" iconRight="arrow-right" full type="submit"
            disabled={submitting}>
            {submitting ? (lang === "it" ? "Invio…" : "Sending…") : t("lead_send")}
          </Btn>
        </div>
      </div>
    </form>
  );
};

/* ───── Hero card (chat widget mockup) ───── */
const HeroCard = () => {
  const { lang } = useT();
  return (
    <div style={{ position: "relative", display: "flex", justifyContent: "center" }}>
      <div className="fa-card" style={{
        width: 360, padding: 0, overflow: "hidden", borderRadius: 24, boxShadow: "var(--fa-sh-3)",
        transform: "rotate(1.5deg)",
      }}>
        <div style={{ padding: "14px 16px", background: "var(--fa-surface-2)", borderBottom: "1px solid var(--fa-border)", display: "flex", alignItems: "center", gap: 12 }}>
          <Avatar color="var(--fa-accent)">A</Avatar>
          <div style={{ display: "flex", flexDirection: "column", lineHeight: 1.2, flex: 1 }}>
            <span style={{ font: "700 14px var(--fa-font-sans)" }}>Assistente Marta</span>
            <span style={{ font: "500 11.5px var(--fa-font-sans)", color: "var(--fa-success)" }}>● online</span>
          </div>
        </div>
        <div style={{ padding: 16, display: "flex", flexDirection: "column", gap: 10, background: "var(--fa-bg-2)", minHeight: 300 }}>
          <Bubble side="left">{lang === "it" ? "Ciao! Come posso aiutarti oggi?" : "Hi! How can I help you today?"}</Bubble>
          <Bubble side="right">{lang === "it" ? "quali servizi offrite?" : "what services do you offer?"}</Bubble>
          <Bubble side="left" plain>
            {lang === "it"
              ? <>Offriamo tre servizi principali:<br/>1. Consulenza strategica<br/>2. Business coaching 1:1<br/>3. Workshop di team<br/><br/>Vuoi saperne di più su uno in particolare?</>
              : <>We offer three main services:<br/>1. Strategy consulting<br/>2. 1:1 business coaching<br/>3. Team workshops<br/><br/>Want to know more about one?</>}
          </Bubble>
          <Bubble side="right">{lang === "it" ? "il coaching, quanto costa?" : "coaching, how much?"}</Bubble>
          <Bubble side="left" working>
            <span className="fa-row" style={{ gap: 6 }}>
              <span style={{ width: 6, height: 6, borderRadius: 999, background: "var(--fa-accent)" }}/>
              {lang === "it" ? "cerco nelle info…" : "checking the docs…"}
            </span>
          </Bubble>
        </div>
      </div>
      <div className="fa-card" style={{
        position: "absolute", left: -20, bottom: 40, padding: "10px 14px",
        display: "flex", alignItems: "center", gap: 10, borderRadius: 14,
        boxShadow: "var(--fa-sh-2)", background: "var(--fa-surface)", transform: "rotate(-3deg)",
      }}>
        <div style={{
          width: 36, height: 36, borderRadius: 12, background: "var(--fa-accent)", color: "#fff",
          display: "flex", alignItems: "center", justifyContent: "center"
        }}>
          <Icon name="book" size={18}/>
        </div>
        <div style={{ display: "flex", flexDirection: "column", lineHeight: 1.2 }}>
          <span style={{ font: "700 12.5px var(--fa-font-sans)" }}>{lang === "it" ? "12 documenti" : "12 documents"}</span>
          <span style={{ font: "500 11px var(--fa-font-sans)", color: "var(--fa-ink-3)" }}>{lang === "it" ? "knowledge base attiva" : "knowledge base active"}</span>
        </div>
      </div>
    </div>
  );
};

/* ───── Chat showcase (dark section) ───── */
const ChatShowcase = () => {
  const { lang } = useT();
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
      <div style={{ padding: "10px 14px", background: "#22201d", border: "1px solid #2e2925", borderRadius: 12, borderBottomLeftRadius: 4 }}>
        <span style={{ font: "500 13px var(--fa-font-sans)", color: "#d3c8bd" }}>
          {lang === "it" ? "Ciao! Sono l'assistente di Studio Marta. Come posso aiutarti?" : "Hi! I'm Studio Marta's assistant. How can I help?"}
        </span>
      </div>
      <div style={{ padding: "10px 14px", background: "rgba(74,57,216,.15)", border: "1px solid rgba(74,57,216,.3)", borderRadius: 12, borderBottomRightRadius: 4, alignSelf: "flex-end" }}>
        <span style={{ font: "500 13px var(--fa-font-sans)", color: "var(--fa-accent)" }}>
          {lang === "it" ? "Avete disponibilità questa settimana?" : "Do you have availability this week?"}
        </span>
      </div>
      <div style={{ padding: "10px 14px", background: "#22201d", border: "1px solid #2e2925", borderRadius: 12, borderBottomLeftRadius: 4 }}>
        <span style={{ font: "500 13px var(--fa-font-sans)", color: "#d3c8bd" }}>
          {lang === "it"
            ? "Sì! Abbiamo slot liberi mercoledì 14:00 e giovedì 10:00. Preferisci una sessione online o in presenza?"
            : "Yes! We have slots on Wednesday 2pm and Thursday 10am. Do you prefer online or in-person?"}
        </span>
      </div>
      <div style={{ marginTop: 12, padding: "12px 16px", background: "#1a1816", border: "1px solid #2e2925", borderRadius: 14 }}>
        <div className="fa-row" style={{ gap: 10, marginBottom: 8 }}>
          <Icon name="book" size={14} style={{ color: "#7c7268" }}/>
          <span style={{ font: "600 11px var(--fa-font-mono)", color: "#7c7268", textTransform: "uppercase", letterSpacing: ".06em" }}>
            {lang === "it" ? "Fonte: calendario-disponibilità.pdf" : "Source: availability-calendar.pdf"}
          </span>
        </div>
        <div style={{ font: "500 12px var(--fa-font-sans)", color: "#a59a8e", lineHeight: 1.5 }}>
          {lang === "it"
            ? "Risposte basate sui tuoi documenti. Nessuna allucinazione."
            : "Answers grounded in your documents. No hallucinations."}
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { Landing, LeadForm, HeroCard, ChatShowcase });