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";
import { ContentProcess } from "@/components/ContentProcess";
import { CaseStudyTeaser } from "@/components/CaseStudyTeaser";

export default function DigitalPage() {
  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-blue">
              dChimes Digital
            </p>
            <h1 className="mb-5 font-heading text-4xl font-semibold leading-tight tracking-tight md:text-5xl">
              SEO and content that gets you found by the right people.
            </h1>
            <p className="mb-8 max-w-md text-lg text-navy/65">
              A structured content and SEO process, built to be consistent
              month after month — not a one-off blog post here and there.
            </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 — content/SEO work in progress · 760×600"
            className="h-[440px]"
          />
        </div>
      </section>

      {/* Stats */}
      <section className="py-16">
        <div className="mx-auto max-w-6xl px-8">
          <StatStrip
            stats={[
              { value: "1,000+", label: "Pieces of content delivered" },
              { value: "320", label: "Peak monthly output" },
              { value: "6-stage", label: "Production process, every time" },
            ]}
          />
        </div>
      </section>

      {/* Process */}
      <section className="py-16">
        <div className="mx-auto max-w-6xl px-8">
          <div className="mb-10 max-w-xl">
            <h2 className="mb-3 font-heading text-3xl font-semibold">
              How content actually gets made here
            </h2>
            <p className="text-lg text-navy/65">
              Every piece goes through the same six steps — nothing ships
              without a human review.
            </p>
          </div>
          <ContentProcess />
        </div>
      </section>

      {/* Case study */}
      <section className="py-16">
        <div className="mx-auto max-w-6xl px-8">
          <CaseStudyTeaser context="our SEO and content work for Ace Eye Care" />
        </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 see what shows up when people search for you.
              </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 />
    </>
  );
}