import Link from "next/link";
import { Button } from "@/components/ui/button";

export function Hero() {
  return (
    <section className="bg-gradient-to-b from-emerald-900 via-emerald-950 to-emerald-900 -mt-20 pt-6">
      <div className="mx-auto flex min-h-screen max-w-6xl flex-col gap-10 px-4 pb-16 pt-24 md:flex-row md:items-center md:px-6 md:pb-20 md:pt-28">
        <div className="max-w-xl space-y-7">
          <div className="inline-flex items-center gap-2 rounded-full bg-emerald-800/60 px-3 py-1 text-[0.65rem] font-semibold uppercase tracking-[0.18em] text-emerald-50">
            <span className="h-1.5 w-1.5 rounded-full bg-emerald-400" />
            Tax &amp; insurance experts for the DMV
          </div>
          <div className="space-y-3">
            <h1 className="font-serif text-4xl font-bold leading-tight tracking-tight text-emerald-50 sm:text-[2.75rem]">
              Strategic tax help for{" "}
              <span className="text-emerald-200">smarter business</span> and family
              finances.
            </h1>
            <p className="max-w-lg text-sm leading-relaxed text-emerald-50/90 sm:text-base">
              Join clients across Virginia and Maryland who rely on Ghion
              Financial for accurate tax preparation, insurance guidance, and
              bookkeeping that keeps them a step ahead all year long.
            </p>
          </div>
          <div className="flex flex-col gap-3 sm:flex-row sm:items-center">
            <Button className="h-11 rounded-full bg-emerald-400 px-6 text-sm font-semibold text-emerald-950 hover:bg-emerald-300">
              <Link href="/appointment">Book your appointment</Link>
            </Button>
            <Button
              variant="outline"
              className="h-11 rounded-full border-emerald-300 bg-transparent px-6 text-sm font-semibold text-emerald-100 hover:bg-emerald-950/40"
            >
              <a href="#services">Explore services</a>
            </Button>
          </div>
          <div className="flex flex-wrap items-center gap-4 text-xs text-emerald-50/90">
            <div className="inline-flex items-center gap-2 rounded-full bg-emerald-800/70 px-3 py-1">
              <span className="font-semibold text-amber-300">★★★★★</span>
              <span>Clients across the DMV</span>
            </div>
            <span>Individuals &amp; families</span>
            <span>Small businesses</span>
            <span>In‑person &amp; virtual</span>
          </div>
        </div>
        <div className="flex w-full max-w-md flex-col gap-4 rounded-3xl bg-emerald-950/80 p-5 shadow-lg shadow-emerald-950/60 md:ml-auto">
          <p className="text-xs font-semibold uppercase tracking-[0.2em] text-emerald-100/90">
            Why clients choose us
          </p>
          <div className="grid grid-cols-2 gap-4 text-sm">
            <div>
              <div className="text-3xl font-bold text-emerald-50">15Y+</div>
              <div className="mt-1 text-emerald-100/80">
                Experience in tax &amp; CPA services
              </div>
            </div>
            <div>
              <div className="text-3xl font-bold text-emerald-50">150+</div>
              <div className="mt-1 text-emerald-100/80">
                Businesses &amp; families supported
              </div>
            </div>
          </div>
          <div className="mt-2 grid gap-3 rounded-2xl bg-emerald-900/70 p-3 text-xs text-emerald-50/90">
            <div className="flex items-center justify-between gap-2">
              <div>
                <div className="text-[0.7rem] uppercase tracking-[0.16em] text-emerald-200/80">
                  Google rating
                </div>
                <div className="mt-1 flex items-center gap-1">
                  <span className="text-base font-semibold text-emerald-50">
                    4.9
                  </span>
                  <span className="text-[0.7rem] text-emerald-100/80">/ 5.0</span>
                </div>
              </div>
              <div className="flex items-center gap-0.5 text-amber-300">
                <span>★</span>
                <span>★</span>
                <span>★</span>
                <span>★</span>
                <span>★</span>
              </div>
            </div>
            <button className="mt-1 inline-flex items-center justify-center rounded-full border border-emerald-300 bg-emerald-950 px-3 py-1 text-[0.7rem] font-semibold text-emerald-100 hover:bg-emerald-900">
              See client reviews
            </button>
          </div>
          <p className="text-xs text-emerald-100/80">
            Serving clients across Virginia and Maryland with in‑person and
            virtual appointments.
          </p>
        </div>
      </div>
    </section>
  );
}

