// legal.jsx — Refund Policy & Privacy Policy (themed legal pages)
const { useState: useStateLg, useEffect: useEffectLg, useRef: useRefLg } = React;

/* Reusable legal layout: sticky table-of-contents + glass body */
function LegalPage({ route, onNav, eyebrow, title, updated, intro, sections }) {
  const [active, setActive] = useStateLg(sections[0].id);
  const refs = useRefLg({});
  useEffectLg(() => {
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) setActive(e.target.id); });
    }, { rootMargin: "-120px 0px -65% 0px", threshold: 0 });
    sections.forEach(s => { const el = document.getElementById(s.id); if (el) io.observe(el); });
    return () => io.disconnect();
  }, [sections]);

  const jump = (id) => (e) => {
    e.preventDefault();
    const el = document.getElementById(id);
    if (el) { const y = el.getBoundingClientRect().top + window.scrollY - 110; window.scrollTo({ top: y, behavior: "smooth" }); }
  };

  return (
    <PageShell route={route} onNav={onNav}>
      <section className="section" style={{ padding: "10px 0 8px" }}>
        <div className="wrap">
          <Reveal>
            <div className="eyebrow" style={{ display: "inline-flex", alignItems: "center", gap: 8 }}>
              <Icon name="shield" size={14} /> {eyebrow}
            </div>
            <h1 className="h-display" style={{ fontSize: "clamp(38px,5.4vw,68px)", margin: "16px 0 0", maxWidth: 760 }}>{title}</h1>
            <div style={{ display: "flex", alignItems: "center", gap: 14, marginTop: 20, flexWrap: "wrap" }}>
              <span className="chip" style={{ whiteSpace: "nowrap" }}><Icon name="clock" size={14} /> Last updated {updated}</span>
              <span className="cap">Questions? Reach us anytime in the <button onClick={() => onNav("discord")} style={{ background: "none", border: "none", color: "var(--accent)", cursor: "pointer", padding: 0, font: "inherit" }}>KVB support chat</button>.</span>
            </div>
            {intro && <p className="body-lg" style={{ maxWidth: 680, marginTop: 22 }}>{intro}</p>}
          </Reveal>
        </div>
      </section>

      <section className="section" style={{ padding: "30px 0 20px" }}>
        <div className="wrap">
          <div style={{ display: "grid", gridTemplateColumns: "240px 1fr", gap: 30, alignItems: "start" }} className="legal-grid">
            {/* TOC */}
            <Reveal className="legal-toc" style={{ position: "sticky", top: 110 }}>
              <div className="glass" style={{ borderRadius: "var(--radius)", padding: 18 }}>
                <div className="cap" style={{ fontWeight: 600, color: "var(--ink-2)", marginBottom: 12, letterSpacing: "0.08em" }}>ON THIS PAGE</div>
                <div className="stack" style={{ gap: 2 }}>
                  {sections.map((s, i) => {
                    const on = active === s.id;
                    return (
                      <a key={s.id} href={"#" + s.id} onClick={jump(s.id)} style={{
                        display: "flex", gap: 10, alignItems: "baseline", padding: "8px 10px", borderRadius: 9, fontSize: 13.5,
                        color: on ? "var(--ink)" : "var(--ink-3)", background: on ? "var(--glass-fill)" : "transparent",
                        fontWeight: on ? 560 : 460, transition: "color .2s, background .2s", lineHeight: 1.3,
                      }}>
                        <span style={{ color: on ? "var(--accent)" : "var(--ink-3)", fontVariantNumeric: "tabular-nums", fontSize: 12 }}>{String(i + 1).padStart(2, "0")}</span>
                        {s.h}
                      </a>
                    );
                  })}
                </div>
              </div>
            </Reveal>

            {/* Body */}
            <div className="glass-strong" style={{ borderRadius: "var(--radius-lg)", padding: "clamp(26px,3.4vw,52px)" }}>
              {sections.map((s, i) => (
                <Reveal key={s.id} delay={Math.min(i * 0.03, 0.15)} as="section" style={{ scrollMarginTop: 110 }}>
                  <div id={s.id} style={{ paddingTop: i ? 36 : 0, marginTop: i ? 36 : 0, borderTop: i ? "1px solid var(--glass-border-soft)" : "none" }}>
                    <div style={{ display: "flex", alignItems: "baseline", gap: 12, marginBottom: 16 }}>
                      <span style={{ fontVariantNumeric: "tabular-nums", color: "var(--accent)", fontWeight: 700, fontSize: 15 }}>{String(i + 1).padStart(2, "0")}</span>
                      <h2 className="h2" style={{ fontSize: "clamp(20px,2.4vw,26px)" }}>{s.h}</h2>
                    </div>
                    <div className="legal-body">{s.body}</div>
                  </div>
                </Reveal>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="section" style={{ padding: "20px 0 30px" }}>
        <div className="wrap">
          <Reveal className="glass" style={{ borderRadius: "var(--radius-lg)", padding: "clamp(28px,4vw,44px)", display: "flex", justifyContent: "space-between", alignItems: "center", gap: 20, flexWrap: "wrap" }}>
            <div>
              <h3 className="h3" style={{ fontSize: 19, marginBottom: 6 }}>Still have a question?</h3>
              <p className="body" style={{ fontSize: 14.5, margin: 0 }}>Our support team replies in minutes — most issues are sorted same-day.</p>
            </div>
            <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
              <button className="btn btn-primary" onClick={() => onNav("discord")}><Icon name="message" size={16} /> Contact support</button>
              <button className="btn btn-ghost" onClick={() => onNav("landing")}>Back to home</button>
            </div>
          </Reveal>
        </div>
      </section>

      <style>{`
        .legal-body p { color: var(--ink-2); font-size: 15.5px; line-height: 1.7; margin: 0 0 14px; }
        .legal-body p:last-child { margin-bottom: 0; }
        .legal-body strong { color: var(--ink); font-weight: 600; }
        .legal-body ul { margin: 4px 0 16px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 11px; }
        .legal-body li { position: relative; padding-left: 26px; color: var(--ink-2); font-size: 15px; line-height: 1.6; }
        .legal-body li::before { content: ""; position: absolute; left: 6px; top: 9px; width: 7px; height: 7px; border-radius: 2px; background: var(--accent); box-shadow: 0 0 8px var(--accent-glow); }
        .legal-body a { color: var(--accent); }
        @media (max-width: 820px){
          .legal-grid { grid-template-columns: 1fr !important; }
          .legal-toc { position: static !important; }
        }
      `}</style>
    </PageShell>
  );
}

/* ============================================================
   REFUND POLICY
   ============================================================ */
function RefundPolicyPage({ onNav }) {
  const sections = [
    { id: "ref-general", h: "General policy", body: (
      <React.Fragment>
        <p><strong>No Refunds:</strong> All sales are final. We do not offer refunds or exchanges unless an exception applies as outlined below.</p>
      </React.Fragment>
    ) },
    { id: "ref-exceptions", h: "Exceptions", body: (
      <React.Fragment>
        <p><strong>Non-Functionality:</strong> If the product or service you purchased does not work as described or is defective, you may be eligible for a refund.</p>
        <ul>
          <li>You must notify us within <strong>7 days</strong> of purchase.</li>
          <li>You must provide evidence, such as screenshots, error logs, or documentation.</li>
        </ul>
      </React.Fragment>
    ) },
    { id: "ref-process", h: "Process for refund requests", body: (
      <React.Fragment>
        <ul>
          <li><strong>Contact Us:</strong> Email us at <strong>support@kvb.gg</strong> with your purchase details and a description of the issue.</li>
          <li><strong>Review:</strong> We will review your claim within <strong>10 business days</strong>.</li>
          <li>If your claim is valid, we will initiate the refund process. If denied, we will provide an explanation.</li>
        </ul>
      </React.Fragment>
    ) },
    { id: "ref-refunds", h: "Refunds", body: (
      <React.Fragment>
        <p><strong>Method:</strong> Approved refunds will be processed through the original payment method.</p>
        <p><strong>Time:</strong> Refund timing depends on your bank or payment provider.</p>
      </React.Fragment>
    ) },
    { id: "ref-none", h: "No refunds for", body: (
      <React.Fragment>
        <ul>
          <li><strong>Change of Mind:</strong> Refunds will not be issued for dissatisfaction or personal circumstances.</li>
          <li><strong>Usage:</strong> Refunds will not be provided for services that have been used or partially used.</li>
        </ul>
      </React.Fragment>
    ) },
    { id: "ref-verification", h: "Verification Service — post-delivery liability", body: (
      <React.Fragment>
        <p>Our Verification Service ($1,000) is considered fully rendered and complete at the moment the verified account is released or delivered to the client. By purchasing this service, you acknowledge and agree to the following:</p>
        <ul>
          <li><strong>No Post-Delivery Responsibility:</strong> Once the account has been released to you and the service is marked as complete, KVB bears no responsibility for any actions, outcomes, bans, suspensions, restrictions, or penalties that occur afterward — regardless of cause.</li>
          <li><strong>Account Activity:</strong> Any activity performed on the account following delivery is solely the responsibility of the account holder. KVB has no control over, and accepts no liability for, decisions made by the client or any third-party platform after delivery.</li>
          <li><strong>No Refunds Post-Delivery:</strong> Refunds will not be issued for the Verification Service once the account has been released. Disputes, chargebacks, or claims arising from post-delivery events — including but not limited to account bans or suspensions — are not eligible for a refund under any circumstances.</li>
          <li><strong>Acknowledgment:</strong> By proceeding with this purchase, the client confirms they have read and accepted these terms and waive any right to dispute charges on the basis of events occurring after service completion.</li>
        </ul>
      </React.Fragment>
    ) },
    { id: "ref-changes", h: "Changes to this policy", body: (
      <p>We reserve the right to update this policy. Changes will be reflected on this page. Please check back periodically.</p>
    ) },
    { id: "ref-contact", h: "Contact us", body: (
      <p>For questions regarding this refund policy, contact us via our live chat support: <strong>chat.kvb.gg</strong>.</p>
    ) },
  ];
  return (
    <LegalPage route="refund" onNav={onNav} eyebrow="Refund Policy" title="Refund Policy"
      updated="June 18, 2026"
      intro="All sales are final. This policy explains the limited exceptions where a refund may apply, how to request one, and the terms for our Verification Service."
      sections={sections} />
  );
}

/* ============================================================
   PRIVACY POLICY
   ============================================================ */
function PrivacyPolicyPage({ onNav }) {
  const sections = [
    { id: "pri-intro", h: "Introduction", body: (
      <p>Welcome to KVB, a service aimed at providing tools for streaming enhancement on the Kick platform. This privacy policy outlines how we collect, use, disclose, and protect your personal information.</p>
    ) },
    { id: "pri-collect", h: "Information we collect", body: (
      <ul>
        <li><strong>Registration Information:</strong> When you register or use our services, we collect personal details like your email address, username, and potentially payment information for premium services.</li>
        <li><strong>Usage Data:</strong> We automatically collect data on how you interact with our site, including IP addresses, browser types, and page views.</li>
        <li><strong>Cookies:</strong> We use cookies to enhance user experience, remember preferences, and for analytics. You can control cookies through your browser settings.</li>
      </ul>
    ) },
    { id: "pri-use", h: "How we use your information", body: (
      <ul>
        <li><strong>Service Provision:</strong> To provide, maintain, and improve our services.</li>
        <li><strong>Communication:</strong> To send you updates, promotional materials, or support-related messages.</li>
        <li><strong>Analytics:</strong> To understand usage patterns and improve our services.</li>
      </ul>
    ) },
    { id: "pri-sharing", h: "Sharing of information", body: (
      <ul>
        <li><strong>Third-Party Services:</strong> We may share your information with trusted third parties for services like payment processing or analytics.</li>
        <li><strong>Legal Compliance:</strong> We may disclose information if required by law or to protect our rights.</li>
      </ul>
    ) },
    { id: "pri-security", h: "Data security", body: (
      <p>We implement industry-standard security measures to protect your data, but no method is entirely secure.</p>
    ) },
    { id: "pri-rights", h: "User rights", body: (
      <ul>
        <li><strong>Access:</strong> You can request access to see what data we hold about you.</li>
        <li><strong>Correction:</strong> You can ask for inaccuracies in your data to be corrected.</li>
        <li><strong>Deletion:</strong> You can request your data be deleted, subject to legal retention obligations.</li>
      </ul>
    ) },
    { id: "pri-changes", h: "Changes to this privacy policy", body: (
      <p>We may update this policy periodically. Changes will be reflected on this page, so please check back regularly.</p>
    ) },
    { id: "pri-additional", h: "Additional considerations for KVB", body: (
      <ul>
        <li><strong>Legal Compliance:</strong> Viewbotting is against platform terms of service. This policy assumes lawful and ethical use of our tools.</li>
        <li><strong>Ethical Use:</strong> Ensure your use aligns with platform rules and applicable laws. Transparency is key for educational or testing purposes.</li>
      </ul>
    ) },
  ];
  return (
    <LegalPage route="privacy" onNav={onNav} eyebrow="Privacy Policy" title="Privacy Policy"
      updated="June 18, 2026"
      intro="Your privacy matters. This page explains what we collect, why, and the control you have over your information."
      sections={sections} />
  );
}

Object.assign(window, { RefundPolicyPage, PrivacyPolicyPage });