"use client";

import Image from "next/image";
import Link from "next/link";
import { useLocale } from "@/i18n/LocaleProvider";
import { TranslationKey } from "@/i18n/dictionaries";
import { CONTACT } from "@/content/legal";
import { Icon, IconName, WhatsAppIcon, AppleIcon, AndroidIcon } from "./icons";

const INVESTOR_URL = process.env.NEXT_PUBLIC_INVESTOR_URL ?? "#";

export function Hero() {
  const { t } = useLocale();
  return (
    <section id="top" className="relative overflow-hidden">
      <div
        aria-hidden
        className="pointer-events-none absolute inset-x-0 -top-40 mx-auto h-96 max-w-4xl rounded-full bg-brand-soft/40 blur-3xl"
      />
      <div className="mx-auto grid max-w-6xl items-center gap-10 px-5 py-16 md:grid-cols-2 md:py-24">
        <div>
          <span className="inline-flex items-center rounded-full border border-line bg-surface px-3 py-1 text-xs font-medium text-muted">
            {t("hero.tag")}
          </span>
          <h1 className="mt-5 text-4xl font-extrabold leading-[1.1] tracking-tight md:text-6xl">
            {t("hero.title")}
          </h1>
          <p className="mt-5 max-w-md text-lg text-muted">{t("hero.subtitle")}</p>
          <div className="mt-8 flex flex-wrap gap-3">
            <a href="#download" className="btn-primary px-6 py-3 text-base">
              {t("hero.ctaPrimary")}
            </a>
            <a href="#how" className="btn-ghost px-6 py-3 text-base">
              {t("hero.ctaSecondary")}
            </a>
          </div>
        </div>

        <div className="flex justify-center">
          <div className="relative flex h-72 w-72 items-center justify-center rounded-full bg-gradient-to-br from-brand-soft to-brand-deep shadow-card md:h-96 md:w-96">
            <Image
              src="/ScooterIcon.png"
              alt="BeebBeeb scooter"
              width={360}
              height={360}
              className="h-60 w-60 object-contain md:h-80 md:w-80"
              priority
            />
          </div>
        </div>
      </div>
    </section>
  );
}

export function About() {
  const { t } = useLocale();
  return (
    <section id="about" className="bg-surface">
      <div className="mx-auto grid max-w-6xl items-center gap-12 px-5 py-16 md:grid-cols-2 md:py-24">
        <div>
          <h2 className="text-3xl font-bold tracking-tight md:text-4xl">{t("about.title")}</h2>
          <p className="mt-5 text-lg leading-relaxed text-muted">{t("about.body")}</p>
        </div>
        <div className="flex justify-center">
          <PhoneShot />
        </div>
      </div>
    </section>
  );
}

/** A real screenshot of the app, framed as a phone. */
function PhoneShot() {
  return (
    <div className="relative w-full max-w-[280px]">
      <div
        aria-hidden
        className="pointer-events-none absolute inset-0 -z-10 mx-auto h-full w-3/4 rounded-full bg-brand-soft/40 blur-3xl"
      />
      <div className="rounded-[2.5rem] border-[6px] border-brand-ink bg-brand-ink p-1 shadow-card">
        <Image
          src="/app-home.png"
          alt="BeebBeeb app"
          width={1080}
          height={2400}
          className="w-full rounded-[2rem]"
        />
      </div>
    </div>
  );
}

interface Item {
  icon: IconName;
  key: TranslationKey;
}

const SERVICES: Item[] = [
  { icon: "ride", key: "svc.rental" },
  { icon: "app", key: "svc.app" },
  { icon: "map", key: "svc.map" },
  { icon: "scan", key: "svc.scan" },
  { icon: "card", key: "svc.pay" },
  { icon: "support", key: "svc.support" },
];

export function Services() {
  const { t } = useLocale();
  return (
    <section id="services" className="mx-auto max-w-6xl px-5 py-16 md:py-24">
      <h2 className="text-center text-3xl font-bold tracking-tight md:text-4xl">
        {t("services.title")}
      </h2>
      <div className="mt-12 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
        {SERVICES.map((s) => (
          <div
            key={s.key}
            className="flex flex-col items-center rounded-2xl border border-line p-7 text-center"
          >
            <div className="flex h-16 w-16 items-center justify-center rounded-full bg-brand-soft/40 text-brand-ink">
              <Icon name={s.icon} className="h-7 w-7" />
            </div>
            <h3 className="mt-4 text-base font-bold leading-snug">{t(s.key)}</h3>
          </div>
        ))}
      </div>
    </section>
  );
}

const STEPS: Item[] = [
  { icon: "download", key: "step.download" },
  { icon: "user", key: "step.register" },
  { icon: "wallet", key: "step.wallet" },
  { icon: "ride", key: "step.ride" },
];

export function Steps() {
  const { t } = useLocale();
  return (
    <section id="how" className="bg-surface">
      <div className="mx-auto max-w-6xl px-5 py-16 md:py-24">
        <h2 className="text-center text-3xl font-bold tracking-tight md:text-4xl">
          {t("steps.title")}
        </h2>
        <div className="mt-12 grid gap-8 sm:grid-cols-2 lg:grid-cols-4">
          {STEPS.map((s, i) => (
            <div key={s.key} className="flex flex-col items-center text-center">
              <div className="relative flex h-20 w-20 items-center justify-center rounded-full bg-gradient-to-br from-brand-soft to-brand-deep text-brand-ink shadow-card">
                <Icon name={s.icon} className="h-8 w-8" />
                <span className="absolute -end-1 -top-1 flex h-7 w-7 items-center justify-center rounded-full bg-brand-ink text-xs font-bold text-white">
                  {i + 1}
                </span>
              </div>
              <h3 className="mt-4 text-base font-bold">{t(s.key)}</h3>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

const FAQS: { q: TranslationKey; a: TranslationKey }[] = [
  { q: "faq.q1", a: "faq.a1" },
  { q: "faq.q2", a: "faq.a2" },
  { q: "faq.q3", a: "faq.a3" },
  { q: "faq.q4", a: "faq.a4" },
];

export function Faq() {
  const { t } = useLocale();
  return (
    <section id="faq" className="mx-auto max-w-3xl px-5 py-16 md:py-24">
      <h2 className="text-center text-3xl font-bold tracking-tight md:text-4xl">
        {t("faq.title")}
      </h2>
      <div className="mt-10 space-y-3">
        {FAQS.map((f) => (
          <details
            key={f.q}
            className="group rounded-xl border border-line bg-surface p-5 [&_summary]:cursor-pointer"
          >
            <summary className="flex items-center justify-between text-base font-semibold marker:content-['']">
              {t(f.q)}
              <span className="ms-3 text-brand transition group-open:rotate-45">+</span>
            </summary>
            <p className="mt-3 text-sm leading-relaxed text-muted">{t(f.a)}</p>
          </details>
        ))}
      </div>
    </section>
  );
}

const INFO: { key: TranslationKey; href: string }[] = [
  { key: "info.usage", href: "/#how" },
  { key: "info.account", href: "/#how" },
  { key: "info.safety", href: "/terms" },
  { key: "info.privacy", href: "/privacy" },
];

export function InfoPages() {
  const { t } = useLocale();
  return (
    <section id="info" className="bg-surface">
      <div className="mx-auto max-w-6xl px-5 py-16 md:py-24">
        <h2 className="text-center text-3xl font-bold tracking-tight md:text-4xl">
          {t("info.title")}
        </h2>
        <div className="mt-10 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
          {INFO.map((p) => (
            <Link
              key={p.key}
              href={p.href}
              className="flex items-center justify-between rounded-xl border border-line bg-background p-5 text-sm font-semibold transition hover:border-brand"
            >
              {t(p.key)}
              <span className="text-muted rtl:rotate-180">→</span>
            </Link>
          ))}
        </div>
      </div>
    </section>
  );
}

export function Investors() {
  const { t } = useLocale();
  return (
    <section id="investors" className="mx-auto max-w-6xl px-5 py-16 md:py-24">
      <div className="overflow-hidden rounded-3xl bg-brand-ink px-8 py-14 text-center text-white md:px-16">
        <span className="inline-flex items-center rounded-full bg-white/10 px-3 py-1 text-xs font-medium text-brand-soft">
          {t("investors.tag")}
        </span>
        <h2 className="mx-auto mt-5 max-w-2xl text-3xl font-bold tracking-tight md:text-4xl">
          {t("investors.title")}
        </h2>
        <p className="mx-auto mt-4 max-w-xl text-white/70">{t("investors.body")}</p>
        <a href={INVESTOR_URL} className="btn-primary mt-8 px-6 py-3 text-base">
          {t("investors.cta")}
        </a>
      </div>
    </section>
  );
}

export function Download() {
  const { t } = useLocale();
  return (
    <section id="download" className="mx-auto max-w-6xl px-5 py-16 text-center md:py-20">
      <h2 className="text-3xl font-bold tracking-tight md:text-4xl">{t("download.title")}</h2>
      <p className="mx-auto mt-3 max-w-md text-muted">{t("download.subtitle")}</p>
      <div className="mt-8 flex flex-wrap justify-center gap-3">
        <StoreButton label={t("download.ios")} kind="ios" />
        <StoreButton label={t("download.android")} kind="android" />
      </div>
    </section>
  );
}

function StoreButton({ label, kind }: { label: string; kind: "ios" | "android" }) {
  return (
    <a
      href="#"
      className="inline-flex items-center gap-3 rounded-xl bg-brand-ink px-5 py-3 text-white transition hover:opacity-90"
    >
      {kind === "ios" ? <AppleIcon className="h-7 w-7" /> : <AndroidIcon className="h-7 w-7" />}
      <span className="text-start text-sm font-semibold leading-tight">{label}</span>
    </a>
  );
}

export function Suggestions() {
  const { t } = useLocale();
  return (
    <section id="contact" className="mx-auto max-w-6xl px-5 pb-24">
      <div className="flex flex-col items-center justify-between gap-6 rounded-3xl border border-line bg-surface px-8 py-10 text-center md:flex-row md:text-start">
        <div>
          <h2 className="text-2xl font-bold tracking-tight md:text-3xl">{t("contact.title")}</h2>
          <a
            href={`tel:${CONTACT.phone.replace(/\s/g, "")}`}
            className="mt-2 inline-block text-muted hover:text-foreground"
          >
            <span dir="ltr">{CONTACT.phone}</span>
          </a>
        </div>
        <a
          href={`https://wa.me/${CONTACT.whatsapp}`}
          target="_blank"
          rel="noopener noreferrer"
          className="inline-flex items-center gap-2.5 rounded-full bg-[#25D366] px-6 py-3 font-semibold text-white transition hover:opacity-90"
        >
          <WhatsAppIcon className="h-6 w-6" />
          {t("contact.whatsapp")}
        </a>
      </div>
    </section>
  );
}