// LingaFlip — Terms of Service 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: B.cream, textDecoration: 'none' }}>Terms</a>
          <a href="privacy.html" style={{ color: 'rgba(247,241,230,0.75)', 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 PlanBox({ title, items }) {
  return (
    <div style={{
      background: B.creamD, border: `2px solid ${B.ink}`, borderRadius: 14,
      padding: '16px 20px', marginBottom: 16,
    }}>
      <p style={{ fontFamily: FONT, fontWeight: 800, fontSize: 16, color: B.ink, marginBottom: 8 }}>{title}</p>
      <ul style={{ paddingLeft: 24, margin: 0 }}>
        {items.map(i => <li key={i} style={S.li}>{i}</li>)}
      </ul>
    </div>
  );
}

function TermsPage() {
  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}>Terms of Service</h1>
          <p style={{ fontFamily: FONT, fontWeight: 600, fontSize: 14, color: B.muted, marginBottom: 40 }}>
            Last updated: {new Date().toLocaleDateString()}
          </p>

          <p style={S.p}>
            These Terms of Service ("Terms") govern your access to and use of the LingaFlip website, mobile applications, and related services (collectively, the "Service"). LingaFlip operates within the European Union.
          </p>
          <p style={S.p}>
            By accessing or using the Service, you agree to these Terms. If you do not agree, do not use the Service.
          </p>

          <h2 style={S.h2}>1. The Service</h2>
          <p style={S.p}>
            LingaFlip provides a digital language-learning platform using automated systems and algorithms to generate and arrange flashcard-based learning content, including:
          </p>
          <ul style={{ paddingLeft: 24, marginBottom: 16 }}>
            {[
              'iOS and Android applications',
              'Spaced repetition learning',
              'Progress tracking and statistics',
            ].map(i => <li key={i} style={S.li}>{i}</li>)}
          </ul>
          <p style={{ ...S.p, fontWeight: 700 }}>Plans:</p>
          <PlanBox title="Basic (Free):" items={[
            'Practice up to 3 languages simultaneously',
            'Daily limited practise session',
            'Limited additional deck download',
            'Ad-supported experience',
          ]}/>
          <PlanBox title="Pro (Paid):" items={[
            'Unlimited language selection',
            'Unlimited daily session',
            'Unlimited deck download',
            'Ad-free experience',
          ]}/>
          <p style={S.p}>Content is automatically curated; users do not manually select individual flashcards.</p>

          <h2 style={S.h2}>2. Eligibility</h2>
          <p style={S.p}>
            You must be at least 13 years old to use the Service. Users under 18 require parental or legal guardian consent.
          </p>

          <h2 style={S.h2}>3. Accounts</h2>
          <p style={S.p}>
            You are responsible for maintaining accurate account information and keeping your login credentials secure. You are responsible for all activity under your account.
          </p>

          <h2 style={S.h2}>4. Subscriptions and Payments</h2>

          <h3 style={S.h3}>4.1 Billing</h3>
          <p style={S.p}>
            Payments will be charged via your Apple App Store or Google Play Store account and are subject to the terms and conditions of those platforms.
            Paid subscriptions are available on a monthly or annual basis. Monthly subscriptions are billed monthly in advance, and annual subscriptions are billed annually in advance, each at the price shown at purchase.
          </p>

          <h3 style={S.h3}>4.2 Free Trials</h3>
          <p style={S.p}>
            If a free trial is offered, it converts automatically into a paid subscription unless canceled before the trial ends.
          </p>

          <h3 style={S.h3}>4.3 EU Right of Withdrawal</h3>
          <p style={S.p}>
            EU consumers generally have a 14-day statutory right of withdrawal for digital services.
          </p>
          <p style={S.p}>
            By starting a paid subscription and accessing premium features immediately, you expressly consent to immediate performance of the Service and acknowledge that you waive your right of withdrawal under Article 16(m) of Directive 2011/83/EU.
          </p>

          <h3 style={S.h3}>4.4 Renewal and Cancellation</h3>
          <p style={S.p}>
            Subscriptions renew automatically unless canceled before renewal. You may cancel at any time; access continues until the end of the paid period. No partial refunds are provided except where required by law.
          </p>

          <h2 style={S.h2}>5. Acceptable Use</h2>
          <p style={S.p}>
            You may not misuse the Service, reverse engineer software or algorithms, use automated access tools, interfere with security features, or resell the Service.
          </p>

          <h2 style={S.h2}>6. Intellectual Property</h2>
          <p style={S.p}>
            All Service content, software, algorithms, and trademarks are owned by or licensed to LingaFlip. You are granted a limited, non-transferable, non-commercial license to use the Service.
          </p>

          <h2 style={S.h2}>7. Algorithms Disclaimer</h2>
          <p style={S.p}>
            The Service relies on automated systems to personalize learning content. Results may vary. LingaFlip does not guarantee specific learning outcomes or accuracy of algorithmic recommendations.
          </p>

          <h2 style={S.h2}>8. Disclaimers and Liability</h2>
          <p style={S.p}>
            The Service is provided "as is" and "as available". LingaFlip is not liable for indirect or consequential damages.
          </p>
          <p style={S.p}>
            Nothing in these Terms limits liability for gross negligence, willful misconduct, or liability that cannot be excluded under applicable law.
          </p>
          <p style={S.p}>
            Total liability is limited to the amount paid by you in the 12 months preceding the claim.
          </p>

          <h2 style={S.h2}>9. Termination</h2>
          <p style={S.p}>
            We may suspend or terminate user accounts in the event of a material breach of these Terms or unlawful use of the Service. Where reasonably possible, users will be provided with prior notice.
          </p>
          <p style={S.p}>
            LingaFlip reserves the right to modify, suspend, or discontinue the Service, in whole or in part, at any time for legitimate reasons. Where feasible, users will be informed in advance through the Service or via email. In the event of a permanent service discontinuation, users will retain access until the end of their current paid subscription period. Any refunds will be handled in accordance with applicable law and the policies of the relevant app store.
          </p>

          <h2 style={S.h2}>10. Rules of Conduct</h2>
          <p style={S.p}>When using LingaFlip, you agree to:</p>
          <ul style={{ paddingLeft: 24, marginBottom: 12 }}>
            {[
              'Use the Service only for personal language learning',
              'Avoid any activity that may disrupt the Service, including reverse engineering, hacking, or attempting to manipulate learning progress or XP and refrain from spamming.',
            ].map(i => <li key={i} style={S.li}>{i}</li>)}
          </ul>
          <p style={S.p}>
            LingaFlip reserves the right to suspend or terminate accounts in case of violation of these rules or unlawful use. Users remain responsible for any damages resulting from misuse.
          </p>

          <h2 style={S.h2}>11. Governing Law</h2>
          <p style={S.p}>
            These Terms are governed by EU law and the law of the EU member state where LingaFlip is established. EU consumers retain all mandatory consumer rights.
          </p>

          <h2 style={S.h2}>12. Contact</h2>
          <div style={S.box}>
            <strong>LingaFlip</strong><br/>
            Email: support@lingaflip.com
          </div>

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

Object.assign(window, { TermsPage });