const { Button, Tag, Card } = window.DHubDesignSystem_2b7319;

function Eyebrow({ children, center }) {
  return React.createElement("span", {
    style: { display: "inline-flex", alignItems: "center", gap: "0.5em", fontFamily: "var(--font-mono)", fontSize: "var(--text-eyebrow)", letterSpacing: "var(--tracking-eyebrow)", textTransform: "uppercase", color: "var(--accent)", marginBottom: "1.1rem", justifyContent: center ? "center" : "flex-start" }
  },
    React.createElement("span", { style: { width: "1.4em", height: "1px", background: "var(--accent)", display: "inline-block" } }),
    children
  );
}

const wrap = { maxWidth: "var(--container-max)", margin: "0 auto", padding: `0 var(--gutter)` };
const section = { padding: "clamp(3.5rem,8vw,7rem) 0", borderBottom: "1px solid var(--border-default)" };
const bodyCopy = { fontSize: "1rem", lineHeight: "var(--leading-body)", color: "var(--text-secondary)", maxWidth: "52ch" };

function Nav() {
  const links = [
    { label: "Chi siamo", href: "#chi-siamo" },
    { label: "Come lavoriamo", href: "#processo" },
    { label: "Cosa facciamo", href: "#cosa-facciamo" },
    { label: "Perché D-Hub", href: "#perche" }
  ];
  return React.createElement("nav", {
    style: { position: "sticky", top: 0, zIndex: 40, display: "flex", flexWrap: "wrap", rowGap: "0.6rem", alignItems: "center", justifyContent: "space-between", padding: "1.1rem var(--gutter)", background: "color-mix(in srgb, var(--bg-page) 88%, transparent)", backdropFilter: "blur(10px)", borderBottom: "1px solid var(--border-default)" }
  },
    // logo ora responsivo (era fisso a 2.5rem): su mobile, insieme a 4 link + bottone, mandava il nav in overflow orizzontale — causa reale del margine "sparito" segnalato da Orazio, non il gutter in sé
    // logo cliccabile (2026-08-02): torna in cima alla pagina, comportamento standard "home" atteso dagli utenti
    React.createElement("a", { href: "/", "aria-label": "Torna all'inizio della pagina", style: { fontFamily: "var(--font-display)", fontSize: "clamp(1.5rem, 6vw, 2.5rem)", fontWeight: 700, textDecoration: "none", color: "var(--text-primary)" } }, "D", React.createElement("span", { style: { color: "var(--accent)" } }, "·"), "HUB"),
    React.createElement("ul", { style: { display: "flex", flexWrap: "wrap", rowGap: "0.4rem", gap: "clamp(1rem,2vw,2rem)", listStyle: "none", margin: 0, padding: 0, fontSize: "0.85rem" } },
      links.map(l => React.createElement("li", { key: l.label }, React.createElement("a", { href: l.href, style: { textDecoration: "none", color: "var(--text-secondary)" } }, l.label)))
    ),
    React.createElement(Button, { variant: "ghost", size: "sm", href: "#contatti" }, "Contatti")
  );
}

function Hero() {
  // Tornato (2026-08-02) a un unico livello: foto a piena area come sfondo dell'intero Hero, testo sovrapposto
  // sopra. Le due colonne separate (tentativo precedente) evitavano la sovrapposizione ma creavano una linea di
  // confine netta e innaturale fra testo e foto — non voluta. Ora la sfumatura è molto più larga e graduale (molti
  // stop ravvicinati invece di pochi bruschi), così il testo può "sbordare" nella zona sfumata della foto e
  // sembrare integrato, senza un punto di distacco percepibile a occhio nudo.
  return React.createElement("header", {
    className: "hero-header",
    style: {
      position: "relative",
      overflow: "hidden",
      borderBottom: "1px solid var(--border-default)",
      minHeight: "clamp(480px, 72vh, 720px)",
      display: "flex",
      alignItems: "center",
      backgroundColor: "var(--cream)",
      backgroundImage: "url('assets/hero-photo.jpg')",
      // Impostazione base ripristinata (2026-08-02) dalla prima foto (fotoheroDHUB): cover + inquadratura spostata di 3cm
      // a destra. La nuova foto (fotoheroDHUBbiz) ha la stessa identica proporzione (2402×1760 = 1474×1080, rapporto
      // 1.365) quindi si comporta allo stesso modo. Il trattamento "contain" è su mobile/tablet (vedi index.html).
      // Zoom-out ulteriore (2026-08-02): il polsino della GIACCA (non camicia) sulla mano più in BASSO restava solo
      // accennato con "92% auto" — ridotto ancora a "80% auto" per farlo vedere bene, non solo intravedere. Margine
      // laterale conseguentemente un po' più ampio (stesso colore crema dello sfondo) — stima ~250-300px totali su
      // un desktop tipico (~1440px), non più "sottile" come al passo precedente ma necessario per l'obiettivo.
      backgroundSize: "80% auto",
      backgroundPosition: "calc(50% + 3cm) 50%",
      // Mancava (2026-08-02): senza no-repeat, con la foto ridotta all'80% il browser ripeteva una seconda copia
      // dell'immagine nello spazio vuoto rimasto a destra — la "seconda immagine" vista nello screenshot.
      backgroundRepeat: "no-repeat"
    }
  },
    React.createElement("div", {
      className: "hero-fade",
      style: {
        position: "absolute", inset: 0,
        background: "linear-gradient(100deg, var(--cream) 0%, var(--cream) 30%, color-mix(in srgb, var(--cream) 92%, transparent) 40%, color-mix(in srgb, var(--cream) 78%, transparent) 48%, color-mix(in srgb, var(--cream) 58%, transparent) 56%, color-mix(in srgb, var(--cream) 38%, transparent) 64%, color-mix(in srgb, var(--cream) 20%, transparent) 72%, color-mix(in srgb, var(--cream) 8%, transparent) 80%, transparent 90%)"
      }
    }),
    React.createElement("div", { style: { ...wrap, position: "relative", width: "100%" } },
      React.createElement("div", { style: { maxWidth: "620px" } },
        React.createElement(Eyebrow, null, "Il team marketing strategico esterno, integrato nella tua azienda"),
        React.createElement("h1", { style: { fontFamily: "var(--font-display)", fontWeight: 600, fontSize: "var(--text-h1)", lineHeight: "var(--leading-display)", letterSpacing: "-0.01em", color: "var(--text-primary)", margin: 0, textShadow: "0 0 20px var(--cream), 0 0 9px var(--cream)" } },
          "Ogni settore parla una lingua diversa. ", React.createElement("span", { style: { color: "var(--accent)" } }, "Il nostro marketing le parla tutte.")
        ),
        React.createElement("p", { style: { ...bodyCopy, marginTop: "1.4rem", color: "var(--text-primary)", textShadow: "0 0 16px var(--cream), 0 0 7px var(--cream)" } }, "Soluzioni di marketing strategico e operativo su misura per la tua impresa: flessibili, integrate e pensate per generare valore concreto senza appesantire i costi fissi."),
        React.createElement("div", { style: { display: "flex", gap: "0.9rem", marginTop: "2.1rem", flexWrap: "wrap" } },
          React.createElement(Button, { variant: "primary", href: "#processo" }, "Come lavoriamo")
        )
      )
    )
  );
}

function Positioning() {
  return React.createElement("section", { id: "chi-siamo", style: { ...wrap, ...section } },
    React.createElement("div", { className: "dh-block", style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: "clamp(2rem,5vw,4rem)" } },
      React.createElement("div", null,
        React.createElement(Eyebrow, null, "D-Hub non è un'agenzia"),
        // era <p>: per la gerarchia SEO/accessibilità (un H1 in Hero, poi H2 per ogni sezione principale) questo statement è a tutti gli effetti il titolo della sezione — 2026-08-02
        React.createElement("h2", { style: { fontFamily: "var(--font-display)", fontSize: "var(--text-lede)", lineHeight: "var(--leading-lede)", color: "var(--text-primary)", margin: 0, fontWeight: 400 } },
          "Le nostre competenze ", React.createElement("strong", { style: { color: "var(--accent)", fontWeight: 600 } }, "parlano la lingua del business"), ". Per un marketing concreto e orientato ai risultati che sa farsi capire (e scegliere)."
        )
      ),
      React.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "1.1rem", justifyContent: "center" } },
        React.createElement("p", { style: bodyCopy }, "Siamo professioniste marketing e comunicazione con un background professionale maturato anche in contesti internazionali ad alta complessità. Grazie alla nostra esperienza in mercati diversi abbiamo sviluppato una conoscenza e un approccio strategico a vari settori: dai servizi alla produzione, dalla creatività al commercio. Abbiamo lavorato con aziende corporate e PMI, istituzioni ed enti culturali, in ambiti diversificati. Il nostro approccio al cliente si basa sulla solida esperienza di chi, nella nostra rete, svolge questa attività consulenziale da 30 anni con un metodo che privilegia relazione, qualità e feedback strutturati."),
        React.createElement("p", { style: bodyCopy }, "Essere un team marketing esterno significa che non vi lasciamo soli con una mappa in mano: ", React.createElement("strong", { style: { color: "var(--text-primary)", fontWeight: 600 } }, "saliamo a bordo insieme a voi."), " Noi ci occupiamo di tutte le attività di marketing e comunicazione — voi vi concentrate sulla crescita della vostra azienda.")
      )
    )
  );
}

const steps = [
  { n: "01 / 04", tag: "Analisi", title: "L'esplorazione", body: "Studiamo il contesto, il mercato e le vostre potenzialità per capire dove siamo e dove possiamo arrivare." },
  { n: "02 / 04", tag: "Strategia", title: "La rotta", body: "Definiamo la direzione strategica, individuiamo i possibili ostacoli, ottimizziamo le risorse." },
  { n: "03 / 04", tag: "Coordinamento", title: "Il governo del timone", body: "Traduciamo la strategia in azioni quotidiane, modellate sulla vostra andatura." },
  { n: "04 / 04", tag: "Monitoraggio", title: "L'approdo", body: "Leggiamo gli strumenti di bordo, calibriamo la direzione, valutiamo l'approdo." }
];

function Process() {
  return React.createElement("section", { id: "processo", style: { ...wrap, ...section } },
    React.createElement("div", { className: "dh-block", style: { display: "grid", gridTemplateColumns: "1.15fr 1fr", gridTemplateRows: "auto auto auto auto", columnGap: "clamp(2rem,5vw,4rem)", rowGap: 0 } },
      React.createElement("div", { style: { gridColumn: "1", gridRow: "1" } },
        React.createElement(Eyebrow, null, "Come lavoriamo")
      ),
      React.createElement("h2", { style: { fontFamily: "var(--font-display)", fontSize: "var(--text-h2)", color: "var(--text-primary)", margin: 0, gridColumn: "1", gridRow: "2" } }, "Il nostro approccio, in 4 tappe"),
      React.createElement("p", { style: { ...bodyCopy, marginTop: "1rem", maxWidth: "none", gridColumn: "1", gridRow: "3" } }, "Il lavoro comincia dall'esplorazione del contesto per disegnare una rotta sicura e ambiziosa. Poi prendiamo il timone del coordinamento, e continuiamo a leggere gli strumenti di bordo per essere certi che ogni miglio percorso generi valore."),
      React.createElement("div", { className: "dh-stack-cols", style: { gridColumn: "1", gridRow: "4", display: "grid", gridTemplateColumns: "repeat(2,1fr)", gap: "1px", background: "var(--border-default)", border: "1px solid var(--border-default)", borderRadius: "var(--radius)", overflow: "hidden", marginTop: "2.5rem" } },
        steps.map(s => React.createElement("div", { key: s.n, style: { background: "var(--bg-surface)", padding: "1.8rem 1.6rem" } },
          React.createElement("span", { style: { fontFamily: "var(--font-mono)", fontSize: "0.78rem", color: "var(--accent)" } }, s.n),
          React.createElement("span", { style: { display: "block", fontFamily: "var(--font-mono)", fontSize: "1.05rem", letterSpacing: "0.04em", textTransform: "uppercase", fontWeight: 700, color: "var(--text-primary)", marginTop: "0.9rem" } }, s.tag),
          React.createElement("span", { style: { display: "block", fontFamily: "var(--font-display)", fontSize: "0.78rem", fontWeight: 400, color: "var(--text-secondary)", marginTop: "0.3rem" } }, s.title),
          React.createElement("p", { style: { marginTop: "0.8rem", fontSize: "0.9rem", lineHeight: "var(--leading-small)", color: "var(--text-secondary)" } }, s.body)
        ))
      ),
      // top of image aligned with the H2 (row 2), bottom aligned with the bottom of the box grid (end of row 4) — su mobile (.dh-block) diventa un blocco a piena larghezza in fondo, altezza naturale
      React.createElement("img", { src: "assets/percorso.jpg", alt: "Il percorso in 4 tappe: analisi, strategia, coordinamento, monitoraggio", style: { gridColumn: "2", gridRow: "2 / 5", width: "100%", height: "100%", objectFit: "cover", borderRadius: "var(--radius)" } })
    )
  );
}

const capabilities = [
  { title: "Marketing communication", body: "Comunicazione e storytelling per tradurre i bisogni delle organizzazioni in strategie di narrazione efficaci, coltivando relazioni autentiche e durature attraverso il content marketing e le media relations.", items: ["Storytelling & content creation", "Contemporary PR (cross-piattaforma)", "Materiali e strumenti di comunicazione", "Merchandising"] },
  { title: "Cross-platform media strategy", body: "Ideazione di format multimediali, regia, sceneggiatura e progettazione di podcast e prodotti editoriali multipiattaforma, orientati al risultato.", items: ["Social media strategy & management", "Social selling coaching", "Cross-platform content creation", "Ottimizzazione SEO e GEO (AI)", "Webinar", "Video (tutorial, promo, social formats…)"] },
  { title: "Brand activation", body: "Il marketing al servizio degli obiettivi di business e della crescita del fatturato, attraverso strategia di lead generation, sales enablement e gestione di eventi e fiere.", items: ["Progettazione ed esecuzione di eventi", "Exhibition marketing", "Campagne di lead generation"] }
];

function WhatWeDo() {
  return React.createElement("section", { id: "cosa-facciamo", style: { ...wrap, ...section } },
    React.createElement("div", { className: "dh-block", style: { display: "grid", gridTemplateColumns: "1fr 1fr", gridTemplateRows: "auto auto", columnGap: "clamp(2rem,5vw,4rem)", rowGap: 0 } },
      React.createElement("div", { style: { gridColumn: "1", gridRow: "1" } },
        React.createElement(Eyebrow, null, "Cosa facciamo")
      ),
      // H2 e paragrafo sono ora entrambi elementi diretti della riga 2 (non più un div che spannava le righe 1/3, che causava il disallineamento) — così l'allineamento centrato è affidabile
      React.createElement("h2", { style: { fontFamily: "var(--font-display)", fontSize: "var(--text-h2)", color: "var(--text-primary)", margin: 0, gridColumn: "1", gridRow: "2", alignSelf: "center" } }, "Le nostre competenze integrate"),
      React.createElement("p", { style: { ...bodyCopy, gridColumn: "2", gridRow: "2", alignSelf: "center" } }, "Un unico team, tre sguardi complementari, per guidare la comunicazione e il business, collaborando con un network di professionisti selezionati: un HUB flessibile, per offrire a ogni cliente soluzioni su misura e misurabili.")
    ),
    React.createElement("div", { className: "dh-stack-cols", style: { display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: "1.5rem", marginTop: "2.8rem" } },
      capabilities.map(c => React.createElement("div", { key: c.title, style: { border: "1px solid var(--border-default)", borderRadius: "var(--radius)", background: "var(--bg-surface)", padding: "1.8rem" } },
        React.createElement("h3", { style: { fontFamily: "var(--font-display)", fontSize: "0.95rem", fontWeight: 600, letterSpacing: "0.02em", textTransform: "uppercase", color: "var(--accent)", margin: 0, whiteSpace: "nowrap" } }, c.title),
        React.createElement("p", { style: { ...bodyCopy, marginTop: "0.9rem" } }, c.body),
        React.createElement("span", { style: { display: "block", fontSize: "0.85rem", fontWeight: 600, color: "var(--text-primary)", marginTop: "1.2rem" } }, "Focus:"),
        React.createElement("ul", { style: { listStyle: "none", margin: "0.8rem 0 0", padding: 0, display: "grid", gap: "0.6rem" } },
          c.items.map(it => React.createElement("li", { key: it, style: { fontSize: "1rem", color: "var(--text-primary)", paddingLeft: "1.1em", position: "relative", lineHeight: "var(--leading-body)" } },
            React.createElement("span", { style: { position: "absolute", left: 0, color: "var(--accent)" } }, "•"), it
          ))
        )
      ))
    )
  );
}

const whyItems = [
  { n: "01", title: "Condividiamo il viaggio", body: "Individuiamo la strategia ma siamo anche noi parte del viaggio: la traduciamo in azioni quotidiane e monitoriamo le attività, con un rapporto diretto e trasparente." },
  { n: "02", title: "Studiamo e ci aggiorniamo", body: "Seguiamo i trend di mercato e curiamo gli approfondimenti, per offrirvi un'analisi del presente e uno sguardo informato sul futuro." },
  { n: "03", title: "Ottimizziamo le risorse", body: "Pianifichiamo azioni pratiche, concrete e flessibili, facendo leva sulla sinergia con un network di professionisti qualificati." }
];

function WhyDHub() {
  return React.createElement("section", { id: "perche", style: { ...wrap, ...section } },
    React.createElement(Eyebrow, null, "Perché D-Hub"),
    React.createElement("h2", { style: { fontFamily: "var(--font-display)", fontSize: "var(--text-h2)", color: "var(--text-primary)", margin: 0 } }, "Non solo la rotta. Anche l'equipaggio."),
    React.createElement("div", { className: "dh-stack-cols", style: { display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: "2rem", marginTop: "2.5rem" } },
      whyItems.map(w => React.createElement("div", { key: w.n },
        React.createElement("span", { style: { fontFamily: "var(--font-display)", fontSize: "2.1rem", color: "var(--accent-soft)", WebkitTextStroke: "1px var(--accent)" } }, w.n),
        React.createElement("h3", { style: { fontFamily: "var(--font-display)", fontSize: "1.05rem", marginTop: "0.6rem", color: "var(--text-primary)" } }, w.title),
        React.createElement("p", { style: { marginTop: "0.7rem", fontSize: "0.92rem", lineHeight: "var(--leading-small)", color: "var(--text-secondary)" } }, w.body)
      ))
    )
  );
}

function FinalCTA() {
  return React.createElement("section", { id: "contatti", style: { ...wrap, ...section, textAlign: "center" } },
    React.createElement(Eyebrow, { center: true }, "Iniziamo il viaggio"),
    // era <p>, come sopra — 2026-08-02
    React.createElement("h2", { style: { fontFamily: "var(--font-display)", fontSize: "var(--text-lede)", lineHeight: "var(--leading-lede)", color: "var(--text-primary)", maxWidth: "46ch", margin: "0 auto", fontWeight: 400 } }, "Un viaggio modulabile e flessibile, alla luce del budget e delle necessità di ognuno."),
    React.createElement("p", { style: { ...bodyCopy, margin: "1.3rem auto 0", textAlign: "center" } }, "Nulla vieta di affiancarsi a metà strada, per un solo tratto del cammino, o di compiere insieme solo la parte iniziale — la più insidiosa — di individuazione della giusta direzione. L'importante è iniziare a conoscersi."),
    React.createElement("div", { style: { display: "flex", justifyContent: "center", marginTop: "2.1rem" } },
      React.createElement(Button, { variant: "primary", href: "mailto:info@dhubmilano.it" }, "Scrivici — info@dhubmilano.it")
    )
  );
}

function Footer() {
  return React.createElement("footer", { style: { padding: "2.5rem var(--gutter) 3rem", textAlign: "center" } },
    React.createElement("div", { style: { fontFamily: "var(--font-display)", fontSize: "1rem", color: "var(--text-primary)", marginBottom: "1.2rem" } }, "D", React.createElement("span", { style: { color: "var(--accent)" } }, "·"), "HUB"),
    React.createElement("div", { style: { display: "flex", flexWrap: "wrap", gap: "1.5rem", alignItems: "center", justifyContent: "center", fontSize: "0.85rem", color: "var(--text-secondary)" } },
      React.createElement("a", { href: "mailto:info@dhubmilano.it", style: { textDecoration: "none", color: "var(--text-primary)" } }, "info@dhubmilano.it"),
      React.createElement("span", null, "© 2026 D-Hub Milano. Tutti i diritti riservati."),
      React.createElement("a", { href: "https://www.linkedin.com/company/dhubmilano/", target: "_blank", rel: "noopener noreferrer", "aria-label": "LinkedIn — dhubmilano", style: { display: "inline-flex", alignItems: "center", gap: "0.5em", textDecoration: "none", color: "var(--text-primary)" } },
        React.createElement("img", { src: "assets/linkedin-icon.png", alt: "", style: { width: "1.3rem", height: "1.3rem" } }),
        "LinkedIn — dhubmilano"
      )
    )
  );
}

Object.assign(window, { Nav, Hero, Positioning, Process, WhatWeDo, WhyDHub, FinalCTA, Footer });