import Link from "next/link";
import { SiteHeader } from "@/components/SiteHeader";
import { SiteFooter } from "@/components/SiteFooter";
import { PlaceholderImage } from "@/components/PlaceholderImage";
import { StatStrip } from "@/components/StatStrip";

// NOTE: AI-generated movie directing and live-event/film directing are
// aspirational only per company governance and must NEVER be listed here
// as an offered service, however the copy gets reworded later.
const SERVICES = [
  {
    title: "Content & creative production",
    body: "Video, photography, and creative assets produced for brands and campaigns.",
  },
  {
    title: "Music & audio licensing",
    body: "A catalog of original music available for licensing — streaming, CRBT, and telecom partnerships.",
  },
  {
    title: "SMS & value-added content",
    body: "Short-form content products distributed through telecom SMS/VAS channels.",
  },
  {
    title: "Publishing",
    body: "African News Today, our own news platform, is produced and run in-house.",
  },
];

export default function MediaPage() {
  return (
    <>
      <SiteHeader />

      {/* Hero */}
      <section className="py-16">
        <div className="mx-auto grid max-w-6xl grid-cols-1 items-center gap-12 px-8 md:grid-cols-2">
          <div>
            <p className="mb-4 font-heading text-sm font-semibold text-division-media">
              dChimes Media
            </p>
            <h1 className="mb-5 font-heading text-4xl font-semibold leading-tight tracking-tight md:text-5xl">
              Content and creative that gives your brand a voice worth following.
            </h1>
            <p className="mb-8 max-w-md text-lg text-navy/65">
              From music and audio licensing to owned publishing, dChimes
              Media handles the creative side so your brand shows up with
              something worth paying attention to.
            </p>
            <Link
              href="/book"
              className="inline-block rounded-full bg-green px-6 py-4 text-[15px] font-semibold text-white"
            >
              Book your free 30-minute call
            </Link>
          </div>
          <PlaceholderImage
            label="Photo placeholder — creative/studio visual · 760×600"
            className="h-[440px]"
          />
        </div>
      </section>

      {/* Stats */}
      <section className="py-16">
        <div className="mx-auto max-w-6xl px-8">
          <StatStrip
            stats={[
              { value: "14+", label: "Artists in our roster" },
              { value: "50+", label: "Songs available for licensing" },
              { value: "1", label: "Owned publishing platform — African News Today" },
            ]}
          />
        </div>
      </section>

      {/* Services */}
      <section className="py-16">
        <div className="mx-auto max-w-6xl px-8">
          <div className="mb-12 max-w-xl">
            <h2 className="mb-3 font-heading text-3xl font-semibold">What we do</h2>
          </div>
          <div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
            {SERVICES.map((s) => (
              <div key={s.title} className="rounded-card border border-navy/10 p-6">
                <h3 className="mb-2 font-heading text-lg font-semibold">{s.title}</h3>
                <p className="text-sm text-navy/65">{s.body}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="py-16">
        <div className="mx-auto max-w-6xl px-8">
          <div className="flex flex-col items-center justify-between gap-8 rounded-[26px] bg-navy px-10 py-14 text-center text-white md:flex-row md:text-left">
            <div>
              <h2 className="mb-2 font-heading text-3xl font-semibold">
                Let&apos;s talk about your brand's content and creative needs.
              </h2>
              <p className="text-white/60">Free for the first 30 minutes.</p>
            </div>
            <Link
              href="/book"
              className="whitespace-nowrap rounded-full bg-green px-6 py-4 text-[15px] font-semibold text-white"
            >
              Book your free call
            </Link>
          </div>
        </div>
      </section>

      <SiteFooter />
    </>
  );
}