"use client"

import { Navbar } from "@/components/dashboard/navbar"
import { DoctorsPageForm } from "@/components/dashboard/doctors-page/DoctorsPageForm"

export default function DoctorsPageManagement() {
  return (
    <>
      <Navbar
        title="Doctors Page"
        breadcrumbs={[
          { label: "Dashboard", href: "/dashboard" },
          { label: "Doctors Page" },
        ]}
      />

      <div className="p-6 flex flex-col gap-6">
        {/* Page header */}
        <div
          className="relative rounded-2xl overflow-hidden px-7 py-6 flex items-center justify-between gap-4 flex-wrap"
          style={{ background: "var(--brand-navy)" }}
        >
          {/* Decorative cross */}
          <div
            className="absolute right-8 top-1/2 -translate-y-1/2 opacity-[0.06] pointer-events-none select-none"
            aria-hidden="true"
          >
            <svg width="140" height="140" viewBox="0 0 30 30" fill="none">
              <rect x="11" y="0" width="8" height="30" rx="3" fill="white" />
              <rect x="0" y="11" width="30" height="8" rx="3" fill="white" />
            </svg>
          </div>

          <div className="relative z-10">
            <p className="text-white/50 text-xs uppercase tracking-widest font-sans mb-1">
              Content Management
            </p>
            <h1 className="text-white text-2xl font-bold font-sans text-balance">
              Doctors Page
            </h1>
            <p className="text-white/60 text-sm font-sans mt-1">
              Manage all sections of the Doctors page displayed on the frontend.
            </p>
          </div>

          <div className="relative z-10 shrink-0">
            <div
              className="flex items-center gap-2 px-4 py-2.5 rounded-xl text-xs font-semibold font-sans"
              style={{
                background: "rgba(43,182,115,0.20)",
                color: "#2BB673",
                border: "1px solid rgba(43,182,115,0.30)",
              }}
            >
              <span
                className="w-1.5 h-1.5 rounded-full"
                style={{ background: "#2BB673" }}
                aria-hidden="true"
              />
              4 Sections
            </div>
          </div>
        </div>

        {/* Form */}
        <DoctorsPageForm />
      </div>
    </>
  )
}