import Image from "next/image";
import Container from "@/components/ui/Container";
import { ButtonLink } from "@/components/ui/Button";
import Tabs, { type TabItem } from "@/components/docs/Tabs";

export const metadata = { title: "Account Deletion Guide | allBETs" };

function StepList({ steps }: { steps: string[] }) {
  return (
    <ol className="flex flex-col gap-3 list-decimal list-inside marker:font-bold marker:text-accent-500">
      {steps.map((step, i) => (
        <li key={i} className="text-sm sm:text-[15px] leading-relaxed text-neutral-800 pl-1">
          {step}
        </li>
      ))}
    </ol>
  );
}

const webpageSteps = [
  "Sign in to allBETs Go at app.allbetsgo.com.",
  "In the top right, click your profile icon.",
  "Click Profile Settings.",
  "In Profile Settings, click Delete Account.",
  "Type your account email and password into the input fields when prompted.",
  "Once both fields are filled in, the “Permanently delete my account” button unlocks.",
  "Click “Permanently delete my account” to submit the request."
];

// The two mobile flows use the app's bottom tab bar / in-app settings screen, not a
// top-right profile icon — that instruction only applies to the web app. Written
// separately from the web steps rather than reused, since the earlier live page
// duplicated the web copy verbatim for both mobile platforms.
const iosSteps = [
  "Open the allBETs Go app and sign in.",
  "Tap the Profile tab in the bottom navigation bar.",
  "Tap the gear (Settings) icon in the top right of your profile.",
  "Scroll down and tap Delete Account.",
  "Enter your account email and password when prompted.",
  "Confirm by tapping “Permanently delete my account.”",
  "You'll get a confirmation email once the request has been processed."
];

const androidSteps = [
  "Open the allBETs Go app and sign in.",
  "Tap the Profile tab in the bottom navigation bar.",
  "Tap the three-dot menu, then tap Settings.",
  "Scroll down and tap Delete Account.",
  "Enter your account email and password when prompted.",
  "Confirm by tapping “Permanently delete my account.”",
  "You'll get a confirmation email once the request has been processed."
];

function PagerIcon() {
  return (
    <svg viewBox="0 0 24 24" className="h-4 w-4" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" aria-hidden>
      <rect x="3" y="4" width="18" height="16" rx="2" />
      <path d="M3 9h18M8 4v16" />
    </svg>
  );
}

function AppleIcon() {
  return (
    <svg viewBox="0 0 24 24" className="h-4 w-4" fill="currentColor" aria-hidden>
      <path d="M16.365 1.43c0 1.14-.415 2.06-1.244 2.75-.83.72-1.79 1.14-2.87 1.06-.13-1.08.34-2.02 1.16-2.72.83-.72 1.9-1.15 2.95-1.09Zm3.66 16.31c-.36.83-.79 1.6-1.29 2.32-.68 1-1.37 2-2.47 2.02-1.08.02-1.43-.63-2.66-.63-1.24 0-1.62.61-2.66.65-1.07.04-1.88-1.08-2.57-2.07-1.4-2.02-2.47-5.71-1.03-8.2.71-1.24 1.98-2.02 3.36-2.04 1.03-.02 2 .69 2.63.69.63 0 1.8-.86 3.04-.73.52.02 1.98.21 2.91 1.58-.08.05-1.74.99-1.72 2.96.02 2.35 2.06 3.13 2.08 3.14-.02.07-.32 1.13-1.62 2.31Z" />
    </svg>
  );
}

function AndroidIcon() {
  return (
    <svg viewBox="0 0 24 24" className="h-4 w-4" fill="currentColor" aria-hidden>
      <path d="M17.6 9.48 19 7c.1-.18.05-.42-.13-.53a.39.39 0 0 0-.53.13l-1.47 2.55a8.9 8.9 0 0 0-7.74 0L7.66 6.6a.39.39 0 0 0-.53-.13c-.18.11-.24.35-.13.53l1.4 2.48A8.44 8.44 0 0 0 4 16h16a8.44 8.44 0 0 0-2.4-6.52ZM8.5 14a1 1 0 1 1 0-2 1 1 0 0 1 0 2Zm7 0a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z" />
    </svg>
  );
}

export default function AccountDeletionGuidePage() {
  const tabs: TabItem[] = [
    { key: "web", label: "Webpage", icon: <PagerIcon />, content: <StepList steps={webpageSteps} /> },
    { key: "ios", label: "iOS app", icon: <AppleIcon />, content: <StepList steps={iosSteps} /> },
    { key: "android", label: "Android app", icon: <AndroidIcon />, content: <StepList steps={androidSteps} /> }
  ];

  return (
    <>
      <div className="relative h-[clamp(120px,22vw,260px)] bg-neutral-300">
        <Image
          src="/images/account-deletion-guide/page-banner.jpg"
          alt=""
          fill
          sizes="100vw"
          className="object-cover"
          priority
        />
        <div className="absolute inset-0 bg-ink/45" />
        <div className="absolute left-0 right-0 bottom-0 px-[5%] lg:px-10 pb-6">
          <div className="text-xs text-white/85 mb-1.5">Home / Account Deletion Guide</div>
          <h1 className="font-display font-extrabold text-[26px] sm:text-4xl text-white m-0">Account Deletion Guide</h1>
        </div>
      </div>

      <section className="bg-bg">
        <Container className="!max-w-content pt-9 sm:pt-12 lg:pt-16 pb-10">
          <p className="text-xs font-bold uppercase tracking-[0.14em] text-accent-500 mb-3.5">Overview</p>
          <h2 className="font-display font-black text-[28px] sm:text-4xl leading-tight tracking-[-0.02em] text-ink mb-4 max-w-2xl">
            How to delete your allBETs account
          </h2>
          <p className="max-w-2xl text-neutral-700">
            This page guides you through deleting your allBETs account on the web app, iOS, and Android.
          </p>
          <p className="max-w-2xl text-neutral-700 mt-3">
            Deleting your account will prevent you from using it to access allBETs services, including
            allBETs Go and other linked accounts. You will not be able to create a new account using the
            same email address. Once deleted, we remove your data within 30 days, except for a limited set
            of records we may retain longer where required or permitted by law.
          </p>

          <div className="mt-6 rounded-xl2 border border-gold-500/60 bg-gold-100 p-4 sm:p-5 flex items-start gap-3">
            <span className="shrink-0 mt-0.5 h-5 w-5 rounded-full bg-gold-500 text-ink text-xs font-black flex items-center justify-center">!</span>
            <p className="text-sm text-ink font-medium m-0">
              Deleting your account is permanent and cannot be undone.
            </p>
          </div>

          <div className="mt-10 max-w-3xl">
            <Tabs items={tabs} />
          </div>
        </Container>

        <Container className="!max-w-content pb-9 sm:pb-12">
          <div className="relative overflow-hidden bg-ink rounded-[20px] p-7 sm:p-[30px] flex flex-wrap items-center justify-between gap-4">
            <div>
              <div className="font-display font-extrabold text-base text-white mb-1">Prefer we do it for you?</div>
              <div className="text-[13px] text-neutral-400">Submit a deletion request and our team will process it within 30 days.</div>
            </div>
            <ButtonLink href="/delete-account-request" variant="gold" className="shrink-0">
              Request Account Deletion
            </ButtonLink>
          </div>
        </Container>
      </section>
    </>
  );
}