// LingaFlip — Privacy Policy page

const B = {
  cream:    '#F7F1E6',
  creamD:   '#EDE4D2',
  ink:      '#0E1428',
  inkSoft:  '#2B3143',
  muted:    '#6B7280',
  cyan:     '#3CC8E8',
  orange:   '#FF5A2E',
};
const FONT = `'Nunito', system-ui, sans-serif`;

function useBreakpoint() {
  const [w, setW] = React.useState(typeof window !== 'undefined' ? window.innerWidth : 1280);
  React.useEffect(() => {
    const h = () => setW(window.innerWidth);
    window.addEventListener('resize', h);
    return () => window.removeEventListener('resize', h);
  }, []);
  return { isMobile: w < 768 };
}

function PageHeader() {
  const { isMobile } = useBreakpoint();
  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 50,
      background: 'rgba(247,241,230,0.95)',
      backdropFilter: 'blur(8px)',
      borderBottom: `3px solid ${B.ink}`,
    }}>
      <div style={{
        maxWidth: 1240, margin: '0 auto',
        padding: isMobile ? '14px 20px' : '14px 32px',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      }}>
        <a href="index.html" style={{ display: 'flex', alignItems: 'center', gap: 10, textDecoration: 'none' }}>
          <img src="assets/app-icon.png" alt="LingaFlip" width={isMobile ? 36 : 44} height={isMobile ? 36 : 44}
            style={{ display: 'block', borderRadius: 10 }}/>
          <div style={{
            fontFamily: FONT, fontWeight: 900, fontSize: isMobile ? 22 : 28,
            color: B.ink, letterSpacing: -0.8, lineHeight: 1,
          }}>LingaFlip</div>
        </a>
        <a href="index.html#download" style={{
          background: B.ink, color: B.cream,
          padding: isMobile ? '10px 16px' : '12px 22px', borderRadius: 999,
          fontFamily: FONT, fontWeight: 800, fontSize: isMobile ? 14 : 16,
          textDecoration: 'none', letterSpacing: 0.5,
          boxShadow: `0 4px 0 ${B.orange}`,
        }}>Download free →</a>
      </div>
    </header>
  );
}

function PageFooter() {
  const { isMobile } = useBreakpoint();
  return (
    <footer style={{
      background: B.ink, color: B.cream,
      padding: isMobile ? '28px 20px' : '32px',
      borderTop: `3px solid ${B.orange}`,
    }}>
      <div style={{
        maxWidth: 1240, margin: '0 auto',
        display: 'flex',
        flexDirection: isMobile ? 'column' : 'row',
        alignItems: isMobile ? 'flex-start' : 'center',
        justifyContent: 'space-between',
        gap: isMobile ? 20 : 24,
        flexWrap: 'wrap',
      }}>
        <a href="index.html" style={{ display: 'flex', alignItems: 'center', gap: 12, textDecoration: 'none' }}>
          <img src="assets/app-icon.png" width={36} height={36} alt="LingaFlip" style={{ borderRadius: 8 }}/>
          <div style={{ fontFamily: FONT, fontWeight: 900, fontSize: 22, letterSpacing: -0.5, color: B.cream }}>LingaFlip</div>
        </a>
        <div style={{ display: 'flex', gap: 24, fontFamily: FONT, fontWeight: 600, fontSize: 15, flexWrap: 'wrap' }}>
          <a href="mailto:support@lingaflip.com" style={{ color: 'rgba(247,241,230,0.75)', textDecoration: 'none' }}>Contact</a>
          <a href="terms.html" style={{ color: 'rgba(247,241,230,0.75)', textDecoration: 'none' }}>Terms</a>
          <a href="privacy.html" style={{ color: B.cream, textDecoration: 'none' }}>Privacy</a>
          <a href="legal.html" style={{ color: 'rgba(247,241,230,0.75)', textDecoration: 'none' }}>Legal</a>
        </div>
        <div style={{ fontFamily: FONT, fontWeight: 500, fontSize: 14, color: 'rgba(247,241,230,0.45)' }}>
          © {new Date().getFullYear()} LingaFlip
        </div>
      </div>
    </footer>
  );
}

const S = {
  h1: { fontFamily: FONT, fontWeight: 900, fontSize: 38, color: B.ink, marginBottom: 8, lineHeight: 1.15 },
  h2: { fontFamily: FONT, fontWeight: 800, fontSize: 22, color: B.ink, marginTop: 40, marginBottom: 12, paddingBottom: 8, borderBottom: `2px solid ${B.creamD}` },
  h3: { fontFamily: FONT, fontWeight: 700, fontSize: 18, color: B.inkSoft, marginTop: 24, marginBottom: 8 },
  p:  { fontFamily: FONT, fontWeight: 500, fontSize: 16, color: B.inkSoft, lineHeight: 1.75, marginBottom: 12 },
  li: { fontFamily: FONT, fontWeight: 500, fontSize: 16, color: B.inkSoft, lineHeight: 1.75, marginBottom: 4 },
  box: {
    background: B.creamD, border: `2px solid ${B.ink}`, borderRadius: 14,
    padding: '16px 20px', marginBottom: 16,
    fontFamily: FONT, fontWeight: 500, fontSize: 16, color: B.inkSoft, lineHeight: 1.75,
  },
};

function PrivacyPage() {
  const { isMobile } = useBreakpoint();
  React.useEffect(() => { window.scrollTo(0, 0); }, []);

  return (
    <div style={{ background: B.cream, minHeight: '100vh', fontFamily: FONT, color: B.ink }}>
      <PageHeader/>
      <main style={{ padding: isMobile ? '48px 20px 80px' : '64px 32px 96px' }}>
        <div style={{ maxWidth: 800, margin: '0 auto' }}>

          <h1 style={S.h1}>Privacy Policy</h1>
          <p style={{ fontFamily: FONT, fontWeight: 600, fontSize: 14, color: B.muted, marginBottom: 40 }}>
            Last updated: {new Date().toLocaleDateString()}
          </p>

          <p style={S.p}>
            This Privacy Policy explains how LingaFlip processes personal data in compliance with the General Data Protection Regulation (GDPR).
          </p>

          <h2 style={S.h2}>1. Data Controller</h2>
          <p style={S.p}>LingaFlip is the data controller for personal data processed through the Service.</p>
          <div style={S.box}>
            <strong>Contact:</strong> support@lingaflip.com<br/>
            <strong>Legal entity:</strong> LingaFlip<br/>
            <strong>Location:</strong> Germany
          </div>

          <h2 style={S.h2}>2. Personal Data We Collect</h2>

          <h3 style={S.h3}>2.1 Personal Information</h3>
          <ul style={{ paddingLeft: 24, marginBottom: 12 }}>
            {['Name', 'Email address'].map(i => <li key={i} style={S.li}>{i}</li>)}
          </ul>

          <h3 style={S.h3}>2.2 App Activity</h3>
          <ul style={{ paddingLeft: 24, marginBottom: 12 }}>
            {['Learning progress', 'Feature interaction', 'Session activity'].map(i => <li key={i} style={S.li}>{i}</li>)}
          </ul>

          <h3 style={S.h3}>2.3 Device and App Data</h3>
          <ul style={{ paddingLeft: 24, marginBottom: 12 }}>
            {[
              'Device identifiers (e.g., app instance ID)',
              'App statistics, diagnostics, crash logs',
              'IP address and approximate location (country/region)',
            ].map(i => <li key={i} style={S.li}>{i}</li>)}
          </ul>

          <h2 style={S.h2}>3. Legal Bases (GDPR)</h2>
          <p style={S.p}>We process data based on:</p>
          <ul style={{ paddingLeft: 24, marginBottom: 12 }}>
            {[
              'Contract performance',
              'Legitimate interests (analytics, security, improvement)',
              'Consent (where required)',
              'Legal obligations',
            ].map(i => <li key={i} style={S.li}>{i}</li>)}
          </ul>

          <h2 style={S.h2}>4. How We Use Data</h2>
          <ul style={{ paddingLeft: 24, marginBottom: 12 }}>
            {[
              'Provide and operate the Service',
              'Personalize learning via automated systems',
              'Analyze usage and improve features',
              'Manage accounts and subscriptions',
              'Ensure security and prevent fraud',
            ].map(i => <li key={i} style={S.li}>{i}</li>)}
          </ul>

          <h2 style={S.h2}>5. Automated Processing</h2>
          <p style={S.p}>
            Automated systems are used to personalize learning content. These processes do not produce legal or similarly significant effects under Article 22 GDPR. You can reset your learning progress at any time within the app settings.
          </p>

          <h2 style={S.h2}>6. Data Sharing</h2>
          <p style={S.p}>We do not sell personal data. We may share data with:</p>
          <ul style={{ paddingLeft: 24, marginBottom: 12 }}>
            {[
              'Service providers (hosting, analytics, advertising, payment processors)',
              'Authorities where legally required',
              'Business successors',
            ].map(i => <li key={i} style={S.li}>{i}</li>)}
          </ul>
          <p style={S.p}>All processors are bound by GDPR-compliant agreements.</p>

          <h2 style={S.h2}>7. International Transfers</h2>
          <p style={S.p}>
            If data is transferred outside the EEA, appropriate safeguards such as EU Standard Contractual Clauses are used.
          </p>

          <h2 style={S.h2}>8. Account Deletion and Contact</h2>
          <p style={S.p}>
            LingaFlip is the data controller responsible for the processing of personal data under this Privacy Policy.
            If you have any questions or requests regarding your personal data, you may contact us via the in-app "Support" section or by email.
            Users can request deletion of their personal data at any time. In addition, users can delete their account and associated personal data directly within the app using the "Delete Account" function.
          </p>
          <div style={S.box}>
            <strong>Email:</strong> support@lingaflip.com<br/>
            <strong>Location:</strong> Germany
          </div>

          <h2 style={S.h2}>9. Data Retention and Security</h2>
          <p style={S.p}>
            Data is retained only as long as necessary for the service or legal obligations. We apply technical measures including encryption and access controls, though no system is 100% secure.
          </p>

          <h2 style={S.h2}>10. Your Rights</h2>
          <p style={S.p}>Users have the right, under applicable data protection laws, to:</p>
          <ul style={{ paddingLeft: 24, marginBottom: 12 }}>
            {[
              'Access their personal data',
              'Request correction of inaccurate or incomplete data',
              'Request deletion of their personal data',
            ].map(i => <li key={i} style={S.li}>{i}</li>)}
          </ul>

          <h2 style={S.h2}>11. Cookies</h2>
          <p style={S.p}>
            Cookies and similar technologies are used only as necessary and, where required, with consent.
          </p>

          <h2 style={S.h2}>12. Children</h2>
          <p style={S.p}>
            The Service is not intended for children under the age of 16. We do not knowingly collect personal data from children under 16. If we become aware that personal data belonging to a child under 16 has been collected, we will take steps to delete such data promptly.
          </p>

          <h2 style={S.h2}>13. Changes</h2>
          <p style={S.p}>
            Material changes will be communicated and the date updated.
          </p>

        </div>
      </main>
      <PageFooter/>
    </div>
  );
}

Object.assign(window, { PrivacyPage });