"use client";

import Link from "next/link";
import { useEffect, useState } from "react";
import { ArrowLeft, ArrowRight, ShieldCheck, SlidersHorizontal, UserCircle2, Lock, Smartphone, KeyRound, MailCheck, LogIn, Layers } from "lucide-react";
import { useLanguage } from "@/components/language-provider";
import { useLoginModal } from "@/components/login-modal-provider";
import { buttonVariants } from "@/components/ui/button";
import { Reveal } from "@/components/ui/reveal";
import { ScrollProgress } from "@/components/ui/scroll-progress";
import { cn } from "@/lib/utils";

export default function Home() {
  const { t, lang } = useLanguage();
  const { open: openLogin } = useLoginModal();
  const Arrow = lang === "fa" ? ArrowLeft : ArrowRight;
  const [heroIn, setHeroIn] = useState(false);

  useEffect(() => {
    const t = setTimeout(() => setHeroIn(true), 80);
    return () => clearTimeout(t);
  }, []);

  const CHIPS = [
    { icon: ShieldCheck, fa: "احراز هویت امن", en: "Secure auth" },
    { icon: MailCheck, fa: "تأیید ایمیل", en: "Email verified" },
    { icon: LogIn, fa: "ورود بی‌دردسر", en: "Frictionless login" },
    { icon: Layers, fa: "احراز چند مرحله‌ای", en: "Multi-step auth" },
  ];

  return (
    <main className="bg-white dark:bg-white">
      <ScrollProgress />

      <section className="mx-auto max-w-4xl px-6 pb-14 pt-16 text-center sm:pt-24 overflow-hidden">
        <div
          className="inline-flex items-center rounded-full border border-violet-100 bg-[#f4f2ff] px-3.5 py-1.5 text-xs font-medium text-[#6d5ef0]"
          style={{
            opacity: heroIn ? 1 : 0,
            transform: heroIn ? "translateY(0)" : "translateY(10px)",
            transition: "opacity 500ms ease 0ms, transform 500ms cubic-bezier(0.16,1,0.3,1) 0ms",
          }}
        >
          {t.hero.badge}
        </div>
        <h1
          className="mt-5 text-4xl font-extrabold leading-[1.15] tracking-tight text-[#1c1d3a] sm:text-[52px]"
          style={{
            opacity: heroIn ? 1 : 0,
            transform: heroIn ? "translateY(0)" : "translateY(16px)",
            transition: "opacity 600ms ease 120ms, transform 600ms cubic-bezier(0.16,1,0.3,1) 120ms",
          }}
        >
          {t.hero.title}
        </h1>
        <p
          className="mx-auto mt-4 max-w-2xl text-[15px] leading-7 text-slate-500"
          style={{
            opacity: heroIn ? 1 : 0,
            transform: heroIn ? "translateY(0)" : "translateY(14px)",
            transition: "opacity 600ms ease 240ms, transform 600ms cubic-bezier(0.16,1,0.3,1) 240ms",
          }}
        >
          {t.hero.subtitle}
        </p>
        <div
          className="mt-8 flex flex-wrap items-center justify-center gap-3"
          style={{
            opacity: heroIn ? 1 : 0,
            transform: heroIn ? "translateY(0)" : "translateY(12px)",
            transition: "opacity 600ms ease 360ms, transform 600ms cubic-bezier(0.16,1,0.3,1) 360ms",
          }}
        >
          <button onClick={openLogin} className={cn(buttonVariants({ size: "lg" }), "rounded-full px-8 bg-[#6d5ef0] hover:bg-[#5747d8] text-white shadow-[0_8px_24px_rgba(109,94,240,0.35)] hover:scale-[1.02] transition-transform")}>
            {t.hero.ctaPrimary}
            <Arrow className="h-4 w-4" />
          </button>
          <Link
            href="/account"
            className="inline-flex h-12 items-center justify-center gap-2 rounded-full border border-slate-200 bg-white px-8 text-sm font-semibold text-slate-700 hover:bg-slate-50 hover:scale-[1.02] transition-transform"
          >
            {t.hero.ctaSecondary}
          </Link>
        </div>

        <div
          className="mt-12 flex flex-wrap items-center justify-center gap-x-8 gap-y-4"
          style={{ opacity: heroIn ? 1 : 0, transition: "opacity 700ms ease 520ms" }}
        >
          {CHIPS.map((c) => (
            <span key={c.fa} className="inline-flex items-center gap-2 text-sm font-medium text-slate-600">
              <span className="flex h-9 w-9 items-center justify-center rounded-full bg-[#f4f2ff] text-[#6d5ef0]">
                <c.icon className="h-[18px] w-[18px]" />
              </span>
              {lang === "fa" ? c.fa : c.en}
            </span>
          ))}
        </div>
      </section>

      <section id="benefits" className="bg-[#f8f9fa] py-16 sm:py-20">
        <div className="mx-auto max-w-6xl px-6">
          <Reveal>
            <div className="mx-auto max-w-2xl text-center">
              <div className="text-xs font-semibold uppercase tracking-widest text-[#6d5ef0]">{t.benefits.eyebrow}</div>
              <h2 className="mt-2 text-3xl font-bold tracking-tight text-[#202124] sm:text-4xl">{t.benefits.title}</h2>
              <p className="mt-3 text-[#5f6368]">{t.benefits.subtitle}</p>
            </div>
          </Reveal>
          <div className="mt-10 grid gap-5 md:grid-cols-3">
            {t.benefits.points.map((p, i) => (
              <Reveal key={p.title} delay={i * 90}>
                <GoogleCard
                  title={p.title}
                  body={p.body}
                  icon={i === 0 ? UserCircle2 : i === 1 ? SlidersHorizontal : ShieldCheck}
                  color={i === 0 ? "bg-[#ece8fd] text-[#6d5ef0]" : i === 1 ? "bg-[#fef7e0] text-[#e37400]" : "bg-[#e6f4ea] text-[#137333]"}
                />
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      <section id="ecosystem" className="mx-auto max-w-6xl px-6 py-16 sm:py-20">
        <Reveal>
          <div className="mx-auto max-w-2xl text-center">
            <div className="text-xs font-semibold uppercase tracking-widest text-[#6d5ef0]">{t.ecosystem.eyebrow}</div>
            <h2 className="mt-2 text-3xl font-bold tracking-tight text-[#202124] sm:text-4xl">{t.ecosystem.title}</h2>
            <p className="mt-3 text-[#5f6368]">{t.ecosystem.subtitle}</p>
          </div>
        </Reveal>
        <div className="mx-auto mt-10 grid max-w-4xl gap-4 sm:grid-cols-3">
          <Reveal delay={0}>
            <EcosysCard name="Bermooda" desc={lang === "fa" ? "مدیریت کسب‌وکار" : "Business management"} color="border-[#6d5ef0]/20 bg-[#ece8fd]" letter="B" />
          </Reveal>
          <Reveal delay={90}>
            <EcosysCard name="Hamsoo" desc={lang === "fa" ? "شبکه استعدادها" : "Talent network"} color="border-[#34a853]/20 bg-[#e6f4ea]" letter="H" />
          </Reveal>
          <Reveal delay={180}>
            <EcosysCard name={lang === "fa" ? "محصول بعدی" : "Next product"} desc={t.ecosystem.futureNote} color="border-slate-200 bg-white" letter="+" dashed />
          </Reveal>
        </div>
      </section>

      <section id="capabilities" className="bg-[#f8f9fa] py-16 sm:py-20">
        <div className="mx-auto max-w-6xl px-6">
          <Reveal>
            <div className="mx-auto max-w-2xl text-center">
              <div className="text-xs font-semibold uppercase tracking-widest text-[#6d5ef0]">{t.capabilities.eyebrow}</div>
              <h2 className="mt-2 text-3xl font-bold tracking-tight text-[#202124] sm:text-4xl">{t.capabilities.title}</h2>
              <p className="mt-3 text-[#5f6368]">{t.capabilities.subtitle}</p>
            </div>
          </Reveal>
          <div className="mt-10 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
            {t.capabilities.items.map((it, idx) => (
              <Reveal key={it.title} delay={idx * 70}>
                <GoogleCard
                  title={it.title}
                  body={it.body}
                  icon={it.icon === "shield" ? ShieldCheck : it.icon === "devices" ? Smartphone : it.icon === "privacy" ? Lock : it.icon === "recovery" ? KeyRound : UserCircle2}
                  color="bg-white text-[#6d5ef0] border border-slate-200"
                />
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      <section id="safety" className="mx-auto max-w-6xl px-6 py-16 sm:py-20">
        <div className="grid items-center gap-10 lg:grid-cols-2">
          <Reveal>
            <div>
              <div className="text-xs font-semibold uppercase tracking-widest text-[#6d5ef0]">{t.safety.eyebrow}</div>
              <h2 className="mt-2 text-3xl font-bold tracking-tight text-[#202124] sm:text-4xl">{t.safety.title}</h2>
              <p className="mt-3 text-[#5f6368]">{t.safety.subtitle}</p>
              <div className="mt-6 space-y-4">
                {t.safety.points.map((p, i) => (
                  <Reveal key={p.title} delay={i * 80}>
                    <div className="flex gap-3 rounded-2xl border border-slate-200 bg-white p-4 hover:shadow-sm transition-shadow">
                      <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-[#e6f4ea] text-[#137333]">
                        <ShieldCheck className="h-5 w-5" />
                      </div>
                      <div>
                        <div className="text-sm font-semibold text-[#202124]">{p.title}</div>
                        <div className="mt-1 text-sm leading-6 text-[#5f6368]">{p.body}</div>
                      </div>
                    </div>
                  </Reveal>
                ))}
              </div>
            </div>
          </Reveal>
          <Reveal delay={160}>
            <div className="rounded-[28px] border border-slate-200 bg-white p-6 shadow-[0_8px_40px_rgba(0,0,0,0.06)]">
              <div className="text-sm font-semibold text-[#202124]">{t.preview.title}</div>
              <div className="mt-1 text-sm text-[#5f6368]">{t.preview.subtitle}</div>
              <div className="mt-5 grid grid-cols-2 gap-3">
                {t.preview.cards.map((c, i) => (
                  <Reveal key={c.label} delay={i * 70}>
                    <div className="rounded-2xl bg-[#f8f9fa] p-4 text-center">
                      <div className="text-xl font-bold text-[#202124]">{c.value}</div>
                      <div className="mt-1 text-xs text-[#5f6368]">{c.label}</div>
                    </div>
                  </Reveal>
                ))}
              </div>
              <Link href="/account" className={cn(buttonVariants({ size: "lg" }), "mt-6 w-full rounded-full bg-[#6d5ef0] hover:bg-[#5747d8] text-white")}>
                {t.preview.cta}
                <Arrow className="h-4 w-4" />
              </Link>
            </div>
          </Reveal>
        </div>
      </section>

      <Reveal>
        <section className="bg-[#6d5ef0] py-14">
          <div className="mx-auto max-w-6xl px-6 text-center text-white">
            <h2 className="text-3xl font-bold tracking-tight sm:text-4xl">{t.cta.title}</h2>
            <p className="mx-auto mt-3 max-w-2xl text-white/90">{t.cta.subtitle}</p>
            <button onClick={openLogin} className="mt-6 inline-flex h-12 items-center justify-center gap-2 rounded-full bg-white px-8 text-sm font-semibold text-[#6d5ef0] hover:bg-slate-50 hover:scale-[1.02] transition-transform">
              {t.cta.button}
              <Arrow className="h-4 w-4" />
            </button>
          </div>
        </section>
      </Reveal>
    </main>
  );
}

function GoogleCard({ title, body, icon: Icon, color }: { title: string; body: string; icon: any; color: string }) {
  return (
    <div className="rounded-[24px] border border-slate-200 bg-white p-6 hover:shadow-md hover:-translate-y-1 transition-all duration-300">
      <div className={`flex h-10 w-10 items-center justify-center rounded-full ${color}`}>
        <Icon className="h-5 w-5" />
      </div>
      <h3 className="mt-4 text-base font-semibold text-[#202124]">{title}</h3>
      <p className="mt-2 text-sm leading-6 text-[#5f6368]">{body}</p>
    </div>
  );
}

function EcosysCard({ name, desc, color, letter, dashed }: { name: string; desc: string; color: string; letter: string; dashed?: boolean }) {
  return (
    <div className={`rounded-[24px] border p-6 text-center hover:shadow-md hover:-translate-y-1 transition-all duration-300 ${color} ${dashed ? "border-dashed" : ""}`}>
      <div className="mx-auto flex h-14 w-14 items-center justify-center rounded-2xl bg-white text-lg font-bold text-[#202124] shadow-sm">{letter}</div>
      <div className="mt-3 text-sm font-semibold text-[#202124]">{name}</div>
      <div className="mt-1 text-xs text-[#5f6368]">{desc}</div>
    </div>
  );
}