import type { Metadata } from "next";
import Link from "next/link";

import { Container } from "@/components/Container";
import { PageHeader } from "@/components/PageHeader";
import { DraftBanner } from "@/components/consentiq/DraftBanner";

export const metadata: Metadata = {
  title: "ConsentIQ · Template structure",
  description:
    "The standardised template that every ConsentIQ builder output follows: header, patient block, procedure block, numbered sections, and signature lines.",
};

type Section = {
  number: string;
  title: string;
  body: string;
  bullets?: string[];
};

const sections: Section[] = [
  {
    number: "1",
    title: "What the procedure involves",
    body: "A plain-language description of the operation from the patient's perspective. Explains positioning, anaesthesia, approach, and what happens during the main surgical steps.",
    bullets: [
      "Where the incision will be",
      "Major surgical steps",
      "Approximate theatre time",
      "Use of imaging or tourniquets",
    ],
  },
  {
    number: "2",
    title: "Benefits",
    body: "The expected gains from the procedure, framed around the patient's symptoms and function — never overstated.",
    bullets: [
      "Pain relief",
      "Restored movement or function",
      "Correction of deformity",
      "Stability or healing",
    ],
  },
  {
    number: "3",
    title: "Risks",
    body: "A transparent list of the common, rare, and serious complications. Each risk is briefly contextualised so the patient understands what it means in practice.",
    bullets: [
      "Common risks such as bruising, swelling, and stiffness",
      "Procedure-specific risks",
      "Rare but serious complications (DVT, PE, nerve injury, death)",
      "Implant-specific considerations where relevant",
    ],
  },
  {
    number: "4",
    title: "Alternatives",
    body: "What else the patient could reasonably choose — including non-operative options and other operations that address the same problem.",
    bullets: [
      "Do nothing / continued observation",
      "Physiotherapy, bracing, analgesia",
      "Injections or minimally invasive options",
      "Alternative operations",
    ],
  },
  {
    number: "5",
    title: "Recovery",
    body: "A realistic timeline of what the first hours, days, weeks, and months will look like so patients can plan time off work, driving, and support at home.",
    bullets: [
      "Day 0–1: hospital stay and early mobilisation",
      "Weeks 1–6: wound care, walking aids, return to desk work",
      "Weeks 6–12: return to driving and light activity",
      "Months 3–12: full recovery and return to sport",
    ],
  },
  {
    number: "6",
    title: "Warning signs",
    body: "Symptoms that should prompt the patient to contact the ward, their GP, or return to A&E — the single most medico-legally important section.",
  },
  {
    number: "7",
    title: "Consent statement",
    body: "A formal paragraph in which the patient confirms they have had the opportunity to ask questions, understand the above, and agree to proceed. Followed by signature lines for patient, witness, and surgeon.",
  },
];

export default function ConsentIQTemplatesPage() {
  return (
    <>
      <PageHeader
        eyebrow="ConsentIQ · Template"
        title="What the builder generates."
        lede="Every consent document produced by the ConsentIQ builder follows the same standardised structure. Here is what that structure looks like — so surgeons know exactly what their patients will see."
      />
      <Container className="pb-14 md:pb-16">
        <DraftBanner className="mb-8" />

        <div className="grid gap-8 lg:grid-cols-[1fr_320px]">
          <div className="space-y-6">
            <div className="rounded-xl border border-[var(--color-line)] bg-white p-6">
              <div className="text-[11px] font-bold uppercase tracking-wider text-[var(--color-blue)]">
                Header block
              </div>
              <h2 className="mt-2 font-display text-[22px] font-bold tracking-tight text-[var(--color-ink)]">
                Hospital + patient + procedure
              </h2>
              <ul className="mt-4 space-y-2 text-[15px] leading-relaxed text-[var(--color-slate)]">
                <li>· Hospital letterhead block, configurable per partner site</li>
                <li>· Patient name, date of birth, MRN, language preference</li>
                <li>· Procedure name, side, approach, anaesthesia type</li>
              </ul>
            </div>

            {sections.map((s) => (
              <div
                key={s.number}
                className="rounded-xl border border-[var(--color-line)] bg-white p-6"
              >
                <div className="flex items-start gap-4">
                  <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-[var(--color-mist)] font-display text-[15px] font-bold text-[var(--color-blue)]">
                    {s.number}
                  </div>
                  <div className="flex-1">
                    <h3 className="font-display text-[20px] font-bold tracking-tight text-[var(--color-ink)]">
                      {s.title}
                    </h3>
                    <p className="mt-2 text-[15px] leading-relaxed text-[var(--color-slate)]">
                      {s.body}
                    </p>
                    {s.bullets && (
                      <ul className="mt-4 space-y-1.5 text-[14px] leading-relaxed text-[var(--color-slate)]">
                        {s.bullets.map((b) => (
                          <li key={b}>· {b}</li>
                        ))}
                      </ul>
                    )}
                  </div>
                </div>
              </div>
            ))}

            <div className="rounded-xl border border-[var(--color-line)] bg-white p-6">
              <div className="text-[11px] font-bold uppercase tracking-wider text-[var(--color-blue)]">
                Signature block
              </div>
              <h2 className="mt-2 font-display text-[22px] font-bold tracking-tight text-[var(--color-ink)]">
                Patient, witness, surgeon, date
              </h2>
              <div className="mt-5 grid gap-4 sm:grid-cols-2">
                {["Patient", "Witness", "Surgeon", "Date"].map((label) => (
                  <div key={label}>
                    <div className="border-b border-[var(--color-ink)]/40 pb-1" />
                    <div className="mt-1 text-[12px] font-semibold uppercase tracking-wider text-[var(--color-slate)]">
                      {label}
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>

          <aside className="h-fit rounded-xl border border-[var(--color-line)] bg-[var(--color-mist)]/40 p-6">
            <h2 className="font-display text-[18px] font-bold tracking-tight text-[var(--color-ink)]">
              Try it on a real procedure
            </h2>
            <p className="mt-3 text-[14px] leading-relaxed text-[var(--color-slate)]">
              Open the builder to see this template filled in with
              clinically-sound draft content for any of the seed procedures.
            </p>
            <div className="mt-5">
              <Link
                href="/products/consentiq/procedures"
                className="inline-flex items-center gap-2 rounded-lg bg-[var(--color-blue)] px-4 py-2.5 text-[14px] font-semibold text-white hover:bg-[var(--color-blue-deep)]"
              >
                Browse procedures →
              </Link>
            </div>
          </aside>
        </div>
      </Container>
    </>
  );
}
