import { createFileRoute } from "@tanstack/react-router";
import { useState } from "react";
import {
  MessageCircle, Calculator, Zap, Wallet, ShieldCheck,
  Clock, Sparkles, ArrowLeft, Phone, CheckCircle2,
} from "lucide-react";

export const Route = createFileRoute("/")({
  component: Index,
  head: () => ({
    meta: [
      { title: "Cash Phone — سيولة مالية فورية حتى 30,000 ريال" },
      { name: "description", content: "Cash Phone يوفر لك سيولة مالية فورية تصل إلى 30,000 ريال عبر تابي وتمارا." },
      { property: "og:title", content: "Cash Phone — سيولة مالية فورية" },
      { property: "og:description", content: "حوّل مشترياتك إلى كاش عبر تابي وتمارا." },
      { property: "og:type", content: "website" },
      { name: "twitter:card", content: "summary_large_image" },
    ],
  }),
});

const WHATSAPP = "https://wa.me/966557559459";
const PHONE_DISPLAY = "0557559459";
const LOGO_URL = "/logo.jpg";

function Index() {
  const [amount, setAmount] = useState(5500);
  const [installments, setInstallments] = useState(4);
  const firstPayment = Math.round((amount / 4) * 0.4);
  const monthly = Math.round((amount - firstPayment) / Math.max(installments - 1, 1));

  return (
    <div className="min-h-screen">
      <Header />
      <Hero amount={amount} />
      <Calc amount={amount} setAmount={setAmount} installments={installments}
        setInstallments={setInstallments} firstPayment={firstPayment} monthly={monthly} />
      <Steps />
      <Features />
      <CTASection />
      <Footer />
    </div>
  );
}

function Header() {
  return (
    <header className="sticky top-0 z-50 border-b border-border/60 bg-background/80 backdrop-blur-xl">
      <div className="mx-auto flex max-w-6xl items-center justify-between px-4 py-3">
        <a href={WHATSAPP} className="inline-flex items-center gap-2 rounded-full bg-gradient-gold px-4 py-2 text-sm font-bold text-primary-foreground shadow-gold transition hover:opacity-90">
          <MessageCircle className="h-4 w-4" />
          تواصل واتساب
        </a>
        <a href="#" className="flex items-center gap-2">
          <span className="text-lg font-extrabold tracking-tight text-gradient-gold">Cash Phone</span>
          <img src={LOGO_URL} alt="Cash Phone" className="h-10 w-10 rounded-full border border-gold/40 object-cover" />
        </a>
      </div>
    </header>
  );
}

function Hero({ amount }: { amount: number }) {
  return (
    <section className="relative overflow-hidden px-4 pt-14 pb-20">
      <div className="pointer-events-none absolute inset-0 opacity-30"
        style={{ background: "radial-gradient(60% 40% at 80% 20%, oklch(0.75 0.15 85 / 25%), transparent), radial-gradient(50% 40% at 10% 80%, oklch(0.55 0.12 70 / 15%), transparent)" }} />
      <div className="relative mx-auto grid max-w-6xl items-center gap-12 lg:grid-cols-2">
        <div className="order-2 lg:order-1">
          <div className="relative mx-auto max-w-md rounded-3xl border border-gold/30 bg-card p-6 shadow-card">
            <div className="flex items-center justify-between text-sm text-muted-foreground">
              <Wallet className="h-5 w-5 text-gold" />
              <span>الحد المتاح</span>
            </div>
            <div className="mt-6 text-center">
              <div className="text-5xl font-black tracking-tight text-gradient-gold">
                {amount.toLocaleString("en")}
                <span className="mr-2 text-xl font-bold text-muted-foreground">ر.س</span>
              </div>
            </div>
            <div className="mt-6 h-2 overflow-hidden rounded-full bg-secondary">
              <div className="h-full bg-gradient-gold" style={{ width: `${(amount / 30000) * 100}%` }} />
            </div>
            <div className="mt-3 flex justify-between text-xs text-muted-foreground">
              <span>الحد الأدنى: 200</span>
              <span>الحد الأعلى: 30,000</span>
            </div>
            <div className="mt-6 grid grid-cols-2 gap-3">
              <PartnerChip name="tabby" />
              <PartnerChip name="tamara" />
            </div>
          </div>
        </div>
        <div className="order-1 text-right lg:order-2">
          <div className="inline-flex items-center gap-2 rounded-full border border-gold/40 bg-gold/10 px-4 py-1.5 text-xs font-bold text-gold">
            <Zap className="h-3.5 w-3.5" />
            موافقة فورية وسريعة
          </div>
          <h1 className="mt-5 text-4xl font-black leading-tight sm:text-5xl lg:text-6xl">
            نوفر لك سيولة مالية تصل إلى <span className="text-gradient-gold">30,000 ريال</span>
          </h1>
          <p className="mt-4 text-lg font-bold text-gold-soft">عبر تابي وتمارا — حوّل مشترياتك إلى كاش</p>
          <p className="mt-3 text-muted-foreground leading-relaxed">
            نشتري لك جوال عبر تابي أو تمارا، ومن ثم نقوم ببيعه لك ونحوّل المبلغ مباشرة إلى حسابك البنكي.
          </p>
          <div className="mt-8 flex flex-wrap gap-3">
            <a href={WHATSAPP} className="inline-flex items-center gap-2 rounded-full bg-gradient-gold px-6 py-3.5 font-bold text-primary-foreground shadow-gold transition hover:translate-y-[-1px]">
              <MessageCircle className="h-5 w-5" /> قدّم طلبك الآن
            </a>
            <a href="#calculator" className="inline-flex items-center gap-2 rounded-full border border-gold/40 bg-card/60 px-6 py-3.5 font-bold text-gold transition hover:bg-gold/10">
              <Calculator className="h-5 w-5" /> احسب سيولتك
            </a>
            <a href="#steps" className="inline-flex items-center gap-2 rounded-full px-6 py-3.5 font-bold text-foreground/80 transition hover:text-gold">
              خطوات الطلب <ArrowLeft className="h-4 w-4" />
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

function PartnerChip({ name }: { name: string }) {
  return (
    <div className="flex items-center justify-center rounded-xl border border-gold/20 bg-background/60 py-2 text-sm font-bold uppercase tracking-widest text-gold">
      {name}
    </div>
  );
}

function Calc({ amount, setAmount, installments, setInstallments, firstPayment, monthly }: {
  amount: number; setAmount: (n: number) => void;
  installments: number; setInstallments: (n: number) => void;
  firstPayment: number; monthly: number;
}) {
  const options = [4, 6, 9, 12, 24];
  return (
    <section id="calculator" className="px-4 py-20">
      <div className="mx-auto max-w-5xl">
        <div className="text-center">
          <div className="inline-flex items-center gap-2 rounded-full border border-gold/40 bg-gold/10 px-4 py-1.5 text-xs font-bold text-gold">
            <Calculator className="h-3.5 w-3.5" /> حاسبة السيولة
          </div>
          <h2 className="mt-4 text-3xl font-black sm:text-4xl">
            اختر المبلغ وعدد الدفعات لمعرفة سيولتك <span className="text-gradient-gold">فوراً</span>
          </h2>
          <p className="mt-3 text-sm text-muted-foreground">
            الأرقام تقريبية بناءً على سجلك الائتماني وسيتم تأكيدها عند قبول طلبك
          </p>
        </div>
        <div className="mt-10 rounded-3xl border border-gold/25 bg-card p-6 shadow-card sm:p-10">
          <label className="text-sm font-bold text-muted-foreground">اختر المبلغ المطلوب</label>
          <div className="mt-4 text-center text-5xl font-black text-gradient-gold">
            {amount.toLocaleString("en")}
            <span className="mr-2 text-xl text-muted-foreground">ر.س</span>
          </div>
          <input type="range" min={200} max={30000} step={100} value={amount}
            onChange={(e) => setAmount(+e.target.value)}
            className="mt-6 w-full accent-[color:var(--gold)]" dir="ltr" />
          <div className="mt-1 flex justify-between text-xs text-muted-foreground">
            <span>200 ر.س</span><span>30,000 ر.س</span>
          </div>
          <div className="mt-8">
            <label className="text-sm font-bold text-muted-foreground">عدد الدفعات</label>
            <div className="mt-3 flex flex-wrap gap-2">
              {options.map((n) => (
                <button key={n} onClick={() => setInstallments(n)}
                  className={`min-w-14 rounded-full border px-4 py-2 text-sm font-bold transition ${
                    installments === n
                      ? "border-gold bg-gradient-gold text-primary-foreground shadow-gold"
                      : "border-gold/30 text-gold hover:bg-gold/10"
                  }`}>{n}</button>
              ))}
            </div>
            <p className="mt-3 text-xs text-muted-foreground">
              تفرض تابي وتمارا رسوم مرابحة على الدفعات أكثر من 4 دفعات
            </p>
          </div>
          <div className="mt-8 grid gap-4 sm:grid-cols-2">
            <SummaryRow label="المبلغ المحوّل إلى حسابك" value={`${amount.toLocaleString("en")} ر.س`} highlight />
            <SummaryRow label="الدفعة الأولى" value={`${firstPayment.toLocaleString("en")} ر.س`} />
            <SummaryRow label="عدد الأقساط المتبقية" value={`${installments - 1}`} />
            <SummaryRow label="القسط الشهري" value={`${monthly.toLocaleString("en")} ر.س`} />
          </div>
          <a href={WHATSAPP} className="mt-8 inline-flex w-full items-center justify-center gap-2 rounded-full bg-gradient-gold px-6 py-4 font-black text-primary-foreground shadow-gold transition hover:translate-y-[-1px]">
            <MessageCircle className="h-5 w-5" /> اطلب السيولة الآن
          </a>
        </div>
      </div>
    </section>
  );
}

function SummaryRow({ label, value, highlight }: { label: string; value: string; highlight?: boolean }) {
  return (
    <div className={`flex items-center justify-between rounded-2xl border p-4 ${
      highlight ? "border-gold/60 bg-gold/10" : "border-border bg-background/40"
    }`}>
      <span className={`font-black ${highlight ? "text-gold" : "text-foreground"}`}>{value}</span>
      <span className="text-sm text-muted-foreground">{label}</span>
    </div>
  );
}

function Steps() {
  const steps = [
    { n: 1, title: "تواصل واتساب", desc: "ابدأ المحادثة فوراً", icon: MessageCircle },
    { n: 2, title: "حدد المبلغ", desc: "من 200 إلى 30,000 ر.س", icon: Wallet },
    { n: 3, title: "موافقة فورية", desc: "موافقة خلال دقائق", icon: CheckCircle2 },
    { n: 4, title: "استلم فوراً", desc: "تحويل سريع لحسابك", icon: Zap },
  ];
  return (
    <section id="steps" className="border-y border-border/60 bg-background/60 px-4 py-20">
      <div className="mx-auto max-w-6xl">
        <div className="text-center">
          <p className="text-sm font-bold text-gold">بأربع خطوات فقط</p>
          <h2 className="mt-2 text-3xl font-black sm:text-4xl">
            <span className="text-gradient-gold">خطوات</span> الطلب
          </h2>
        </div>
        <div className="mt-12 grid gap-5 sm:grid-cols-2 lg:grid-cols-4">
          {steps.map((s) => (
            <div key={s.n} className="group relative overflow-hidden rounded-2xl border border-gold/20 bg-card p-6 transition hover:border-gold/60">
              <div className="absolute -left-4 -top-4 text-8xl font-black text-gold/5 transition group-hover:text-gold/10">{s.n}</div>
              <div className="relative">
                <div className="inline-flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-gold text-primary-foreground shadow-gold">
                  <s.icon className="h-6 w-6" />
                </div>
                <h3 className="mt-4 text-xl font-black">{s.title}</h3>
                <p className="mt-1 text-sm text-muted-foreground">{s.desc}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Features() {
  const items = [
    { icon: Wallet, title: "مبالغ مرنة", desc: "من 200 إلى 30,000 ريال" },
    { icon: Zap, title: "تحويل فوري", desc: "استلام المبلغ خلال دقائق" },
    { icon: ShieldCheck, title: "آمن 100%", desc: "معاملات موثوقة وسرية" },
    { icon: Clock, title: "تقسيط مريح", desc: "حتى 24 دفعة مع تابي وتمارا" },
  ];
  return (
    <section className="px-4 py-20">
      <div className="mx-auto max-w-6xl">
        <div className="text-center">
          <div className="inline-flex items-center gap-2 rounded-full border border-gold/40 bg-gold/10 px-4 py-1.5 text-xs font-bold text-gold">
            <Sparkles className="h-3.5 w-3.5" /> لماذا Cash Phone؟
          </div>
          <h2 className="mt-4 text-3xl font-black sm:text-4xl">
            مميزات تجعل تجربتك <span className="text-gradient-gold">أسهل وأسرع</span>
          </h2>
        </div>
        <div className="mt-12 grid gap-5 sm:grid-cols-2 lg:grid-cols-4">
          {items.map((it) => (
            <div key={it.title} className="rounded-2xl border border-gold/20 bg-card p-6 text-center transition hover:-translate-y-1 hover:border-gold/60 hover:shadow-gold">
              <div className="mx-auto inline-flex h-14 w-14 items-center justify-center rounded-2xl border border-gold/40 bg-gold/10 text-gold">
                <it.icon className="h-7 w-7" />
              </div>
              <h3 className="mt-4 text-lg font-black">{it.title}</h3>
              <p className="mt-1 text-sm text-muted-foreground">{it.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function CTASection() {
  return (
    <section className="px-4 pb-20">
      <div className="relative mx-auto max-w-4xl overflow-hidden rounded-3xl border border-gold/40 bg-card p-10 text-center shadow-card">
        <div className="pointer-events-none absolute inset-0 opacity-20"
          style={{ background: "radial-gradient(circle at 50% 0%, oklch(0.82 0.14 85 / 40%), transparent 60%)" }} />
        <h2 className="relative text-3xl font-black sm:text-4xl">
          جاهز لطلب <span className="text-gradient-gold">سيولتك</span>؟
        </h2>
        <p className="relative mt-3 text-muted-foreground">تواصل معنا الآن واستلم المبلغ خلال دقائق</p>
        <a href={WHATSAPP} className="relative mt-8 inline-flex items-center gap-2 rounded-full bg-gradient-gold px-8 py-4 font-black text-primary-foreground shadow-gold transition hover:translate-y-[-1px]">
          <MessageCircle className="h-5 w-5" /> تواصل عبر الواتساب
        </a>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="border-t border-border/60 bg-background/80 px-4 py-10">
      <div className="mx-auto flex max-w-6xl flex-col items-center justify-between gap-4 sm:flex-row">
        <p className="text-sm text-muted-foreground">© {new Date().getFullYear()} Cash Phone. جميع الحقوق محفوظة.</p>
        <a href={WHATSAPP} className="inline-flex items-center gap-2 text-sm font-bold text-gold hover:opacity-80">
          <Phone className="h-4 w-4" /> {PHONE_DISPLAY}
        </a>
      </div>
    </footer>
  );
}