import Image from "next/image";
import { Award, MapPin } from "lucide-react";
import type { Contact, Milestone } from "@/lib/contentTypes";
import Reveal from "./ui/Reveal";
import PillButton from "./ui/PillButton";

/** Tentang perusahaan: panel visual + bio + stack + tonggak perjalanan. */
export default function About({
  milestones,
  techStack,
  recognitions,
  mediaCoverage,
  contact,
}: {
  milestones: Milestone[];
  techStack: string[];
  recognitions: string[];
  mediaCoverage: string[];
  contact: Contact;
}) {
  return (
    <section className="border-y border-line bg-surface/40">
      <div className="mx-auto grid max-w-6xl items-center gap-12 px-5 py-24 md:px-8 md:py-32 lg:grid-cols-2 lg:gap-16">
        {/* Panel visual */}
        <Reveal>
          <div className="relative aspect-[4/5] overflow-hidden rounded-3xl border border-line">
            <Image
              src="/about-office.jpg"
              alt="Kantor Velo Teknologi di Bandung"
              fill
              sizes="(max-width: 1024px) 92vw, 46vw"
              className="object-cover"
              priority={false}
            />
            <div className="absolute inset-0 bg-gradient-to-t from-ink/85 via-ink/20 to-transparent" />
            <div className="absolute -top-12 -right-12 size-56 rounded-full bg-panel-strong blur-3xl" />
            {/* badge mengambang */}
            <div className="glow-border absolute bottom-5 left-5 flex items-center gap-2 rounded-full bg-ink/70 px-4 py-2 backdrop-blur-md">
              <MapPin size={13} className="text-fog" />
              <span className="font-accent text-xs text-fog">
                {contact.address}
              </span>
            </div>
          </div>
        </Reveal>

        {/* Narasi */}
        <div>
          <Reveal>
            <span className="inline-flex items-center gap-2 rounded-full border border-line bg-panel px-4 py-1.5 font-accent text-[11px] tracking-[0.18em] text-mist uppercase">
              <span className="size-1 rounded-full bg-fg" />
              Tentang Kami
            </span>
            <h2 className="mt-5 text-3xl font-semibold tracking-tight text-fg md:text-4xl">
              Tim kecil, standar besar
            </h2>
            <p className="mt-4 text-sm leading-relaxed text-fog md:text-base">
              Velo Teknologi (Velocite Technology) adalah perusahaan layanan IT
              yang tumbuh cepat, melayani siklus penuh pengembangan untuk
              sektor privat maupun pemerintah. Kami percaya pada pengembangan
              profesional dan hasil — ditenagai tim berperforma tinggi, kami
              menghadirkan solusi terbaik bagi kepentingan bisnis Anda.
            </p>
          </Reveal>

          {/* Stack teknologi */}
          <Reveal delay={0.1}>
            <div className="mt-7 flex flex-wrap gap-2">
              {techStack.map((tech) => (
                <span
                  key={tech}
                  className="rounded-full border border-line bg-ink/60 px-3.5 py-1.5 font-accent text-xs text-fog transition-colors hover:border-line-2 hover:text-fg"
                >
                  {tech}
                </span>
              ))}
            </div>
          </Reveal>

          {/* Tonggak perjalanan */}
          <Reveal delay={0.15}>
            <div className="mt-8 divide-y divide-line border-y border-line">
              {milestones.map((m) => (
                <div
                  key={m.period}
                  className="flex items-center justify-between gap-4 py-4"
                >
                  <div>
                    <p className="text-sm font-medium text-fg">{m.role}</p>
                    <p className="mt-0.5 font-accent text-xs text-mist">
                      {m.place}
                    </p>
                  </div>
                  <span className="shrink-0 rounded-full border border-line px-3 py-1 font-accent text-[11px] text-fog">
                    {m.period}
                  </span>
                </div>
              ))}
            </div>
          </Reveal>

          {/* Rekognisi tim & liputan media */}
          <Reveal delay={0.18}>
            <div className="mt-8">
              <span className="inline-flex items-center gap-2 font-accent text-[11px] tracking-[0.18em] text-mist uppercase">
                <Award size={13} />
                Rekognisi Tim
              </span>
              <div className="mt-3 flex flex-wrap gap-2">
                {recognitions.map((r) => (
                  <span
                    key={r}
                    className="rounded-full border border-line bg-ink/60 px-3 py-1.5 font-accent text-xs text-fog transition-colors hover:border-line-2 hover:text-fg"
                  >
                    {r}
                  </span>
                ))}
              </div>
              <p className="mt-3 text-xs text-mist">
                Karya kami diliput media nasional: {mediaCoverage.join(" · ")}
              </p>
            </div>
          </Reveal>

          <Reveal delay={0.2} className="mt-8 flex flex-wrap gap-3">
            <PillButton href="#kontak">Kenalan Lebih Dekat</PillButton>
            <PillButton href="#layanan" variant="ghost">
              Lihat Layanan
            </PillButton>
          </Reveal>
        </div>
      </div>
    </section>
  );
}