import Link from "next/link";
import { ArrowUpRight, Check, Sparkles } from "lucide-react";
import { getDict } from "@/i18n/dictionaries";
import { isLang, type Lang } from "@/i18n/types";

function Section({
  id,
  children,
}: {
  id?: string;
  children: React.ReactNode;
}) {
  return (
    <section id={id} className="py-16 sm:py-20">
      <div className="container-app">{children}</div>
    </section>
  );
}

export default async function Home({
  params,
}: {
  params: Promise<{ lang: string }>;
}) {
  const { lang } = await params;
  const safeLang: Lang = isLang(lang) ? lang : "ar";
  const dict = getDict(safeLang);

  return (
    <div>
      <section className="relative overflow-hidden">
        <div className="absolute inset-0">
          <div className="pointer-events-none absolute -top-40 left-1/2 h-[520px] w-[520px] -translate-x-1/2 rounded-full bg-accent/10 blur-3xl" />
          <div className="pointer-events-none absolute -bottom-48 left-10 h-[440px] w-[440px] rounded-full bg-accent2/10 blur-3xl" />
        </div>

        <div className="container-app relative py-16 sm:py-24">
          <div className="grid gap-10 lg:grid-cols-12 lg:items-center">
            <div className="lg:col-span-7">
              <div className="badge">
                <Sparkles className="h-4 w-4 text-accent" />
                {dict.home.trustPill}
              </div>
              <h1 className="h1 mt-5">{dict.home.heroTitle}</h1>
              <p className="mt-5 max-w-2xl text-base leading-8 text-appMuted sm:text-lg">
                {dict.home.heroText}
              </p>

              <div className="mt-7 flex flex-col gap-3 sm:flex-row">
                <Link href={`/${safeLang}/contact`} className="btn btn-primary">
                  {dict.cta.startProject}
                  <ArrowUpRight className="h-4 w-4" />
                </Link>
                <a
                  href="https://wa.me/966544666050"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="btn btn-secondary"
                >
                  {dict.cta.whatsapp}
                </a>
              </div>

              <div className="mt-8 grid grid-cols-2 gap-3 sm:grid-cols-4">
                {[
                  safeLang === "ar" ? "SEO جاهز" : "SEO-ready",
                  safeLang === "ar" ? "أداء عالي" : "High performance",
                  safeLang === "ar" ? "RTL/LTR" : "RTL/LTR",
                  safeLang === "ar" ? "Clean Code" : "Clean code",
                ].map((t) => (
                  <div
                    key={t}
                    className="rounded-2xl border border-appBorder bg-white/3 px-4 py-3 text-xs font-semibold text-appMuted"
                  >
                    {t}
                  </div>
                ))}
              </div>
            </div>

            <div className="lg:col-span-5">
              <div className="glass rounded-3xl p-6 sm:p-7">
                <div className="text-sm font-semibold text-appText">
                  {safeLang === "ar"
                    ? "خلال أول 5 ثواني"
                    : "Within the first 5 seconds"}
                </div>
                <p className="mt-2 text-sm leading-7 text-appMuted">
                  {safeLang === "ar"
                    ? "نوضح القيمة بسرعة: ما الذي ستحصل عليه، وكيف نقيس النتائج، وكيف تبدأ الآن بأقل خطوات."
                    : "We quickly clarify the value: what you get, how we measure outcomes, and how to start with minimal steps."}
                </p>

                <div className="mt-6 grid gap-3">
                  {[
                    safeLang === "ar"
                      ? "خطة تنفيذ واضحة + نقاط قياس"
                      : "Clear execution plan + measurable checkpoints",
                    safeLang === "ar"
                      ? "تجربة مستخدم محسوبة للقطاعات الكبرى"
                      : "Enterprise-grade UX built for high-stakes audiences",
                    safeLang === "ar"
                      ? "أزرار CTA مدروسة لزيادة الطلبات"
                      : "Conversion-focused CTAs to increase requests",
                  ].map((x) => (
                    <div
                      key={x}
                      className="flex items-start gap-3 rounded-2xl border border-appBorder bg-white/2 p-4"
                    >
                      <span className="mt-0.5 inline-flex h-7 w-7 items-center justify-center rounded-xl bg-accent/15 text-accent">
                        <Check className="h-4 w-4" />
                      </span>
                      <div className="text-sm font-medium text-appText">{x}</div>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <Section id="problem">
        <div className="grid gap-10 lg:grid-cols-12 lg:items-start">
          <div className="lg:col-span-5">
            <h2 className="h2">{dict.home.problemTitle}</h2>
            <p className="mt-4 text-sm leading-7 text-appMuted">
              {dict.home.problemOutro}
            </p>
          </div>
          <div className="lg:col-span-7">
            <div className="grid gap-4 sm:grid-cols-2">
              {dict.home.problems.map((p) => (
                <div
                  key={p}
                  className="rounded-3xl border border-appBorder bg-appSurface/60 p-6 transition hover:bg-white/3"
                >
                  <div className="text-sm font-semibold text-appText">{p}</div>
                  <div className="mt-2 text-xs text-appMuted">
                    {safeLang === "ar"
                      ? "نحدد السبب ثم نصمم حلًا قابلاً للقياس."
                      : "We identify the cause and build a measurable solution."}
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </Section>

      <Section id="value">
        <div className="flex flex-col items-start justify-between gap-6 sm:flex-row sm:items-end">
          <div>
            <h2 className="h2">{dict.home.valueTitle}</h2>
            <p className="mt-3 max-w-2xl text-sm leading-7 text-appMuted">
              {safeLang === "ar"
                ? "نهجنا بسيط: فهم الهدف، تنفيذ ممتاز، وقياس أثر."
                : "Our approach is simple: understand the goal, execute with excellence, and measure impact."}
            </p>
          </div>
          <Link href={`/${safeLang}/contact`} className="btn btn-secondary">
            {dict.cta.startProject}
            <ArrowUpRight className="h-4 w-4" />
          </Link>
        </div>

        <div className="mt-8 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
          {dict.home.values.map((v) => (
            <div
              key={v.title}
              className="glass rounded-3xl p-6 shadow-none"
            >
              <div className="text-sm font-semibold text-appText">{v.title}</div>
              <p className="mt-2 text-sm leading-7 text-appMuted">{v.text}</p>
            </div>
          ))}
        </div>
      </Section>

      <Section id="services">
        <div className="flex flex-col items-start justify-between gap-6 sm:flex-row sm:items-end">
          <div>
            <h2 className="h2">{dict.home.servicesTitle}</h2>
            <p className="mt-3 max-w-2xl text-sm leading-7 text-appMuted">
              {safeLang === "ar"
                ? "اختر الخدمة المناسبة وابدأ بخطوة واحدة للتواصل."
                : "Pick the right service and start with one step to contact."}
            </p>
          </div>
          <Link href={`/${safeLang}/services`} className="btn btn-secondary">
            {dict.cta.exploreServices}
            <ArrowUpRight className="h-4 w-4" />
          </Link>
        </div>

        <div className="mt-8 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
          {dict.home.services.map((s) => (
            <div
              key={s.title}
              className="rounded-3xl border border-appBorder bg-appSurface/55 p-6 transition hover:bg-white/3"
            >
              <div className="text-sm font-semibold text-appText">{s.title}</div>
              <p className="mt-2 text-sm leading-7 text-appMuted">{s.text}</p>
              <div className="mt-4">
                <Link
                  href={`/${safeLang}/contact`}
                  className="text-sm font-semibold text-accent hover:opacity-90"
                >
                  {dict.cta.sendRequest} <span aria-hidden>→</span>
                </Link>
              </div>
            </div>
          ))}
        </div>
      </Section>

      <Section id="portfolio">
        <div className="flex flex-col items-start justify-between gap-6 sm:flex-row sm:items-end">
          <div>
            <h2 className="h2">{dict.home.portfolioTitle}</h2>
            <p className="mt-3 max-w-2xl text-sm leading-7 text-appMuted">
              {safeLang === "ar"
                ? "نعرض نتائج مختصرة: ما الذي تم تحسينه أو زيادته أو تطويره."
                : "Short, outcome-driven highlights: what improved, increased, or was built."}
            </p>
          </div>
          <Link href={`/${safeLang}/portfolio`} className="btn btn-secondary">
            {dict.cta.viewProjects}
            <ArrowUpRight className="h-4 w-4" />
          </Link>
        </div>

        <div className="mt-8 grid gap-4 lg:grid-cols-3">
          {dict.home.portfolio.map((p) => (
            <div
              key={p.title}
              className="glass rounded-3xl p-6 shadow-none"
            >
              <div className="text-sm font-semibold text-appText">{p.title}</div>
              <p className="mt-2 text-sm leading-7 text-appMuted">{p.text}</p>
              <div className="mt-4 rounded-2xl border border-appBorder bg-white/3 px-4 py-3 text-xs font-semibold text-appText">
                {p.result}
              </div>
            </div>
          ))}
        </div>
      </Section>

      <Section id="testimonials">
        <h2 className="h2">{dict.home.testimonialsTitle}</h2>
        <div className="mt-8 grid gap-4 lg:grid-cols-3">
          {dict.home.testimonials.map((t) => (
            <div
              key={t.name}
              className="rounded-3xl border border-appBorder bg-appSurface/55 p-6"
            >
              <p className="text-sm leading-7 text-appText">“{t.quote}”</p>
              <div className="mt-4 text-xs font-semibold text-appMuted">
                {t.name}
              </div>
            </div>
          ))}
        </div>
      </Section>

      <Section id="cta">
        <div className="glass rounded-3xl p-8 sm:p-10">
          <div className="grid gap-8 lg:grid-cols-12 lg:items-center">
            <div className="lg:col-span-8">
              <h2 className="h2">{dict.home.finalCtaTitle}</h2>
              <p className="mt-3 max-w-3xl text-sm leading-7 text-appMuted">
                {dict.home.finalCtaText}
              </p>
            </div>
            <div className="lg:col-span-4">
              <div className="flex flex-col gap-3 sm:flex-row lg:flex-col">
                <a
                  href="https://wa.me/966544666050"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="btn btn-primary"
                >
                  {dict.cta.whatsapp}
                </a>
                <Link href={`/${safeLang}/contact`} className="btn btn-secondary">
                  {dict.cta.sendRequest}
                </Link>
              </div>
            </div>
          </div>
        </div>
      </Section>
    </div>
  );
}