"use client";

import { useLocale } from "@/components/providers/locale-provider";

type PagePlaceholderProps = {
  eyebrow: string;
  title: string;
  description: string;
  bullets: string[];
};

export function PagePlaceholder({
  eyebrow,
  title,
  description,
  bullets
}: PagePlaceholderProps) {
  const { dict } = useLocale();

  return (
    <section className="space-y-6">
      <div className="grid gap-6 xl:grid-cols-[1.2fr_0.8fr]">
        <div className="ops-card p-6">
          <p className="ops-overline">{eyebrow}</p>
          <h2 className="mt-2 text-[32px] font-semibold tracking-tight text-ink">{title}</h2>
          <p className="mt-3 max-w-3xl text-[14px] leading-7 text-slate-600">{description}</p>
          <div className="mt-6 grid gap-3 md:grid-cols-3">
            <div className="rounded border border-line/70 bg-slate-50 px-4 py-4">
              <p className="ops-overline">{dict.placeholder.mode}</p>
              <p className="mt-2 text-lg font-semibold text-ink">{dict.placeholder.draftMode}</p>
            </div>
            <div className="rounded border border-line/70 bg-slate-50 px-4 py-4">
              <p className="ops-overline">{dict.placeholder.backend}</p>
              <p className="mt-2 text-lg font-semibold text-ink">{dict.placeholder.backendReady}</p>
            </div>
            <div className="rounded border border-line/70 bg-slate-50 px-4 py-4">
              <p className="ops-overline">{dict.placeholder.uiTarget}</p>
              <p className="mt-2 text-lg font-semibold text-ink">{dict.placeholder.followsStitch}</p>
            </div>
          </div>
        </div>
        <div className="ops-card-dark p-6">
          <p className="text-[11px] font-bold uppercase tracking-[0.05em] text-white/70">
            {dict.placeholder.initialScope}
          </p>
          <ul className="mt-4 space-y-3 text-[13px] leading-6 text-white/85">
            {bullets.map((bullet) => (
              <li key={bullet} className="rounded border border-white/15 bg-white/5 px-4 py-3">
                {bullet}
              </li>
            ))}
          </ul>
        </div>
      </div>
      <div className="grid gap-6 lg:grid-cols-[1.1fr_0.9fr]">
        <div className="ops-card overflow-hidden">
          <div className="ops-section-head">
            <div>
              <p className="ops-title">{dict.placeholder.upcomingFlow}</p>
              <p className="ops-copy">{dict.placeholder.upcomingFlowCopy}</p>
            </div>
          </div>
          <div className="grid gap-px bg-line/70 md:grid-cols-3">
            {[
              dict.placeholder.inputMain,
              dict.placeholder.validation,
              dict.placeholder.transactionOutput
            ].map((label) => (
              <div key={label} className="bg-white px-5 py-5">
                <p className="ops-overline">{label}</p>
                <p className="mt-3 text-[13px] leading-6 text-slate-600">
                  {dict.placeholder.placeholderBody}
                </p>
              </div>
            ))}
          </div>
        </div>
        <div className="ops-note">
          <p className="text-base font-semibold text-slate-700">{dict.placeholder.implementationNotes}</p>
          <ul className="mt-3 space-y-3 text-[13px] leading-6">
          {bullets.map((bullet) => (
            <li key={bullet} className="rounded border border-blue-100 bg-white/70 px-4 py-3">
              {bullet}
            </li>
          ))}
          </ul>
        </div>
      </div>
    </section>
  );
}
