"use client";



import Link from "next/link";
import { BrandLogo } from "@/components/brand/brand-logo";
import { useBrand } from "@/components/providers/brand-provider";

import {

  ArrowLeft,

  ArrowRight,

  BarChart3,

  Building2,

  Inbox,

  Sparkles,

  Target,

  Zap,

} from "lucide-react";

import { useLocale } from "@/components/providers/locale-provider";

import { Button } from "@/components/ui/button";

import { cn } from "@/lib/utils";

import { APP_DESCRIPTION } from "@/lib/constants";



const CAPABILITIES = [

  { icon: Building2, ar: "قاعدة السوق", en: "Market Database" },

  { icon: Target, ar: "إدارة العملاء", en: "CRM & Leads" },

  { icon: Zap, ar: "الحملات", en: "Campaigns" },

  { icon: Inbox, ar: "صندوق ذكي", en: "Smart Inbox" },

  { icon: BarChart3, ar: "رؤى البيانات", en: "Data Insights" },

  { icon: Sparkles, ar: "أتمتة", en: "Automation" },

] as const;



export function HomeLanding() {

  const { locale, dir } = useLocale();
  const { brand } = useBrand();

  const isRtl = dir === "rtl";

  const Arrow = isRtl ? ArrowLeft : ArrowRight;



  return (

    <div className="min-h-screen overflow-x-hidden bg-background">

      <section className="relative overflow-hidden">

        <div

          className="absolute inset-0"

          style={{ background: "var(--gradient-hero)" }}

          aria-hidden

        />

        <div

          className="absolute inset-0 bg-gradient-to-b from-black/55 via-black/40 to-background/95 dark:from-black/70 dark:via-black/55"

          aria-hidden

        />



        <div className="relative mx-auto grid max-w-6xl items-center gap-10 px-4 py-16 sm:px-6 sm:py-24 lg:grid-cols-2 lg:py-28">

          <div className="animate-fade-in">

            <div className="mb-6 inline-flex items-center gap-2 rounded-full border border-white/25 bg-white/15 px-4 py-1.5 text-sm font-medium text-white backdrop-blur">

              <Sparkles className="h-4 w-4 text-accent" />

              <span>{locale === "ar" ? "جاهز للإنتاج" : "Production ready"}</span>

            </div>

            <h1 className="text-display text-3xl text-white sm:text-4xl lg:text-5xl">

              {brand.platformName}

            </h1>

            <p className="mt-2 text-lg font-semibold text-teal-200/95">{brand.companyName}</p>

            <p className="mt-5 max-w-xl text-base leading-relaxed text-slate-100 sm:text-lg">

              {APP_DESCRIPTION}

            </p>

            <div className="mt-10 flex flex-wrap gap-3">

              <Button

                asChild

                size="lg"

                className="min-h-[44px] bg-primary text-primary-foreground shadow-lg hover:opacity-95"

              >

                <Link href="/login" className="gap-2">

                  {locale === "ar" ? "تسجيل الدخول" : "Sign in"}

                  <Arrow className="h-4 w-4" />

                </Link>

              </Button>

              <Button

                asChild

                size="lg"

                variant="outline"

                className="min-h-[44px] border-white/50 bg-white/10 text-white hover:bg-white/20"

              >

                <Link href="/dashboard">{locale === "ar" ? "لوحة التحكم" : "Dashboard"}</Link>

              </Button>

            </div>

          </div>



          <div

            className="animate-fade-in flex justify-center lg:justify-end"

            style={{ animationDelay: "0.1s" }}

          >

            <div className="w-full max-w-md rounded-2xl border border-border/60 bg-card p-8 shadow-2xl">

              <div className="mx-auto flex max-w-[280px] justify-center">

                <BrandLogo width={280} height={120} imageClassName="h-auto w-full object-contain" />

              </div>

              <p className="mt-4 text-center text-lg font-bold text-foreground">

                {brand.platformName}

              </p>

              <p className="text-center text-sm text-muted-foreground">{brand.companyName}</p>

              <div className="mt-6 grid grid-cols-3 gap-2 text-center text-xs font-semibold sm:text-sm">

                {["CRM", "Growth", "AI"].map((tag) => (

                  <div

                    key={tag}

                    className="rounded-lg bg-primary/10 px-2 py-3 text-primary"

                  >

                    {tag}

                  </div>

                ))}

              </div>

            </div>

          </div>

        </div>

      </section>



      <section className="mx-auto max-w-6xl px-4 py-20 sm:px-6">

        <h2 className="text-center text-title text-2xl text-foreground">

          {locale === "ar" ? "قدرات المنصة" : "Platform capabilities"}

        </h2>

        <p className="text-subtitle mx-auto mt-2 max-w-xl text-center">

          {locale === "ar"

            ? "منصة متكاملة للنمو التجاري — من قاعدة السوق إلى إغلاق الصفقات"

            : "End-to-end growth — from market data to closed deals"}

        </p>

        <ul className="mt-12 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">

          {CAPABILITIES.map((cap, i) => {

            const Icon = cap.icon;

            return (

              <li

                key={cap.en}

                className={cn(

                  "surface-elevated group p-6 transition-all hover:-translate-y-1 hover:shadow-lg",

                  "animate-fade-in"

                )}

                style={{ animationDelay: `${i * 0.05}s` }}

              >

                <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-br from-primary/20 to-accent/20 text-primary transition-colors group-hover:from-primary group-hover:to-accent group-hover:text-primary-foreground">

                  <Icon className="h-6 w-6" />

                </div>

                <h3 className="font-semibold text-foreground">{locale === "ar" ? cap.ar : cap.en}</h3>

              </li>

            );

          })}

        </ul>

      </section>



      <section className="border-t border-border bg-muted/30 px-4 py-16 sm:px-6">

        <div

          className="mx-auto max-w-3xl rounded-2xl p-8 text-center sm:p-12"

          style={{ background: "var(--gradient-brand)" }}

        >

          <h2 className="text-2xl font-bold text-white">

            {locale === "ar" ? "ابدأ إدارة نموك اليوم" : "Start growing smarter today"}

          </h2>

          <p className="mt-3 text-white/90">

            {locale === "ar"

              ? "منصة مؤسسية حديثة لفرق المبيعات والتسويق"

              : "Modern enterprise platform for sales & marketing teams"}

          </p>

          <Button

            asChild

            size="lg"

            className="mt-8 min-h-[44px] bg-white text-primary hover:bg-white/90"

          >

            <Link href="/login">{locale === "ar" ? "دخول المنصة" : "Enter platform"}</Link>

          </Button>

        </div>

      </section>

    </div>

  );

}