/* global React */
const { useState, useEffect, useRef } = React;

// ---------- Icon set ----------
const Icon = {
  Menu:   (p) => <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" {...p}><path d="M3 7h18M3 12h18M3 17h18"/></svg>,
  Close:  (p) => <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" {...p}><path d="M6 6l12 12M18 6L6 18"/></svg>,
  Arrow:  (p) => <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" {...p}><path d="M5 12h14M13 5l7 7-7 7"/></svg>,
  Phone:  (p) => <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M22 16.9V21a1 1 0 0 1-1.1 1A19 19 0 0 1 2 4.1 1 1 0 0 1 3 3h4.1a1 1 0 0 1 1 .75l1 3.6a1 1 0 0 1-.3 1L7.2 10a16 16 0 0 0 6.8 6.8l1.66-1.59a1 1 0 0 1 1-.3l3.6 1a1 1 0 0 1 .74 1z"/></svg>,
  Flame:  (p) => (
    <svg width="28" height="36" viewBox="0 0 60 76" fill="none" {...p}>
      <path d="M30 4 C 34 16, 44 22, 46 36 C 48 52, 38 66, 30 72 C 22 66, 12 52, 14 36 C 16 22, 26 16, 30 4 Z" fill="currentColor"/>
      <path d="M24 32 C 22 40, 26 50, 30 56 C 26 52, 22 42, 24 32 Z" fill="#1F1915" opacity="0.5"/>
    </svg>
  ),
  FlameSmall: (p) => (
    <svg width="18" height="22" viewBox="0 0 60 76" fill="none" {...p}>
      <path d="M30 4 C 34 16, 44 22, 46 36 C 48 52, 38 66, 30 72 C 22 66, 12 52, 14 36 C 16 22, 26 16, 30 4 Z" fill="currentColor"/>
    </svg>
  ),
};

// ---------- Reveal on scroll ----------
function Reveal({ children, delay = 0, as: Tag = "div", className = "", ...rest }) {
  const ref = useRef(null);
  const [inView, setIn] = useState(false);
  useEffect(() => {
    const el = ref.current; if (!el) return;
    const io = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) { setTimeout(() => setIn(true), delay); io.disconnect(); }
    }, { threshold: 0.15 });
    io.observe(el);
    return () => io.disconnect();
  }, [delay]);
  return <Tag ref={ref} className={`reveal ${inView ? "is-in" : ""} ${className}`} {...rest}>{children}</Tag>;
}

// ---------- Nav (overlays hero on Home; solid on inner pages) ----------
function Nav({ active, solid = false }) {
  const [stuck, setStuck] = useState(solid);
  const [mopen, setMopen] = useState(false);
  useEffect(() => {
    if (solid) return;
    const onScroll = () => setStuck(window.scrollY > 60);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, [solid]);
  useEffect(() => {
    document.body.style.overflow = mopen ? 'hidden' : '';
  }, [mopen]);
  const links = [
    { href: "index.html", label: "Home", key: "home" },
    { href: "menu.html", label: "Menu", key: "menu" },
    { href: "story.html", label: "Our Story", key: "story" },
    { href: "reservations.html", label: "Reservations", key: "reservations" },
  ];
  return (
    <React.Fragment>
      <header className={`nav ${stuck ? 'is-stuck' : ''}`}>
        <div className="nav__inner">
          <a className="nav__brand" href="index.html">
            <Icon.Flame />
            <div>
              <div className="nav__brand-name">Amara</div>
              <div className="nav__brand-sub">Indian Kitchen</div>
            </div>
          </a>
          <nav className="nav__links">
            {links.map(l => (
              <a key={l.key} href={l.href} className={active === l.key ? "is-active" : ""}>{l.label}</a>
            ))}
          </nav>
          <div className="nav__cta">
            <a className="nav__phone" href="tel:+16045550100"><Icon.Phone />604 · 555 · 0100</a>
            <a className="btn btn--primary" href="reservations.html">Reserve a table</a>
            <button className="nav__burger" onClick={() => setMopen(true)} aria-label="Open menu"><Icon.Menu /></button>
          </div>
        </div>
      </header>

      <div className={`mnav ${mopen ? 'is-open' : ''}`}>
        <div className="mnav__scrim" onClick={() => setMopen(false)} />
        <aside className="mnav__panel" role="dialog" aria-label="Site navigation">
          <div className="mnav__head">
            <a className="nav__brand" href="index.html">
              <Icon.Flame />
              <div>
                <div className="nav__brand-name">Amara</div>
                <div className="nav__brand-sub">Indian Kitchen</div>
              </div>
            </a>
            <button className="mnav__close" onClick={() => setMopen(false)} aria-label="Close menu"><Icon.Close /></button>
          </div>
          <div className="mnav__links">
            {links.map(l => (
              <a key={l.key} href={l.href} className={active === l.key ? "is-active" : ""}>{l.label}</a>
            ))}
            <a href="reservations.html">Reserve</a>
          </div>
          <div className="mnav__foot">
            <a className="phone" href="tel:+16045550100">604 · 555 · 0100</a>
            <span className="meta">Dinner · Tue – Sat · 5:30 – 10:30</span>
            <span className="meta">Surrey · British Columbia</span>
          </div>
        </aside>
      </div>
    </React.Fragment>
  );
}

// ---------- Footer ----------
function Foot() {
  return (
    <footer className="foot">
      <div className="foot__inner">
        <div className="foot__brand">
          <Icon.Flame />
          <div>
            <div className="foot__name">Amara Indian Kitchen</div>
            <div className="foot__tag"><em>Recipes that outlived empires.</em></div>
          </div>
        </div>
        <div className="foot__cols">
          <div>
            <div className="foot__label">The Kitchen</div>
            <a href="menu.html">Menu</a>
            <a href="story.html">Our story</a>
            <a href="#">Kitchen journal</a>
          </div>
          <div>
            <div className="foot__label">The Room</div>
            <a href="#">Private dining</a>
            <a href="#">Catering</a>
            <a href="#">Reservations</a>
          </div>
          <div>
            <div className="foot__label">Visit</div>
            <a href="#">Surrey, BC</a>
            <a href="tel:+16045550100">604 · 555 · 0100</a>
            <a href="mailto:hello@amara-kitchen.example">hello@amara-kitchen.example</a>
          </div>
        </div>
      </div>
      <div className="foot__base">
        <span>© 2026 Amara Indian Kitchen · Concept site</span>
        <span>Surrey · British Columbia</span>
      </div>
    </footer>
  );
}

Object.assign(window, { AmaraIcon: Icon, AmaraNav: Nav, AmaraFoot: Foot, AmaraReveal: Reveal });