import CreatePreviewForm from "@/components/CreatePreviewForm";
import type { Metadata } from "next";
import Link from "next/link";
import RookLogo from "@/components/RookLogo";

export const metadata: Metadata = {
  title: "Create Preview | Rook Creative Preview Platform",
  description: "Create a new Rook-branded creative preview.",
};



function CheckIcon() {
  return (
    <span className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-[#309FC3]/10 text-[#309FC3]">
      <svg
        aria-hidden="true"
        className="h-3.5 w-3.5"
        viewBox="0 0 20 20"
        fill="none"
      >
        <path
          d="m5 10 3 3 7-7"
          stroke="currentColor"
          strokeWidth="2"
          strokeLinecap="round"
          strokeLinejoin="round"
        />
      </svg>
    </span>
  );
}

export default function CreatePreviewPage() {
  return (
    <main className="min-h-screen bg-[#F3F7F9] text-[#071722]">
      {/* Dark branded hero */}
      <section className="relative overflow-hidden bg-[#071722] pb-32 text-white">
        <div
          aria-hidden="true"
          className="absolute inset-0 opacity-40"
          style={{
            backgroundImage:
              "linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px)",
            backgroundSize: "40px 40px",
          }}
        />

        <div
          aria-hidden="true"
          className="absolute -left-32 top-20 h-96 w-96 rounded-full bg-[#309FC3]/20 blur-[120px]"
        />

        <div
          aria-hidden="true"
          className="absolute -right-32 -top-40 h-[500px] w-[500px] rounded-full bg-[#79D4EF]/10 blur-[140px]"
        />

        <header className="relative z-10 border-b border-white/10">
          <div className="mx-auto flex max-w-7xl items-center justify-between px-6 py-5">
            <RookLogo />

            <div className="flex items-center gap-3">
              <span className="hidden items-center gap-2 rounded-full border border-white/10 bg-white/[0.06] px-4 py-2 text-xs font-medium text-slate-300 backdrop-blur-md sm:flex">
                <span className="h-2 w-2 rounded-full bg-emerald-400 shadow-[0_0_8px_rgba(52,211,153,0.8)]" />
                Staff portal
              </span>

              <Link
                href="/admin/previews"
                className="flex items-center gap-2 rounded-full border border-white/10 bg-white/[0.06] px-4 py-2 text-sm font-medium text-white transition hover:border-[#79D4EF]/40 hover:bg-white/10"
              >
                <svg
                  aria-hidden="true"
                  className="h-4 w-4"
                  viewBox="0 0 20 20"
                  fill="none"
                >
                  <path
                    d="m12 5-5 5 5 5"
                    stroke="currentColor"
                    strokeWidth="1.8"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                  />
                </svg>
                All previews
              </Link>
            </div>
          </div>
        </header>

       <div className="relative z-10 mx-auto grid max-w-7xl gap-10 px-6 pt-14 lg:grid-cols-[1.35fr_0.65fr] lg:items-end">
          <div>
           

            <h1 className="max-w-3xl text-4xl leading-[1.08] font-semibold tracking-[-0.045em] sm:text-5xl lg:text-6xl">
              Create a client ready
              <span className="block text-[#79D4EF]">Creative preview.</span>
            </h1>

            <p className="mt-6 max-w-2xl text-base leading-8 text-slate-300 sm:text-lg">
              Add the campaign details and creative URL. Our platform will turn them into a
              polished Rook Digital branded link that is ready to share with your
              client.
            </p>
          </div>

          <div className="hidden">
            <div className="w-full max-w-sm rounded-3xl border border-white/10 bg-white/[0.06] p-6 shadow-2xl shadow-black/20 backdrop-blur-xl">
              <div className="flex items-center justify-between">
                <p className="text-sm font-semibold text-white">
                  Preview workflow
                </p>

                <span className="rounded-full bg-[#309FC3]/15 px-3 py-1 text-xs font-semibold text-[#79D4EF]">
                  Phase 1
                </span>
              </div>

              <div className="mt-6 flex items-center gap-2">
                <div className="h-2 flex-1 rounded-full bg-[#309FC3]" />
                <div className="h-2 flex-1 rounded-full bg-white/15" />
                <div className="h-2 flex-1 rounded-full bg-white/15" />
              </div>

              <div className="mt-4 flex items-center justify-between text-xs text-slate-400">
                <span>Details</span>
                <span>Generate</span>
                <span>Share</span>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Main content */}
      <div className="relative z-20 mx-auto -mt-20 grid max-w-7xl gap-7 px-6 pb-16 lg:grid-cols-[minmax(0,1fr)_340px] lg:items-start">
        {/* Form card */}
        <section className="overflow-hidden rounded-[2rem] border border-slate-200/70 bg-white shadow-[0_25px_80px_rgba(7,23,34,0.10)]">
          <div className="flex flex-col gap-5 border-b border-slate-100 px-6 py-6 sm:flex-row sm:items-center sm:justify-between sm:px-8">
            <div className="flex items-center gap-4">
              <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-2xl bg-[#309FC3]/10 text-[#309FC3]">
                <svg
                  aria-hidden="true"
                  className="h-6 w-6"
                  viewBox="0 0 24 24"
                  fill="none"
                >
                  <path
                    d="M5 4h14a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2Z"
                    stroke="currentColor"
                    strokeWidth="1.7"
                  />
                  <path
                    d="M7 9h10M7 13h7M7 17h4"
                    stroke="currentColor"
                    strokeWidth="1.7"
                    strokeLinecap="round"
                  />
                </svg>
              </div>

              <div>
                <h2 className="text-xl font-semibold tracking-[-0.025em] text-[#071722]">
                  Creative Preview Details
                </h2>

                <p className="mt-1 text-sm text-slate-500">
                  Complete the form below to generate the preview.
                </p>
              </div>
            </div>       
          </div>

          <div
            className="
              px-6 py-7 sm:px-8 sm:py-9
              [&_form]:space-y-6
              [&_label]:mb-2
              [&_label]:block
              [&_label]:text-sm
              [&_label]:font-semibold
              [&_label]:text-[#123445]
              [&_input]:min-h-12
              [&_input]:w-full
              [&_input]:rounded-xl
              [&_input]:border-slate-200
              [&_input]:bg-[#F8FAFB]
              [&_input]:px-4
              [&_input]:text-[#071722]
              [&_input]:outline-none
              [&_input]:transition
              [&_input::placeholder]:text-slate-400
              [&_input:focus]:border-[#309FC3]
              [&_input:focus]:bg-white
              [&_input:focus]:ring-4
              [&_input:focus]:ring-[#309FC3]/10
              [&_select]:min-h-12
              [&_select]:w-full
              [&_select]:rounded-xl
              [&_select]:border-slate-200
              [&_select]:bg-[#F8FAFB]
              [&_select]:px-4
              [&_select]:outline-none
              [&_select:focus]:border-[#309FC3]
              [&_select:focus]:ring-4
              [&_select:focus]:ring-[#309FC3]/10
              [&_textarea]:w-full
              [&_textarea]:rounded-xl
              [&_textarea]:border-slate-200
              [&_textarea]:bg-[#F8FAFB]
              [&_textarea]:p-4
              [&_textarea]:outline-none
              [&_textarea]:transition
              [&_textarea:focus]:border-[#309FC3]
              [&_textarea:focus]:bg-white
              [&_textarea:focus]:ring-4
              [&_textarea:focus]:ring-[#309FC3]/10
              [&_button]:min-h-12
              [&_button]:rounded-xl
              [&_button]:bg-[#309FC3]
              [&_button]:px-6
              [&_button]:font-semibold
              [&_button]:text-white
              [&_button]:shadow-lg
              [&_button]:shadow-[#309FC3]/20
              [&_button]:transition-all
              [&_button:hover]:-translate-y-0.5
              [&_button:hover]:bg-[#268DAE]
              [&_button:hover]:shadow-xl
              [&_button:focus-visible]:ring-4
              [&_button:focus-visible]:ring-[#309FC3]/25
              [&_button:focus-visible]:outline-none
            "
          >
            <CreatePreviewForm />
          </div>
        </section>

        <aside className="space-y-6 lg:sticky lg:top-6">
          <div className="rounded-[1.75rem] border border-slate-200/70 bg-white p-6 shadow-[0_18px_50px_rgba(7,23,34,0.07)]">
        

            <p className="mt-2 text-sm leading-6 text-slate-500">
              Check these details to make sure the client receives the correct
              creative.
            </p>

            <ul className="mt-6 space-y-4">
              <li className="flex items-start gap-3">
                <CheckIcon />
                <span className="text-sm leading-6 text-slate-600">
                  Confirm the client and campaign names.
                </span>
              </li>

              <li className="flex items-start gap-3">
                <CheckIcon />
                <span className="text-sm leading-6 text-slate-600">
                  Test the Flashtalking or NEXD URL.
                </span>
              </li>

              <li className="flex items-start gap-3">
                <CheckIcon />
                <span className="text-sm leading-6 text-slate-600">
                  Use a clear creative name and format.
                </span>
              </li>
            </ul>
          </div>

          <div className="overflow-hidden rounded-[1.75rem] bg-[#071722] p-6 text-white shadow-[0_18px_50px_rgba(7,23,34,0.18)]">
            <p className="text-xs font-bold tracking-[0.16em] text-[#79D4EF] uppercase">
              How It Works
            </p>

            <div className="mt-6 space-y-5">
              <div className="flex gap-4">
                <span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-[#309FC3] text-xs font-bold">
                  1
                </span>

                <div>
                  <p className="text-sm font-semibold">Preview generated</p>
                  <p className="mt-1 text-xs leading-5 text-slate-400">
                    A unique Rook-branded link is created.
                  </p>
                </div>
              </div>

              <div className="flex gap-4">
                <span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full border border-white/15 bg-white/[0.06] text-xs font-bold">
                  2
                </span>

                <div>
                  <p className="text-sm font-semibold">Link shared</p>
                  <p className="mt-1 text-xs leading-5 text-slate-400">
                    Send the public preview link to the client.
                  </p>
                </div>
              </div>

              <div className="flex gap-4">
                <span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full border border-white/15 bg-white/[0.06] text-xs font-bold">
                  3
                </span>

                <div>
                  <p className="text-sm font-semibold">Decision recorded</p>
                  <p className="mt-1 text-xs leading-5 text-slate-400">
                    Track approval or requested changes centrally.
                  </p>
                </div>
              </div>
            </div>

            <div className="mt-7 border-t border-white/10 pt-5">
              <p className="flex items-center gap-2 text-xs text-slate-400">
                <span className="h-2 w-2 rounded-full bg-emerald-400" />
                Secure internal workflow
              </p>
            </div>
          </div>
        </aside>
      </div>

      <footer className="border-t border-slate-200 bg-white px-6 py-6">
        <div className="mx-auto flex max-w-7xl flex-col gap-2 text-xs text-slate-400 sm:flex-row sm:items-center sm:justify-between">
          <span>Rook Creative Preview Platform</span>
          <span>Staff Portal </span>
        </div>
      </footer>
    </main>
  );
}