import Image from "next/image";
import { ShieldCheck, BookOpenCheck, Activity } from "lucide-react";
import { Container } from "@/components/Container";

type Signal = {
  title: string;
  description: string;
  icon: React.ReactNode;
};

const iconClass = "h-7 w-7";
const iconStroke = 1.75;

const signals: Signal[] = [
  {
    title: "Practising surgeons",
    description:
      "Every tool is designed, reviewed, and signed off by orthopaedic surgeons actively in clinical practice.",
    icon: <ShieldCheck className={iconClass} strokeWidth={iconStroke} aria-hidden />,
  },
  {
    title: "Peer-reviewed content",
    description:
      "Atlases, consent pathways, and exam-prep questions are cross-checked against current guidelines and primary literature.",
    icon: <BookOpenCheck className={iconClass} strokeWidth={iconStroke} aria-hidden />,
  },
  {
    title: "Evidence-based",
    description:
      "Live PubMed and society feeds keep members plugged into the latest orthopaedic research, every day.",
    icon: <Activity className={iconClass} strokeWidth={iconStroke} aria-hidden />,
  },
];

/**
 * Three-up trust signal band. Plain server component with inline SVG icons
 * so it renders cleanly under the site's strict CSP.
 */
export function TrustSection() {
  return (
    <section className="bg-white py-12 md:py-16">
      <Container>
        <div className="mx-auto max-w-3xl text-center">
          <div className="text-[11px] font-bold uppercase tracking-[0.18em] text-[var(--color-blue)]">
            Why OrthoGlobe
          </div>
          <h2 className="mt-4 font-display text-[36px] md:text-[46px] font-extrabold leading-[1.05] tracking-[-0.02em] text-[var(--color-ink)]">
            Built by surgeons. Anchored in evidence.
          </h2>
        </div>

        <div className="mt-16 grid gap-8 md:grid-cols-3 md:gap-6">
          {signals.map((s) => (
            <div
              key={s.title}
              className="rounded-2xl border border-[var(--color-line)] bg-white p-8 transition-[border-color,box-shadow] hover:border-[var(--color-blue)] hover:shadow-[0_20px_48px_rgba(30,64,255,0.08)]"
            >
              <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-[var(--color-mist)] text-[var(--color-blue)]">
                {s.icon}
              </div>
              <div className="mt-6 font-display text-[20px] font-extrabold tracking-[-0.01em] text-[var(--color-ink)]">
                {s.title}
              </div>
              <p className="mt-3 text-[15px] leading-relaxed text-[var(--color-slate)]">
                {s.description}
              </p>
            </div>
          ))}
        </div>

        <div className="mt-16 md:mt-20">
          <div className="relative overflow-hidden rounded-2xl border border-[var(--color-line)] bg-[var(--color-mist)] shadow-[0_30px_64px_rgba(10,14,40,0.10)]">
            <div className="relative aspect-[21/9] w-full">
              <Image
                src="/photos/training/chest-tube-instructor.jpg"
                alt="Senior surgeon teaching a junior clinician at the bedside"
                fill
                sizes="(min-width: 1024px) 1024px, 100vw"
                className="object-cover"
              />
              <div className="absolute inset-0 bg-[linear-gradient(to_right,rgba(10,14,40,0.70),rgba(10,14,40,0.15)_55%,transparent)]" />
              <div className="absolute inset-y-0 left-0 flex items-center p-6 md:p-12">
                <div className="max-w-md">
                  <div className="text-[11px] font-bold uppercase tracking-[0.2em] text-[#9fb2ff]">
                    Surgeons teaching surgeons
                  </div>
                  <p className="mt-3 font-display text-[22px] md:text-[30px] font-extrabold leading-tight tracking-tight text-white drop-shadow-sm">
                    A collaborative built on mentorship, peer review, and
                    hands-on practice.
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </Container>
    </section>
  );
}
