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="acve-page">
      <section className="acve-panel relative overflow-hidden p-5 md:p-8">
        <div className="grid items-start gap-6 lg:grid-cols-[1.15fr_0.85fr]">
          <div>
            <p className="acve-pill mb-4 w-fit text-sm">
              <span className="mr-2 text-accent">*</span>
              Professional Legal Education
            </p>
            <h1 className="acve-heading text-4xl leading-tight md:text-5xl">Learn English Law with Confidence</h1>
            <p className="mt-3 max-w-2xl text-base leading-relaxed text-slate-600 md:text-lg">
              Courses, case studies, and guided practice designed for Latin American professionals and students.
            </p>
            <ul className="mt-5 grid gap-2 sm:grid-cols-2">
              {highlights.map((item) => (
                <li key={item} className="flex items-start gap-2 rounded-lg border border-slate-200 bg-white px-3 py-2 text-sm text-slate-700">
                  <span className="mt-0.5 flex h-5 w-5 items-center justify-center rounded-full border border-accent text-xs text-accent">
                    v
                  </span>
                  {item}
                </li>
              ))}
            </ul>

            <div className="mt-6 flex flex-wrap gap-2">
              <Link className="acve-button-primary px-6 py-2 text-sm font-semibold transition hover:brightness-105" href="/courses">
                Start Learning
              </Link>
              <Link className="acve-button-secondary px-6 py-2 text-sm 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-[360px] w-full object-cover object-right md:h-[460px]"
                height={900}
                priority
                src="/images/hero-reference.png"
                width={700}
              />
            </div>
            <div className="absolute bottom-4 left-4 right-4 rounded-2xl border border-slate-300 bg-white px-4 py-3 shadow-sm">
              <p className="text-sm font-semibold uppercase tracking-wide text-accent">AI</p>
              <p className="text-lg font-semibold text-slate-800">Legal Assistant Ready</p>
              <p className="text-sm text-slate-500">Ask me anything about English Law</p>
            </div>
          </div>
        </div>

        <div className="mt-6 grid gap-3 border-t border-slate-200 pt-5 text-center text-xs 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-3 hover:border-brand hover:text-brand" href="/courses">
            Browse courses
          </Link>
          <Link className="rounded-xl border border-slate-300 bg-white px-3 py-3 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-3 hover:border-brand hover:text-brand" href="/practice">
            Practice and exercises
          </Link>
        </div>
      </section>
    </div>
  );
}
