import Footer from "@/components/Footer";
import { ArrowLeft } from "lucide-react";
import type { ReactNode } from "react";

type LegalPageLayoutProps = {
  eyebrow: string;
  title: string;
  intro: string;
  updatedAt: string;
  children: ReactNode;
};

export default function LegalPageLayout({
  eyebrow,
  title,
  intro,
  updatedAt,
  children,
}: LegalPageLayoutProps) {
  return (
    <div className="min-h-screen bg-[#F8F4EC] text-[#18364A]">
      <header className="border-b border-[#d8cec0] bg-white/95 backdrop-blur">
        <div className="container flex items-center justify-between py-4">
          <a href="/" className="inline-flex items-center gap-2 text-sm font-semibold text-[#1B4F72] hover:text-[#4ECDC4] transition-colors">
            <ArrowLeft size={16} />
            Torna alla home
          </a>
          <div className="text-right">
            <div
              className="leading-tight text-[#1B4F72]"
              style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: "1rem", fontWeight: 700 }}
            >
              Clinica Veterinaria
            </div>
            <div className="text-[11px] font-semibold uppercase tracking-[0.24em] text-[#4ECDC4]">
              Formiginese
            </div>
          </div>
        </div>
      </header>

      <main>
        <section className="border-b border-[#e4d8c9] bg-white">
          <div className="container py-14 md:py-18">
            <div className="mb-4 flex items-center gap-3">
              <div className="h-0.5 w-12 bg-[#4ECDC4]" />
              <span className="text-sm font-semibold uppercase tracking-widest text-[#4ECDC4]">
                {eyebrow}
              </span>
            </div>
            <div className="grid gap-6 lg:grid-cols-[minmax(0,2fr)_minmax(280px,1fr)] lg:items-end">
              <div>
                <h1
                  className="text-[#1B4F72]"
                  style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: "clamp(2.2rem, 5vw, 4rem)", fontWeight: 600, lineHeight: 1.06 }}
                >
                  {title}
                </h1>
                <p className="mt-5 max-w-3xl text-base leading-relaxed text-gray-600">
                  {intro}
                </p>
              </div>
              <div className="rounded-2xl border border-[#e6ddcf] bg-[#F8F4EC] px-5 py-4 text-sm text-gray-600 shadow-sm">
                <p className="font-semibold text-[#1B4F72]">Ultimo aggiornamento</p>
                <p className="mt-1">{updatedAt}</p>
              </div>
            </div>
          </div>
        </section>

        <section className="container py-12 md:py-16">
          <div className="rounded-[28px] border border-[#e9dece] bg-white px-6 py-8 shadow-sm md:px-10 md:py-10">
            <div className="legal-content prose prose-slate max-w-none prose-headings:text-[#1B4F72] prose-headings:font-semibold prose-p:text-gray-600 prose-li:text-gray-600 prose-strong:text-[#1B4F72]">
              {children}
            </div>
          </div>
        </section>
      </main>

      <Footer />
    </div>
  );
}