import Link from "next/link";
import {
  ArrowLeft,
  CalendarDays,
  ChartNoAxesCombined,
  ChevronLeft,
  CircleCheck,
  GraduationCap,
  Headphones,
  MessageCircle,
  Sparkles,
  Target,
} from "lucide-react";

import { Button } from "@/components/ui/button";
import { SiteFooter } from "@/components/site-footer";
import { SiteHeader } from "@/components/site-header";
import { safeSettings } from "@/lib/cms";
import { resolveSiteContent } from "@/lib/site-settings";

const beginnerSteps = [
  "یادگیری اصول و زبان بازار",
  "ساخت پلن و مدیریت سرمایه",
  "تمرین هدفمند با بازخورد",
];

const professionalSteps = [
  "شناسایی خطاهای تکرارشونده",
  "تقویت انضباط و روان‌شناسی",
  "بهبود تصمیم‌گیری با ژورنال",
];

export const dynamic = "force-dynamic";

export default async function Home() {
  const content = resolveSiteContent(await safeSettings());
  const { contact, home } = content;

  return (
    <main className="min-h-screen overflow-hidden bg-[#f7f8f5] text-[#10251d]">
      <SiteHeader content={content} />

      <section className="relative isolate">
        <div className="market-grid absolute inset-0 -z-20 opacity-70" />
        <div className="absolute -right-32 top-16 -z-10 h-[460px] w-[460px] rounded-full bg-emerald-300/20 blur-[110px]" />
        <div className="absolute -left-24 bottom-0 -z-10 h-[360px] w-[360px] rounded-full bg-amber-300/20 blur-[110px]" />

        <div className="mx-auto grid max-w-[1240px] gap-12 px-5 pb-20 pt-14 lg:grid-cols-[1.08fr_.92fr] lg:items-center lg:px-8 lg:pb-28 lg:pt-20">
          <div>
            <div className="mb-6 inline-flex items-center gap-2 rounded-full border border-[#cda54c]/35 bg-white/75 px-4 py-2 text-sm font-bold text-[#755817] shadow-sm backdrop-blur">
              <Sparkles className="size-4 text-[#c0922e]" />
              {home.badge}
            </div>
            <h1 className="max-w-3xl text-[clamp(2.6rem,6vw,5.25rem)] font-black leading-[1.25] text-[#092f22]">
              {home.title}
              <span className="mt-2 block text-[#b88725]">{home.accent}</span>
            </h1>
            <p className="mt-7 max-w-2xl text-lg leading-9 text-[#476258] sm:text-xl">
              {home.description}
            </p>
            <div className="mt-9 flex flex-col gap-3 sm:flex-row">
              <Button asChild size="lg" className="h-14 rounded-full bg-[#0a5a3c] px-7 text-base text-white hover:bg-[#084c33]">
                <a href="#paths">مسیر مناسب من کدام است؟ <ArrowLeft /></a>
              </Button>
              <Button asChild size="lg" variant="outline" className="h-14 rounded-full border-[#0a5a3c]/25 bg-white/70 px-7 text-base text-[#0a5a3c] hover:bg-white">
                <a href={contact.bookingHref} target="_blank" rel="noreferrer"><CalendarDays /> رزرو جلسه مشاوره</a>
              </Button>
            </div>
            <div className="mt-10 flex flex-wrap gap-x-7 gap-y-3 text-sm font-semibold text-[#567067]">
              <span className="flex items-center gap-2"><CircleCheck className="size-4 text-[#b88725]" /> آموزش قدم‌به‌قدم</span>
              <span className="flex items-center gap-2"><CircleCheck className="size-4 text-[#b88725]" /> تمرین در شرایط واقعی</span>
              <span className="flex items-center gap-2"><CircleCheck className="size-4 text-[#b88725]" /> پشتیبانی مسیر رشد</span>
            </div>
          </div>

          <div className="relative mx-auto w-full max-w-[540px]">
            <div className="absolute inset-x-10 -top-5 h-20 rounded-full bg-[#d3aa4d]/35 blur-3xl" />
            <div className="relative overflow-hidden rounded-[2rem] border border-white/70 bg-[#073c2b] p-5 shadow-[0_35px_90px_rgba(4,54,37,.23)] sm:p-7">
              <div className="flex items-center justify-between border-b border-white/10 pb-5">
                <div>
                  <p className="text-xs font-semibold text-emerald-100/60">نقشه رشد معامله‌گر</p>
                  <p className="mt-1 text-lg font-black text-white">از شناخت تا تسلط</p>
                </div>
                <div className="flex size-12 items-center justify-center rounded-2xl bg-[#d8ad4b] text-[#153c2d]">
                  <ChartNoAxesCombined className="size-6" />
                </div>
              </div>

              <div className="my-8 grid h-40 grid-cols-7 items-end gap-2" aria-hidden="true">
                {[30, 46, 38, 67, 54, 82, 94].map((height, index) => (
                  <div key={height} className="relative flex h-full items-end">
                    <span className={`w-full rounded-t-lg ${index === 6 ? "bg-[#e3ba58]" : "bg-emerald-300/25"}`} style={{ height: `${height}%` }} />
                  </div>
                ))}
              </div>

              <div className="grid grid-cols-3 gap-2">
                {[["دانش", "پایه تصمیم"], ["انضباط", "پایه اجرا"], ["بازخورد", "پایه رشد"]].map(([title, caption], index) => (
                  <div key={title} className={`rounded-2xl p-3 ${index === 2 ? "bg-[#d8ad4b] text-[#11382a]" : "bg-white/7 text-white"}`}>
                    <strong className="block text-sm">{title}</strong>
                    <span className={`mt-1 block text-[11px] ${index === 2 ? "text-[#315644]" : "text-emerald-100/55"}`}>{caption}</span>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      <section id="paths" className="border-y border-emerald-950/10 bg-white py-20 lg:py-24">
        <div className="mx-auto max-w-[1240px] px-5 lg:px-8">
          <div className="max-w-2xl">
            <p className="eyebrow">انتخاب مسیر</p>
            <h2 className="section-title">امروز در کدام نقطه ایستاده‌اید؟</h2>
            <p className="section-lead">مسیر یادگیری باید با تجربه، مسئله و هدف شما هماهنگ باشد.</p>
          </div>

          <div className="mt-12 grid gap-5 lg:grid-cols-2">
            <article className="path-card path-card-green">
              <div className="path-icon"><GraduationCap /></div>
              <p className="text-sm font-bold text-emerald-700">شروع مطمئن</p>
              <h3>تازه وارد بازار شده‌ام</h3>
              <p>مفاهیم را اصولی یاد بگیرید، مدیریت سرمایه را از روز اول جدی بگیرید و با یک نقشه روشن تمرین کنید.</p>
              <ul>{beginnerSteps.map((item) => <li key={item}><CircleCheck />{item}</li>)}</ul>
              <Link href="/courses" className="card-link">مشاهده مسیر یادگیری <ChevronLeft /></Link>
            </article>

            <article className="path-card path-card-gold">
              <div className="path-icon"><Target /></div>
              <p className="text-sm font-bold text-[#987020]">رشد هدفمند</p>
              <h3>معامله می‌کنم اما ثبات ندارم</h3>
              <p>فرآیند تصمیم‌گیری‌تان را بررسی کنید، خطاها را از دل ژورنال بیرون بکشید و با کوچینگ هدفمند پیش بروید.</p>
              <ul>{professionalSteps.map((item) => <li key={item}><CircleCheck />{item}</li>)}</ul>
              <Link href="/coaching" className="card-link">آشنایی با کوچینگ <ChevronLeft /></Link>
            </article>
          </div>
        </div>
      </section>

      <section className="bg-[#f7f8f5] py-20 lg:py-24" id="consultation">
        <div className="mx-auto max-w-[1240px] px-5 lg:px-8">
          <div className="grid overflow-hidden rounded-[2rem] bg-[#092f22] text-white shadow-[0_28px_70px_rgba(4,54,37,.18)] lg:grid-cols-[1fr_1.1fr]">
            <div className="border-b border-white/10 p-8 sm:p-12 lg:border-b-0 lg:border-l">
              <p className="text-sm font-bold text-[#e0b651]">یک گفت‌وگوی روشن، پیش از هر تصمیم</p>
              <h2 className="mt-4 text-3xl font-black leading-[1.5] sm:text-4xl">برای انتخاب مسیر مناسب، با ما صحبت کنید.</h2>
              <p className="mt-5 leading-8 text-emerald-50/65">مشاوره برای شناخت شرایط فعلی، هدف شما و انتخاب نقطه شروع مناسب است.</p>
            </div>
            <div className="grid gap-3 p-8 sm:grid-cols-3 sm:p-12">
              <a className="contact-choice" href={contact.whatsappHref} target="_blank" rel="noreferrer"><MessageCircle /><strong>واتساپ</strong><span>گفت‌وگوی مستقیم</span></a>
              <a className="contact-choice" href={contact.bookingHref} target="_blank" rel="noreferrer"><CalendarDays /><strong>رزرو جلسه</strong><span>انتخاب زمان مناسب</span></a>
              <Link className="contact-choice" href="/contact"><Headphones /><strong>فرم مشاوره</strong><span>ثبت درخواست</span></Link>
            </div>
          </div>
        </div>
      </section>
      <SiteFooter content={content} />
    </main>
  );
}