// terms-page.jsx — Terms of Service page for Elevate Noir Gala

const ts = obsidianStyles;

// ─────────────────────────────────────────────────────────────────────
// NAV
// ─────────────────────────────────────────────────────────────────────
function TermsNav() {
  const { mobile } = useMobile();
  const px = mobile ? 24 : 56;
  const [scrolled, setScrolled] = React.useState(false);
  const [menuOpen, setMenuOpen] = React.useState(false);
  React.useEffect(() => {
    const on = () => setScrolled(window.scrollY > 32);
    window.addEventListener('scroll', on, { passive: true });
    on();
    return () => window.removeEventListener('scroll', on);
  }, []);

  const navLinks = [
    ['The Evening', 'index.html#about', false],
    ['About', 'About.html', false],
    ['Experience', 'index.html#experience', false],
    ['Partner', 'index.html#sponsors', false],
    ['Contact', 'index.html#footer', false],
  ];

  return (<>
    <nav style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 50,
      padding: scrolled ? `14px ${px}px` : `24px ${px}px`,
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      background: scrolled ? 'rgba(10,9,8,0.86)' : 'rgba(10,9,8,0.6)',
      backdropFilter: 'blur(20px) saturate(1.2)',
      WebkitBackdropFilter: 'blur(20px) saturate(1.2)',
      borderBottom: scrolled ? `1px solid ${ts.gold}1f` : '1px solid transparent',
      transition: 'all 0.4s cubic-bezier(0.16,1,0.3,1)',
      fontFamily: ts.sans,
    }}>
      <a href="index.html" style={{ display: 'flex', alignItems: 'center', gap: mobile ? 10 : 14, textDecoration: 'none' }}>
        <LogoMark size={scrolled ? 36 : (mobile ? 32 : 44)} style={{ transition: 'all 0.4s' }}/>
        <span style={{ fontFamily: ts.serif, fontStyle: 'italic', fontSize: mobile ? 16 : 19, color: ts.gold, letterSpacing: '0.02em' }}>Elevate Noir Gala</span>
      </a>
      {!mobile && <div style={{ display: 'flex', gap: 36, fontSize: 15, letterSpacing: '0.18em', textTransform: 'uppercase', color: ts.cream, opacity: 0.85 }}>
        <a href="index.html#about" style={{ color: 'inherit', textDecoration: 'none' }}>The Evening</a>
        <a href="About.html" style={{ color: 'inherit', textDecoration: 'none' }}>About</a>
        <a href="index.html#experience" style={{ color: 'inherit', textDecoration: 'none' }}>Experience</a>
        <a href="index.html#sponsors" style={{ color: 'inherit', textDecoration: 'none' }}>Partner</a>
        <a href="index.html#footer" style={{ color: 'inherit', textDecoration: 'none' }}>Contact</a>
      </div>}
      <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
        <a href="index.html#tickets-section" style={{
          background: ts.gold, color: ts.bg, border: 'none', padding: mobile ? '9px 16px' : '11px 22px',
          fontSize: mobile ? 12 : 10.5, letterSpacing: '0.18em', textTransform: 'uppercase', fontWeight: 500, cursor: 'pointer',
          fontFamily: ts.sans, textDecoration: 'none', display: 'inline-block',
        }}>Reserve</a>
        {mobile && <HamburgerIcon onClick={() => setMenuOpen(true)} s={ts} />}
      </div>
    </nav>
    {mobile && <MobileMenuOverlay open={menuOpen} onClose={() => setMenuOpen(false)} s={ts}
      links={navLinks}
      cta={<a href="index.html#tickets-section" style={{
        background: ts.gold, color: ts.bg, border: 'none', padding: '14px 36px',
        letterSpacing: '0.18em', textTransform: 'uppercase', fontWeight: 500, cursor: 'pointer',
        fontFamily: ts.sans, fontSize: 13, textDecoration: 'none', display: 'inline-block',
      }}>Reserve Tickets</a>}
    />}
  </>);
}

// ─────────────────────────────────────────────────────────────────────
// LEGAL SECTION COMPONENT
// ─────────────────────────────────────────────────────────────────────
function LegalSection({ number, title, children }) {
  return (
    <div style={{ marginBottom: 48 }}>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 14, marginBottom: 18 }}>
        <span style={{ fontFamily: ts.mono, fontSize: 10, letterSpacing: '0.22em', color: ts.gold }}>{number}</span>
        <h2 style={{ fontFamily: ts.serif, fontSize: 28, fontWeight: 400, color: ts.cream }}>{title}</h2>
      </div>
      <div style={{ fontSize: 15, lineHeight: 1.8, color: ts.cream, opacity: 0.8 }}>
        {children}
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────────
// TERMS CONTENT
// ─────────────────────────────────────────────────────────────────────
function TermsContent() {
  return (
    <section style={{
      padding: '180px 56px 120px', background: ts.bg, color: ts.cream,
    }}>
      <div style={{ maxWidth: 820, margin: '0 auto' }}>
        {/* Header */}
        <div style={{ marginBottom: 64 }}>
          <div style={{ fontFamily: ts.mono, fontSize: 10, letterSpacing: '0.22em', textTransform: 'uppercase', color: ts.gold, marginBottom: 18 }}>
            Legal
          </div>
          <h1 style={{ fontFamily: ts.serif, fontSize: 'clamp(48px, 6vw, 72px)', fontWeight: 300, lineHeight: 1.05, marginBottom: 24 }}>
            Terms of<br/><span style={{ fontStyle: 'italic' }}>Service</span>
          </h1>
          <p style={{ fontFamily: ts.mono, fontSize: 11, letterSpacing: '0.15em', color: ts.gray }}>
            LAST UPDATED — MAY 27, 2026
          </p>
        </div>

        <div style={{ borderTop: `1px solid ${ts.graySoft}`, paddingTop: 48 }}>

          <LegalSection number="01" title="Agreement to Terms">
            <p>By purchasing a ticket, registering for, or attending the Elevate Noir Gala (the "Event"), you agree to be bound by these Terms of Service (the "Terms"). The Event is organized and presented by Party & Bash Balloon Co. ("we," "us," or "our"), a company registered in Ontario, Canada. If you do not agree to these Terms, do not purchase tickets or attend the Event.</p>
          </LegalSection>

          <LegalSection number="02" title="Event Details">
            <p style={{ marginBottom: 14 }}>The Elevate Noir Gala is scheduled for Saturday, October 17, 2026 at a venue in Toronto, Ontario. The specific venue address will be communicated to ticket holders prior to the Event.</p>
            <p>We reserve the right to change the date, time, venue, or programming of the Event. In the event of a material change, we will notify ticket holders via the email address provided at the time of purchase.</p>
          </LegalSection>

          <LegalSection number="03" title="Ticket Purchases & Pricing">
            <p style={{ marginBottom: 14 }}>Tickets are available in three tiers: Gold (Full Gala), Silver (Culture), and Bronze (After Party). Prices are listed in Canadian Dollars (CAD) and are subject to applicable taxes and fees. Early bird pricing is available for a limited time and may be discontinued at our discretion.</p>
            <p>All ticket purchases are processed through Stripe, a third-party payment processor. By purchasing a ticket, you agree to Stripe's terms of service in addition to these Terms.</p>
          </LegalSection>

          <LegalSection number="04" title="Refund & Transfer Policy">
            <p style={{ marginBottom: 14 }}><strong style={{ color: ts.gold }}>All ticket sales are final and non-refundable.</strong></p>
            <p style={{ marginBottom: 14 }}>Tickets are transferable. If you are unable to attend, you may transfer your ticket to another individual by contacting us at <a href="mailto:Hello@elevatenoirgala.com" style={{ color: ts.gold, textDecoration: 'underline' }}>Hello@elevatenoirgala.com</a> with the name and email address of the new attendee at least 72 hours before the Event.</p>
            <p>We are not responsible for tickets purchased through unauthorized third-party resellers. Tickets obtained through unauthorized channels may be voided without refund.</p>
          </LegalSection>

          <LegalSection number="05" title="Sponsorship Agreements">
            <p style={{ marginBottom: 14 }}>Sponsorship packages (Title, Gold, Silver, and Community tiers) are subject to separate sponsorship agreements. These Terms apply in addition to any specific sponsorship agreement executed between the sponsor and Party & Bash Balloon Co.</p>
            <p>Sponsorship fees are non-refundable once a sponsorship agreement has been executed, unless otherwise specified in the sponsorship agreement.</p>
          </LegalSection>

          <LegalSection number="06" title="Code of Conduct">
            <p style={{ marginBottom: 14 }}>The Elevate Noir Gala is a celebration of Black excellence, culture, and community. All attendees are expected to conduct themselves respectfully and in accordance with the spirit of the Event.</p>
            <p style={{ marginBottom: 14 }}>We reserve the right to refuse entry to or remove any attendee who:</p>
            <ul style={{ paddingLeft: 24, marginBottom: 14 }}>
              <li style={{ marginBottom: 8 }}>Engages in harassment, discrimination, or disruptive behavior</li>
              <li style={{ marginBottom: 8 }}>Is intoxicated to a degree that poses a risk to themselves or others</li>
              <li style={{ marginBottom: 8 }}>Violates venue rules or applicable laws</li>
              <li style={{ marginBottom: 8 }}>Fails to adhere to the formal all-black attire dress code</li>
            </ul>
            <p>No refund will be issued in the event of removal for violation of this Code of Conduct.</p>
          </LegalSection>

          <LegalSection number="07" title="Assumption of Risk & Liability">
            <p style={{ marginBottom: 14 }}>Attendance at the Event is voluntary. By attending, you acknowledge that there are inherent risks associated with attending a large-scale event, and you assume all such risks.</p>
            <p style={{ marginBottom: 14 }}>To the fullest extent permitted by law, Party & Bash Balloon Co., its officers, directors, employees, agents, and affiliates shall not be held liable for any loss, injury, damage, or expense arising from or in connection with attendance at the Event, including but not limited to:</p>
            <ul style={{ paddingLeft: 24, marginBottom: 14 }}>
              <li style={{ marginBottom: 8 }}>Personal injury or illness</li>
              <li style={{ marginBottom: 8 }}>Loss, theft, or damage to personal property</li>
              <li style={{ marginBottom: 8 }}>Event cancellation or changes due to circumstances beyond our reasonable control (force majeure)</li>
            </ul>
          </LegalSection>

          <LegalSection number="08" title="Photography & Media Release">
            <p style={{ marginBottom: 14 }}>By attending the Event, you grant Party & Bash Balloon Co. and its authorized representatives the irrevocable right to photograph, film, and record your likeness, image, and voice, and to use such media for promotional, editorial, advertising, and commercial purposes in any medium, without further consent or compensation.</p>
            <p>If you do not wish to be photographed, please notify a member of our team upon arrival.</p>
          </LegalSection>

          <LegalSection number="09" title="Intellectual Property">
            <p>All content, branding, logos, and materials associated with the Elevate Noir Gala and Party & Bash Balloon Co. are protected by intellectual property laws. You may not reproduce, distribute, or create derivative works from any Event materials without our prior written consent.</p>
          </LegalSection>

          <LegalSection number="10" title="Cancellation by Organizer">
            <p style={{ marginBottom: 14 }}>In the unlikely event that we cancel the Event entirely, ticket holders will receive a full refund of the ticket purchase price to the original method of payment. Refunds will be processed within 30 business days of the cancellation announcement.</p>
            <p>We shall not be liable for any additional costs incurred by attendees, including travel, accommodation, or other expenses.</p>
          </LegalSection>

          <LegalSection number="11" title="Governing Law">
            <p>These Terms shall be governed by and construed in accordance with the laws of the Province of Ontario and the federal laws of Canada applicable therein. Any disputes arising from these Terms or the Event shall be subject to the exclusive jurisdiction of the courts of Ontario.</p>
          </LegalSection>

          <LegalSection number="12" title="Changes to These Terms">
            <p>We reserve the right to update these Terms at any time. Changes will be posted on this page with an updated "Last Updated" date. Continued use of our services or attendance at the Event constitutes acceptance of the revised Terms.</p>
          </LegalSection>

          <LegalSection number="13" title="Contact">
            <p style={{ marginBottom: 14 }}>For questions regarding these Terms, contact us at:</p>
            <p style={{ marginBottom: 6 }}><strong>Party & Bash Balloon Co.</strong></p>
            <p>Email: <a href="mailto:Hello@elevatenoirgala.com" style={{ color: ts.gold, textDecoration: 'underline' }}>Hello@elevatenoirgala.com</a></p>
          </LegalSection>

        </div>

        {/* Cross-link */}
        <div style={{ borderTop: `1px solid ${ts.graySoft}`, paddingTop: 32, marginTop: 16 }}>
          <p style={{ fontSize: 14, color: ts.gray }}>
            See also our <a href="privacy.html" style={{ color: ts.gold, textDecoration: 'underline' }}>Privacy Policy</a>.
          </p>
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────────
// APP
// ─────────────────────────────────────────────────────────────────────
function TermsApp() {
  return (
    <>
      <TermsNav/>
      <TermsContent/>
      <ObsidianFooter/>
      <CookieConsent/>
    </>
  );
}

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