import Link from "next/link";
import { SiteHeader } from "@/components/SiteHeader";
import { SiteFooter } from "@/components/SiteFooter";
import { PlaceholderImage } from "@/components/PlaceholderImage";
import { PricingTiers } from "@/components/PricingTiers";
import { RoiCalculator } from "@/components/RoiCalculator";
import { CaseStudyTeaser } from "@/components/CaseStudyTeaser";

export default function SystemsPage() {
  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-green">
              dChimes Systems · Flagship
            </p>
            <h1 className="mb-5 font-heading text-4xl font-semibold leading-tight tracking-tight md:text-5xl">
              Your website, booking, and marketing — built to work as one system.
            </h1>
            <p className="mb-8 max-w-md text-lg text-navy/65">
              Most businesses end up stitching together a website, a booking
              tool, and an ad account from three different vendors who&apos;ve
              never spoken to each other. We build it as one connected system
              instead — for any business that runs on appointments,
              enquiries, or repeat customers, not just clinics.
            </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 — client using the booking system · 760×600"
            className="h-[440px]"
          />
        </div>
      </section>

      {/* What's included */}
      <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 "one system" actually means
            </h2>
            <p className="text-lg text-navy/65">
              Three pieces, designed to talk to each other from day one.
            </p>
          </div>
          <div className="grid grid-cols-1 gap-6 sm:grid-cols-3">
            {[
              {
                title: "A website that converts",
                body: "Built to turn visitors into bookings, not just look good.",
              },
              {
                title: "Booking that runs itself",
                body: "Automated confirmations, reminders, and rebooking — fewer no-shows without you lifting a finger.",
              },
              {
                title: "Marketing that's accountable",
                body: "SEO and ad spend passed through at cost, reported plainly, no markup games.",
              },
            ].map((item) => (
              <div key={item.title} className="rounded-card border border-navy/10 p-6">
                <h3 className="mb-2 font-heading text-lg font-semibold">{item.title}</h3>
                <p className="text-sm text-navy/65">{item.body}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ROI calculator */}
      <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">
              What could this be worth to you?
            </h2>
            <p className="text-lg text-navy/65">
              A rough starting point — the real numbers come from the call.
            </p>
          </div>
          <RoiCalculator />
        </div>
      </section>

      {/* Case study */}
      <section className="py-16">
        <div className="mx-auto max-w-6xl px-8">
          <CaseStudyTeaser />
        </div>
      </section>

      {/* Pricing */}
      <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">
              Three ways to work together
            </h2>
            <p className="text-lg text-navy/65">
              Every engagement is scoped on the call — these are starting
              points, not fixed packages.
            </p>
          </div>
          <PricingTiers />
          <p className="mt-6 text-center text-sm text-navy/50">
            Also available as a standalone: the Digital Health Check — a deep
            audit of your current site and marketing, no ongoing commitment.
          </p>
        </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 this looks like for your business.
              </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 />
    </>
  );
}