import Image from "next/image";
import Link from "next/link";

const highlights = [
  "Courses designed for Latin American professionals",
  "Real English law case studies and analysis",
  "AI-powered legal assistant available 24/7",
  "Interactive practice exercises and assessments",
];

export default function HomePage() {
  return (
    <div className="space-y-8">
      <section className="acve-panel relative overflow-hidden p-6 md:p-10">
        <div className="grid items-start gap-8 lg:grid-cols-[1.1fr_0.9fr]">
          <div>
            <p className="acve-pill mb-5 w-fit text-base">
              <span className="mr-2 text-accent">*</span>
              Professional Legal Education
            </p>
            <h1 className="acve-heading text-4xl leading-[1.1] md:text-7xl">Learn English Law with Confidence</h1>
            <p className="mt-5 max-w-2xl text-lg leading-relaxed text-slate-600 md:text-2xl">
              Courses, case studies, and guided practice designed for Latin American professionals and students.
            </p>
            <ul className="mt-7 space-y-3">
              {highlights.map((item) => (
                <li key={item} className="flex items-start gap-3 text-base text-slate-700 md:text-xl">
                  <span className="mt-1 flex h-7 w-7 items-center justify-center rounded-full border-2 border-accent text-base text-accent">
                    v
                  </span>
                  {item}
                </li>
              ))}
            </ul>

            <div className="mt-8 flex flex-wrap gap-3">
              <Link className="acve-button-primary px-8 py-3 text-lg font-semibold transition hover:brightness-105" href="/courses">
                Start Learning
              </Link>
              <Link className="acve-button-secondary px-8 py-3 text-lg font-semibold transition hover:bg-brand-soft" href="/courses">
                Explore Courses
              </Link>
            </div>
          </div>

          <div className="relative">
            <div className="overflow-hidden rounded-3xl border border-slate-300 bg-white shadow-sm">
              <Image
                alt="ACVE legal library"
                className="h-[420px] w-full object-cover object-right md:h-[600px]"
                height={900}
                priority
                src="/images/hero-reference.png"
                width={700}
              />
            </div>
            <div className="absolute bottom-5 left-5 right-5 rounded-2xl border border-slate-300 bg-white px-5 py-4 shadow-sm">
              <p className="text-sm font-semibold uppercase tracking-wide text-accent">AI</p>
              <p className="text-xl font-semibold text-slate-800">Legal Assistant Ready</p>
              <p className="text-base text-slate-500">Ask me anything about English Law</p>
            </div>
          </div>
        </div>

        <div className="mt-10 grid gap-4 border-t border-slate-200 pt-7 text-center text-sm font-semibold uppercase tracking-wide text-slate-500 md:grid-cols-3">
          <Link className="rounded-xl border border-slate-300 bg-white px-3 py-4 hover:border-brand hover:text-brand" href="/courses">
            Browse courses
          </Link>
          <Link className="rounded-xl border border-slate-300 bg-white px-3 py-4 hover:border-brand hover:text-brand" href="/case-studies">
            Read case studies
          </Link>
          <Link className="rounded-xl border border-slate-300 bg-white px-3 py-4 hover:border-brand hover:text-brand" href="/practice">
            Practice and exercises
          </Link>
        </div>
      </section>
    </div>
  );
}