const { useState } = React;
const { Nav, MobileMenu, FloatingBar, Footer, useReveal, ContactModal, FOOTER_COLS, SOLUTIONS_NAV, PLATFORMS_NAV, t, useLocale } = window.ATC;

const SECTIONS = [
  {
    heading: 'privacy.sections.0.heading',
    body: [
      'privacy.sections.0.body.0',
      'privacy.sections.0.body.1',
    ],
  },
  {
    heading: 'privacy.sections.1.heading',
    body: [
      'privacy.sections.1.body.0',
      'privacy.sections.1.body.1',
      'privacy.sections.1.body.2',
    ],
  },
  {
    heading: 'privacy.sections.2.heading',
    body: [
      'privacy.sections.2.body.0',
      'privacy.sections.2.body.1',
    ],
  },
  {
    heading: 'privacy.sections.3.heading',
    body: [
      'privacy.sections.3.body.0',
      'privacy.sections.3.body.1',
      'privacy.sections.3.body.2',
    ],
  },
  {
    heading: 'privacy.sections.4.heading',
    body: [
      'privacy.sections.4.body.0',
      'privacy.sections.4.body.1',
      'privacy.sections.4.body.2',
    ],
  },
  {
    heading: 'privacy.sections.5.heading',
    body: [
      'privacy.sections.5.body.0',
      'privacy.sections.5.body.1',
      'privacy.sections.5.body.2',
    ],
  },
  {
    heading: 'privacy.sections.6.heading',
    body: [
      'privacy.sections.6.body.0',
      'privacy.sections.6.body.1',
      'privacy.sections.6.body.2',
    ],
  },
  {
    heading: 'privacy.sections.7.heading',
    body: [
      'privacy.sections.7.body.0',
      'privacy.sections.7.body.1',
    ],
  },
  {
    heading: 'privacy.sections.8.heading',
    body: [
      'privacy.sections.8.body.0',
      'privacy.sections.8.body.1',
    ],
  },
  {
    heading: 'privacy.sections.9.heading',
    body: [
      'privacy.sections.9.body.0',
      'privacy.sections.9.body.1',
    ],
  },
  {
    heading: 'privacy.sections.10.heading',
    body: [
      'privacy.sections.10.body.0',
      'privacy.sections.10.body.1',
    ],
  },
];

function PrivacyApp() {
  const [contactOpen, setContactOpen] = useState(false);
  const [mobileOpen, setMobileOpen] = useState(false);
  useReveal();
  useLocale();

  return (
    <div className="app">
      <Nav
        onDemoClick={() => setContactOpen(true)}
        homeUrl="/"
        showProductsNav={true}
        showPlatformNav={true}
        platformUrl="/platforms/apex-bridge"
        activeSection=""
      />
      <MobileMenu
        open={mobileOpen}
        onClose={() => setMobileOpen(false)}
        onDemoClick={() => { setMobileOpen(false); setContactOpen(true); }}
        products={SOLUTIONS_NAV}
        platforms={PLATFORMS_NAV}
        showAbout
      />
      <FloatingBar onMenuClick={() => setMobileOpen(true)} onDemoClick={() => setContactOpen(true)} />

      <section className="pp-hero">
        <div className="pp-hero-grid" />
        <div className="container" style={{ position: 'relative', zIndex: 1 }}>
          <div className="pp-eyebrow reveal">
            <span className="mono" style={{ fontSize: 12, letterSpacing: '0.14em', textTransform: 'uppercase', fontWeight: 600, color: 'var(--accent)' }}>{t('privacy.eyebrow')}</span>
          </div>
          <h1 className="reveal">{t('privacy.h1')}<br /><span style={{ color: 'var(--accent)' }}>{t('privacy.h1Accent')}</span></h1>
          <p className="pp-hero-sub reveal">{t('privacy.lastUpdated')}</p>
        </div>
      </section>

      <section className="pp-body">
        <div className="container">
          <div className="pp-content">
            {SECTIONS.map((s, i) => (
              <div key={i} className="pp-section reveal">
                <h3>{t(s.heading)}</h3>
                {s.body.map((p, j) => <p key={j}>{t(p)}</p>)}
              </div>
            ))}
          </div>
        </div>
      </section>

      <Footer cols={FOOTER_COLS} />
      <ContactModal open={contactOpen} onClose={() => setContactOpen(false)} />
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<PrivacyApp />);