import React from "react";
import Link from "next/link";

/**
 * Shared layout for the legal pages (Privacy Policy, Terms of Service, Cookie
 * Policy) so all three stay pixel-consistent. Content is passed in as structured
 * blocks; this component owns the hero, the desktop sticky table of contents and
 * the 800px reading column described in the design spec.
 */

export type LegalBlock =
  | { type: "p"; text: React.ReactNode }
  | { type: "lead"; text: React.ReactNode }
  | { type: "h3"; text: string }
  | { type: "ul"; items: React.ReactNode[] };

export type LegalSection = {
  heading: string;
  blocks: LegalBlock[];
};

export type LegalDocumentProps = {
  title: string;
  lastUpdated: string;
  intro: React.ReactNode;
  sections: LegalSection[];
};

/** Stable, URL-safe id from a section heading (for TOC anchors). */
function slug(heading: string): string {
  return heading
    .toLowerCase()
    .replace(/&/g, "and")
    .replace(/[^a-z0-9]+/g, "-")
    .replace(/(^-|-$)/g, "");
}

function Block({ block }: { block: LegalBlock }) {
  switch (block.type) {
    case "lead":
      return <p className="dm-legal__lead">{block.text}</p>;
    case "p":
      return <p className="dm-legal__p">{block.text}</p>;
    case "h3":
      return <h3 className="dm-legal__h3">{block.text}</h3>;
    case "ul":
      return (
        <ul className="dm-legal__ul">
          {block.items.map((item, i) => (
            <li key={i}>{item}</li>
          ))}
        </ul>
      );
  }
}

export default function LegalDocument({ title, lastUpdated, intro, sections }: LegalDocumentProps) {
  return (
    <section className="dm-legal" aria-label={title}>
      <div className="dm-legal__wrap">
        {/* Desktop sticky table of contents */}
        <aside className="dm-legal__toc" aria-label="On this page">
          <div className="dm-legal__toc-inner">
            <p className="dm-legal__toc-label">On this page</p>
            <nav>
              <ul>
                {sections.map((s) => (
                  <li key={s.heading}>
                    <a href={`#${slug(s.heading)}`}>{s.heading}</a>
                  </li>
                ))}
              </ul>
            </nav>
          </div>
        </aside>

        <div className="dm-legal__main">
          <header className="dm-legal__hero">
            <h1 className="dm-legal__title">{title}</h1>
            <p className="dm-legal__updated">Last Updated: {lastUpdated}</p>
            <p className="dm-legal__lead">{intro}</p>
          </header>

          <article className="dm-legal__content">
            {sections.map((s) => (
              <section key={s.heading} id={slug(s.heading)} className="dm-legal__section">
                <h2 className="dm-legal__h2">{s.heading}</h2>
                {s.blocks.map((b, i) => (
                  <Block key={i} block={b} />
                ))}
              </section>
            ))}
          </article>
        </div>
      </div>

      <style>{styles}</style>
    </section>
  );
}

/** Renders the recurring "contact us through our Contact page" link. */
export function ContactLink() {
  return (
    <Link href="/contact" className="dm-legal__link">
      Contact page
    </Link>
  );
}

const styles = `
.dm-legal {
  background: #ffffff;
  color: #334155;
  /* Top padding clears the fixed/absolute floating navbar (~104px) + breathing room. */
  padding: clamp(132px, 16vh, 184px) 0 clamp(72px, 10vw, 96px);
  font-family: var(--font-manrope), system-ui, -apple-system, sans-serif;
}

.dm-legal__wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 40px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

/* ---- Sticky table of contents (desktop only) ---- */
.dm-legal__toc { display: none; }

@media (min-width: 1080px) {
  .dm-legal__wrap {
    grid-template-columns: 248px minmax(0, 800px);
    justify-content: center;
    gap: 64px;
  }
  .dm-legal__toc { display: block; }
}

.dm-legal__toc-inner { position: sticky; top: 128px; }
.dm-legal__toc-label {
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #94a3b8;
}
.dm-legal__toc nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.dm-legal__toc nav a {
  display: block;
  font-size: 14px;
  line-height: 1.4;
  color: #64748b;
  text-decoration: none;
  border-left: 2px solid transparent;
  padding-left: 12px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.dm-legal__toc nav a:hover { color: #c01227; border-left-color: #c01227; }

/* ---- Reading column (max 800px) ---- */
.dm-legal__main { min-width: 0; max-width: 800px; }

.dm-legal__hero { margin-bottom: clamp(40px, 6vw, 56px); }
.dm-legal__title {
  margin: 0 !important;
  padding: 0 !important;
  /* !important / text-transform override the global ".elementor-kit-5 h1"
     (uppercase + kit font-size) so headings render in normal case at the spec sizes. */
  font-size: clamp(40px, 6vw, 60px) !important;
  font-weight: 800 !important;
  line-height: 1.08 !important;
  letter-spacing: -0.02em !important;
  text-transform: none !important;
  color: #0f172a !important;
}
.dm-legal__updated {
  margin: 16px 0 0;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #94a3b8;
}

.dm-legal__lead {
  margin: 24px 0 0;
  font-size: clamp(18px, 1.6vw, 20px);
  line-height: 1.7;
  color: #475569;
}
.dm-legal__hero .dm-legal__lead { margin-top: 24px; }

/* ---- Sections ---- */
.dm-legal__content { display: flex; flex-direction: column; }
.dm-legal__section { padding-top: 32px; }
.dm-legal__section:first-child { padding-top: 0; }

.dm-legal__h2 {
  margin: 0 0 16px !important;
  padding: 0 !important;
  font-size: clamp(24px, 3vw, 32px) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
  color: #0f172a !important;
  /* Offset anchor jumps so the heading isn't hidden under the fixed navbar. */
  scroll-margin-top: 120px;
}
.dm-legal__h3 {
  margin: 24px 0 8px !important;
  padding: 0 !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  text-transform: none !important;
  color: #0f172a !important;
}
.dm-legal__p {
  margin: 0 0 16px;
  font-size: 18px;
  line-height: 1.7;
  color: #334155;
}
.dm-legal__p:last-child { margin-bottom: 0; }

.dm-legal__ul { margin: 4px 0 16px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.dm-legal__ul li {
  position: relative;
  padding-left: 26px;
  font-size: 18px;
  line-height: 1.7;
  color: #334155;
}
/* Extra .dm-legal prefix raises specificity above the global theme rule
   ".logico-front-end ul li:before" (a fontello glyph), so our clean red dot
   replaces the inherited checkmark marker. */
.dm-legal .dm-legal__ul li::before {
  content: "" !important;
  position: absolute;
  left: 4px;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #c01227;
  font-size: 0;
}
/* TOC links are inside a <ul> too — suppress the same inherited glyph marker. */
.dm-legal .dm-legal__toc nav li::before { content: none !important; }

.dm-legal__link { color: #c01227; font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(192,18,39,0.35); }
.dm-legal__link:hover { border-bottom-color: #c01227; }

@media (max-width: 1079px) {
  .dm-legal__main { margin: 0 auto; }
}

/* ============================================================
   Navbar visibility — LEGAL PAGES ONLY.
   This <style> block is rendered exclusively by LegalDocument, which only mounts
   on /privacy-policy, /terms-of-service and /cookie-policy. So although the rule
   targets the global #masthead, it is physically absent from every other page's
   HTML and cannot affect them — no global CSS file is touched.

   Why it's needed: the desktop logo and nav links are white and the navbar bar is
   transparent at the top of the page. Over the dark heroes used elsewhere that's
   fine, but on these white pages the navbar vanishes. Give the bar the same dark
   glass fill the rest of the site already shows on scroll. Desktop only — the
   mobile logo is black-on-transparent and already legible here.
   ============================================================ */
@media (min-width: 1025px) {
  #masthead .elementor-element.elementor-element-466de1b {
    background: rgba(40, 40, 40, 0.75) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    backdrop-filter: blur(12px) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16) !important;
  }
}
`;
