/* eslint-disable */
// site-chrome.jsx — Shared top nav + global footer for every public page.
//
// Source of truth lives here so each page (home/work/scope/journal/article/
// project/404) renders the SAME chrome. The current page's link is swapped
// out for a "Home" link pointing back to index.html so users always have a
// way home.
//
// Loaded via <script type="text/babel" src="src/site-chrome.jsx"> AFTER
// shared.jsx (we depend on PALETTE) and is consumed by every page's main
// script: each page-level component renders <BlockNav activePage="..." />
// and <SiteFooter /> — babel-in-browser resolves these from the global
// scope (we Object.assign them onto window at the bottom of this file).
//
// Nav order is the same on every page: Home · Scope · Work · Field Notes ·
// Say Hello. activePage only affects the "Say Hello" href (in-page anchor
// on home, cross-page anchor elsewhere).

// ── Local font tokens (mirror direction-noir.jsx) ─────────────────
const C1_DISPLAY = "'Fraunces', Georgia, serif";
const C1_SANS    = "'Montserrat', system-ui, sans-serif";
const C1_SCRIPT  = "'Homemade Apple', cursive";
const C1_MONO    = "'JetBrains Mono', ui-monospace, monospace";

// ── Nav ───────────────────────────────────────────────────────────

function BlockNav({ activePage }) {
  const [hidden, setHidden] = React.useState(false);
  const [menuOpen, setMenuOpen] = React.useState(false);
  const [scopeOpen, setScopeOpen] = React.useState(false);

  // Auto-hide on scroll-down, restore on scroll-up. Scrollroot is .c1-stage
  // when present (home page), otherwise window (sub-pages with native scroll).
  React.useEffect(() => {
    const stage = document.querySelector('.c1-stage');
    const target = stage || window;
    const getY = () => stage ? stage.scrollTop : (window.scrollY || window.pageYOffset || 0);
    let lastY = getY();
    let raf = 0;
    const onScroll = () => {
      cancelAnimationFrame(raf);
      raf = requestAnimationFrame(() => {
        const y = getY();
        const delta = y - lastY;
        if (y < 40) setHidden(false);
        else if (delta > 4) setHidden(true);
        else if (delta < -4) setHidden(false);
        lastY = y;
      });
    };
    target.addEventListener('scroll', onScroll, { passive: true });
    return () => { cancelAnimationFrame(raf); target.removeEventListener('scroll', onScroll); };
  }, []);

  // Lock scroll while the mobile menu overlay is open.
  React.useEffect(() => {
    const stage = document.querySelector('.c1-stage');
    const target = stage || document.body;
    if (menuOpen) target.style.overflow = 'hidden';
    else target.style.overflow = '';
    return () => { target.style.overflow = ''; };
  }, [menuOpen]);

  // Slug-keyed link definitions — same set and order on every page.
  const HOME_LINK = { slug: 'home', href: 'index.html', label: 'Home', cursor: 'Home' };
  const SCOPE_LINK = {
    slug: 'scope',
    href: 'scope.html', label: 'Scope', cursor: 'Explore',
    children: [
      { href: 'scope.html?s=brands',    label: 'Brands' },
      { href: 'scope.html?s=concepts',  label: 'Concepts' },
      { href: 'scope.html?s=workshops', label: 'Workshops' },
      { href: 'scope.html?s=content',   label: 'Content' },
    ],
  };
  const WORK_LINK     = { slug: 'work',    href: 'work.html',    label: 'Work',        cursor: 'View' };
  const JOURNAL_LINK  = { slug: 'journal', href: 'journal.html', label: 'Field Notes', cursor: 'Read' };
  const CONTACT_LINK  = { slug: 'contact', href: activePage === 'home' ? '#contact' : 'index.html#contact', label: 'Say Hello', cursor: 'Write' };

  const links = [HOME_LINK, SCOPE_LINK, WORK_LINK, JOURNAL_LINK, CONTACT_LINK];

  const linkStyle = {
    fontFamily: C1_MONO,
    fontSize: 11,
    letterSpacing: '.22em',
    textTransform: 'uppercase',
    color: PALETTE.carbon,
    whiteSpace: 'nowrap',
  };

  return (
    <>
      <nav style={{
        position: 'fixed', top: 0, left: 0, right: 0, zIndex: 50,
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        padding: '20px 32px',
        background: 'rgba(239,234,224,.78)',
        backdropFilter: 'blur(10px)',
        WebkitBackdropFilter: 'blur(10px)',
        borderBottom: '1px solid rgba(34,26,29,.08)',
        transform: hidden ? 'translateY(-110%)' : 'translateY(0)',
        opacity: hidden ? 0 : 1,
        transition: 'transform .55s cubic-bezier(.7,0,.2,1), opacity .35s ease',
        willChange: 'transform, opacity',
      }}>
        {/* Wordmark left — Chapter 1 logo */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 18 }}>
          <a href="index.html" data-cursor="Home" aria-label="Chapter 1 — Home" style={{ display: 'inline-flex', alignItems: 'center', color: PALETTE.carbon }}>
            <img src="uploads/Chapter One White.svg" alt="Chapter One"
              style={{ height: 22, width: 'auto', display: 'block' }} />
          </a>
        </div>

        {/* Right links */}
        <div className="c1-nav-right" style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center', gap: 24 }}>
          <div className="c1-nav-links" style={{ display: 'flex', justifyContent: 'flex-end', gap: 26 }}>
            {links.map((l) => (
              l.children ? (
                <div key={l.label + l.slug} className="c1-nav-dropdown" style={{ position: 'relative', display: 'inline-flex', alignItems: 'center' }}>
                  <span className="c1-link c1-nav-dropdown-trigger" data-cursor={l.cursor} tabIndex={0} role="button" aria-haspopup="menu" style={{ ...linkStyle, display: 'inline-flex', alignItems: 'center' }}>{l.label}</span>
                  <div className="c1-nav-dropdown-panel" role="menu" aria-label={`${l.label} sub-menu`}>
                    {l.children.map((c) => (
                      <a key={c.label} role="menuitem" href={c.href} data-cursor="Open" className="c1-link" style={linkStyle}>{c.label}</a>
                    ))}
                  </div>
                </div>
              ) : (
                <a key={l.label + l.slug} className="c1-link" data-cursor={l.cursor} href={l.href} style={linkStyle}>{l.label}</a>
              )
            ))}
          </div>

          {/* Mobile burger */}
          <button
            className="c1-nav-burger"
            onClick={() => setMenuOpen(!menuOpen)}
            aria-label={menuOpen ? 'Close menu' : 'Open menu'}
            aria-expanded={menuOpen}
            style={{
              display: 'none', /* shown on mobile via mobile.css */
              background: 'transparent', border: 0, padding: 8, cursor: 'pointer',
              color: PALETTE.carbon, alignItems: 'center', justifyContent: 'center',
              width: 36, height: 36,
            }}>
            <svg width="22" height="22" viewBox="0 0 22 22" aria-hidden="true">
              {menuOpen ? (
                <g stroke="currentColor" strokeWidth="1.6" strokeLinecap="round">
                  <line x1="4" y1="4" x2="18" y2="18" />
                  <line x1="18" y1="4" x2="4" y2="18" />
                </g>
              ) : (
                <g stroke="currentColor" strokeWidth="1.6" strokeLinecap="round">
                  <line x1="3" y1="7" x2="19" y2="7" />
                  <line x1="3" y1="15" x2="19" y2="15" />
                </g>
              )}
            </svg>
          </button>
        </div>
      </nav>

      {/* Mobile menu overlay */}
      {menuOpen && (
        <div className="c1-nav-overlay" style={{
          position: 'fixed', inset: 0, zIndex: 49,
          background: 'rgba(239,234,224,.98)', backdropFilter: 'blur(8px)',
          display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center',
          gap: 22, padding: 40, overflowY: 'auto',
        }}>
          {links.map((l, i) => (
            <React.Fragment key={l.label + l.slug}>
              {l.children ? (
                <button
                  type="button"
                  onClick={() => setScopeOpen(!scopeOpen)}
                  aria-expanded={scopeOpen}
                  style={{
                    background: 'transparent', border: 0, cursor: 'pointer',
                    display: 'inline-flex', alignItems: 'center', gap: 12,
                    fontFamily: C1_MONO,
                    fontSize: 16, letterSpacing: '.22em', textTransform: 'uppercase',
                    color: PALETTE.carbon,
                    opacity: 0, animation: `c1-fade-in .5s cubic-bezier(.16,1,.3,1) ${80 + i * 70}ms forwards`,
                    padding: 0,
                  }}>
                  {l.label}
                  <span style={{
                    fontSize: 14,
                    color: PALETTE.magenta,
                    transition: 'transform .25s ease',
                    transform: scopeOpen ? 'rotate(45deg)' : 'rotate(0)',
                    display: 'inline-block', lineHeight: 1,
                  }}>+</span>
                </button>
              ) : (
                <a href={l.href} onClick={() => setMenuOpen(false)}
                  style={{
                    fontFamily: C1_MONO,
                    fontSize: 16, letterSpacing: '.22em', textTransform: 'uppercase',
                    color: PALETTE.carbon,
                    opacity: 0, animation: `c1-fade-in .5s cubic-bezier(.16,1,.3,1) ${80 + i * 70}ms forwards`,
                  }}>
                  {l.label}
                </a>
              )}
              {l.children && scopeOpen && (
                <div style={{
                  display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 12,
                  marginTop: -4,
                  animation: 'c1-fade-in .35s cubic-bezier(.16,1,.3,1) forwards',
                }}>
                  {l.children.map((c) => (
                    <a key={c.label} href={c.href} onClick={() => setMenuOpen(false)}
                      style={{
                        fontFamily: C1_MONO,
                        fontSize: 11, letterSpacing: '.22em', textTransform: 'uppercase',
                        color: 'rgba(34,26,29,.6)',
                      }}>
                      {c.label}
                    </a>
                  ))}
                </div>
              )}
            </React.Fragment>
          ))}
          <style>{`@keyframes c1-fade-in { to { opacity: 1; transform: translateY(0); } from { opacity: 0; transform: translateY(8px); } }`}</style>
        </div>
      )}
    </>
  );
}

// ── Footer ────────────────────────────────────────────────────────
function SiteFooter() {
  const iconStyle = {
    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
    width: 36, height: 36, color: 'rgba(239,234,224,.7)',
    transition: 'color .25s ease',
  };

  return (
    <footer style={{
      background: PALETTE.carbon, color: PALETTE.ivory,
      padding: '72px 32px 28px', position: 'relative',
    }}>
      <div className="c1-footer-grid" style={{
        display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr 1fr',
        gap: 48, paddingBottom: 64,
        borderBottom: '1px solid rgba(239,234,224,.18)',
      }}>
        {/* Studio block */}
        <div>
          <div style={{ marginBottom: 18 }}>
            <img src="uploads/Chapter One White.svg" alt="Chapter One"
              style={{
                height: 28, width: 'auto', display: 'block',
                filter: 'brightness(0) invert(1)',
              }} />
          </div>
          <p style={{
            fontFamily: C1_SANS, fontSize: 14, color: 'rgba(239,234,224,.65)',
            maxWidth: '34ch', margin: 0, lineHeight: 1.55,
          }}>
            A creative house for brands with something to say —
            concept, identity, campaign.
          </p>
        </div>

        <FooterCol title="Index" items={[
          { label: 'Work',        href: 'work.html' },
          { label: 'Scope',       href: 'scope.html' },
          { label: 'Field Notes', href: 'journal.html' },
          { label: 'Say Hello',   href: 'index.html#contact' },
        ]} />
        <FooterCol title="Studio" items={[
          { label: 'hello@chapter1.in', href: 'mailto:hello@chapter1.in' },
          { label: '+91 70123 36355',   href: 'https://wa.me/917012336355' },
        ]} />
        <FooterCol title="Elsewhere" items={[
          { label: 'Instagram', href: 'https://www.instagram.com/chapter1.in/' },
          { label: 'LinkedIn',  href: 'https://www.linkedin.com/company/chapter1-india' },
          { label: 'WhatsApp',  href: 'https://wa.me/917012336355' },
        ]} />
      </div>

      {/* Meta row */}
      <div style={{
        display: 'grid', gridTemplateColumns: '1fr auto 1fr',
        gap: 32, alignItems: 'center', marginTop: 28,
        fontFamily: C1_MONO, fontSize: 10, letterSpacing: '.24em',
        textTransform: 'uppercase', color: 'rgba(239,234,224,.55)',
      }}>
        <div>© Chapter 1, since 2023</div>
        <div style={{ display: 'flex', gap: 8, justifyContent: 'center' }}>
          <a href="https://www.instagram.com/chapter1.in/" target="_blank" rel="noopener noreferrer"
             data-cursor="Instagram" aria-label="Instagram" style={iconStyle}>
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
              <rect x="3" y="3" width="18" height="18" rx="5" />
              <circle cx="12" cy="12" r="4" />
              <circle cx="17.5" cy="6.5" r="1" fill="currentColor" stroke="none" />
            </svg>
          </a>
          <a href="https://www.linkedin.com/company/chapter1-india" target="_blank" rel="noopener noreferrer"
             data-cursor="LinkedIn" aria-label="LinkedIn" style={iconStyle}>
            <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
              <path d="M4.98 3.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5zM3 9h4v12H3zM10 9h3.8v1.7h.05c.53-.95 1.83-1.95 3.77-1.95 4.03 0 4.78 2.65 4.78 6.1V21h-4v-5.5c0-1.31-.02-3-1.83-3-1.83 0-2.11 1.43-2.11 2.9V21h-4z" />
            </svg>
          </a>
          <a href="https://wa.me/917012336355" target="_blank" rel="noopener noreferrer"
             data-cursor="WhatsApp" aria-label="WhatsApp" style={iconStyle}>
            <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
              <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.71.306 1.263.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.247-.694.247-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413" />
            </svg>
          </a>
        </div>
        <div style={{ textAlign: 'right' }}>No cookies, no tracking</div>
      </div>

      {/* Giant footer wordmark — Chapter 1 logo, sized to fill the column. */}
      <div className="c1-footer-wordmark" style={{
        marginTop: 56, display: 'block',
      }}>
        <img src="uploads/Chapter One White.svg" alt="Chapter One"
          style={{
            width: '100%', maxWidth: 1100, height: 'auto', display: 'block',
            filter: 'brightness(0) invert(1)',
          }} />
      </div>

      <style>{`footer a[aria-label]:hover { color: ${PALETTE.magenta} !important; }`}</style>
    </footer>
  );
}

function FooterCol({ title, items }) {
  return (
    <div>
      <div style={{
        fontFamily: C1_MONO, fontSize: 10, letterSpacing: '.24em',
        textTransform: 'uppercase', color: 'rgba(239,234,224,.5)', marginBottom: 18,
      }}>{title}</div>
      <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
        {items.map((it) => (
          <li key={it.label}>
            {it.href ? (
              <a href={it.href} data-cursor="→" className="c1-link" style={{
                fontFamily: C1_SANS, fontSize: 14, color: PALETTE.ivory,
              }}>{it.label}</a>
            ) : (
              <span style={{ fontFamily: C1_SANS, fontSize: 14, color: 'rgba(239,234,224,.8)' }}>{it.label}</span>
            )}
          </li>
        ))}
      </ul>
    </div>
  );
}

// Expose the shared chrome so each page-level script can mount it.
Object.assign(window, { BlockNav, SiteFooter, FooterCol });