import Link from "next/link";
import type { Metadata } from "next";
import {
  Search,
  FileCheck2,
  Plane,
  GraduationCap,
  Banknote,
  ArrowUpRight,
} from "lucide-react";
import { Logo } from "@/components/brand/logo";

export const metadata: Metadata = {
  title: "EduAdvise International — Study Abroad, Done Right",
  description:
    "Overseas education and study-abroad consultancy in Goa. Course selection, applications, visas and coaching — from first enquiry to first day abroad.",
};

import { COUNTRIES as DESTINATIONS } from "@/lib/constants";

const SERVICES = [
  { n: "01", icon: Search, title: "Course Finder", body: "65,000+ programs across 30+ destinations, matched to your profile, budget and ambition." },
  { n: "02", icon: FileCheck2, title: "Applications", body: "End-to-end application handling — documents, statements of purpose, deadlines, offer letters." },
  { n: "03", icon: Plane, title: "Visa Guidance", body: "Financial documentation, interview prep and embassy paperwork with a 98% approval record." },
  { n: "04", icon: GraduationCap, title: "Test Coaching", body: "IELTS, PTE, TOEFL and Duolingo coaching with experienced in-house faculty." },
  { n: "05", icon: Banknote, title: "Education Loans", body: "Tie-ups with leading banks for sanction-to-disbursement support on student loans." },
];

const PROCESS = [
  { k: "Enquiry", d: "A free consultation to understand your goals." },
  { k: "Counselling", d: "Country, course and university shortlisting." },
  { k: "Application", d: "We file, track and secure your offers." },
  { k: "Visa & Fly", d: "Visa filing, pre-departure, and you're off." },
];

export default function WelcomePage() {
  return (
    <div className="min-h-screen bg-[oklch(0.99_0.005_320)] text-foreground">
      {/* Nav */}
      <header className="absolute inset-x-0 top-0 z-20">
        <nav className="mx-auto flex max-w-7xl items-center justify-between px-6 py-6 lg:px-10">
          <Logo variant="light" className="text-xl" />
          <div className="hidden items-center gap-8 text-sm text-white/80 md:flex">
            <a href="#services" className="transition-colors hover:text-white">Services</a>
            <a href="#process" className="transition-colors hover:text-white">How it works</a>
            <a href="#destinations" className="transition-colors hover:text-white">Destinations</a>
          </div>
          <Link
            href="/login"
            className="rounded-full border border-white/25 px-5 py-2 text-sm font-medium text-white backdrop-blur transition-colors hover:bg-white hover:text-[var(--plum-900)]"
          >
            Sign in
          </Link>
        </nav>
      </header>

      {/* Hero */}
      <section className="atlas-canvas grain relative overflow-hidden text-white">
        <div className="relative z-10 mx-auto max-w-7xl px-6 pb-28 pt-40 lg:px-10 lg:pb-36 lg:pt-48">
          <p className="eyebrow reveal text-[var(--gold)]" style={{ animationDelay: "60ms" }}>
            Overseas Education · Margao, Goa
          </p>
          <h1
            className="font-display reveal mt-6 max-w-4xl text-balance text-6xl font-light leading-[0.95] tracking-tight sm:text-7xl lg:text-8xl"
            style={{ animationDelay: "150ms" }}
          >
            Your future,
            <br />
            <span className="italic text-[var(--gold)]">abroad.</span> Plotted
            with care.
          </h1>
          <p
            className="reveal mt-8 max-w-xl text-lg leading-relaxed text-white/70"
            style={{ animationDelay: "260ms" }}
          >
            EduAdvise International guides students from first enquiry to first
            day on campus — course selection, applications, coaching and visas,
            all under one roof.
          </p>
          <div className="reveal mt-10 flex flex-wrap gap-4" style={{ animationDelay: "360ms" }}>
            <a
              href="#services"
              className="group inline-flex items-center gap-2 rounded-full bg-white px-7 py-3.5 text-base font-medium text-[var(--plum-900)] transition-transform hover:-translate-y-0.5"
            >
              Explore services
              <ArrowUpRight className="size-4 transition-transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5" />
            </a>
            <Link
              href="/login"
              className="inline-flex items-center gap-2 rounded-full border border-white/25 px-7 py-3.5 text-base font-medium text-white transition-colors hover:bg-white/10"
            >
              Counsellor login
            </Link>
          </div>
        </div>
        <span
          className="font-display pointer-events-none absolute -bottom-32 right-0 z-0 select-none text-[30rem] leading-none text-white/[0.04]"
          aria-hidden
        >
          ea
        </span>
      </section>

      {/* Destinations marquee */}
      <section id="destinations" className="border-y border-border bg-[var(--plum-900)] py-5 text-white">
        <div className="flex overflow-hidden">
          <div className="marquee-track">
            {[...DESTINATIONS, ...DESTINATIONS].map((d, i) => (
              <span key={i} className="mx-8 inline-flex items-center gap-8 text-lg text-white/80">
                {d}
                <span className="text-[var(--gold)]">✦</span>
              </span>
            ))}
          </div>
        </div>
      </section>

      {/* Services */}
      <section id="services" className="mx-auto max-w-7xl px-6 py-24 lg:px-10 lg:py-32">
        <div className="max-w-2xl">
          <span className="eyebrow text-brand-orange">What we do</span>
          <h2 className="font-display mt-4 text-5xl font-light tracking-tight">
            Everything between here and there.
          </h2>
        </div>
        <div className="mt-16 grid gap-px overflow-hidden rounded-2xl border border-border bg-border sm:grid-cols-2 lg:grid-cols-3">
          {SERVICES.map((s) => {
            const Icon = s.icon;
            return (
              <div
                key={s.n}
                className="group flex flex-col gap-5 bg-card p-8 transition-colors hover:bg-[oklch(0.97_0.02_330)]"
              >
                <div className="flex items-start justify-between">
                  <span className="font-display text-3xl font-light text-brand-orange">{s.n}</span>
                  <Icon className="size-6 text-brand-blue transition-transform group-hover:scale-110" />
                </div>
                <div>
                  <h3 className="font-display text-2xl font-normal">{s.title}</h3>
                  <p className="mt-3 text-sm leading-relaxed text-muted-foreground">{s.body}</p>
                </div>
              </div>
            );
          })}
          {/* trailing editorial cell */}
          <div className="flex flex-col justify-between bg-brand-navy p-8 text-white">
            <span className="eyebrow text-[var(--gold)]">Since 2022</span>
            <p className="font-display text-2xl font-light leading-snug">
              One team. Every step from shortlist to skyline.
            </p>
          </div>
        </div>
      </section>

      {/* Process */}
      <section id="process" className="border-t border-border bg-[oklch(0.97_0.01_320)] py-24 lg:py-32">
        <div className="mx-auto max-w-7xl px-6 lg:px-10">
          <span className="eyebrow text-brand-orange">How it works</span>
          <h2 className="font-display mt-4 max-w-2xl text-5xl font-light tracking-tight">
            A clear path, four honest steps.
          </h2>
          <ol className="mt-16 grid gap-10 md:grid-cols-4">
            {PROCESS.map((p, i) => (
              <li key={p.k} className="relative">
                <div className="font-display text-6xl font-light text-brand-orange/30">
                  {String(i + 1).padStart(2, "0")}
                </div>
                <div className="mt-4 h-px w-12 bg-[var(--gold)]" />
                <h3 className="font-display mt-5 text-2xl">{p.k}</h3>
                <p className="mt-2 text-sm leading-relaxed text-muted-foreground">{p.d}</p>
              </li>
            ))}
          </ol>
        </div>
      </section>

      {/* CTA */}
      <section className="atlas-canvas grain relative overflow-hidden text-white">
        <div className="relative z-10 mx-auto max-w-4xl px-6 py-28 text-center lg:py-36">
          <h2 className="font-display text-balance text-5xl font-light leading-tight tracking-tight sm:text-6xl">
            Let&apos;s map the route to your
            <span className="italic text-[var(--gold)]"> dream campus.</span>
          </h2>
          <p className="mx-auto mt-6 max-w-lg text-lg text-white/70">
            Book a free consultation, or sign in if you&apos;re part of the team.
          </p>
          <div className="mt-10 flex justify-center gap-4">
            <a
              href="mailto:enquiries@eduadvise.in"
              className="rounded-full bg-white px-8 py-3.5 text-base font-medium text-[var(--plum-900)] transition-transform hover:-translate-y-0.5"
            >
              Book a consultation
            </a>
            <Link
              href="/login"
              className="rounded-full border border-white/25 px-8 py-3.5 text-base font-medium text-white transition-colors hover:bg-white/10"
            >
              Sign in
            </Link>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="border-t border-border bg-card">
        <div className="mx-auto flex max-w-7xl flex-col items-start justify-between gap-6 px-6 py-12 sm:flex-row sm:items-center lg:px-10">
          <Logo className="text-lg" />
          <p className="text-sm text-muted-foreground">
            GF, Noronha Dias Complex, Old Market, Margao, Goa 403601 ·
            enquiries@eduadvise.in
          </p>
          <p className="text-sm text-muted-foreground">
            © {new Date().getFullYear()} EduAdvise International
          </p>
        </div>
      </footer>
    </div>
  );
}