// Eisphora — Terms of Service page

const { useState: useTosState, useEffect: useTosEffect, useRef: useTosRef } = React;

const TOS_SECTIONS = [
  {
    n: '1',
    title: 'Service Description',
    body: 'Eisphora provides a suite of 12 orderflow studies (indicators) for the MotiveWave trading platform, delivered as a Java Archive (JAR) plugin file. The studies are digital software products and are not financial advice, trading signals, or investment recommendations.',
  },
  {
    n: '2',
    title: 'Account and License',
    body: 'When you purchase a subscription, you receive a license key that grants you access to all Eisphora studies for the duration of your subscription period. Your license is subject to the following conditions:',
    bullets: [
      'Each license is bound to a single machine, identified by a hashed machine ID collected during activation.',
      'You may not share, transfer, sell, or sublicense your license key to any third party.',
      'If you need to change machines, contact our support team and we will reset your machine binding at no additional cost.',
      'We reserve the right to revoke or suspend your license if we detect unauthorized use, redistribution, or violation of these Terms.',
    ],
  },
  {
    n: '3',
    title: 'Subscription and Payment',
    body: 'Eisphora offers three subscription plans:',
    table: [
      { label: 'Monthly', value: '€35 per month' },
      { label: 'Quarterly', value: '€89 every 3 months' },
      { label: 'Yearly', value: '€199 per year' },
    ],
    body2: 'All payments are processed securely through Stripe. Subscriptions renew automatically at the end of each billing period unless cancelled. You may cancel your subscription at any time through your dashboard or by contacting support. Cancellation takes effect at the end of the current billing period, and you will retain access until that date.\n\nPrices are listed in euros (EUR) and may be subject to applicable taxes depending on your jurisdiction. We reserve the right to change pricing with 30 days\' advance notice to existing subscribers.',
  },
  {
    n: '4',
    title: 'Permitted Use',
    body: 'You are granted a limited, non-exclusive, non-transferable, revocable license to use the Eisphora studies for your personal or professional trading purposes. You agree not to:',
    bullets: [
      'Reverse-engineer, decompile, disassemble, or otherwise attempt to derive the source code of the software.',
      'Modify, adapt, translate, or create derivative works based on the software.',
      'Redistribute, resell, rent, lease, or lend the software or your license key.',
      'Remove, alter, or obscure any proprietary notices or labels on the software.',
      'Use the software in any manner that violates applicable laws or regulations.',
      'Circumvent or attempt to circumvent the license validation or machine-binding mechanisms.',
    ],
  },
  {
    n: '5',
    title: 'Intellectual Property',
    body: 'All intellectual property rights in the Eisphora studies, including but not limited to the software code, algorithms, design, documentation, and branding, remain the exclusive property of Eisphora. Your subscription grants you a right to use the software; it does not transfer any ownership rights.',
  },
  {
    n: '6',
    title: 'Disclaimer of Warranties',
    body: 'The Service is provided "as is" and "as available" without warranties of any kind, whether express, implied, or statutory, including but not limited to implied warranties of merchantability, fitness for a particular purpose, and non-infringement.\n\nWe do not warrant that the software will be uninterrupted, error-free, or compatible with all system configurations. Eisphora studies are analytical tools and do not guarantee any trading results, profits, or specific outcomes.',
  },
  {
    n: '7',
    title: 'Limitation of Liability',
    body: 'To the maximum extent permitted by applicable law, Eisphora shall not be liable for any indirect, incidental, special, consequential, or punitive damages, including but not limited to loss of profits, data, trading losses, or business opportunities, arising from your use of or inability to use the Service.\n\nOur total aggregate liability for any claims arising under these Terms shall not exceed the amount you paid to Eisphora in the 12 months preceding the claim.',
  },
  {
    n: '8',
    title: 'Third-Party Services',
    body: 'Eisphora studies operate within the MotiveWave trading platform. We are not affiliated with, endorsed by, or responsible for MotiveWave or any data feed providers. Compatibility with MotiveWave depends on their platform updates, which are outside our control. We make reasonable efforts to maintain compatibility with current MotiveWave versions.\n\nPayment processing is handled by Stripe. Your use of Stripe is subject to their own terms and privacy policies.',
  },
  {
    n: '9',
    title: 'Updates and Changes',
    body: 'We may update, modify, or discontinue features of the software at any time. Software updates are included with your active subscription at no additional cost. We reserve the right to modify these Terms at any time. Material changes will be communicated via email or through our website. Continued use of the Service after changes constitutes acceptance of the revised Terms.',
  },
  {
    n: '10',
    title: 'Termination',
    body: 'We may terminate or suspend your license immediately, without prior notice, if you breach these Terms. Upon termination, your right to use the software ceases immediately. You may terminate your subscription at any time by cancelling through your dashboard or contacting support.',
  },
  {
    n: '11',
    title: 'Support',
    body: 'Support is provided through our Discord server and Telegram channel on a reasonable-efforts basis. We aim to respond during trading hours but do not guarantee specific response times. Support covers installation assistance, technical issues, and general usage questions. Support does not include trading advice, strategy development, or financial guidance.',
  },
  {
    n: '12',
    title: 'Governing Law',
    body: 'These Terms shall be governed by and construed in accordance with the laws of the jurisdiction in which Eisphora operates. Any disputes arising under these Terms shall be resolved through good-faith negotiation before pursuing formal legal proceedings.',
  },
  {
    n: '13',
    title: 'Contact',
    body: 'If you have any questions about these Terms, please reach out through any of the following channels:',
    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 TosPage() {
  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] = useTosState(null);

  useTosEffect(() => {
    if (document.getElementById('tos-style')) return;
    const s = document.createElement('style');
    s.id = 'tos-style';
    s.textContent = `
      html { scroll-behavior: smooth; }
      .tos-nav-link { transition: color 0.15s; }
      .tos-nav-link:hover { color: rgba(255,255,255,0.85) !important; }
    `;
    document.head.appendChild(s);
  }, []);

  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: 1200, 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>
          {TOS_SECTIONS.map(s => (
            <a key={s.n} href={`#section-${s.n}`} className="tos-nav-link"
              style={{ display: 'block', padding: '6px 0', fontSize: 13, color: active === s.n ? T1 : T3, textDecoration: 'none', borderLeft: `2px solid`, borderColor: active === s.n ? '#ff2d55' : 'transparent', paddingLeft: active === s.n ? 10 : 0, transition: 'color 0.15s, border-color 0.15s, padding-left 0.15s' }}
            >
              <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' }}>Terms of Service</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 }}>
              These Terms of Service ("Terms") govern your use of the Eisphora software products and services ("Service") operated by Eisphora ("we", "us", or "our"). By purchasing, downloading, or using our products, you agree to be bound by these Terms. If you do not agree, do not use the Service.
            </p>
          </div>

          {/* Sections */}
          {TOS_SECTIONS.map((s, idx) => (
            <TosSection key={s.n} section={s} border={BORDER} T1={T1} T2={T2} T3={T3} onVisible={setActive} />
          ))}

          {/* Bottom divider */}
          <div style={{ marginTop: 72, paddingTop: 40, borderTop: `1px solid ${BORDER}` }}>
            <p style={{ fontSize: 13, color: T3, margin: '0 0 16px', lineHeight: 1.7 }}>
              By using Eisphora, you acknowledge that you have read, understood, and agree to be bound by these Terms of Service.
            </p>
            <p style={{ fontSize: 13, color: T3, margin: '0 0 24px' }}>© 2026 Eisphora. All rights reserved.</p>
            <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap' }}>
              <a href="privacy.html" style={{ fontSize: 13, color: '#ff2d55', textDecoration: 'none' }}
                onMouseEnter={e => e.currentTarget.style.textDecoration = 'underline'}
                onMouseLeave={e => e.currentTarget.style.textDecoration = 'none'}
              >Privacy Policy →</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>
  );
}

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

  useTosEffect(() => {
    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: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '14px 20px', background: i % 2 === 0 ? 'rgba(255,255,255,0.02)' : 'transparent', borderBottom: i < s.table.length - 1 ? `1px solid ${border}` : 'none' }}>
              <span style={{ fontSize: 14, color: T2, fontWeight: 500 }}>{row.label}</span>
              <span style={{ fontSize: 14, color: T1, fontWeight: 700, fontVariantNumeric: 'tabular-nums' }}>{row.value}</span>
            </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: 7, 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={{ margin: '16px 0', 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>
              <a href={c.href} target="_blank" style={{ fontSize: 15, color: '#ff2d55', textDecoration: 'none' }}
                onMouseEnter={e => e.currentTarget.style.textDecoration = 'underline'}
                onMouseLeave={e => e.currentTarget.style.textDecoration = 'none'}
              >{c.value}</a>
            </div>
          ))}
        </div>
      )}
    </section>
  );
}

window.TosPage = TosPage;