/* global React, Icon */

const LEGAL_COPY = {
  Terms: {
    eyebrow: "Subscriber Terms",
    title: "Terms of Service",
    intro: "These terms govern access to VIRAL TENSION Streaming.",
    sections: [
      {
        title: "Streaming access",
        body: "A subscription grants personal, non-transferable streaming access to the tracks and site features made available in your account. Audio may be streamed through the service for private listening only.",
      },
      {
        title: "No redistribution",
        body: "You may not copy, rip, download, record, redistribute, sell, publicly perform, re-host, bypass access controls, or attempt to extract protected audio or site data outside the features provided by the service.",
      },
      {
        title: "Accounts",
        body: "You are responsible for activity under your account and for keeping your login secure. VIRAL TENSION may limit or suspend access for abuse, fraud, security risk, or violation of these terms.",
      },
      {
        title: "Catalog changes",
        body: "Tracks, playlists, artwork, features, and availability may change over time. The service may be updated, paused, or discontinued if needed.",
      },
    ],
  },
  Privacy: {
    eyebrow: "Privacy",
    title: "Privacy Policy",
    intro: "This draft explains what VIRAL TENSION Streaming uses to operate the service.",
    sections: [
      {
        title: "Account and billing data",
        body: "The service uses account information such as your email address, display name, and profile photo when provided by login services. Stripe handles payment details; VIRAL TENSION receives subscription and billing status information needed to grant access and support the account.",
      },
      {
        title: "Usage analytics",
        body: "The service may record sessions, track starts, subscription state, revenue summaries, and related operational analytics to understand listening activity, manage the catalog, detect problems, and improve the experience.",
      },
      {
        title: "Service providers",
        body: "VIRAL TENSION relies on service providers for hosting, login, payments, storage, analytics infrastructure, and transactional email. Data is shared with those providers only as needed to run those functions.",
      },
      {
        title: "Contact",
        body: "For privacy questions or account support, email viraltension@gmail.com.",
      },
    ],
  },
  Cancellation: {
    eyebrow: "Billing",
    title: "Cancellation & Refunds",
    intro: "This draft sets expectations for the subscription and trial.",
    sections: [
      {
        title: "Trial and monthly billing",
        body: "The subscription begins with a 3-day trial and then renews at $4.99 per month unless canceled before the trial ends.",
      },
      {
        title: "Cancel anytime",
        body: "You can manage or cancel billing from the account page through the Stripe billing portal. Cancellation stops future renewals according to the billing portal status shown for your subscription.",
      },
      {
        title: "Refund requests",
        body: "If something goes wrong with access or billing, contact viraltension@gmail.com. Refund requests are reviewed case by case, including duplicate charges, technical access issues, or other billing mistakes.",
      },
      {
        title: "Support",
        body: "Please include the email used for your account and a short description of the issue so support can find the subscription quickly.",
      },
    ],
  },
};

const LegalScreen = ({ page = "Terms", onNav }) => {
  const copy = LEGAL_COPY[page] || LEGAL_COPY.Terms;
  return (
    <div className="legal-page page page-pad-top" data-screen-label={`Legal ${page}`}>
      <section className="legal-hero glass">
        <button className="btn btn-ghost" onClick={() => onNav("Account")}>
          <Icon name="chevLeft" size={14} /> Account
        </button>
        <span className="eyebrow">{copy.eyebrow}</span>
        <h1 className="display display-md">{copy.title}</h1>
        <p>{copy.intro}</p>
      </section>
      <section className="legal-grid">
        {copy.sections.map((section) => (
          <article key={section.title} className="legal-section glass">
            <h2>{section.title}</h2>
            <p>{section.body}</p>
          </article>
        ))}
      </section>
    </div>
  );
};

window.LegalScreen = LegalScreen;