// Shared components — Nav, Footer, Buttons, FAB, etc.

const NAV_LINKS = [
  { id: "home", label: "Home" },
  { id: "story", label: "Our Story" },
  { id: "menu", label: "Menu" },
  { id: "branches", label: "Branches" },
  { id: "catering", label: "Catering" },
  { id: "karachi-grill", label: "Karachi Grill" },
  { id: "press", label: "Press" },
];

function KdrLogoMark({ size = 44 }) {
  // Custom heritage mark — KD monogram in an arched cartouche, drawn from logo cues
  return (
    <svg width={size} height={size} viewBox="0 0 64 64" aria-label="Karachi Darbar">
      <defs>
        <linearGradient id="kdg" x1="0" x2="0" y1="0" y2="1">
          <stop offset="0" stopColor="var(--gold)"/>
          <stop offset="1" stopColor="var(--gold-deep)"/>
        </linearGradient>
      </defs>
      <path d="M32 4 C46 4 56 13 56 27 V52 C56 56 53 58 50 58 H14 C11 58 8 56 8 52 V27 C8 13 18 4 32 4 Z"
        fill="var(--tandoor)" stroke="url(#kdg)" strokeWidth="2"/>
      <text x="32" y="36" textAnchor="middle" fontFamily="Fraunces, serif" fontWeight="700" fontSize="22" fill="var(--cream)" letterSpacing="-1">KD</text>
      <text x="32" y="48" textAnchor="middle" fontFamily="Inter, sans-serif" fontWeight="600" fontSize="6" fill="var(--gold)" letterSpacing="1">SINCE 1973</text>
    </svg>
  );
}

function Wordmark() {
  return (
    <div className="kd-wordmark">
      <KdrLogoMark size={42} />
      <div>
        <div className="kd-wordmark__name">Karachi Darbar</div>
        <div className="kd-wordmark__est">Authentic Pakistani · Est. 1973</div>
      </div>
    </div>
  );
}

function Nav({ page, setPage, scrolled }) {
  const [open, setOpen] = React.useState(false);
  return (
    <header className={`nav ${scrolled ? "nav--solid" : ""}`}>
      <div className="nav__inner">
        <a href="#home" className="nav__brand" onClick={(e) => { e.preventDefault(); setPage("home"); }}>
          <Wordmark />
        </a>
        <nav className="nav__links">
          {NAV_LINKS.map(l => (
            <a key={l.id} href={`#${l.id}`}
              className={`nav__link ${page === l.id ? "nav__link--active" : ""}`}
              onClick={(e) => { e.preventDefault(); setPage(l.id); }}>
              {l.label}
            </a>
          ))}
        </nav>
        <div className="nav__cta">
          <a className="btn btn--ghost btn--sm" href="tel:+97142673131" aria-label="Call head office">
            <PhoneIcon /> <span>+971 4 267 3131</span>
          </a>
          <button className="btn btn--primary btn--sm" onClick={() => setPage("order")}>
            Order on Talabat <ArrowIcon />
          </button>
        </div>
        <button className="nav__burger" onClick={() => setOpen(!open)} aria-label="Menu">
          <span></span><span></span><span></span>
        </button>
      </div>
      {open && (
        <div className="nav__mobile">
          {NAV_LINKS.map(l => (
            <a key={l.id} href={`#${l.id}`}
              className={`nav__mlink ${page === l.id ? "is-active" : ""}`}
              onClick={(e) => { e.preventDefault(); setPage(l.id); setOpen(false); }}>
              {l.label}
            </a>
          ))}
        </div>
      )}
    </header>
  );
}

function Footer({ setPage }) {
  const year = new Date().getFullYear();
  return (
    <footer className="footer">
      <div className="footer__top">
        <div className="footer__brand">
          <Wordmark />
          <p className="footer__tag">
            Authentic Pakistani flavours since 1973. 22 branches across the UAE.
            One kitchen serving 100,000 meals a day. The roti is still hot, and it still costs what it should.
          </p>
        </div>
        <div className="footer__cols">
          <div>
            <h6>Visit</h6>
            <a onClick={() => setPage("branches")}>Find My Branch</a>
            <a onClick={() => setPage("branches")}>22 UAE locations</a>
            <a href="tel:+97142673131">Head Office · +971 4 267 3131</a>
          </div>
          <div>
            <h6>Eat</h6>
            <a onClick={() => setPage("menu")}>Full Menu</a>
            <a onClick={() => setPage("catering")}>Catering &amp; Bulk</a>
            <a onClick={() => setPage("karachi-grill")}>Karachi Grill ↗</a>
          </div>
          <div>
            <h6>Order</h6>
            <a onClick={() => setPage("order")}>Talabat</a>
            <a onClick={() => setPage("order")}>Deliveroo · Zomato</a>
            <a onClick={() => setPage("order")}>Careem · EazyDiner</a>
          </div>
          <div>
            <h6>Story</h6>
            <a onClick={() => setPage("story")}>52 Years</a>
            <a onClick={() => setPage("press")}>Press &amp; Reviews</a>
            <a href="mailto:cro@karachigrilluae.com">cro@karachigrilluae.com</a>
          </div>
        </div>
      </div>
      <div className="footer__bottom">
        <div>© {year} Karachi Darbar Group · A family-held UAE restaurant company.</div>
        <div className="footer__certs">
          <span className="cert">ISO 9001</span>
          <span className="cert">ISO 22000</span>
          <span className="cert">HACCP</span>
        </div>
      </div>
    </footer>
  );
}

function WhatsAppFab() {
  return (
    <a className="wa-fab" href="https://wa.me/97142673131?text=Hi%20Karachi%20Darbar%2C%20I%27d%20like%20to%20place%20a%20bulk%20order"
      target="_blank" rel="noreferrer" aria-label="WhatsApp bulk order">
      <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
        <path d="M17.5 14.4c-.3-.2-1.7-.9-2-1s-.5-.1-.7.2-.8 1-1 1.2-.4.2-.7.1c-.3-.1-1.3-.5-2.4-1.5-.9-.8-1.5-1.8-1.7-2.1s0-.5.1-.6c.1-.1.3-.4.4-.5.1-.2.2-.3.3-.5s0-.4 0-.5-.7-1.7-1-2.3c-.3-.6-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4s-1 1-1 2.5 1.1 2.9 1.2 3.1c.1.2 2.1 3.3 5.2 4.6.7.3 1.3.5 1.7.6.7.2 1.4.2 1.9.1.6-.1 1.7-.7 1.9-1.4.2-.7.2-1.2.2-1.4-.1-.2-.3-.3-.6-.4zM12 2C6.5 2 2 6.5 2 12c0 1.8.5 3.5 1.4 5L2 22l5.2-1.4c1.5.8 3.1 1.3 4.8 1.3 5.5 0 10-4.5 10-10S17.5 2 12 2z"/>
      </svg>
      <span>WhatsApp Bulk Order</span>
    </a>
  );
}

// Icons
function ArrowIcon() { return <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M3 7h8m-3-3 3 3-3 3" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg>; }
function PhoneIcon() { return <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M3 3c0-.6.4-1 1-1h1.6c.4 0 .8.3.9.7l.7 2c.1.4 0 .8-.3 1.1L6 6.7c.7 1.4 1.9 2.6 3.3 3.3l.9-.9c.3-.3.7-.4 1.1-.3l2 .7c.4.1.7.5.7.9V12c0 .6-.4 1-1 1A10 10 0 0 1 3 3Z" stroke="currentColor" strokeWidth="1.3" strokeLinejoin="round"/></svg>; }
function PinIcon() { return <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M7 13s4-4 4-7a4 4 0 1 0-8 0c0 3 4 7 4 7Z" stroke="currentColor" strokeWidth="1.3"/><circle cx="7" cy="6" r="1.5" stroke="currentColor" strokeWidth="1.3"/></svg>; }
function ClockIcon() { return <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><circle cx="7" cy="7" r="5.5" stroke="currentColor" strokeWidth="1.3"/><path d="M7 4v3l2 1.5" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round"/></svg>; }
function CarIcon() { return <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 9V7l1.2-3a1 1 0 0 1 1-.7h5.6a1 1 0 0 1 1 .7L12 7v2m-10 0v1.5a.5.5 0 0 0 .5.5h1A.5.5 0 0 0 4 10.5V10M2 9h10m0 0v1.5a.5.5 0 0 0 .5.5H13a.5.5 0 0 0 .5-.5V9m-9-.5v-.1m5 .1v-.1" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round"/></svg>; }
function StarIcon() { return <svg width="12" height="12" viewBox="0 0 12 12" fill="currentColor"><path d="M6 .8l1.6 3.3 3.6.5-2.6 2.5.6 3.6L6 8.9 2.8 10.7l.6-3.6L.8 4.6l3.6-.5L6 .8Z"/></svg>; }
function CompassIcon() { return <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><circle cx="7" cy="7" r="5.5" stroke="currentColor" strokeWidth="1.3"/><path d="m9.5 4.5-3.7 1.3-1.3 3.7 3.7-1.3 1.3-3.7Z" fill="currentColor"/></svg>; }

Object.assign(window, { Nav, Footer, WhatsAppFab, Wordmark, KdrLogoMark,
  ArrowIcon, PhoneIcon, PinIcon, ClockIcon, CarIcon, StarIcon, CompassIcon });