import type { DocEntry } from "@/lib/types";
import Container from "@/components/ui/Container";
import { ButtonLink } from "@/components/ui/Button";

/** Shared renderer for every generic CMS "doc" page (Services, Sportsbook, Diversity, Bios,
 *  Workbook/Playbook, Legal, Store/Return/Payment/Shipping Policy) — see getDocBySlug in
 *  lib/api.ts. Pages differ only in which slug they fetch.
 *
 *  Layout matches the reference exactly: gray page-banner with breadcrumb + title overlay,
 *  then an eyebrow/heading/intro block (+ optional 3-up card grid), the doc body, a dark
 *  "take it further in the app" CTA banner, and a closing contact line before the footer. */
export default function DocPage({ doc }: { doc: DocEntry }) {
  return (
    <>
      <div className="relative h-[clamp(120px,22vw,260px)] bg-neutral-300">
        {/* Placeholder for a CMS-picked banner image — reference uses an editor image-slot here. */}
        <div className="absolute inset-0 bg-ink/45" />
        <div className="absolute left-0 right-0 bottom-0 px-[5%] lg:px-10 pb-6">
          <div className="text-xs text-white/85 mb-1.5">
            Home / {doc.title}
          </div>
          <h2 className="font-display font-extrabold text-[26px] sm:text-4xl text-white m-0">{doc.title}</h2>
        </div>
      </div>

      <section className="bg-bg">
        <Container className="!max-w-content pt-9 sm:pt-12 lg:pt-16 pb-5 sm:pb-8">
          <p className="text-xs font-bold uppercase tracking-[0.14em] text-accent-500 mb-3.5">
            {doc.eyebrow || doc.title}
          </p>
          <h2 className="font-display font-black text-[30px] sm:text-5xl lg:text-[56px] leading-none tracking-[-0.02em] text-ink mb-4">
            {doc.title}
          </h2>
          {doc.excerpt ? <p className="max-w-2xl text-neutral-700">{doc.excerpt}</p> : null}

          {doc.cards && doc.cards.length > 0 ? (
            <div className="mt-9 grid grid-cols-1 sm:grid-cols-3 gap-5">
              {doc.cards.map((card) => (
                <div key={card.title} className="bg-surface border border-neutral-300 rounded-[20px] p-[22px] flex flex-col gap-3">
                  <div className="h-12 w-12 rounded-[14px] bg-neutral-300/70 flex items-center justify-center text-[10px] uppercase text-neutral-600">
                    Icon
                  </div>
                  <div className="font-display font-bold text-base text-ink">{card.title}</div>
                  <div className="text-[13.5px] leading-relaxed text-neutral-700">{card.description}</div>
                </div>
              ))}
            </div>
          ) : null}

          <div className="prose-allbets mt-10" dangerouslySetInnerHTML={{ __html: doc.bodyHtml }} />

          {doc.downloads && doc.downloads.length > 0 ? (
            <div className="mt-10 rounded-xl2 border border-divider bg-surface p-6">
              <h3 className="font-display font-bold text-lg text-ink mb-4">Downloads</h3>
              <ul className="flex flex-col gap-3">
                {doc.downloads.map((d) => (
                  <li key={d.url}>
                    <a
                      href={d.url}
                      className="inline-flex items-center gap-2 text-sm font-medium text-accent-600 hover:text-accent-700"
                    >
                      📄 {d.label}
                    </a>
                  </li>
                ))}
              </ul>
            </div>
          ) : null}
        </Container>

        <Container className="!max-w-content pb-9 sm:pb-12">
          <div className="relative overflow-hidden bg-ink rounded-[20px] p-7 sm:p-[30px] flex flex-wrap items-center justify-between gap-4">
            <div>
              <div className="font-display font-extrabold text-base text-white mb-1">Take it further in the app</div>
              <div className="text-[13px] text-neutral-400">iBETcha, live odds and the whole allBETs experience.</div>
            </div>
            <ButtonLink href="https://app.allbetsgo.com" variant="gold" className="shrink-0">
              Open allBETs Go
            </ButtonLink>
          </div>
        </Container>

        <Container className="!max-w-content pb-16 flex flex-wrap items-center gap-3">
          <span className="text-[13px] text-neutral-600">
            Questions we have not answered here: shop@allbetsgo.com
          </span>
          <ButtonLink href="/shop" variant="outline" className="!px-4 !py-2.5 !text-xs !tracking-[0.16em] uppercase !rounded-[11px]">
            Back to the shop
          </ButtonLink>
        </Container>
      </section>
    </>
  );
}