// Shared page chrome for sub-pages — reuses Direction 2 v3's visual system
// Exposes: PageShell (full header + footer wrapper), PageNav, PageFooter, PageHero

const P = {
  bg: '#0d1412',
  surface: '#f4ede0',
  ink: '#040604',
  mute: 'rgba(244, 237, 224, 0.68)',
  accent: '#c97d4a',
  rule: 'rgba(244, 237, 224, 0.12)',
  display: 'EB Garamond, Georgia, serif',
  serif: 'EB Garamond, Georgia, serif',
  mono: 'Work Sans, system-ui, sans-serif',
};

function PageNav({ current }) {
  const items = [
    { label: 'About', href: 'about.html', key: 'about' },
    { label: 'Projects', href: 'projects.html', key: 'projects' },
    { label: 'Events', href: 'events.html', key: 'events' },
    { label: 'Impact', href: 'impact.html', key: 'impact' },
  ];
  return (
    <header style={{
      position: 'absolute', top: 0, left: 0, right: 0, zIndex: 20,
      padding: '28px 56px', display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      color: P.surface,
    }}>
      <a href="index.html" style={{ color: 'inherit', textDecoration: 'none' }}>
        <SRLogoLockup />
      </a>
      <nav style={{ display: 'flex', alignItems: 'center', gap: 36 }}>
        {items.map(i => (
          <a key={i.key} href={i.href} style={{
            fontFamily: P.mono, fontSize: 11, letterSpacing: '0.2em',
            textTransform: 'uppercase', color: 'inherit', textDecoration: 'none',
            borderBottom: current === i.key ? `1px solid ${P.accent}` : '1px solid transparent',
            paddingBottom: 4,
            color: current === i.key ? P.accent : 'inherit',
          }}>{i.label}</a>
        ))}
        <a href="donate.html" style={{
          fontFamily: P.mono, fontSize: 11, letterSpacing: '0.2em',
          textTransform: 'uppercase', textDecoration: 'none',
          border: `1px solid ${current === 'donate' ? P.accent : 'currentColor'}`,
          background: current === 'donate' ? P.accent : 'transparent',
          color: current === 'donate' ? P.bg : 'inherit',
          padding: '12px 22px', borderRadius: 999,
        }}>Donate</a>
      </nav>
    </header>
  );
}

function PageHero({ eyebrow, title, sub, image }) {
  return (
    <section style={{
      position: 'relative', minHeight: 560, overflow: 'hidden',
      background: P.bg, color: P.surface, padding: '180px 56px 100px',
    }}>
      <div style={{
        position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)',
        color: P.accent, opacity: 0.1, pointerEvents: 'none',
      }}>
        <FlowerOfLife size={900} rings={5} stroke={0.5} />
      </div>
      {image && (
        <div style={{
          position: 'absolute', inset: 0,
          backgroundImage: `url(${image})`, backgroundSize: 'cover', backgroundPosition: 'center',
          opacity: 0.18, filter: 'saturate(0.4) contrast(1.1)',
        }} />
      )}
      <div style={{ maxWidth: 1100, margin: '0 auto', position: 'relative', textAlign: 'center' }}>
        <div style={{
          fontFamily: P.mono, fontSize: 10, letterSpacing: '0.36em',
          textTransform: 'uppercase', color: P.accent, marginBottom: 32,
        }}>{eyebrow}</div>
        <h1 style={{
          fontFamily: P.display, fontSize: 96, fontWeight: 500,
          letterSpacing: '-0.02em', lineHeight: 1.2, margin: '0 0 72px',
          paddingBottom: 12,
        }}>{title}</h1>
        {sub && (
          <p style={{
            fontFamily: P.serif, fontSize: 20, lineHeight: 1.55,
            color: P.mute, margin: '0 auto', maxWidth: 720,
          }}>{sub}</p>
        )}
      </div>
    </section>
  );
}

function PageFooter() {
  return (
    <footer style={{ background: P.bg, color: P.surface, padding: '80px 56px 40px', borderTop: `1px solid ${P.rule}` }}>
      <div style={{ maxWidth: 1400, margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr', gap: 48, marginBottom: 80 }}>
          <div>
            <div style={{ marginBottom: 20 }}><SRLogoLockup /></div>
            <p style={{
              fontFamily: P.serif, fontSize: 15, lineHeight: 1.6,
              color: P.mute, margin: '0 0 20px', maxWidth: 380,
            }}>
              A descendant-led nonprofit repairing, restoring, and reconnecting communities owed repair.
            </p>
            <div style={{ fontFamily: P.display, fontSize: 20, fontStyle: 'italic', color: P.accent, marginBottom: 20 }}>
              Lakay — Returning Home
            </div>
            <div style={{
              fontFamily: P.mono, fontSize: 10, letterSpacing: '0.24em',
              textTransform: 'uppercase', opacity: 0.6,
            }}>A 501(c)(3) nonprofit · Seattle, Washington</div>
          </div>
          <div>
            <div style={{ fontFamily: P.mono, fontSize: 10, letterSpacing: '0.3em', textTransform: 'uppercase', color: P.accent, marginBottom: 20 }}>Navigate</div>
            {[
              ['About', 'about.html'],
              ['Projects', 'projects.html'],
              ['Events', 'events.html'],
              ['Impact', 'impact.html'],
            ].map(([l, h]) => (
              <a key={l} href={h} style={{ display: 'block', fontFamily: P.display, fontSize: 18, color: P.surface, textDecoration: 'none', marginBottom: 10 }}>{l}</a>
            ))}
          </div>
          <div>
            <div style={{ fontFamily: P.mono, fontSize: 10, letterSpacing: '0.3em', textTransform: 'uppercase', color: P.accent, marginBottom: 20 }}>Connect</div>
            <a href="mailto:christopher@sacredroux.org" style={{ display: 'block', fontFamily: P.serif, fontSize: 14, color: P.surface, textDecoration: 'none', marginBottom: 10 }}>christopher@sacredroux.org</a>
            <div style={{ fontFamily: P.serif, fontSize: 14, opacity: 0.7 }}>Seattle, Washington</div>
          </div>
          <div style={{ textAlign: 'right', color: P.accent, opacity: 0.9 }}>
            <SRLogoMark size={110} />
          </div>
        </div>
        <div style={{
          borderTop: `1px solid ${P.rule}`, paddingTop: 32, display: 'flex',
          justifyContent: 'space-between', fontFamily: P.mono, fontSize: 10,
          letterSpacing: '0.2em', textTransform: 'uppercase', opacity: 0.5,
        }}>
          <div>© 2026 Sacred Roux. All rights reserved.</div>
          <div style={{ fontStyle: 'italic', fontFamily: P.display, fontSize: 13, textTransform: 'none', letterSpacing: '0.04em' }}>
            Descendants of Marie Thérèse dite Coincoin
          </div>
        </div>
      </div>
    </footer>
  );
}

function PageShell({ current, children }) {
  return (
    <div style={{ background: P.bg, width: '100%', minHeight: '100vh' }}>
      <PageNav current={current} />
      {children}
      <PageFooter />
    </div>
  );
}

window.PageShell = PageShell;
window.PageNav = PageNav;
window.PageHero = PageHero;
window.PageFooter = PageFooter;
window.P = P;