// Eisphora — Refund Policy page

const { useState: useRefState, useEffect: useRefEffect, useRef: useRefRef } = React;

const REFUND_SECTIONS = [
  {
    n: '1',
    title: 'Digital Product Nature',
    body: 'Eisphora studies are digital software products delivered electronically as a JAR plugin for the MotiveWave trading platform. Upon purchase, you receive immediate access to download the software and activate your license key. Because the product is delivered and accessible instantly, standard return policies for physical goods do not apply.',
  },
  {
    n: '2',
    title: 'No General Refund Policy',
    body: 'Eisphora is a digital product with instant delivery. All sales are final. We do not offer refunds based on personal preference, change of mind, or dissatisfaction with trading results. By purchasing, you acknowledge that you have reviewed the product description, feature list, and system requirements.',
  },
  {
    n: '3',
    title: 'Refund Eligibility — Technical Issues Only',
    body: 'Refunds may be granted exclusively in the following technical circumstances:',
    notice: 'Refunds are only available when the product does not function as described due to a verified technical issue that our support team cannot resolve.',
    bullets: [
      'Confirmed technical incompatibility: The studies cannot function on your system due to a technical issue that our support team is unable to resolve after reasonable troubleshooting efforts (minimum 3 business days of support interaction required).',
      'Duplicate charges: You were charged more than once for the same subscription period due to a billing error.',
      'Extended service outage: The licensing server experienced downtime exceeding 72 consecutive hours that prevented you from using the product during your subscription period.',
    ],
  },
  {
    n: '4',
    title: 'Non-Refundable Circumstances',
    body: 'Refunds will not be issued in the following cases:',
    bullets: [
      'Change of mind, personal preference, or deciding the product is "not for you."',
      'Dissatisfaction with trading results. Eisphora studies are analytical tools and do not guarantee trading performance or profits.',
      'Failure to meet system requirements. The product requires the MotiveWave trading platform and a compatible data feed with bid/ask volume. It is your responsibility to verify compatibility before purchasing.',
      'Violation of the Terms of Service, including license sharing, redistribution, or reverse engineering.',
      'Changes in personal circumstances unrelated to the product (e.g., deciding to stop trading, switching to a different platform).',
      'Issues caused by third-party software, data feeds, or internet connectivity.',
    ],
  },
  {
    n: '5',
    title: 'Subscription Renewals',
    body: 'Subscriptions renew automatically. If you do not wish to continue, you must cancel before your renewal date. Refunds for renewal charges are handled as follows:',
    bullets: [
      'If you contact us within 48 hours of an unwanted renewal charge, we will issue a full refund for that renewal period.',
      'Renewal refund requests made after 48 hours are evaluated on a case-by-case basis.',
      'To avoid unwanted charges, cancel your subscription through your dashboard or by contacting support before the renewal date.',
    ],
  },
  {
    n: '6',
    title: 'How to Request a Refund',
    body: 'To request a refund, contact us 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' },
    ],
    body2: 'Please include your email address, license key, and a detailed description of the technical issue you are experiencing. Include screenshots or error logs if possible. Our support team will attempt to resolve the issue before processing a refund.',
  },
  {
    n: '7',
    title: 'Refund Processing',
    body: 'Approved refunds are processed through Stripe to your original payment method. Please allow 5 to 10 business days for the refund to appear on your statement, depending on your bank or card issuer. Upon refund, your license key will be deactivated and access to the studies will be revoked.',
  },
  {
    n: '8',
    title: 'Cancellation vs. Refund',
    body: 'Cancelling your subscription and requesting a refund are separate actions:',
    bullets: [
      'Cancellation stops future billing. You retain access to the studies until the end of your current billing period.',
      'Refund returns payment for the current or most recent billing period. Your access is revoked upon refund approval.',
      'You can cancel your subscription at any time without requesting a refund. Cancellation does not automatically trigger a refund.',
    ],
  },
  {
    n: '9',
    title: 'Contact',
    body: 'If you have questions about this refund policy or need assistance, 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 RefundSection({ section: s, border, T1, T2, T3, onVisible }) {
  const ref = useRefRef(null);

  useRefEffect(() => {
    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)', 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.notice && (
        <div style={{ margin: '4px 0 20px', padding: '14px 18px', background: 'rgba(255,45,85,0.06)', border: '1px solid rgba(255,45,85,0.2)', borderRadius: 10, display: 'flex', gap: 12, alignItems: 'flex-start' }}>
          <span style={{ marginTop: 2, flexShrink: 0, color: '#ff2d55' }}>
            <svg width={15} height={15} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 8v4"/><path d="M12 16h.01"/></svg>
          </span>
          <span style={{ fontSize: 14, color: 'rgba(255,255,255,0.7)', lineHeight: 1.7 }}>{s.notice}</span>
        </div>
      )}

      {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={{ 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>
              {c.href
                ? <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>
                : <span style={{ fontSize: 15, color: T2 }}>{c.value}</span>
              }
            </div>
          ))}
        </div>
      )}

      {s.body2 && renderBody(s.body2)}
    </section>
  );
}

function RefundPage() {
  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] = useRefState(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' }}>
            <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 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>
          {REFUND_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' }}>Refund 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 }}>
              We want you to be satisfied with Eisphora. This policy outlines the circumstances under which we offer refunds for our subscription plans.
            </p>
          </div>

          {REFUND_SECTIONS.map(s => (
            <RefundSection 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' }}>© 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="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>
            </div>
          </div>
        </main>
      </div>
    </div>
  );
}

window.RefundPage = RefundPage;