// privacy-page.jsx — Privacy Policy page for Elevate Noir Gala

const pv = obsidianStyles;

// ─────────────────────────────────────────────────────────────────────
// NAV
// ─────────────────────────────────────────────────────────────────────
function PrivacyNav() {
  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 ${pv.gold}1f` : '1px solid transparent',
      transition: 'all 0.4s cubic-bezier(0.16,1,0.3,1)',
      fontFamily: pv.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: pv.serif, fontStyle: 'italic', fontSize: mobile ? 16 : 19, color: pv.gold, letterSpacing: '0.02em' }}>Elevate Noir Gala</span>
      </a>
      {!mobile && <div style={{ display: 'flex', gap: 36, fontSize: 15, letterSpacing: '0.18em', textTransform: 'uppercase', color: pv.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: pv.gold, color: pv.bg, border: 'none', padding: mobile ? '9px 16px' : '11px 22px',
          fontSize: mobile ? 12 : 10.5, letterSpacing: '0.18em', textTransform: 'uppercase', fontWeight: 500, cursor: 'pointer',
          fontFamily: pv.sans, textDecoration: 'none', display: 'inline-block',
        }}>Reserve</a>
        {mobile && <HamburgerIcon onClick={() => setMenuOpen(true)} s={pv} />}
      </div>
    </nav>
    {mobile && <MobileMenuOverlay open={menuOpen} onClose={() => setMenuOpen(false)} s={pv}
      links={navLinks}
      cta={<a href="index.html#tickets-section" style={{
        background: pv.gold, color: pv.bg, border: 'none', padding: '14px 36px',
        letterSpacing: '0.18em', textTransform: 'uppercase', fontWeight: 500, cursor: 'pointer',
        fontFamily: pv.sans, fontSize: 13, textDecoration: 'none', display: 'inline-block',
      }}>Reserve Tickets</a>}
    />}
  </>);
}

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

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

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

          <PrivacySection number="01" title="Introduction">
            <p>Party & Bash Balloon Co. ("we," "us," or "our") is committed to protecting your privacy. This Privacy Policy explains how we collect, use, disclose, and safeguard your personal information when you visit our website, purchase tickets, register as a sponsor, or attend the Elevate Noir Gala (the "Event"). By using our services, you consent to the practices described in this policy.</p>
          </PrivacySection>

          <PrivacySection number="02" title="Information We Collect">
            <p style={{ marginBottom: 14 }}><strong style={{ color: pv.gold }}>Information you provide directly:</strong></p>
            <ul style={{ paddingLeft: 24, marginBottom: 20 }}>
              <li style={{ marginBottom: 8 }}>Full name, email address, and phone number when purchasing tickets or registering</li>
              <li style={{ marginBottom: 8 }}>Payment information (credit card number, billing address) — processed and stored exclusively by Stripe; we do not store your full payment details on our servers</li>
              <li style={{ marginBottom: 8 }}>Dietary restrictions or accessibility requirements you voluntarily provide</li>
              <li style={{ marginBottom: 8 }}>Business name, logo, and contact information for sponsorship inquiries</li>
              <li style={{ marginBottom: 8 }}>Email address when subscribing to our mailing list or reserving early access</li>
            </ul>
            <p style={{ marginBottom: 14 }}><strong style={{ color: pv.gold }}>Information collected automatically:</strong></p>
            <ul style={{ paddingLeft: 24 }}>
              <li style={{ marginBottom: 8 }}>Browser type, operating system, and device information</li>
              <li style={{ marginBottom: 8 }}>IP address and approximate geographic location</li>
              <li style={{ marginBottom: 8 }}>Pages visited, time spent on site, and referring URLs</li>
              <li style={{ marginBottom: 8 }}>Cookies and similar tracking technologies (see Section 07)</li>
            </ul>
          </PrivacySection>

          <PrivacySection number="03" title="How We Use Your Information">
            <p style={{ marginBottom: 14 }}>We use your personal information for the following purposes:</p>
            <ul style={{ paddingLeft: 24 }}>
              <li style={{ marginBottom: 8 }}>Processing ticket purchases and issuing confirmation emails</li>
              <li style={{ marginBottom: 8 }}>Managing sponsorship agreements and deliverables</li>
              <li style={{ marginBottom: 8 }}>Communicating Event details, updates, and changes</li>
              <li style={{ marginBottom: 8 }}>Responding to inquiries and providing customer support</li>
              <li style={{ marginBottom: 8 }}>Sending promotional communications about the Event and future events (with your consent)</li>
              <li style={{ marginBottom: 8 }}>Improving our website, services, and Event experience</li>
              <li style={{ marginBottom: 8 }}>Complying with legal obligations</li>
            </ul>
          </PrivacySection>

          <PrivacySection number="04" title="Payment Processing">
            <p style={{ marginBottom: 14 }}>All payment transactions are processed through <strong style={{ color: pv.gold }}>Stripe</strong>, a PCI-DSS compliant payment processor. When you make a purchase:</p>
            <ul style={{ paddingLeft: 24 }}>
              <li style={{ marginBottom: 8 }}>Your payment information is transmitted directly to Stripe via encrypted connection</li>
              <li style={{ marginBottom: 8 }}>We receive only a transaction confirmation, the last four digits of your card, and billing address for our records</li>
              <li style={{ marginBottom: 8 }}>We never have access to your full credit card number</li>
              <li style={{ marginBottom: 8 }}>Stripe's privacy policy governs their handling of your payment data</li>
            </ul>
          </PrivacySection>

          <PrivacySection number="05" title="Sharing Your Information">
            <p style={{ marginBottom: 14 }}>We do not sell your personal information. We may share your information with:</p>
            <ul style={{ paddingLeft: 24 }}>
              <li style={{ marginBottom: 8 }}><strong>Service providers</strong> — Stripe (payment processing), email service providers, and website hosting providers who assist in operating our services, bound by confidentiality agreements</li>
              <li style={{ marginBottom: 8 }}><strong>Event venue</strong> — Guest lists and necessary attendee information for event management and security</li>
              <li style={{ marginBottom: 8 }}><strong>Legal requirements</strong> — When required by law, court order, or governmental authority</li>
              <li style={{ marginBottom: 8 }}><strong>Business transfers</strong> — In connection with a merger, acquisition, or sale of assets, your information may be transferred as part of that transaction</li>
            </ul>
          </PrivacySection>

          <PrivacySection number="06" title="Data Retention">
            <p style={{ marginBottom: 14 }}>We retain your personal information for as long as necessary to fulfill the purposes outlined in this policy, unless a longer retention period is required by law. Specifically:</p>
            <ul style={{ paddingLeft: 24 }}>
              <li style={{ marginBottom: 8 }}>Transaction records: 7 years (as required by Canadian tax law)</li>
              <li style={{ marginBottom: 8 }}>Marketing preferences and mailing list data: Until you unsubscribe</li>
              <li style={{ marginBottom: 8 }}>Website analytics data: 26 months</li>
            </ul>
          </PrivacySection>

          <PrivacySection number="07" title="Cookies & Tracking">
            <p style={{ marginBottom: 14 }}>Our website uses cookies and similar technologies to:</p>
            <ul style={{ paddingLeft: 24, marginBottom: 14 }}>
              <li style={{ marginBottom: 8 }}>Remember your preferences and settings</li>
              <li style={{ marginBottom: 8 }}>Analyze website traffic and usage patterns</li>
              <li style={{ marginBottom: 8 }}>Facilitate the ticket purchase process</li>
            </ul>
            <p>You can control cookies through your browser settings. Disabling cookies may limit some functionality of our website.</p>
          </PrivacySection>

          <PrivacySection number="08" title="Your Rights">
            <p style={{ marginBottom: 14 }}>Under applicable Canadian privacy legislation (including PIPEDA), you have the right to:</p>
            <ul style={{ paddingLeft: 24 }}>
              <li style={{ marginBottom: 8 }}><strong>Access</strong> — Request a copy of the personal information we hold about you</li>
              <li style={{ marginBottom: 8 }}><strong>Correction</strong> — Request correction of inaccurate or incomplete information</li>
              <li style={{ marginBottom: 8 }}><strong>Withdrawal of consent</strong> — Withdraw consent for marketing communications at any time</li>
              <li style={{ marginBottom: 8 }}><strong>Deletion</strong> — Request deletion of your personal information, subject to legal retention requirements</li>
              <li style={{ marginBottom: 8 }}><strong>Complaint</strong> — File a complaint with the Office of the Privacy Commissioner of Canada</li>
            </ul>
          </PrivacySection>

          <PrivacySection number="09" title="Data Security">
            <p>We implement reasonable technical and organizational measures to protect your personal information against unauthorized access, alteration, disclosure, or destruction. These measures include encrypted data transmission (SSL/TLS), secure server infrastructure, and access controls limiting data access to authorized personnel only. However, no method of transmission over the Internet is 100% secure, and we cannot guarantee absolute security.</p>
          </PrivacySection>

          <PrivacySection number="10" title="Third-Party Links">
            <p>Our website may contain links to third-party websites, including social media platforms and sponsor websites. We are not responsible for the privacy practices of these external sites. We encourage you to review the privacy policies of any third-party sites you visit.</p>
          </PrivacySection>

          <PrivacySection number="11" title="Children's Privacy">
            <p>Our services are not directed to individuals under the age of 19. We do not knowingly collect personal information from minors. If we become aware that we have collected information from a minor, we will take steps to delete it promptly.</p>
          </PrivacySection>

          <PrivacySection number="12" title="Changes to This Policy">
            <p>We may update this Privacy Policy from time to time. Changes will be posted on this page with an updated "Last Updated" date. We encourage you to review this policy periodically. Continued use of our services after any changes constitutes acceptance of the revised policy.</p>
          </PrivacySection>

          <PrivacySection number="13" title="Contact">
            <p style={{ marginBottom: 14 }}>For questions or requests regarding your personal information, contact our Privacy Officer:</p>
            <p style={{ marginBottom: 6 }}><strong>Party & Bash Balloon Co.</strong></p>
            <p>Email: <a href="mailto:Hello@elevatenoirgala.com" style={{ color: pv.gold, textDecoration: 'underline' }}>Hello@elevatenoirgala.com</a></p>
          </PrivacySection>

        </div>

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

// ─────────────────────────────────────────────────────────────────────
// APP
// ─────────────────────────────────────────────────────────────────────
function PrivacyApp() {
  return (
    <>
      <PrivacyNav/>
      <PrivacyContent/>
      <ObsidianFooter/>
      <CookieConsent/>
    </>
  );
}

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