const { useState, useEffect } = React;

// ============ icons ============
const PIcon = {
  Menu: (p) => (
    <svg viewBox="0 0 24 24" fill="none" {...p}>
      <line x1="4" y1="6" x2="20" y2="6" stroke="currentColor" strokeWidth="1.8"/>
      <line x1="4" y1="12" x2="20" y2="12" stroke="currentColor" strokeWidth="1.8"/>
      <line x1="4" y1="18" x2="20" y2="18" stroke="currentColor" strokeWidth="1.8"/>
    </svg>
  ),
};

// ============ NAV (matches site) ============
function Nav({ scrolled }) {
  const [menuOpen, setMenuOpen] = useState(false);
  useEffect(() => {
    document.body.style.overflow = menuOpen ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [menuOpen]);
  const closeMenu = () => setMenuOpen(false);
  return (
    <header className={`nav ${scrolled ? 'nav--solid' : 'nav--floating'}`}>
      <div className="nav__inner">
        <a href="/" className="nav__logo" aria-label="Ages Productions home">
          <img src="assets/logo-primary.png" alt="Ages Productions"/>
        </a>
        <nav className="nav__links">
          <a href="/" className="nav__link">Home</a>
          <a href="Ages Productions Media Workflow.html" className="nav__link">Media Workflow</a>
          <a href="Ages Productions Self-Shoot.html" className="nav__link">Self-Shoot Systems</a>
          <a href="Ages Productions About.html" className="nav__link">About</a>
          <a href="Ages Productions Use Cases.html" className="nav__link">Use Cases</a>
          <a href="Ages Productions Contact.html" className="nav__link">Contact</a>
        </nav>
        <div className="nav__cta"></div>
        <button className="nav__menu" aria-label={menuOpen ? "Close menu" : "Open menu"} aria-expanded={menuOpen} onClick={() => setMenuOpen(o => !o)}>
          {menuOpen
            ? <svg viewBox="0 0 24 24" width="22" height="22" fill="none"><line x1="6" y1="6" x2="18" y2="18" stroke="currentColor" strokeWidth="1.8"/><line x1="18" y1="6" x2="6" y2="18" stroke="currentColor" strokeWidth="1.8"/></svg>
            : <PIcon.Menu width="22" height="22"/>}
        </button>
      </div>
      <div className={`nav__drawer ${menuOpen ? 'nav__drawer--open' : ''}`} aria-hidden={!menuOpen}>
        <div className="nav__drawer-inner">
            <a href="/" className="nav__drawer-link" onClick={closeMenu}>Home</a>
            <a href="Ages Productions Media Workflow.html" className="nav__drawer-link" onClick={closeMenu}>Media Workflow</a>
            <a href="Ages Productions Self-Shoot.html" className="nav__drawer-link" onClick={closeMenu}>Self-Shoot Systems</a>
            <a href="Ages Productions About.html" className="nav__drawer-link" onClick={closeMenu}>About</a>
            <a href="Ages Productions Use Cases.html" className="nav__drawer-link" onClick={closeMenu}>Use Cases</a>
            <a href="Ages Productions Contact.html" className="nav__drawer-link" onClick={closeMenu}>Contact</a>
        </div>
      </div>
    </header>
  );
}

// ============ FOOTER (matches site) ============
function Footer() {
  return (
    <footer className="footer">
      <div className="container footer__inner">
        <div className="footer__brand">
          <img src="assets/logo-primary.png" alt="Ages Productions" className="footer__logo"/>
          <p className="footer__tag">Field-to-post media workflow management for high-volume Reality TV productions.</p>
        </div>
        <div className="footer__cols">
          <div>
            <h6>SERVICES</h6>
            <a href="Ages Productions Media Workflow.html">Media Workflow</a>
            <a href="Ages Productions Self-Shoot.html">Self-Shoot Systems</a>
            <a href="Ages Productions Media Workflow.html#remote-cloud">Remote Delivery</a>
          </div>
          <div>
            <h6>COMPANY</h6>
            <a href="Ages Productions About.html">About</a>
            <a href="Ages Productions Use Cases.html">Use Cases</a>
            <a href="Ages Productions Contact.html">Contact</a>
          </div>
          <div>
            <h6>CONTACT</h6>
            <a href="Ages Productions Contact.html">Build a Media Plan</a>
            <span className="footer__loc">Miami · Worldwide</span>
          </div>
        </div>
      </div>
      <div className="footer__bar">
        <span>© 2026 Ages Productions. All rights reserved.</span>
        <span className="footer__legal">
          <a href="Ages Productions Privacy Policy.html">Privacy</a>
          <span className="footer__legal-sep" aria-hidden="true">·</span>
          <a href="Ages Productions Terms.html">Terms</a>
        </span>
        <span>v1.0 · Field → Post</span>
      </div>
    </footer>
  );
}

// ============ PAGE ============
function PrivacyApp() {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    window.addEventListener('scroll', onScroll);
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <div className="legal-page accent-balanced">
      <Nav scrolled={scrolled}/>

      <section className="legal-hero">
        <div className="legal-hero__inner">
          <div className="legal-hero__eyebrow">
            <span className="dot"></span>
            <span>PRIVACY POLICY</span>
          </div>
          <h1 className="legal-hero__title">Privacy Policy</h1>
          <div className="legal-hero__meta">
            <span>EFFECTIVE <strong>JUNE 11, 2026</strong></span>
            <span>LAST UPDATED <strong>JUNE 11, 2026</strong></span>
          </div>
        </div>
      </section>

      <section className="legal-body">
        <div className="legal-body__inner">
          <p className="legal-intro">
            Ages Productions, Inc. ("Ages Productions," "we," "us," or "our") operates the
            website at ages.productions (the "Site"). This policy explains what information
            we collect, how we use it, and the choices you have. We keep this short on purpose:
            the Site collects very little.
          </p>

          <div className="legal-callout">
            <span className="legal-callout__tag">THE SHORT VERSION</span>
            <p>
              We don't run a mailing list, sell your data, set advertising trackers, or accept
              file uploads on the Site. The only personal information we actively collect is what
              you type into the contact form, and we use it solely to reply to your inquiry.
            </p>
          </div>

          <div className="legal-section">
            <span className="legal-section__num">01</span>
            <h2>Information you give us</h2>
            <p>
              When you submit the contact form, we collect the details you choose to provide:
            </p>
            <ul>
              <li>Your name</li>
              <li>Your production company</li>
              <li>Your project or show name (a working title or codename is fine)</li>
              <li>Production type</li>
              <li>Your email address</li>
              <li>Anything you write in the message field</li>
            </ul>
            <p>
              We use this information only to respond to your inquiry and to discuss a possible
              media plan for your production. We do not add you to any marketing list.
            </p>
          </div>

          <div className="legal-section">
            <span className="legal-section__num">02</span>
            <h2>Information collected automatically</h2>
            <p>
              We do not run analytics or advertising trackers on the Site. However, the Site is
              hosted on a third-party platform and loads a small number of resources from
              third-party networks (see Section 4). As part of delivering the page, those
              providers may automatically log standard technical data such as your IP address,
              browser type, and the time of your request. This is normal server-log activity
              and is handled under each provider's own privacy practices.
            </p>
          </div>

          <div className="legal-section">
            <span className="legal-section__num">03</span>
            <h2>Cookies and similar technologies</h2>
            <p>
              The Site itself does not set advertising or analytics cookies. To protect the
              contact form from spam and abuse, we use Cloudflare Turnstile, and the Site is
              served through Cloudflare. These security services may set strictly necessary
              cookies or use similar storage to verify that a visitor is human and to protect
              the Site. We do not use this information to track you across other websites.
            </p>
          </div>

          <div className="legal-section">
            <span className="legal-section__num">04</span>
            <h2>Third-party services we rely on</h2>
            <p>
              We keep our toolset minimal. The Site uses the following providers, each of which
              has its own privacy policy:
            </p>
            <ul>
              <li><strong>Web3Forms</strong> — delivers your contact-form submission to our inbox. (<a href="https://web3forms.com/privacy" target="_blank" rel="noopener noreferrer">privacy policy</a>)</li>
              <li><strong>Cloudflare</strong> — hosting, content delivery, and the Turnstile anti-spam check. (<a href="https://www.cloudflare.com/privacypolicy/" target="_blank" rel="noopener noreferrer">privacy policy</a>)</li>
              <li><strong>Google Fonts</strong> — serves the fonts used on the Site. (<a href="https://policies.google.com/privacy" target="_blank" rel="noopener noreferrer">privacy policy</a>)</li>
              <li><strong>unpkg</strong> — serves the front-end libraries that render the Site.</li>
            </ul>
            <p>
              We share your information with these providers only to the extent needed to operate
              the Site and respond to you. We do not sell or rent your personal information to anyone.
            </p>
          </div>

          <div className="legal-section">
            <span className="legal-section__num">05</span>
            <h2>How long we keep it</h2>
            <p>
              We keep contact-form correspondence for as long as needed to respond to your inquiry
              and to maintain reasonable business records. If you'd like us to delete your inquiry
              and related correspondence, ask us and we'll do so unless we're required to retain it
              by law.
            </p>
          </div>

          <div className="legal-section">
            <span className="legal-section__num">06</span>
            <h2>Your choices and rights</h2>
            <p>
              You can ask us to access, correct, or delete the personal information you've submitted.
              Depending on where you live — for example, in California, the EU, or the UK — you may have
              additional rights over your personal data, including the right to object to or restrict
              certain processing. To make any request, reach us through the contact page; we'll respond
              within a reasonable timeframe.
            </p>
          </div>

          <div className="legal-section">
            <span className="legal-section__num">07</span>
            <h2>Security</h2>
            <p>
              We take reasonable measures to protect the information you send us. No website or method
              of transmission over the internet is completely secure, so we can't guarantee absolute
              security. For this reason, the contact form does not accept file uploads — if footage or
              other files need to be shared, we'll provide a secure delivery link after initial contact.
            </p>
          </div>

          <div className="legal-section">
            <span className="legal-section__num">08</span>
            <h2>Children's privacy</h2>
            <p>
              The Site is intended for production professionals and is not directed to children. We do
              not knowingly collect personal information from anyone under 16. If you believe a child
              has provided us information, contact us and we'll delete it.
            </p>
          </div>

          <div className="legal-section">
            <span className="legal-section__num">09</span>
            <h2>International visitors</h2>
            <p>
              Ages Productions is based in the United States, and the information you submit is processed
              in the United States. If you contact us from another country, you understand that your
              information will be transferred to and handled in the United States.
            </p>
          </div>

          <div className="legal-section">
            <span className="legal-section__num">10</span>
            <h2>Changes to this policy</h2>
            <p>
              We may update this policy from time to time. When we do, we'll revise the "Last updated"
              date above. Material changes will be reflected on this page.
            </p>
          </div>

          <hr className="legal-divider"/>

          <div className="legal-section">
            <span className="legal-section__num">11</span>
            <h2>Contact us</h2>
            <p>
              Questions about this policy or your information? Reach us through the{' '}
              <a href="Ages Productions Contact.html">contact page</a> and we'll get back to you.
            </p>
          </div>
        </div>
      </section>

      <Footer/>
    </div>
  );
}

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