// Privacy policy — same shell treatment as thank-you (header, padding, footer).

function PrivacyPolicyPage({ t, onBack }) {
  const p = {
    ...t.p,
    accent2: t.p.accent2 != null ? t.p.accent2 : t.p.accent,
    accent2Soft: t.p.accent2Soft != null ? t.p.accent2Soft : t.p.accentSoft
  };
  const tt = { ...t, p };

  const para = {
    fontFamily: tt.fonts.sans,
    fontSize: 16,
    lineHeight: 1.65,
    color: tt.p.inkSoft,
    margin: '0 0 18px',
    textWrap: 'pretty'
  };

  const h2 = {
    fontFamily: tt.fonts.serif,
    fontSize: 'clamp(22px, 2.4vw, 28px)',
    fontWeight: 400,
    letterSpacing: '-0.02em',
    lineHeight: 1.2,
    color: tt.p.ink,
    margin: '36px 0 14px'
  };

  return (
    <div style={{
      minHeight: '100vh',
      background: tt.p.paper,
      color: tt.p.ink,
      fontFamily: tt.fonts.sans,
      display: 'flex',
      flexDirection: 'column'
    }}>

      <header style={{
        padding: '24px 48px',
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'center',
        borderBottom: `1px solid ${tt.p.line}`
      }}>
        <button type="button" onClick={onBack} style={{
          fontFamily: tt.fonts.serif,
          fontSize: 22,
          color: tt.p.ink,
          textDecoration: 'none',
          letterSpacing: '-0.01em',
          fontStyle: 'italic',
          background: 'none',
          border: 'none',
          padding: 0,
          cursor: 'pointer',
          textAlign: 'left'
        }}>
          Kitchen Takeovers
        </button>
      </header>

      <section className="kty-pad" style={{
        flex: '1 1 auto',
        padding: '80px 48px 100px',
        maxWidth: 720,
        width: '100%',
        margin: '0 auto',
        boxSizing: 'border-box'
      }}>

        <div className="kty-fade-in" style={{
          fontFamily: tt.fonts.mono,
          fontSize: 11,
          letterSpacing: '0.22em',
          textTransform: 'uppercase',
          color: tt.p.accent2,
          marginBottom: 20
        }}>
          Privacy
        </div>

        <h1 className="kty-h1 kty-fade-in d1" style={{
          fontFamily: tt.fonts.serif,
          letterSpacing: '-0.035em',
          lineHeight: 1.05,
          fontWeight: 400,
          margin: '0 0 12px',
          fontSize: 'clamp(36px, 5vw, 52px)'
        }}>
          Privacy <span style={{ fontStyle: 'italic', color: tt.p.accent }}>policy</span>
        </h1>

        <p className="kty-fade-in d1" style={{ ...para, fontSize: 14, color: tt.p.mute, marginBottom: 32 }}>
          Last updated: 26 April 2026 · Singapore
        </p>

        <div className="kty-fade-in d2">
          <p style={para}>
            Kitchen Takeovers (&quot;we&quot;, &quot;us&quot;) respects your privacy. This page explains what we collect when you use our website or submit an expression of interest, and how we use it.
          </p>

          <h2 style={h2}>Who we are</h2>
          <p style={para}>
            Kitchen Takeovers is preparing a pop-up kitchen program in Singapore. For privacy questions, contact{' '}
            <a href="mailto:hello@kitchentakeovers.sg" style={{ color: tt.p.ink, textDecoration: 'underline', textUnderlineOffset: 3 }}>hello@kitchentakeovers.sg</a>.
          </p>

          <h2 style={h2}>What we collect</h2>
          <p style={para}>
            If you complete our interest form, we collect the information you choose to provide (for example name, email, phone, concept details, and your answers to survey questions). Our site may also receive standard technical data from your browser (such as approximate location via IP, device type, and pages viewed) through our hosting provider as part of normal web delivery.
          </p>

          <h2 style={h2}>How we use your information</h2>
          <p style={para}>
            We use form submissions to understand demand, follow up about Kitchen Takeovers, and improve the program. We do not sell your personal data. We only share it with service providers who help us run the site or communicate with you (for example email delivery), and only as needed for those purposes.
          </p>

          <h2 style={h2}>Retention</h2>
          <p style={para}>
            We keep your information only as long as needed for the purposes above or as required by law. You can ask us to delete or correct your details by emailing hello@kitchentakeovers.sg.
          </p>

          <h2 style={h2}>Cookies and similar technologies</h2>
          <p style={para}>
            This site is intentionally simple. We do not use advertising cookies. If we add analytics or other tools later, we will update this policy.
          </p>

          <h2 style={h2}>Changes</h2>
          <p style={{ ...para, marginBottom: 0 }}>
            We may update this policy from time to time. The &quot;Last updated&quot; date at the top will change when we do.
          </p>
        </div>

        <div className="kty-fade-in d3" style={{ marginTop: 56 }}>
          <button type="button" onClick={onBack} style={{
            fontFamily: tt.fonts.mono,
            fontSize: 11,
            letterSpacing: '0.18em',
            textTransform: 'uppercase',
            color: tt.p.mute,
            textDecoration: 'none',
            borderBottom: `1px solid ${tt.p.line}`,
            paddingBottom: 4,
            transition: 'color 200ms ease, border-color 200ms ease',
            background: 'none',
            borderTop: 'none',
            borderLeft: 'none',
            borderRight: 'none',
            cursor: 'pointer'
          }}
          onMouseEnter={(e) => { e.currentTarget.style.color = tt.p.ink; e.currentTarget.style.borderBottomColor = tt.p.ink; }}
          onMouseLeave={(e) => { e.currentTarget.style.color = tt.p.mute; e.currentTarget.style.borderBottomColor = tt.p.line; }}>
            ← Back to home
          </button>
        </div>
      </section>

      <footer style={{
        padding: '28px 48px',
        borderTop: `1px solid ${tt.p.line}`,
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'center',
        fontFamily: tt.fonts.mono,
        fontSize: 10,
        letterSpacing: '0.14em',
        textTransform: 'uppercase',
        color: tt.p.mute,
        flexWrap: 'wrap',
        gap: 12
      }}>
        <span>Kitchen Takeovers</span>
        <span>Singapore</span>
      </footer>
    </div>
  );
}

Object.assign(window, { PrivacyPolicyPage });