// Marketing landing — grounded in real brand elements: header (logo + auth
// buttons), hero (brand gradient + More Sugar display), course-path grid
// (topic colors), stats band, and the production Footer (libs/.../footer.tsx).
const M_BASE = "../../";
const { Button: MButton, Icon: MIcon, Card: MCard, Tag: MTag, Footer: MFooter } = window.DesignSystemV02_81855c;

const PATHS = [
  { name: "Marketing Digitale", color: "var(--topic-marketing)", icon: "rocket", desc: "SEO, social e advertising per far crescere brand e prodotti." },
  { name: "UX/UI Design", color: "var(--topic-design)", icon: "pen-to-square", desc: "Progetta interfacce e esperienze che le persone amano usare." },
  { name: "Sviluppo Web", color: "var(--topic-dev)", icon: "graduation-cap", desc: "Dal front-end al back-end, costruisci applicazioni reali." },
  { name: "Data Science", color: "var(--topic-data)", icon: "list-check", desc: "Analizza, visualizza e racconta i dati per decidere meglio." },
  { name: "Blockchain & Web3", color: "var(--topic-blockchain)", icon: "gem", desc: "Smart contract, wallet e dApp: il futuro decentralizzato." },
  { name: "Startup", color: "var(--topic-startup)", icon: "handshake", desc: "Dall'idea al business model, fino al primo pitch." },
];

const STATS = [
  { n: "60.000+", l: "Studenti formati" },
  { n: "20+", l: "Master di carriera" },
  { n: "500+", l: "Aziende partner" },
  { n: "4,8/5", l: "Recensioni verificate" },
];

function Header() {
  return (
    <header style={{ position: "sticky", top: 0, zIndex: 10, background: "var(--greyscale-base)", borderBottom: "1px solid var(--greyscale-extralight)" }}>
      <div style={{ maxWidth: 1110, margin: "0 auto", padding: "16px 24px", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
        <img src={M_BASE + "assets/logo/logo-full.svg"} alt="start2impact" height="34" />
        <nav style={{ display: "flex", alignItems: "center", gap: 32 }}>
          <a href="#" style={{ color: "var(--greyscale-dark)", textDecoration: "none", fontWeight: 500, fontSize: "var(--paragraph-span1)" }}>Master</a>
          <a href="#" style={{ color: "var(--greyscale-dark)", textDecoration: "none", fontWeight: 500, fontSize: "var(--paragraph-span1)" }}>Corsi</a>
          <a href="#" style={{ color: "var(--greyscale-dark)", textDecoration: "none", fontWeight: 500, fontSize: "var(--paragraph-span1)" }}>Aziende</a>
          <div style={{ display: "flex", gap: 12 }}>
            <MButton variant="secondary" size="md">Accedi</MButton>
            <MButton variant="primary" size="md">Inizia gratis</MButton>
          </div>
        </nav>
      </div>
    </header>
  );
}

function Hero() {
  return (
    <section style={{ background: "var(--grey-900)", color: "#fff", overflow: "hidden", position: "relative" }}>
      <div style={{ maxWidth: 1110, margin: "0 auto", padding: "96px 24px", display: "grid", gridTemplateColumns: "1.1fr 0.9fr", gap: 48, alignItems: "center" }}>
        <div>
          <span style={{ display: "inline-flex", alignItems: "center", gap: 8, padding: "6px 12px", borderRadius: "var(--radius-full)", background: "rgba(8,247,161,0.12)", color: "var(--mint-300)", fontSize: "var(--label-3)", fontWeight: 600 }}>
            <MIcon name="award" base={M_BASE} size={14} color="var(--mint-300)" /> Società Benefit
          </span>
          <h1 style={{ margin: "20px 0 0", fontFamily: "var(--font-title)", fontWeight: 800, fontSize: "var(--h1-landing)", lineHeight: 1.1 }}>
            Diventa un professionista{" "}
            <span style={{ background: "linear-gradient(45deg,#007369,#08F7A1)", WebkitBackgroundClip: "text", backgroundClip: "text", color: "transparent" }}>digitale</span>
          </h1>
          <p style={{ margin: "20px 0 0", fontFamily: "var(--font-paragraph)", fontSize: "var(--paragraph-p1)", color: "var(--grey-400)", lineHeight: 1.5, maxWidth: 480 }}>
            Studia online con progetti pratici, ottieni una correzione da professionisti del settore e crea un impatto positivo sul mondo.
          </p>
          <div style={{ display: "flex", gap: 16, marginTop: 32 }}>
            <MButton variant="primary" size="lg">Inizia ora</MButton>
            <MButton variant="secondary" size="lg" style={{ background: "transparent", color: "#fff", borderColor: "rgba(255,255,255,0.4)" }}>Scopri i Master</MButton>
          </div>
        </div>
        <div style={{ display: "flex", justifyContent: "center" }}>
          <img src={M_BASE + "assets/logo/logo-icon.svg"} alt="" width="280" height="280" style={{ filter: "drop-shadow(0 24px 64px rgba(8,247,161,0.25))" }} />
        </div>
      </div>
    </section>
  );
}

function Stats() {
  return (
    <section style={{ background: "var(--brand-primary-light)" }}>
      <div style={{ maxWidth: 1110, margin: "0 auto", padding: "40px 24px", display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 24 }}>
        {STATS.map((s) => (
          <div key={s.l} style={{ textAlign: "center" }}>
            <div style={{ fontFamily: "var(--font-title)", fontWeight: 800, fontSize: "var(--h2-landing)", color: "var(--text-brand-dark)" }}>{s.n}</div>
            <div style={{ fontFamily: "var(--font-paragraph)", fontSize: "var(--paragraph-span1)", color: "var(--text-brand-mid)", marginTop: 4 }}>{s.l}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

function Paths() {
  return (
    <section style={{ maxWidth: 1110, margin: "0 auto", padding: "88px 24px" }}>
      <div style={{ textAlign: "center", marginBottom: 48 }}>
        <h2 style={{ margin: 0, fontFamily: "var(--font-title)", fontWeight: 800, fontSize: "var(--h2-landing)", color: "var(--greyscale-dark)" }}>Scegli il tuo percorso</h2>
        <p style={{ margin: "12px 0 0", fontSize: "var(--paragraph-p1)", color: "var(--greyscale-mid)" }}>Sette aree di carriera, un unico metodo basato sui progetti.</p>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 24 }}>
        {PATHS.map((p) => (
          <MCard key={p.name} interactive padding="24px">
            <div style={{ width: 48, height: 48, borderRadius: "var(--radius-lg)", display: "flex", alignItems: "center", justifyContent: "center", background: "color-mix(in srgb, " + p.color + " 12%, white)", marginBottom: 16 }}>
              <MIcon name={p.icon} base={M_BASE} size={24} color={p.color} />
            </div>
            <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 8 }}>
              <h3 style={{ margin: 0, fontFamily: "var(--font-title)", fontWeight: 700, fontSize: "var(--h5)", color: "var(--greyscale-dark)" }}>{p.name}</h3>
            </div>
            <p style={{ margin: 0, fontSize: "var(--paragraph-span2)", color: "var(--greyscale-mid)", lineHeight: 1.5 }}>{p.desc}</p>
            <div style={{ marginTop: 16, display: "inline-flex", alignItems: "center", gap: 8, color: p.color, fontWeight: 600, fontSize: "var(--label-2)" }}>
              Esplora <MIcon name="chevron-right" base={M_BASE} size={12} color={p.color} />
            </div>
          </MCard>
        ))}
      </div>
    </section>
  );
}

function CtaBand() {
  return (
    <section style={{ background: "linear-gradient(120deg, var(--mint-600), var(--mint-800))" }}>
      <div style={{ maxWidth: 1110, margin: "0 auto", padding: "72px 24px", textAlign: "center", color: "#fff" }}>
        <h2 style={{ margin: 0, fontFamily: "var(--font-title)", fontWeight: 800, fontSize: "var(--h2-landing)" }}>Pronto a fare il primo passo?</h2>
        <p style={{ margin: "16px auto 0", maxWidth: 520, fontSize: "var(--paragraph-p1)", opacity: 0.9 }}>Inizia gratis oggi e ricevi la tua prima correzione da un professionista del settore.</p>
        <div style={{ marginTop: 32 }}>
          <MButton variant="secondary" size="lg" style={{ background: "#fff", color: "var(--text-brand-dark)", borderColor: "#fff" }}>Crea il tuo account</MButton>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  const columns = [
    { title: "About", links: [{ label: "Chi siamo", active: true }, "Lavora con noi", "Per le aziende"] },
    { title: "Formazione", links: ["Master", "Supporto Ricerca Lavoro", "Garanzia Money Back"] },
    { title: "Risorse gratuite", links: ["Orientamento", "Blog", "Storie di successo"] },
    { title: "Supporto", links: ["WhatsApp", "FAQ", "Recensioni", "Login"] },
    { title: "Social", links: ["YouTube", "Instagram", "LinkedIn"] },
  ];
  return (
    <MFooter base={M_BASE} columns={columns} legalLinks={["Termini", "Privacy", "Cookie"]} />
  );
}

function Landing() {
  return (
    <div>
      <Header />
      <Hero />
      <Stats />
      <Paths />
      <CtaBand />
      <Footer />
    </div>
  );
}
ReactDOM.createRoot(document.getElementById("root")).render(<Landing />);