"use client";

import Image from "next/image";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { useState, useEffect, useRef } from "react";
import { useBrand } from "@/components/BrandProvider";

type NavItem = {
  label: string;
  href?: string;
  children?: { label: string; href: string }[];
};

const nav: NavItem[] = [
  { label: "Home", href: "/" },
  { label: "About", href: "/about" },
  { label: "Projects", href: "/projects" },
  { label: "Crowdfunding", href: "/crowdfunding" },
  { label: "Locations", href: "/locations" },
  { label: "Events", href: "/events" },
  { label: "News", href: "/news" },
  { label: "Team", href: "/team" },
  { label: "Gallery", href: "/gallery" },
  { label: "Membership", children: [
    { label: "Overview", href: "/membership" },
    { label: "Plans", href: "/membership/plans" },
    { label: "Register", href: "/membership/register" },
    { label: "Member Login", href: "/membership/login" },
    { label: "Member Dashboard", href: "/membership/member" },
    { label: "Volunteer", href: "/membership/volunteer" },
  ]},
  { label: "Contact", href: "/contact" },
];

function NavDropdown({ label, items }: { label: string; items: { label: string; href: string }[] }) {
  const [open, setOpen] = useState(false);
  const ref = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const handler = (e: MouseEvent) => {
      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
    };
    document.addEventListener("mousedown", handler);
    return () => document.removeEventListener("mousedown", handler);
  }, []);

  return (
    <div ref={ref} className="relative" onMouseEnter={() => setOpen(true)} onMouseLeave={() => setOpen(false)}>
      <button
        className="flex items-center gap-1 px-4 py-3 text-[13px] font-bold uppercase tracking-wide text-white transition-colors hover:bg-white/15"
        onClick={() => setOpen((v) => !v)}
      >
        {label}
        <svg width="10" height="10" fill="none" stroke="white" strokeWidth="2.5" viewBox="0 0 24 24">
          <polyline points="6 9 12 15 18 9" />
        </svg>
      </button>
      {open && (
        <div className="absolute left-0 top-full min-w-44 rounded-0 bg-white  shadow-xl z-50">
          {items.map((item) => (
            <Link
              key={item.href}
              href={item.href}
              className="block px-5 py-2.5 text-sm font-bold uppercase tracking-wide transition-colors hover:bg-gray-50"
              style={{ color: "var(--brand-primary)" }}
              onClick={() => setOpen(false)}
            >
              {item.label}
            </Link>
          ))}
        </div>
      )}
    </div>
  );
}

export function SiteShell({ children }: { children: React.ReactNode }) {
  const brand = useBrand();
  const pathname = usePathname();
  const [mobileOpen, setMobileOpen] = useState(false);
  const [ticker, setTicker] = useState(0);
  const [compactHeader, setCompactHeader] = useState(false);
  const lastScrollY = useRef(0);
  const scrollFrame = useRef<number | null>(null);

  const tickerItems = [
    "Join our education drive this summer in Chatra district",
    "500+ students benefited from our scholarship program this year",
    "Free health camp on 15th June at Chatra Community Centre",
    "New membership registrations now open for 2025–26",
  ];

  useEffect(() => {
    const timeout = window.setTimeout(() => setMobileOpen(false), 0);
    return () => window.clearTimeout(timeout);
  }, [pathname]);

  useEffect(() => {
    if (!mobileOpen) return;

    const handleKeyDown = (event: KeyboardEvent) => {
      if (event.key === "Escape") setMobileOpen(false);
    };
    const previousOverflow = document.body.style.overflow;

    document.body.style.overflow = "hidden";
    document.addEventListener("keydown", handleKeyDown);

    return () => {
      document.body.style.overflow = previousOverflow;
      document.removeEventListener("keydown", handleKeyDown);
    };
  }, [mobileOpen]);

  useEffect(() => {
    const t = setInterval(
      () => setTicker((v) => (v + 1) % tickerItems.length),
      4000
    );
    return () => clearInterval(t);
  }, [tickerItems.length]);

  useEffect(() => {
    lastScrollY.current = window.scrollY;

    const handleScroll = () => {
      if (scrollFrame.current !== null) return;

      scrollFrame.current = window.requestAnimationFrame(() => {
        const currentScrollY = window.scrollY;
        const scrollDelta = currentScrollY - lastScrollY.current;

        if (currentScrollY <= 80) {
          setCompactHeader(false);
          lastScrollY.current = currentScrollY;
          scrollFrame.current = null;
          return;
        }

        if (Math.abs(scrollDelta) >= 10) {
          setCompactHeader(scrollDelta > 0);
          lastScrollY.current = currentScrollY;
        }

        scrollFrame.current = null;
      });
    };

    window.addEventListener("scroll", handleScroll, { passive: true });
    return () => {
      window.removeEventListener("scroll", handleScroll);
      if (scrollFrame.current !== null) window.cancelAnimationFrame(scrollFrame.current);
    };
  }, []);

  /* ─────────────────────────── navbar height used to offset hero ─── */
  // top-bar ≈ 32px + brand-bar ≈ 82px + nav-bar ≈ 44px = 158px on desktop
  // on mobile there's no tier-3, so ~114px
  const navH = "pt-[158px] lg:pt-[158px]";

  return (
    <div
      className="min-h-screen"
      style={{ background: "var(--brand-bg)", color: "var(--brand-text)" }}
    >
      {/* ╔══════════════════════════════════════════════════════╗
          ║  HEADER — 3-tier layout matching the reference img   ║
          ╚══════════════════════════════════════════════════════╝ */}
      <header className="fixed inset-x-0 top-0 z-50 shadow-md">

        {/* ══ TIER 1 · Red top utility bar ══════════════════════ */}
        <div
          className={`overflow-hidden transition-all duration-300 ease-in-out ${
            compactHeader ? "max-h-0 opacity-0" : "max-h-12 opacity-100"
          }`}
          style={{ background: "var(--brand-secondary)" }}
        >
          <div className="mx-auto flex max-w-7xl items-center justify-between gap-3 px-4 py-1.5">

            {/* Social icons */}
            <div className="flex items-center gap-1.5">
              {[
                {
                  label: "Facebook",
                  href: brand.facebook_url || "#",
                  svg: (
                    <svg width="11" height="11" fill="white" viewBox="0 0 24 24">
                      <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z" />
                    </svg>
                  ),
                },
                {
                  label: "Instagram",
                  href: brand.instagram_url || "#",
                  svg: (
                    <svg width="11" height="11" fill="none" stroke="white" strokeWidth="2" viewBox="0 0 24 24">
                      <rect x="2" y="2" width="20" height="20" rx="5" ry="5" />
                      <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" />
                      <line x1="17.5" y1="6.5" x2="17.51" y2="6.5" />
                    </svg>
                  ),
                },
                {
                  label: "YouTube",
                  href: "#",
                  svg: (
                    <svg width="11" height="11" fill="white" viewBox="0 0 24 24">
                      <path d="M22.54 6.42a2.78 2.78 0 0 0-1.95-1.96C18.88 4 12 4 12 4s-6.88 0-8.59.46A2.78 2.78 0 0 0 1.46 6.42 29 29 0 0 0 1 12a29 29 0 0 0 .46 5.58A2.78 2.78 0 0 0 3.41 19.6C5.12 20 12 20 12 20s6.88 0 8.59-.46a2.78 2.78 0 0 0 1.95-1.95A29 29 0 0 0 23 12a29 29 0 0 0-.46-5.58zM9.75 15.02V8.98L15.5 12l-5.75 3.02z" />
                    </svg>
                  ),
                },
                {
                  label: "WhatsApp",
                  href: brand.whatsapp_url || "#",
                  svg: (
                    <svg width="11" height="11" fill="white" viewBox="0 0 24 24">
                      <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z" />
                    </svg>
                  ),
                },
              ].map(({ label, href, svg }) => (
                <a
                  key={label}
                  href={href}
                  aria-label={label}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="grid h-6 w-6 place-items-center rounded-full transition-opacity hover:opacity-75"
                  style={{ background: "rgba(255,255,255,0.2)" }}
                >
                  {svg}
                </a>
              ))}
            </div>

            {/* Animated news ticker */}
            <div className="mx-3 flex min-w-0 flex-1 items-stretch overflow-hidden rounded-sm">
              {/* Dark-navy label */}
              <span
                className="flex flex-shrink-0 items-center gap-1.5 px-3 py-0.5 text-[11px] font-black uppercase tracking-wider text-white"
                style={{ background: "var(--brand-primary)" }}
              >
                <svg width="9" height="9" fill="white" viewBox="0 0 24 24">
                  <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" />
                </svg>
                News &amp; Updates
              </span>
              {/* Scrolling text */}
              <div
                className="min-w-0 flex-1 overflow-hidden px-3 py-0.5"
                style={{ background: "rgba(255,255,255,0.14)" }}
              >
                <p
                  key={ticker}
                  className="truncate text-[11px] font-medium text-white fade-in-up"
                >
                  {tickerItems[ticker]}
                </p>
              </div>
            </div>

            {/* Join + phone (hidden on very small screens) */}
            <div className="hidden items-center gap-4 md:flex">
              <Link
                href="/membership"
                className="flex items-center gap-1.5 text-[11px] font-bold text-white transition-colors hover:text-yellow-300"
              >
                JOIN US IN OUR MISSION
              </Link>
              <span className="h-3 w-px" style={{ background: "rgba(255,255,255,0.35)" }} />
              <a
                href={`tel:${brand.phone || ""}`}
                className="flex items-center gap-1.5 text-[11px] font-bold text-white transition-colors hover:text-yellow-300"
              >
                <svg width="11" height="11" fill="white" viewBox="0 0 24 24">
                  <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.69 12 19.79 19.79 0 0 1 1.65 3.18 2 2 0 0 1 3.62 1h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L7.91 8.59a16 16 0 0 0 6 6l.94-.94a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z" />
                </svg>
                {brand.phone || "+91 99556 88371"}
              </a>
            </div>
          </div>
        </div>

        {/* ══ TIER 2 · White brand bar ═══════════════════════════ */}
        <div style={{ background: "#ffffff", borderBottom: "2px solid #e8e8e8" }}>
          <div className="mx-auto flex max-w-7xl items-center justify-between gap-4 px-4 py-3">

            {/* ── Logo block ── */}
            <Link
              href="/"
              className="flex items-center gap-3"
              onClick={() => setMobileOpen(false)}
            >
              

              {/* Logo image or initials block */}
              <Image
                  src='/logo.png'
                  alt={brand.site_name}
                  width={72}
                  height={72}
                  className="flex-shrink-0 object-contain"
                />

              {/* Name + tagline */}
              <div className="leading-tight">
                <p
                  className="text-lg font-black uppercase tracking-wide"
                  style={{ color: "var(--brand-primary)" }}
                >
                  {brand.site_name}
                </p>
                <p
                  className="text-[11px] font-bold uppercase tracking-widest"
                  style={{ color: "var(--brand-secondary)" }}
                >
                  {brand.tagline || "Foundation for Social Change"}
                </p>
              </div>
            </Link>

            {/* ── CTA buttons ── */}
            <div className="flex items-center gap-2">
              {/* Donate Us — navy filled (reference style) */}
              <Link
                href="/donate"
                className="hidden items-center gap-2 rounded px-5 py-2.5 text-sm font-bold text-white transition-opacity hover:opacity-85 sm:flex"
                style={{ background: "var(--brand-primary)" }}
              >
                <svg width="15" height="15" fill="none" stroke="white" strokeWidth="2" viewBox="0 0 24 24">
                  <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" />
                </svg>
                Donate Us
              </Link>

              {/* Login — navy outline (reference style) */}
              <Link
                href="/admin"
                className="hidden items-center gap-2 rounded border-2 px-5 py-2.5 text-sm font-bold transition-colors hover:bg-gray-50 sm:flex"
                style={{ borderColor: "var(--brand-primary)", color: "var(--brand-primary)" }}
              >
                <svg width="14" height="14" fill="none" stroke="currentColor" strokeWidth="2.2" viewBox="0 0 24 24">
                  <path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4" />
                  <polyline points="10 17 15 12 10 7" />
                  <line x1="15" y1="12" x2="3" y2="12" />
                </svg>
                LOGIN
              </Link>

              {/* Hamburger — mobile only */}
              <button
                className="relative flex h-10 w-10 flex-col items-center justify-center gap-1 rounded-lg p-2 lg:hidden"
                onClick={() => setMobileOpen((v) => !v)}
                aria-label="Toggle navigation"
                aria-expanded={mobileOpen}
                aria-controls="mobile-navigation"
              >
                <span className={`block h-0.5 w-6 rounded-full bg-gray-600 transition-all duration-300 ${mobileOpen ? "translate-y-1.5 rotate-45" : ""}`} />
                <span className={`block h-0.5 w-6 rounded-full bg-gray-600 transition-all duration-300 ${mobileOpen ? "opacity-0" : ""}`} />
                <span className={`block h-0.5 w-6 rounded-full bg-gray-600 transition-all duration-300 ${mobileOpen ? "-translate-y-1.5 -rotate-45" : ""}`} />
              </button>
            </div>
          </div>
        </div>

        {/* ══ TIER 3 · Red navigation bar (desktop only) ════════ */}
        <nav
          className={`hidden transition-all duration-300 ease-in-out lg:flex ${
            compactHeader ? "max-h-0 opacity-0 overflow-hidden" : "max-h-14 opacity-100"
          }`}
          style={{ background: "var(--brand-secondary)" }}
          aria-label="Main navigation"
        >
          <div className="mx-auto flex w-full max-w-7xl items-center px-2">
            {nav.map((item) =>
              item.children ? (
                <NavDropdown key={item.label} label={item.label} items={item.children} />
              ) : (
                <Link
                  key={item.href}
                  href={item.href!}
                  className="flex items-center gap-1 px-4 py-3 text-[13px] font-bold uppercase tracking-wide text-white transition-colors hover:bg-white/15"
                >
                  {item.label}
                </Link>
              )
            )}

            {/* Quick donate pill on the far right of the nav bar */}
            <Link
              href="/donate"
              className="ml-auto my-1.5 flex items-center gap-1.5 rounded px-4 py-1.5 text-[13px] font-black text-white transition-opacity hover:opacity-85"
              style={{ background: "rgba(255,255,255,0.2)" }}
            >
              Donate
            </Link>
          </div>
        </nav>

        {/* ══ Mobile shelf — slide in from right ═══════════════ */}
        <>
          {/* Backdrop */}
          {mobileOpen ? (
            <div
              className="fixed inset-0 z-[60] bg-black/50 backdrop-blur-sm lg:hidden"
              aria-hidden="true"
              onClick={() => setMobileOpen(false)}
            />
          ) : null}

          {/* Shelf panel */}
          <div
            id="mobile-navigation"
            className="fixed right-0 top-0 z-[70] flex h-full w-full max-w-sm flex-col bg-white shadow-2xl transition-transform duration-300 ease-out lg:hidden"
            style={{
              transform: mobileOpen ? "translateX(0)" : "translateX(100%)",
              visibility: mobileOpen ? "visible" : "hidden",
            }}
            aria-hidden={!mobileOpen}
          >
            {/* Close button */}
            <div className="flex items-center justify-end px-4 pt-4">
              <button
                type="button"
                onClick={() => setMobileOpen(false)}
                className="flex h-10 w-10 items-center justify-center rounded-full transition-colors hover:bg-gray-100"
                aria-label="Close menu"
              >
                <span className="text-2xl leading-none text-gray-600">&times;</span>
              </button>
            </div>

            {/* Nav links */}
            <nav className="flex-1 overflow-y-auto px-4 pb-4">
              {nav.map((item, idx) =>
                item.children ? (
                  <div key={idx} className="border-b" style={{ borderColor: "rgba(0,0,0,0.06)" }}>
                    <p
                      className="px-3 pt-4 pb-1 text-[10px] font-black uppercase tracking-widest"
                      style={{ color: "var(--brand-primary)" }}
                    >
                      {item.label}
                    </p>
                    {item.children.map((child) => (
                      <Link
                        key={child.href}
                        href={child.href}
                        onClick={() => setMobileOpen(false)}
                        className="block rounded-lg px-3 py-2.5 text-sm font-bold uppercase tracking-wide transition-colors hover:bg-red-50"
                        style={{ color: "var(--brand-primary)" }}
                      >
                        {child.label}
                      </Link>
                    ))}
                  </div>
                ) : (
                  <Link
                    key={item.href}
                    href={item.href!}
                    onClick={() => setMobileOpen(false)}
                    className="block rounded-lg border-b px-3 py-3 text-sm font-bold uppercase tracking-wide transition-colors hover:bg-red-50"
                    style={{ color: "var(--brand-primary)", borderColor: "rgba(0,0,0,0.06)" }}
                  >
                    {item.label}
                  </Link>
                )
              )}
            </nav>

            {/* CTA buttons */}
            <div className="flex gap-3 border-t p-4" style={{ borderColor: "#e8e8e8" }}>
              <Link
                href="/donate"
                onClick={() => setMobileOpen(false)}
                className="flex-1 rounded py-2.5 text-center text-sm font-bold text-white"
                style={{ background: "var(--brand-primary)" }}
              >
                Donate Us
              </Link>
              <Link
                href="/admin"
                onClick={() => setMobileOpen(false)}
                className="flex-1 rounded border-2 py-2.5 text-center text-sm font-bold"
                style={{ borderColor: "var(--brand-primary)", color: "var(--brand-primary)" }}
              >
                LOGIN
              </Link>
            </div>
          </div>
        </>
      </header>

      {/* Push content below the fixed 3-tier header */}
      <div className={navH} aria-hidden="true" />

      {children}

      <footer className="relative overflow-hidden" style={{ background: "#0a1a14" }}>
        <div className="absolute inset-0 opacity-[0.04]" style={{ backgroundImage: "radial-gradient(circle at 1px 1px, white 1px, transparent 0)", backgroundSize: "24px 24px" }} />
        <div className="absolute -right-32 -top-32 w-96 h-96 rounded-full border border-white/5" />
        <div className="absolute -left-32 -bottom-32 w-80 h-80 rounded-full border border-white/5" />

        <div className="relative mx-auto max-w-7xl px-5">
          <div className="grid gap-12 py-16 md:grid-cols-[1.5fr_1fr_1fr_1.2fr]">

            <div>
              <div className="flex items-center gap-3">
                <Image src="/logo.png" alt={brand.short_name} width={52} height={52} className="shrink-0 rounded-xl object-contain" />
                <div>
                  <p className="text-lg font-black text-white">{brand.short_name}</p>
                  <p className="text-xs font-medium tracking-wide" style={{ color: "rgba(255,255,255,0.45)" }}>Section 8 Company, Jharkhand</p>
                </div>
              </div>
              <p className="mt-4 max-w-xs text-sm leading-7" style={{ color: "rgba(255,255,255,0.55)" }}>
                {brand.tagline}
              </p>
              <div className="mt-6 flex gap-3">
                {[
                  { label: "Facebook", href: brand.facebook_url, path: "M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z" },
                  { label: "Instagram", href: brand.instagram_url, isInsta: true },
                  { label: "WhatsApp", href: brand.whatsapp_url, path: "M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z" },
                ].map(({ label, href, path, isInsta }) =>
                  href ? (
                    <a key={label} href={href} aria-label={label} target="_blank" rel="noopener noreferrer"
                      className="grid h-9 w-9 place-items-center rounded-lg transition-all duration-200 hover:-translate-y-0.5"
                      style={{ background: "rgba(255,255,255,0.08)", color: "rgba(255,255,255,0.5)" }}
                      onMouseEnter={e => { e.currentTarget.style.background = "var(--brand-primary)"; e.currentTarget.style.color = "white" }}
                      onMouseLeave={e => { e.currentTarget.style.background = "rgba(255,255,255,0.08)"; e.currentTarget.style.color = "rgba(255,255,255,0.5)" }}
                    >
                      {isInsta ? (
                        <svg width="14" height="14" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
                          <rect x="2" y="2" width="20" height="20" rx="5" ry="5" />
                          <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" />
                          <line x1="17.5" y1="6.5" x2="17.51" y2="6.5" />
                        </svg>
                      ) : (
                        <svg width="14" height="14" fill="currentColor" viewBox="0 0 24 24"><path d={path!} /></svg>
                      )}
                    </a>
                  ) : null
                )}
              </div>
            </div>

            <div>
              <p className="mb-5 text-xs font-black uppercase tracking-widest" style={{ color: "rgba(255,255,255,0.3)" }}>Navigate</p>
              <ul className="space-y-3">
                {[["Home", "/"], ["About", "/about"], ["Projects", "/projects"], ["Crowdfunding", "/crowdfunding"], ["Events", "/events"], ["Team", "/team"]].map(([l, h]) => (
                  <li key={h}>
                    <Link href={h} className="text-sm transition-colors duration-200 hover:translate-x-0.5 inline-block" style={{ color: "rgba(255,255,255,0.55)" }}
                      onMouseEnter={e => e.currentTarget.style.color = "white"}
                      onMouseLeave={e => e.currentTarget.style.color = "rgba(255,255,255,0.55)"}
                    >
                      {l}
                    </Link>
                  </li>
                ))}
              </ul>
            </div>

            <div>
              <p className="mb-5 text-xs font-black uppercase tracking-widest" style={{ color: "rgba(255,255,255,0.3)" }}>Get Involved</p>
              <ul className="space-y-3">
                {[["Donate", "/donate"], ["Membership Plans", "/membership/plans"], ["Register", "/membership/register"], ["Member Login", "/membership/login"], ["News", "/news"]].map(([l, h]) => (
                  <li key={h}>
                    <Link href={h} className="text-sm transition-colors duration-200 hover:translate-x-0.5 inline-block" style={{ color: "rgba(255,255,255,0.55)" }}
                      onMouseEnter={e => e.currentTarget.style.color = "white"}
                      onMouseLeave={e => e.currentTarget.style.color = "rgba(255,255,255,0.55)"}
                    >
                      {l}
                    </Link>
                  </li>
                ))}
              </ul>
            </div>

            <div>
              <p className="mb-5 text-xs font-black uppercase tracking-widest" style={{ color: "rgba(255,255,255,0.3)" }}>Contact</p>
              <ul className="space-y-4">
                <li className="flex items-start gap-3 text-sm" style={{ color: "rgba(255,255,255,0.55)" }}>
                  <svg className="mt-0.5 shrink-0" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
                    <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" /><circle cx="12" cy="10" r="3" />
                  </svg>
                  <span>{brand.address}</span>
                </li>
                <li className="flex items-center gap-3 text-sm" style={{ color: "rgba(255,255,255,0.55)" }}>
                  <svg width="14" height="14" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
                    <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.69 12 19.79 19.79 0 0 1 1.65 3.18 2 2 0 0 1 3.62 1h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L7.91 8.59a16 16 0 0 0 6 6l.94-.94a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z" />
                  </svg>
                  <a href={`tel:${brand.phone}`} className="transition-colors hover:text-white">{brand.phone}</a>
                </li>
                <li className="flex items-center gap-3 text-sm" style={{ color: "rgba(255,255,255,0.55)" }}>
                  <svg width="14" height="14" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
                    <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" />
                    <polyline points="22,6 12,13 2,6" />
                  </svg>
                  <a href={`mailto:${brand.email}`} className="transition-colors hover:text-white">{brand.email}</a>
                </li>
              </ul>
            </div>
          </div>

          <div className="flex flex-col gap-3 border-t py-6 sm:flex-row sm:items-center sm:justify-between" style={{ borderColor: "rgba(255,255,255,0.06)" }}>
            <div className="flex flex-wrap gap-x-5 gap-y-1 text-xs" style={{ color: "rgba(255,255,255,0.3)" }}>
              <Link href="/privacy-policy" className="transition-colors hover:text-white/60">Privacy Policy</Link>
              <Link href="/terms" className="transition-colors hover:text-white/60">Terms & Conditions</Link>
              <Link href="/cancellation-refund" className="transition-colors hover:text-white/60">Cancellation & Refund</Link>
            </div>
            <div className="flex flex-wrap gap-x-3 text-xs" style={{ color: "rgba(255,255,255,0.3)" }}>
              <span>© {new Date().getFullYear()} {brand.site_name}.</span>
              <span>Section 8 Company · Chatra, Jharkhand</span>
            </div>
          </div>
        </div>
      </footer>
    </div>
  );
}

/* ════════════════════════════════════════
   Shared layout helpers
   ════════════════════════════════════════ */

export function SectionHeader({
  eyebrow,
  title,
  text,
  center = false,
  light = false,
}: {
  eyebrow: string;
  title: string;
  text?: string;
  center?: boolean;
  light?: boolean;
}) {
  return (
    <div className={`mb-10 max-w-3xl ${center ? "mx-auto text-center" : ""}`}>
      <span
        className="badge badge-accent"
        style={light ? { background: "rgba(245,166,35,0.18)", color: "var(--brand-accent)" } : undefined}
      >
        {eyebrow}
      </span>
      <h2
        className="mt-4 text-4xl font-black leading-tight md:text-5xl"
        style={{
          fontFamily: "'Cormorant Garamond', serif",
          color: light ? "white" : "var(--brand-text)",
        }}
      >
        {title}
      </h2>
      {text ? (
        <p
          className="mt-4 text-base leading-7"
          style={{ color: light ? "rgba(255,255,255,0.72)" : "#6b7c74" }}
        >
          {text}
        </p>
      ) : null}
    </div>
  );
}

export function PageBand({
  children,
  className = "",
}: {
  children: React.ReactNode;
  className?: string;
}) {
  return (
    <main className={`mx-auto w-full max-w-7xl px-5 py-14 md:py-20 ${className}`}>
      {children}
    </main>
  );
}

/* ════════════════════════════════════════
   Shared page hero band (white canvas per design.md)
   ════════════════════════════════════════ */
export function PageHero({
  eyebrow,
  title,
  text,
}: {
  eyebrow: string;
  title: React.ReactNode;
  text?: string;
}) {
  return (
    <section className="border-b border-[var(--color-hairline-cool)] bg-white">
      <div className="mx-auto max-w-[1280px] px-4 py-16 md:py-24 lg:px-6">
        <span className="eyebrow">
          <span className="eyebrow-dot" />
          {eyebrow}
        </span>
        <h1
          className="mt-5 max-w-3xl text-4xl leading-[1.1] tracking-[-0.03em] text-[var(--color-ink)] md:text-6xl"
          style={{ fontWeight: 500 }}
        >
          {title}
        </h1>
        {text ? (
          <p className="mt-5 max-w-2xl text-lg leading-7 text-[var(--color-ink-mute)]">{text}</p>
        ) : null}
      </div>
    </section>
  );
}