const Privacy = () => {
  const { t, lang } = useLang();
  const disclaimer = lang === 'en' ? CFG.legal.disclaimer : CFG.legal.disclaimerIt;
  return (
    <>
          <PageHero eyebrow={t.footer.privacy} title={t.legal.privacyTitle} sub={t.legal.privacySub} />
      <section className="section-tight">
        <div className="container legal-copy">
          {(CFG.legal.businessName || CFG.legal.vatId || CFG.legal.address) && (
            <>
              <h2>{t.legal.controller}</h2>
              {CFG.legal.businessName && <p>{CFG.legal.businessName}</p>}
              {CFG.legal.vatId && <p>{CFG.legal.vatId}</p>}
              {CFG.legal.address && <p>{CFG.legal.address}</p>}
            </>
          )}
          <h2>{t.legal.dataWeCollect}</h2>
          <p>{t.legal.dataWeCollectBody}</p>
          <h2>{t.legal.why}</h2>
          <p>{t.legal.whyBody}</p>
          <h2>{t.legal.marketing}</h2>
          <p>{t.legal.marketingBody}</p>
          <h2>{t.legal.rights}</h2>
          <p>{t.legal.rightsBody}</p>
          <h2>{t.legal.disclaimerTitle}</h2>
          <p>{disclaimer}</p>
        </div>
      </section>
    </>
  );
};

const Legal = () => {
  const { t, lang } = useLang();
  const disclaimer = lang === 'en' ? CFG.legal.disclaimer : CFG.legal.disclaimerIt;
  return (
    <>
      <PageHero eyebrow={t.footer.terms} title={t.legal.termsTitle} sub={t.legal.termsSub} />
      <section className="section-tight">
        <div className="container legal-copy">
          <h2>{t.legal.productOnly}</h2>
          <p>{disclaimer}</p>
          <h2>{t.legal.orders}</h2>
          <p>{t.legal.ordersBody}</p>
          <h2>{t.legal.customReturns}</h2>
          <p>{t.legal.customReturnsBody}</p>
          <h2>{t.legal.payments}</h2>
          <p>{t.legal.paymentsBody}</p>
          <h2>{t.legal.contact}</h2>
          <p><a href={'mailto:' + CFG.company.email}>{CFG.company.email}</a></p>
        </div>
      </section>
    </>
  );
};

window.Privacy = Privacy;
window.Legal = Legal;