import { Link } from "@tanstack/react-router";
import { Quote, ArrowRight } from "lucide-react";
import { Reveal } from "@/components/Reveal";
import { sambutan } from "@/lib/site-data";
import kepala from "@/assets/kepala.jpg";

export function Sambutan() {
  return (
    <section className="section-pad">
      <div className="container-x grid items-center gap-10 lg:grid-cols-2">
        <Reveal>
          <div className="relative mx-auto max-w-md">
            <div className="neu-lg overflow-hidden p-3">
              <img src={kepala} alt={sambutan.nama} loading="lazy" className="w-full rounded-[20px] object-cover" />
            </div>
            <div className="neu absolute -bottom-5 left-1/2 -translate-x-1/2 px-6 py-3 text-center">
              <p className="font-display text-sm font-bold text-foreground">{sambutan.nama}</p>
              <p className="text-xs text-primary">{sambutan.jabatan}</p>
            </div>
          </div>
        </Reveal>

        <Reveal delay={0.15}>
          <span className="inline-block rounded-full bg-accent px-4 py-1 text-xs font-semibold uppercase tracking-wide text-accent-foreground">
            Sambutan
          </span>
          <h2 className="mt-4 text-3xl font-bold text-foreground sm:text-4xl">Sambutan Kepala Madrasah</h2>
          <Quote className="mt-5 h-10 w-10 text-primary/30" />
          <p className="mt-3 leading-relaxed text-muted-foreground">{sambutan.teks}</p>
          <Link to="/tentang" className="btn-neu btn-neu-primary mt-7">
            Baca Selengkapnya <ArrowRight className="h-4 w-4" />
          </Link>
        </Reveal>
      </div>
    </section>
  );
}