// NekoShop — Info page (Install guide, License terms, Refund policy)

const { useState: useStateI, useEffect: useEffectI } = React;

function InfoPage({ section }) {
  const { go } = useRouter();
  const cfg = window.NEKO_CONFIG;
  const tabs = [
    { id: "install", label: "Install guide" },
    { id: "license", label: "License terms" },
    { id: "refund",  label: "Refund policy" },
  ];
  const valid = tabs.map(t => t.id);
  const initial = valid.includes(section) ? section : "install";
  const [tab, setTab] = useStateI(initial);

  useEffectI(() => { if (valid.includes(section)) setTab(section); }, [section]);

  return (
    <main className="container" style={{ paddingTop: 56, paddingBottom: 32, maxWidth: 960 }}>
      <div style={{ fontFamily: "var(--mono)", fontSize: 11, color: "var(--muted)", letterSpacing: "0.06em", textTransform: "uppercase", marginBottom: 28 }}>
        <a href="#/" style={{ color: "var(--muted)", textDecoration: "none" }} onClick={(e)=>{e.preventDefault();go("/");}}>NekoShop</a>
        <span style={{ margin: "0 8px" }}>/</span>
        <span style={{ color: "var(--ink)" }}>Support</span>
      </div>

      <h1 style={{ fontSize: 44, fontWeight: 600, letterSpacing: "-0.025em", margin: 0 }}>Support & terms</h1>
      <p style={{ fontSize: 15, color: "var(--muted)", marginTop: 14, marginBottom: 32, maxWidth: 560, lineHeight: 1.55 }}>
        Everything about installing your purchase, the whitelist licence, and the refund policy.
      </p>

      {/* Tabs */}
      <div style={{ display: "flex", gap: 4, borderBottom: "1px solid var(--border)", marginBottom: 32 }}>
        {tabs.map(t => (
          <button key={t.id} onClick={() => { setTab(t.id); go(`/info/${t.id}`); }} style={{
            padding: "12px 18px", border: "none", background: "transparent", cursor: "pointer",
            fontFamily: "var(--sans)", fontSize: 14, fontWeight: 500,
            color: tab === t.id ? "var(--ink)" : "var(--muted)",
            position: "relative",
          }}>
            {t.label}
            {tab === t.id && <span style={{ position: "absolute", left: 0, right: 0, bottom: -1, height: 2, background: "var(--accent)" }} />}
          </button>
        ))}
      </div>

      {tab === "install"  && <InstallGuide cfg={cfg} />}
      {tab === "license"  && <LicenseTerms cfg={cfg} />}
      {tab === "refund"   && <RefundPolicy />}
    </main>
  );
}

function InfoSection({ title, children }) {
  return (
    <section style={{ marginBottom: 36 }}>
      <h2 style={{ fontSize: 22, fontWeight: 600, letterSpacing: "-0.015em", margin: 0, marginBottom: 14 }}>{title}</h2>
      <div style={{ fontSize: 15, color: "var(--muted)", lineHeight: 1.65 }}>{children}</div>
    </section>
  );
}

// ──────────────────────────────────────────────────────────────────
// Install guide
// ──────────────────────────────────────────────────────────────────
function InstallGuide({ cfg }) {
  return (
    <div>
      <InfoSection title="How delivery works">
        <p>NekoShop systems are delivered <strong style={{ color: "var(--ink)" }}>directly to your Roblox toolbox</strong>. After you confirm payment, the seller manually verifies the receipt and sends the model to your Roblox account.</p>
        <ol style={{ paddingLeft: 18, marginTop: 14, lineHeight: 1.8 }}>
          <li>Pay via QRIS, PayPal, or Roblox gamepass.</li>
          <li><a href={cfg.discordInvite} target="_blank" rel="noreferrer" style={infoLink}>Join Discord</a> and <a href={cfg.discordTicketUrl} target="_blank" rel="noreferrer" style={infoLink}>open a ticket</a>.</li>
          <li>Send your payment receipt + Roblox username in the ticket.</li>
          <li>Add <strong style={{ color: "var(--ink)", fontFamily: "var(--mono)" }}>{cfg.robloxSeller}</strong> as a friend on Roblox.</li>
          <li>The system appears in your <strong style={{ color: "var(--ink)" }}>Toolbox &rarr; Inventory</strong>.</li>
        </ol>
      </InfoSection>

      <InfoSection title="Adding the system to Roblox Studio">
        <ol style={{ paddingLeft: 18, marginTop: 0, lineHeight: 1.8 }}>
          <li>Open Roblox Studio and load the place you want to install into.</li>
          <li>Open the <strong style={{ color: "var(--ink)" }}>Toolbox</strong> panel (View &rarr; Toolbox).</li>
          <li>Switch to the <strong style={{ color: "var(--ink)" }}>Inventory</strong> tab and find the model the seller sent.</li>
          <li>Right-click the model and choose <strong style={{ color: "var(--ink)" }}>Insert</strong>. It drops into Workspace.</li>
          <li>Open <strong style={{ color: "var(--ink)" }}>Game Settings &rarr; Security</strong>. Enable <strong style={{ color: "var(--ink)" }}>Allow HTTP Requests</strong> and <strong style={{ color: "var(--ink)" }}>Enable Studio Access to API Services</strong>.</li>
          <li>Open the model's config file and customise to taste.</li>
          <li>Watch the per-system video on the <a href={cfg.youtubeChannel} target="_blank" rel="noreferrer" style={infoLink}>Neko_Omen YouTube channel</a> for setup specifics.</li>
        </ol>
      </InfoSection>

      <InfoSection title="Need help?">
        <p>Installation support is handled in the <strong style={{ color: "var(--ink)" }}>nomenfams</strong> Discord. Open a ticket and we'll walk you through it.</p>
        <div style={{ marginTop: 14, display: "flex", gap: 10 }}>
          <a href={cfg.discordInvite} target="_blank" rel="noreferrer" style={pillBtn(true)}>Open Discord ↗</a>
          <a href={cfg.youtubeChannel} target="_blank" rel="noreferrer" style={pillBtn(false)}>YouTube tutorials ↗</a>
        </div>
      </InfoSection>
    </div>
  );
}

// ──────────────────────────────────────────────────────────────────
// License terms
// ──────────────────────────────────────────────────────────────────
function LicenseTerms({ cfg }) {
  return (
    <div>
      <InfoSection title="Whitelist licence">
        <p>Every paid NekoShop system is protected by a <strong style={{ color: "var(--ink)" }}>whitelist licence</strong>. Each purchase activates the product for <strong style={{ color: "var(--ink)" }}>1 Roblox account + 1 community ID</strong> only.</p>
        <ul style={{ paddingLeft: 18, marginTop: 14, lineHeight: 1.8 }}>
          <li>A different account means a different licence — full re-purchase required.</li>
          <li>Only <strong style={{ color: "var(--ink)" }}>1 Account ID</strong> is allowed per purchase.</li>
          <li>Additional <strong style={{ color: "var(--ink)" }}>Community IDs</strong> (yours) require a separate licence per ID.</li>
          <li>For each additional community, purchase the <a href="#/p/whitelist-addition" style={infoLink}>Whitelist Addition</a> add-on.</li>
        </ul>
      </InfoSection>

      <InfoSection title="Permitted use">
        <ul style={{ paddingLeft: 18, marginTop: 0, lineHeight: 1.8 }}>
          <li>Use the system inside your own Roblox experience(s) covered by the whitelist.</li>
          <li>Customise the config and visuals for your community's branding.</li>
        </ul>
      </InfoSection>

      <InfoSection title="Prohibited">
        <ul style={{ paddingLeft: 18, marginTop: 0, lineHeight: 1.8 }}>
          <li>Re-selling, re-distributing, or sharing the system files publicly.</li>
          <li>Removing or bypassing the whitelist protection.</li>
          <li>Claiming the system as your own work.</li>
        </ul>
      </InfoSection>

      <InfoSection title="Whitelist Addition">
        <p>Need to add another community to an existing system? Buy the Whitelist Addition for <strong style={{ color: "var(--ink)" }}>Rp 100.000 / $6 USD / R$ 1,430 per community ID</strong>. Activation is instant once the seller verifies the payment.</p>
        <div style={{ marginTop: 14 }}>
          <a href="#/p/whitelist-addition" style={pillBtn(true)}>View Whitelist Addition →</a>
        </div>
      </InfoSection>
    </div>
  );
}

// ──────────────────────────────────────────────────────────────────
// Refund policy
// ──────────────────────────────────────────────────────────────────
function RefundPolicy() {
  return (
    <div>
      <div style={{
        padding: 24, border: "1px solid var(--accent)", borderRadius: 6,
        background: "oklch(0.97 0.02 22)", marginBottom: 28,
      }}>
        <div style={{ fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--accent)", fontWeight: 700, marginBottom: 6 }}>
          Important
        </div>
        <p style={{ margin: 0, fontSize: 15, color: "var(--ink)", lineHeight: 1.6 }}>
          <strong>No refunds or compensation of any kind</strong> after payment has been made, as long as the product is functioning as intended. By purchasing, you are considered to have read, understood, and agreed to these terms.
        </p>
      </div>

      <InfoSection title="What this means">
        <ul style={{ paddingLeft: 18, marginTop: 0, lineHeight: 1.8 }}>
          <li>All sales are <strong style={{ color: "var(--ink)" }}>final</strong> once payment is confirmed and the system is delivered.</li>
          <li>"Functioning as intended" means the system performs the features shown in the trailer / product page.</li>
          <li>Buyer's remorse, change of mind, or no longer needing the system are not grounds for refund.</li>
        </ul>
      </InfoSection>

      <InfoSection title="When we will help">
        <p>If the system is genuinely broken or doesn't match what was advertised, open a ticket in the Discord — we'll either fix it or, in extreme cases, replace it. Free patch updates are included for the lifetime of the system within reason.</p>
      </InfoSection>

      <InfoSection title="Service add-ons">
        <p>Beyond marketplace systems, the seller also offers:</p>
        <ul style={{ paddingLeft: 18, marginTop: 14, lineHeight: 1.8 }}>
          <li><strong style={{ color: "var(--ink)" }}>Fix Scripts</strong> — pricing depends on difficulty and complexity.</li>
          <li><strong style={{ color: "var(--ink)" }}>Create / Sell Systems</strong> — pricing depends on the system.</li>
          <li><strong style={{ color: "var(--ink)" }}>Custom requests</strong> — explain what you need; the seller will approve if possible or let you know if not.</li>
        </ul>
      </InfoSection>

      <InfoSection title="Agreement">
        <p>By completing checkout, you agree to the licence terms and this refund policy. If you have questions <em>before</em> purchasing, open a ticket — that's exactly what it's for.</p>
      </InfoSection>
    </div>
  );
}

// ──────────────────────────────────────────────────────────────────
// Shared styles
// ──────────────────────────────────────────────────────────────────
const infoLink = { color: "var(--accent)", textDecoration: "none", fontWeight: 500 };
const pillBtn = (primary) => ({
  display: "inline-flex", alignItems: "center", gap: 8, padding: "10px 18px",
  borderRadius: 999, textDecoration: "none", fontFamily: "var(--sans)",
  fontSize: 13, fontWeight: 500,
  background: primary ? "var(--ink)" : "var(--bg)",
  color: primary ? "var(--bg)" : "var(--ink)",
  border: "1px solid", borderColor: primary ? "var(--ink)" : "var(--border)",
});

Object.assign(window, { InfoPage });