/* global React */
/* =============================================================================
   Tecnolife — Cookie Policy
   -----------------------------------------------------------------------------
   Conforme alle Linee Guida del Garante per la protezione dei dati personali
   del 10 giugno 2021 (Provv. n. 231/2021) e all'art. 122 del D.Lgs. 196/2003.
   Bilingue IT/EN.
   ============================================================================= */
const { useState: useCpState } = React;

window.CookiePolicyHero = function CookiePolicyHero({ lang }) {
  const t = lang === "it"
    ? { eyebrow: "Legal", h1a: "Cookie", h1b: "Policy",
        lead: "In questa pagina spieghiamo quali cookie utilizza il sito tecnolife.com, a cosa servono e come puoi gestirli in qualunque momento." }
    : { eyebrow: "Legal", h1a: "Cookie", h1b: "Policy",
        lead: "On this page we explain which cookies tecnolife.com uses, what they are for and how you can manage them at any time." };
  return (
    <div style={{ position: "relative", overflow: "hidden", color: "#fff", paddingTop: 160, paddingBottom: 80 }}>
      <div style={{ position: "absolute", inset: 0, background: "var(--tl-gradient-mesh)", zIndex: 0 }} />
      <window.Container style={{ position: "relative", zIndex: 2, maxWidth: 880 }}>
        <window.Eyebrow light>{t.eyebrow}</window.Eyebrow>
        <h1 style={{ fontSize: "clamp(40px, 6vw, 76px)", fontWeight: 800, lineHeight: 1.04, letterSpacing: "-0.03em", margin: 0 }}>
          <span style={{ display: "block", color: "#fff" }}>{t.h1a}</span>
          <span style={{ display: "block", background: "linear-gradient(135deg,#7EE3FF 0%,#28D1FE 40%,#1E8BFF 100%)", WebkitBackgroundClip: "text", backgroundClip: "text", color: "transparent" }}>{t.h1b}</span>
        </h1>
        <p style={{ fontSize: "clamp(16px, 1.4vw, 20px)", lineHeight: 1.55, color: "rgba(255,255,255,0.78)", maxWidth: 720, marginTop: 28 }}>{t.lead}</p>
      </window.Container>
    </div>
  );
};

window.CookiePolicyBody = function CookiePolicyBody({ lang }) {
  const [reopened, setReopened] = useCpState(false);

  function reopen() {
    if (typeof window !== "undefined" && typeof window.openCookiePreferences === "function") {
      window.openCookiePreferences();
      setReopened(true);
      // reset visivo del feedback dopo qualche secondo
      setTimeout(() => setReopened(false), 2500);
    }
  }

  const updated = lang === "it" ? "30 aprile 2026" : "30 April 2026";

  const sections = lang === "it" ? [
    {
      h: "1. Cosa sono i cookie",
      p: "I cookie sono piccoli file di testo che i siti visitati inviano al terminale dell'utente, dove vengono memorizzati per essere ritrasmessi agli stessi siti alla visita successiva. Tecnologie analoghe (es. local storage, identificatori dei dispositivi, pixel) sono trattate, ai fini di questa policy, come cookie.",
    },
    {
      h: "2. Categorie di cookie utilizzati",
      list: [
        { lbl: "Tecnici (sempre attivi)", desc: "Indispensabili per il corretto funzionamento del sito (es. memorizzazione della preferenza di lingua, mantenimento del consenso cookie). Non richiedono il consenso (art. 122 D.Lgs. 196/2003)." },
        { lbl: "Analytics", desc: "Permettono di raccogliere statistiche aggregate sull'utilizzo del sito per migliorarne contenuti e prestazioni. Vengono attivati solo previo tuo consenso." },
        { lbl: "Marketing", desc: "Utilizzati per profilare gli interessi e per inviare comunicazioni personalizzate o misurare l'efficacia di campagne. Vengono attivati solo previo tuo consenso." },
      ],
    },
    {
      h: "3. Elenco dei cookie e archiviazione locale",
      p: <>Il sito utilizza il <em>localStorage</em> del browser per memorizzare due valori: <code>tl-lang</code> (preferenza di lingua, durata illimitata fino a cancellazione manuale) e <code>tl-cookie-consent</code> (registrazione del consenso espresso, durata 12 mesi). Eventuali cookie analytics e marketing di terze parti — quando attivati — saranno elencati nominativamente in questa sezione una volta integrati. Allo stato attuale, il sito non installa cookie di profilazione di terze parti senza il tuo consenso.</>,
    },
    {
      h: "4. Come gestire le preferenze",
      p: <>Puoi modificare in qualunque momento le tue scelte cliccando sul bottone qui sotto. Puoi inoltre eliminare i cookie già memorizzati direttamente dalle impostazioni del tuo browser (Chrome, Firefox, Safari, Edge). La revoca del consenso non pregiudica la liceità del trattamento svolto prima della revoca.</>,
    },
    {
      h: "5. Riferimenti normativi",
      p: <>La presente Cookie Policy è redatta in conformità al Regolamento (UE) 2016/679 (GDPR), all'art. 122 del D.Lgs. 196/2003 e s.m.i. e alle <a href="https://www.garanteprivacy.it/web/guest/home/docweb/-/docweb-display/docweb/9677876" rel="noopener" target="_blank">Linee Guida cookie del Garante per la protezione dei dati personali del 10 giugno 2021</a>. Per le modalità di esercizio dei diritti dell'interessato si rinvia alla <a href="privacy.html">Privacy Policy</a>.</>,
    },
  ] : [
    {
      h: "1. What cookies are",
      p: "Cookies are small text files that the websites you visit send to your terminal, where they are stored to be sent back to those same websites on your next visit. Similar technologies (e.g. local storage, device identifiers, pixels) are treated, for the purposes of this policy, as cookies.",
    },
    {
      h: "2. Categories of cookies we use",
      list: [
        { lbl: "Strictly necessary (always on)", desc: "Required for the correct functioning of the site (e.g. storing your language preference, keeping your cookie consent). They do not require consent (art. 122 of Italian Legislative Decree 196/2003)." },
        { lbl: "Analytics", desc: "Allow us to collect aggregated statistics about how the site is used to improve content and performance. Activated only with your consent." },
        { lbl: "Marketing", desc: "Used to profile interests, send personalized communications or measure the effectiveness of campaigns. Activated only with your consent." },
      ],
    },
    {
      h: "3. List of cookies and local storage",
      p: <>The site uses browser <em>localStorage</em> to store two values: <code>tl-lang</code> (language preference, kept until manually cleared) and <code>tl-cookie-consent</code> (record of the consent you gave, kept for 12 months). Any third-party analytics and marketing cookies — when activated — will be listed by name in this section. As of today, the site does not install any third-party profiling cookies without your consent.</>,
    },
    {
      h: "4. How to manage your preferences",
      p: "You can change your choices at any time using the button below. You can also clear cookies already stored directly from your browser settings (Chrome, Firefox, Safari, Edge). Withdrawal of consent does not affect the lawfulness of processing performed before withdrawal.",
    },
    {
      h: "5. Regulatory references",
      p: <>This Cookie Policy is drafted in compliance with Regulation (EU) 2016/679 (GDPR), art. 122 of Italian Legislative Decree 196/2003 as amended and with the <a href="https://www.garanteprivacy.it/web/guest/home/docweb/-/docweb-display/docweb/9677876" rel="noopener" target="_blank">Cookie Guidelines of the Italian Data Protection Authority of 10 June 2021</a>. For the exercise of data subject rights please refer to the <a href="privacy.html">Privacy Policy</a>.</>,
    },
  ];

  const reopenLabel = lang === "it" ? "Aggiorna le tue preferenze cookie" : "Update your cookie preferences";
  const reopenedMsg = lang === "it" ? "Pannello aperto in basso ↓" : "Panel opened at the bottom ↓";
  const updatedLabel = lang === "it" ? `Ultimo aggiornamento: ${updated}` : `Last updated: ${updated}`;

  return (
    <window.Section style={{ background: "var(--bg)", paddingTop: 60 }}>
      <window.Container>
        <article style={{
          maxWidth: 820,
          margin: "0 auto",
          background: "#fff",
          border: "1px solid var(--border)",
          borderRadius: 24,
          padding: "clamp(28px, 4vw, 56px)",
          boxShadow: "var(--shadow-sm)",
        }}>
          <div style={{ fontSize: 12, color: "var(--fg-3)", letterSpacing: ".06em", textTransform: "uppercase", marginBottom: 18 }}>
            {updatedLabel}
          </div>

          {sections.map((s, i) => (
            <section key={i} style={{ marginBottom: 28 }}>
              <h2 style={{
                fontFamily: "var(--font-display)", fontWeight: 700,
                fontSize: 22, lineHeight: 1.25,
                letterSpacing: "-0.01em", color: "var(--fg-1)",
                margin: "0 0 12px",
              }}>{s.h}</h2>
              {s.p && (
                <p style={{ fontSize: 15, lineHeight: 1.65, color: "var(--fg-2)", margin: 0 }}>{s.p}</p>
              )}
              {s.list && (
                <div style={{ display: "flex", flexDirection: "column", gap: 10, marginTop: 4 }}>
                  {s.list.map((it, idx) => (
                    <div key={idx} style={{
                      padding: "12px 14px",
                      borderRadius: 12,
                      background: "var(--bg-subtle)",
                      border: "1px solid var(--border)",
                    }}>
                      <div style={{ fontSize: 13, fontWeight: 700, color: "var(--fg-1)", marginBottom: 4 }}>{it.lbl}</div>
                      <div style={{ fontSize: 14, color: "var(--fg-2)", lineHeight: 1.55 }}>{it.desc}</div>
                    </div>
                  ))}
                </div>
              )}
            </section>
          ))}

          <div style={{
            marginTop: 28,
            padding: "20px 22px",
            borderRadius: 16,
            background: "linear-gradient(135deg, rgba(11,87,224,.06) 0%, rgba(40,209,254,.10) 100%)",
            border: "1px solid var(--border)",
            display: "flex", alignItems: "center", justifyContent: "space-between",
            gap: 16, flexWrap: "wrap",
          }}>
            <div style={{ fontSize: 14, color: "var(--fg-2)", flex: 1, minWidth: 220 }}>
              {lang === "it"
                ? "Vuoi rivedere o modificare i consensi che hai espresso?"
                : "Want to review or change the consents you have given?"}
            </div>
            <window.Button onClick={reopen} icon={<window.Icon name="settings" size={16} />}>
              {reopenLabel}
            </window.Button>
            {reopened && (
              <span style={{ fontSize: 12, color: "var(--tl-success)", flexBasis: "100%" }}>
                {reopenedMsg}
              </span>
            )}
          </div>
        </article>
      </window.Container>
    </window.Section>
  );
};