const { useState, useEffect } = React;

// ============ icons ============
const TIcon = {
  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>
            : <TIcon.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 TermsApp() {
  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>TERMS &amp; CONDITIONS</span>
          </div>
          <h1 className="legal-hero__title">Terms &amp; Conditions</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">
            These Terms &amp; Conditions ("Terms") govern your use of the website at ages.productions
            (the "Site"), operated by Ages Productions, Inc. ("Ages Productions," "we," "us," or "our").
            By accessing or using the Site, you agree to these Terms. If you don't agree, please don't
            use the Site.
          </p>

          <div className="legal-callout">
            <span className="legal-callout__tag">IMPORTANT</span>
            <p>
              The Site is an informational and marketing website. Nothing on it is a binding offer of
              services or a contract. Any engagement with Ages Productions is governed by a separate
              written agreement between you and us.
            </p>
          </div>

          <div className="legal-section">
            <span className="legal-section__num">01</span>
            <h2>About the Site</h2>
            <p>
              The Site describes Ages Productions' media workflow services for productions. The content
              is provided for general information. Service descriptions, statistics, capabilities, and
              examples of past work describe our general experience and are not promises of any specific
              result. The actual scope, pricing, and terms of any project are set out only in a separate
              written agreement.
            </p>
          </div>

          <div className="legal-section">
            <span className="legal-section__num">02</span>
            <h2>Contacting us through the Site</h2>
            <p>
              When you submit the contact form, please provide accurate information and only share details
              you're authorized to share. Working titles, codenames, and "untitled project" are fine — you
              do not need to disclose confidential or NDA-protected specifics to start a conversation. Don't
              submit anyone else's confidential information without permission, and don't use the form to send
              unlawful, infringing, or abusive content. We use submissions only to respond to your inquiry, as
              described in our <a href="Ages Productions Privacy Policy.html">Privacy Policy</a>.
            </p>
          </div>

          <div className="legal-section">
            <span className="legal-section__num">03</span>
            <h2>Acceptable use</h2>
            <p>You agree not to:</p>
            <ul>
              <li>Use the Site in any way that violates applicable law or these Terms</li>
              <li>Attempt to gain unauthorized access to the Site or its underlying systems</li>
              <li>Interfere with or disrupt the Site, including by overloading or scraping it abusively</li>
              <li>Use the Site to transmit malware, spam, or other harmful or unlawful material</li>
            </ul>
          </div>

          <div className="legal-section">
            <span className="legal-section__num">04</span>
            <h2>Intellectual property</h2>
            <p>
              The Site and its content — including text, design, layout, graphics, and the Ages Productions
              name and logo — are owned by Ages Productions, Inc. or its licensors and are protected by
              intellectual property laws. You may view the Site for your own informational use. You may not
              copy, reproduce, republish, or use our content or branding for any other purpose without our
              prior written permission.
            </p>
          </div>

          <div className="legal-section">
            <span className="legal-section__num">05</span>
            <h2>Third-party services and links</h2>
            <p>
              The Site relies on third-party providers (such as our host, anti-spam service, and font and
              library providers) and may link to third-party websites. We don't control those services or
              sites and aren't responsible for their content, availability, or practices. Your use of them
              is subject to their own terms and policies.
            </p>
          </div>

          <div className="legal-section">
            <span className="legal-section__num">06</span>
            <h2>Disclaimer of warranties</h2>
            <p>
              The Site is provided "as is" and "as available," without warranties of any kind, whether express
              or implied, including any implied warranties of merchantability, fitness for a particular purpose,
              and non-infringement. We do not warrant that the Site will be uninterrupted, error-free, or secure,
              or that any information on it is complete or current.
            </p>
          </div>

          <div className="legal-section">
            <span className="legal-section__num">07</span>
            <h2>Limitation of liability</h2>
            <p>
              To the fullest extent permitted by law, Ages Productions, Inc. and its officers, employees, and
              contractors will not be liable for any indirect, incidental, special, consequential, or punitive
              damages, or for any loss of data, profits, or business, arising out of or related to your use of
              (or inability to use) the Site. Nothing in these Terms limits liability that cannot be limited
              under applicable law.
            </p>
          </div>

          <div className="legal-section">
            <span className="legal-section__num">08</span>
            <h2>Indemnification</h2>
            <p>
              You agree to indemnify and hold Ages Productions, Inc. harmless from any claims, losses, or
              expenses (including reasonable legal fees) arising from your misuse of the Site or your violation
              of these Terms.
            </p>
          </div>

          <div className="legal-section">
            <span className="legal-section__num">09</span>
            <h2>Governing law and venue</h2>
            <p>
              These Terms are governed by the laws of the State of Florida, USA, without regard to its conflict
              of laws rules. Subject to the arbitration agreement in Section 10, you agree that the exclusive
              jurisdiction and venue for any dispute relating to the Site or these Terms is Miami-Dade County,
              Florida, and you consent to the personal jurisdiction of the state and federal courts located there.
            </p>
          </div>

          <div className="legal-section">
            <span className="legal-section__num">10</span>
            <h2>Dispute resolution — binding arbitration and jury-trial waiver</h2>
            <div className="legal-callout">
              <span className="legal-callout__tag">PLEASE READ — THIS AFFECTS YOUR LEGAL RIGHTS</span>
              <p>
                This section requires most disputes to be resolved by binding arbitration on an individual
                basis, and waives your right to a jury trial. By using the Site, you agree to it.
              </p>
            </div>
            <h3>Informal resolution first</h3>
            <p>
              If a dispute arises out of or relating to these Terms or the Site, you agree to first contact us
              and work in good faith to resolve it informally. Most concerns can be settled this way.
            </p>
            <h3>Binding arbitration as the first and required method</h3>
            <p>
              If a dispute is not resolved within 30 days of written notice, you and Ages Productions, Inc. agree
              that the dispute will be resolved exclusively through final and binding arbitration — not in court —
              as the first and required method of dispute resolution. The arbitration will be:
            </p>
            <ul>
              <li>administered by the American Arbitration Association (AAA) under its Commercial Arbitration Rules then in effect;</li>
              <li>seated in and conducted in Miami, Florida, within Miami-Dade County; and</li>
              <li>governed by the Federal Arbitration Act (9 U.S.C. § 1 et seq.).</li>
            </ul>
            <p>
              The arbitrator's decision will be final and binding, and judgment on the award may be entered in
              any court of competent jurisdiction located in Miami-Dade County, Florida.
            </p>
            <h3>Jury-trial waiver</h3>
            <p>
              To the fullest extent permitted by law, you and Ages Productions, Inc. each knowingly, voluntarily,
              and intentionally <strong>waive any right to a trial by jury</strong> in any proceeding arising out
              of or relating to these Terms or the Site.
            </p>
            <h3>Individual basis only</h3>
            <p>
              To the fullest extent permitted by law, disputes will be brought and resolved only on an individual
              basis. You and Ages Productions, Inc. waive any right to bring or participate in a class,
              consolidated, or representative action.
            </p>
            <h3>Limited exceptions</h3>
            <p>
              Nothing in this section prevents either party from (a) bringing an individual claim in small-claims
              court, or (b) seeking injunctive or other equitable relief in the state or federal courts located in
              Miami-Dade County, Florida to protect its intellectual property or confidential information. For any
              such court proceeding, the parties consent to the exclusive jurisdiction and venue of those courts.
            </p>
          </div>

          <div className="legal-section">
            <span className="legal-section__num">11</span>
            <h2>Changes to these Terms</h2>
            <p>
              We may update these Terms from time to time. When we do, we'll revise the "Last updated" date
              above. Your continued use of the Site after changes take effect means you accept the updated Terms.
            </p>
          </div>

          <hr className="legal-divider"/>

          <div className="legal-section">
            <span className="legal-section__num">12</span>
            <h2>Contact us</h2>
            <p>
              Questions about these Terms? 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(<TermsApp/>);