// Eisphora — Privacy Policy page

const { useState: usePrivState, useEffect: usePrivEffect, useRef: usePrivRef } = React;

const PRIVACY_SECTIONS = [
  {
    n: '1',
    title: 'Information We Collect',
    body: 'We collect the following categories of information:',
    table: [
      { col1: 'Data', col2: 'Purpose', col3: 'Storage', header: true },
      { col1: 'Email address', col2: 'Account identification, license delivery, and support communication', col3: 'Our servers' },
      { col1: 'Machine ID (hashed)', col2: 'License binding and activation verification', col3: 'Our servers' },
      { col1: 'License key', col2: 'Subscription validation and access control', col3: 'Our servers' },
      { col1: 'Payment information', col2: 'Subscription billing and invoicing', col3: 'Stripe (third-party processor)' },
    ],
    body2: 'We do not collect your name, physical address, phone number, trading data, financial account information, or any data from the MotiveWave platform.',
  },
  {
    n: '2',
    title: 'How We Collect Information',
    bullets: [
      'At purchase: Your email address and payment details are collected when you subscribe through our checkout process powered by Stripe.',
      'At activation: When you activate your license key within MotiveWave, a one-way hash of your machine identifier is transmitted to our licensing server. The raw machine ID is never stored; only the hash is retained.',
      'Through support: If you contact us via Discord, Telegram, or email, we may collect additional information you voluntarily provide to resolve your inquiry.',
    ],
  },
  {
    n: '3',
    title: 'How We Use Your Information',
    body: 'We use the collected information strictly for the following purposes:',
    bullets: [
      'Delivering and activating your license key.',
      'Verifying that your license is used on the authorized machine.',
      'Processing subscription payments and managing billing.',
      'Sending transactional emails related to your subscription (payment confirmations, license delivery, renewal reminders).',
      'Providing technical support when you contact us.',
      'Communicating important product updates or changes to our Terms of Service.',
    ],
    body2: 'We do not send marketing emails, newsletters, or promotional content unless you explicitly opt in. We do not sell, rent, or trade your personal information to any third parties.',
  },
  {
    n: '4',
    title: 'Third-Party Services',
    body: 'We use the following third-party services:',
    bullets: [
      'Stripe: Handles all payment processing. Your payment card details are collected and stored exclusively by Stripe and are never accessible to us. Stripe\'s privacy policy applies to the payment data they process. See stripe.com/privacy.',
      'Discord and Telegram: Used for community support. Any data you share on these platforms is subject to their respective privacy policies.',
    ],
    body2: 'We do not use analytics trackers, advertising pixels, or any third-party data-sharing services on our website.',
  },
  {
    n: '5',
    title: 'Data Security',
    body: 'We implement reasonable technical and organizational measures to protect your personal data against unauthorized access, alteration, disclosure, or destruction. These measures include:',
    bullets: [
      'Machine IDs are stored as one-way hashes, making it impossible to reverse them into the original identifiers.',
      'All data transmissions between the plugin and our servers use encrypted connections (HTTPS/TLS).',
      'Payment data is handled entirely by Stripe, which is PCI DSS Level 1 certified.',
      'Access to our systems is restricted to authorized personnel only.',
    ],
    body2: 'While we take reasonable precautions, no method of electronic transmission or storage is completely secure. We cannot guarantee absolute security of your data.',
  },
  {
    n: '6',
    title: 'Data Retention',
    body: 'We retain your data for as long as your subscription is active and for a reasonable period afterward to fulfill legal and accounting obligations. Specifically:',
    bullets: [
      'Account data (email, license key, machine ID hash): Retained for the duration of your subscription plus 12 months after cancellation.',
      'Payment records: Retained by Stripe according to their data retention policy and applicable financial regulations.',
      'Support correspondence: Retained for as long as necessary to resolve your inquiry and for reference in case of follow-up.',
    ],
  },
  {
    n: '7',
    title: 'Your Rights',
    body: 'Depending on your jurisdiction, you may have the following rights regarding your personal data:',
    bullets: [
      'Access: Request a copy of the personal data we hold about you.',
      'Correction: Request correction of inaccurate or incomplete data.',
      'Deletion: Request deletion of your personal data, subject to legal retention requirements.',
      'Data portability: Request your data in a structured, machine-readable format.',
      'Objection: Object to certain types of processing of your personal data.',
    ],
    body2: 'To exercise any of these rights, contact us at support@eisphora.net. We will respond to your request within 30 days.',
  },
  {
    n: '8',
    title: 'Cookies',
    body: 'Our website uses only essential, functional cookies (such as language preference storage via localStorage). We do not use tracking cookies, advertising cookies, or any third-party cookie-based analytics. No cookie consent banner is required because we do not track you.',
  },
  {
    n: '9',
    title: "Children's Privacy",
    body: 'Our Service is not directed at individuals under the age of 18. We do not knowingly collect personal information from minors. If we become aware that we have inadvertently collected data from a person under 18, we will take steps to delete that information promptly.',
  },
  {
    n: '10',
    title: 'Changes to This Policy',
    body: 'We may update this Privacy Policy from time to time. Material changes will be posted on this page with an updated revision date. We encourage you to review this page periodically. Continued use of the Service after changes constitutes your acceptance of the revised policy.',
  },
  {
    n: '11',
    title: 'Contact',
    body: 'If you have any questions about this Privacy Policy or wish to exercise your data rights, contact us at:',
    contacts: [
      { label: 'Email', value: 'support@eisphora.net', href: 'mailto:support@eisphora.net' },
      { label: 'Discord', value: 'discord.gg/vwHv83zvBV', href: 'https://discord.gg/vwHv83zvBV' },
      { label: 'Telegram', value: 't.me/+K6xDRpL9eEhjNDNi', href: 'https://t.me/+K6xDRpL9eEhjNDNi' },
    ],
  },
];

function PrivacySection({ section: s, border, T1, T2, T3, onVisible }) {
  const ref = usePrivRef(null);

  usePrivEffect(() => {
    const obs = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) onVisible(s.n);
    }, { threshold: 0.2 });
    if (ref.current) obs.observe(ref.current);
    return () => obs.disconnect();
  }, []);

  const renderBody = (text) =>
    text.split('\n\n').map((p, i) => (
      <p key={i} style={{ margin: '0 0 18px', color: T2, fontSize: 16, lineHeight: 1.85 }}>{p}</p>
    ));

  return (
    <section ref={ref} id={`section-${s.n}`} style={{ marginBottom: 56, paddingBottom: 56, borderBottom: `1px solid ${border}` }}>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 14, marginBottom: 20 }}>
        <span style={{ fontSize: 12, fontWeight: 600, color: 'rgba(255,45,85,0.6)', fontVariantNumeric: 'tabular-nums', flexShrink: 0 }}>{s.n.padStart(2, '0')}</span>
        <h2 style={{ fontSize: 24, fontWeight: 700, letterSpacing: '-0.025em', margin: 0, color: T1 }}>{s.title}</h2>
      </div>

      {s.body && renderBody(s.body)}

      {s.table && (
        <div style={{ margin: '20px 0', borderRadius: 10, overflow: 'hidden', border: `1px solid ${border}` }}>
          {s.table.map((row, i) => (
            <div key={i} style={{ display: 'grid', gridTemplateColumns: '1fr 2fr 1fr', gap: 0, background: row.header ? 'rgba(255,255,255,0.04)' : i % 2 === 0 ? 'rgba(255,255,255,0.015)' : 'transparent', borderBottom: i < s.table.length - 1 ? `1px solid ${border}` : 'none' }}>
              {[row.col1, row.col2, row.col3].map((cell, j) => (
                <div key={j} style={{ padding: '13px 18px', fontSize: row.header ? 11 : 14, fontWeight: row.header ? 700 : 400, color: row.header ? T3 : T2, letterSpacing: row.header ? '0.08em' : 0, textTransform: row.header ? 'uppercase' : 'none', borderRight: j < 2 ? `1px solid ${border}` : 'none' }}>{cell}</div>
              ))}
            </div>
          ))}
        </div>
      )}

      {s.body2 && renderBody(s.body2)}

      {s.bullets && (
        <ul style={{ margin: '12px 0 0', padding: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 10 }}>
          {s.bullets.map((b, i) => (
            <li key={i} style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
              <span style={{ marginTop: 9, width: 4, height: 4, borderRadius: '50%', background: '#ff2d55', flexShrink: 0 }} />
              <span style={{ fontSize: 16, color: T2, lineHeight: 1.85 }}>{b}</span>
            </li>
          ))}
        </ul>
      )}

      {s.contacts && (
        <div style={{ marginTop: 20, display: 'flex', flexDirection: 'column', gap: 10 }}>
          {s.contacts.map((c, i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
              <span style={{ fontSize: 12, fontWeight: 600, color: T3, textTransform: 'uppercase', letterSpacing: '0.08em', minWidth: 72 }}>{c.label}</span>
              {c.href
                ? <a href={c.href} target="_blank" style={{ fontSize: 15, color: '#ff2d55', textDecoration: 'none', fontFamily: 'Inter, monospace' }} onMouseEnter={e => e.currentTarget.style.textDecoration='underline'} onMouseLeave={e => e.currentTarget.style.textDecoration='none'}>{c.value}</a>
                : <span style={{ fontSize: 15, color: T2, fontFamily: 'Inter, monospace' }}>{c.value}</span>
              }
            </div>
          ))}
        </div>
      )}
    </section>
  );
}

function PrivacyPage() {
  const BG     = '#000000';
  const T1     = '#FFFFFF';
  const T2     = 'rgba(255,255,255,0.75)';
  const T3     = 'rgba(255,255,255,0.45)';
  const BORDER = 'rgba(255,255,255,0.08)';

  const [active, setActive] = usePrivState(null);

  return (
    <div style={{ background: BG, color: T1, fontFamily: '-apple-system, BlinkMacSystemFont, Trebuchet MS, Roboto, Ubuntu, sans-serif', minHeight: '100vh' }}>

      {/* ── HEADER ── */}
      <header style={{ position: 'sticky', top: 0, zIndex: 50, background: 'rgba(0,0,0,0.95)', backdropFilter: 'blur(24px)', borderBottom: `1px solid ${BORDER}` }}>
        <div style={{ padding: '0 56px', height: 64, maxWidth: 1400, margin: '0 auto', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <a href="index.html" style={{ textDecoration: 'none', display: 'flex', alignItems: 'center' }}>
            <img src="assets/logo.png" alt="Eisphora" style={{ height: 40, width: 'auto' }} />
          </a>
          <a href="index.html" style={{ display: 'inline-flex', alignItems: 'center', gap: 6, color: T3, fontSize: 17, fontWeight: 500, textDecoration: 'none', transition: 'color 0.15s' }}
            onMouseEnter={e => e.currentTarget.style.color = T1}
            onMouseLeave={e => e.currentTarget.style.color = T3}
          >
            <svg width={14} height={14} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m15 18-6-6 6-6"/></svg>
            Вернуться на главную
          </a>
        </div>
      </header>

      <div style={{ maxWidth: 1400, margin: '0 auto', padding: '0 56px', display: 'grid', gridTemplateColumns: '220px 1fr', gap: 80, alignItems: 'start' }}>

        {/* ── SIDEBAR NAV ── */}
        <nav style={{ position: 'sticky', top: 88, paddingTop: 64, paddingBottom: 64 }}>
          <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: '0.1em', textTransform: 'uppercase', color: T3, marginBottom: 16 }}>Содержание</div>
          {PRIVACY_SECTIONS.map(s => (
            <a key={s.n} href={`#section-${s.n}`}
              style={{ display: 'block', padding: '6px 0', paddingLeft: active === s.n ? 10 : 0, fontSize: 13, color: active === s.n ? T1 : T3, textDecoration: 'none', borderLeft: '2px solid', borderColor: active === s.n ? '#ff2d55' : 'transparent', transition: 'color 0.15s, border-color 0.15s, padding-left 0.15s' }}
              onMouseEnter={e => { if (active !== s.n) e.currentTarget.style.color = 'rgba(255,255,255,0.7)'; }}
              onMouseLeave={e => { if (active !== s.n) e.currentTarget.style.color = T3; }}
            >
              <span style={{ color: active === s.n ? '#ff2d55' : 'rgba(255,255,255,0.25)', marginRight: 8, fontSize: 11 }}>{s.n.padStart(2, '0')}</span>
              {s.title}
            </a>
          ))}
        </nav>

        {/* ── CONTENT ── */}
        <main style={{ paddingTop: 64, paddingBottom: 120 }}>

          {/* Hero */}
          <div style={{ marginBottom: 72, paddingBottom: 48, borderBottom: `1px solid ${BORDER}` }}>
            <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '5px 12px', background: 'rgba(255,45,85,0.08)', border: '1px solid rgba(255,45,85,0.2)', borderRadius: 6, marginBottom: 24 }}>
              <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#ff2d55', display: 'inline-block' }} />
              <span style={{ fontSize: 12, fontWeight: 600, color: '#ff2d55', letterSpacing: '0.06em', textTransform: 'uppercase' }}>Legal</span>
            </div>
            <h1 style={{ fontSize: 'clamp(44px, 5vw, 72px)', fontWeight: 800, letterSpacing: '-0.035em', lineHeight: 1.05, margin: '0 0 20px' }}>Privacy Policy</h1>
            <p style={{ fontSize: 15, color: T3, margin: 0 }}>Last updated: <span style={{ color: T2 }}>April 15, 2026</span></p>
            <p style={{ fontSize: 17, color: T2, lineHeight: 1.8, marginTop: 24, maxWidth: 680 }}>
              This Privacy Policy describes how Eisphora ("we", "us", or "our") collects, uses, and protects your personal information when you use our website and services. We are committed to protecting your privacy and handling your data transparently.
            </p>
          </div>

          {/* Sections */}
          {PRIVACY_SECTIONS.map(s => (
            <PrivacySection key={s.n} section={s} border={BORDER} T1={T1} T2={T2} T3={T3} onVisible={setActive} />
          ))}

          {/* Bottom */}
          <div style={{ marginTop: 72, paddingTop: 40, borderTop: `1px solid ${BORDER}` }}>
            <p style={{ fontSize: 13, color: T3, margin: '0 0 24px', lineHeight: 1.7 }}>© 2026 Eisphora. All rights reserved.</p>
            <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap' }}>
              <a href="terms.html" style={{ fontSize: 13, color: '#ff2d55', textDecoration: 'none' }}
                onMouseEnter={e => e.currentTarget.style.textDecoration = 'underline'}
                onMouseLeave={e => e.currentTarget.style.textDecoration = 'none'}
              >Terms of Service →</a>
              <a href="refund.html" style={{ fontSize: 13, color: '#ff2d55', textDecoration: 'none' }}
                onMouseEnter={e => e.currentTarget.style.textDecoration = 'underline'}
                onMouseLeave={e => e.currentTarget.style.textDecoration = 'none'}
              >Refund Policy →</a>
            </div>
          </div>
        </main>
      </div>
    </div>
  );
}

window.PrivacyPage = PrivacyPage;