import Link from "next/link";
import { ArrowRight, BarChart3, Building2, CheckCircle2, Home, Layers3, Sparkles, type LucideIcon } from "lucide-react";

import { LogoMark } from "@/components/home/Brand";
import DemoButton from "@/components/demo/DemoButton";
import type { AboutContent } from "@/data/about.data";
import type { Dictionary } from "@/lib/i18n";
import type { Locale } from "@/lib/locales";
import { localizedPath } from "@/lib/routes";

export default function AboutHero({ content, dictionary, locale }: { content: AboutContent["hero"]; dictionary: Dictionary; locale: Locale }) {
  const products: { icon: LucideIcon; name: string; color: string }[] = [
    { icon: Building2, name: "PureEstate", color: "#7356eb" },
    { icon: Layers3, name: "BuildPro", color: "#4173df" },
    { icon: Home, name: "SocietyPro", color: "#229563" },
  ];
  return (
    <section className="relative overflow-hidden border-b border-[#edf0f7] bg-white py-14 sm:py-20">
      <div className="pointer-events-none absolute -left-24 top-5 h-72 w-72 rounded-full bg-[#edf0ff] blur-3xl" />
      <div className="pointer-events-none absolute right-0 top-20 h-80 w-80 rounded-full bg-[#ecfbff] blur-3xl" />
      <div className="relative mx-auto grid max-w-[1360px] items-center gap-10 px-6 lg:grid-cols-[0.95fr_1.05fr] xl:px-8">
        <div>
          <div className="mb-7 inline-flex items-center gap-2 rounded-full border border-[#e5e8fb] bg-white/85 px-3.5 py-2 text-md font-semibold text-[#5865ed] shadow-[0_4px_16px_rgba(65,75,135,0.06)]">
            <Sparkles size={15} className="text-[#6670ff]" />{content.eyebrow}
            </div>
          <h1 className="max-w-150 text-[45px] font-extrabold leading-[1.09] tracking-[-0.020em] text-[#101a3c] sm:text-[56px] xl:text-5xl">{content.title}</h1>
          <p className="mt-5 max-w-[650px] text-[15px] leading-7 text-[#6d7895] sm:text-[17px]">{content.description}</p>
          <div className="mt-7 flex flex-wrap gap-3">
            <DemoButton locale={locale} label={dictionary.common.bookDemo} className="inline-flex items-center gap-2 rounded-lg bg-gradient-to-r from-[#5264ee] to-[#7756eb] px-6 py-3.5 text-[13px] font-bold text-white shadow-[0_10px_22px_rgba(94,85,235,0.24)] transition hover:-translate-y-0.5" />
            <Link href={localizedPath(locale, "/products")} className="inline-flex items-center gap-2 rounded-lg border border-[#cfd4ff] bg-white px-6 py-3.5 text-[13px] font-bold text-[#5964dc] transition hover:bg-[#f7f8ff]">
              {dictionary.home.productsTitle}<ArrowRight size={16} />
            </Link>
          </div>
        </div>

        <div className="relative mx-auto w-full max-w-[610px] rounded-[28px] border border-[#e5e9f5] bg-white/90 p-4 shadow-[0_24px_65px_rgba(54,67,123,0.13)]">
          <div className="rounded-2xl bg-gradient-to-br from-[#5a67ef] via-[#6162ec] to-[#7956eb] p-5 text-white">
            <div className="flex items-center gap-3"><LogoMark className="h-10 w-10" /><span className="text-lg font-extrabold">PureSaaS</span></div>
            <p className="mt-7 text-[11px] font-bold uppercase tracking-[0.18em] text-[#dfe2ff]">{content.missionLabel}</p>
            <p className="mt-2 max-w-[450px] text-xl font-extrabold leading-7">{content.missionValue}</p>
          </div>
          <div className="mt-4 grid gap-3 sm:grid-cols-3">
            {products.map(({ icon: Icon, name, color }) => (
              <div key={name} className="rounded-xl border border-[#e8ecf5] bg-white p-3 shadow-[0_4px_12px_rgba(51,66,116,0.04)] transition hover:-translate-y-1">
                <Icon size={18} style={{ color }} />
                <p className="mt-2 text-[12px] font-extrabold text-[#283353]">{name}</p>
              </div>
            ))}
          </div>
          <div className="mt-4 flex flex-wrap gap-3 rounded-xl bg-[#f8f9ff] p-3">
            <p className="flex items-center gap-2 text-[11px] font-bold text-[#68748c]"><CheckCircle2 size={15} className="text-[#42ad78]" />3 {content.productsLabel}</p>
            <p className="flex items-center gap-2 text-[11px] font-bold text-[#68748c]"><BarChart3 size={15} className="text-[#5d6bea]" />100% {content.growthLabel}</p>
          </div>
        </div>
      </div>
    </section>
  );
}