// Shared design tokens, Nav, Footer, utilities
// Exported to window for use by all page scripts

const { useState, useEffect, useRef, useCallback } = React;

/* ─── SCROLL REVEAL HOOK ─────────────────────────────── */
function useReveal(dep) {
  useEffect(() => {
    const els = document.querySelectorAll('.reveal:not(.visible)');
    if (!els.length) return;
    const obs = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) { e.target.classList.add('visible'); obs.unobserve(e.target); }
      });
    }, { threshold: 0.1, rootMargin: '0px 0px -32px 0px' });
    els.forEach(el => obs.observe(el));
    return () => obs.disconnect();
  }, [dep]);
}

/* ─── NAV ────────────────────────────────────────────── */
function Nav({ currentPage, navigate, accentColor }) {
  const [scrolled, setScrolled] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);
  const gold = accentColor || '#B8962E';

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 60);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  // Close mobile menu on page change
  useEffect(() => { setMenuOpen(false); }, [currentPage]);

  const links = [
    { id: 'home',     label: 'Home' },
    { id: 'brenda',   label: 'Meet Brenda Richey' },
    { id: 'approach', label: 'Our Approach' },
    { id: 'method',   label: 'Our Method' },
    { id: 'blogs',    label: 'Our Blog' },
    { id: 'faqs',     label: 'FAQ' },
    { id: 'contact',  label: 'Contact Us' },
  ];

  const isHome = currentPage === 'home' || currentPage === 'brenda' || currentPage === 'approach' || currentPage === 'method' || currentPage === 'blogs' || currentPage === 'faqs' || currentPage === 'contact';

  return (
    <nav style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 900,
      transition: 'background 0.4s ease, box-shadow 0.4s ease',
      background: (scrolled || !isHome) ? 'rgba(248,245,239,0.97)' : 'transparent',
      boxShadow: (scrolled || !isHome) ? '0 1px 0 rgba(12,12,12,0.08)' : 'none',
      backdropFilter: (scrolled || !isHome) ? 'blur(12px)' : 'none',
    }} role="navigation" aria-label="Main navigation">
      <div style={{ maxWidth:'1280px', margin:'0 auto', padding:'0 clamp(24px,5vw,80px)', display:'flex', alignItems:'center', justifyContent:'space-between', height:'80px', gap:'24px' }}>

        {/* Logo */}
        <button onClick={() => navigate('home')} style={{ background:'none', border:'none', cursor:'pointer', flexShrink:0, padding:0 }} aria-label="Metera Collective home">
          <img src="assets/logo.webp" alt="Metera Collective" style={{ height:'52px', width:'auto' }} />
        </button>

        {/* Desktop links */}
        <div style={{ display:'flex', alignItems:'center', gap:'clamp(16px,2.2vw,28px)', flex:1, justifyContent:'center' }} className="nav-desktop">
          {links.map(l => {
            const active = currentPage === l.id;
            const onDarkHero = isHome && !scrolled;
            const defaultColor = active ? gold : (onDarkHero ? 'rgba(248,245,239,0.85)' : 'var(--ink)');
            return (
              <button key={l.id} onClick={() => navigate(l.id)} style={{
                background:'none', border:'none', cursor:'pointer', padding:'2px 0',
                fontFamily:'var(--sans)', fontSize:'12px', fontWeight: active ? '500' : '400',
                letterSpacing:'0.08em', color: defaultColor,
                borderBottom: active ? `1px solid ${gold}` : '1px solid transparent',
                transition:'color 0.2s, border-color 0.2s', whiteSpace:'nowrap',
              }}
              onMouseEnter={e => { if (!active) e.currentTarget.style.color = gold; }}
              onMouseLeave={e => { if (!active) e.currentTarget.style.color = defaultColor; }}
              >
                {l.label}
              </button>
            );
          })}
        </div>

        {/* CTA */}
        <button onClick={() => navigate('contact')} className="btn-primary nav-cta"
          style={{ flexShrink:0, fontSize:'11px', padding:'11px 22px',
            background: isHome && !scrolled ? 'transparent' : 'var(--ink)',
            borderColor: isHome && !scrolled ? 'rgba(248,245,239,0.5)' : 'var(--ink)',
            color: 'var(--paper)',
          }}>
          Book a Strategy Call
        </button>

        {/* Hamburger */}
        <button onClick={() => setMenuOpen(o => !o)} className="nav-hamburger" style={{ background:'none', border:'none', cursor:'pointer', padding:'8px', color: isHome && !scrolled ? 'var(--paper)' : 'var(--ink)', display:'none' }} aria-label="Toggle menu">
          <svg width="22" height="22" viewBox="0 0 22 22" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round">
            {menuOpen
              ? <><line x1="3" y1="3" x2="19" y2="19"/><line x1="19" y1="3" x2="3" y2="19"/></>
              : <><line x1="3" y1="7" x2="19" y2="7"/><line x1="3" y1="15" x2="19" y2="15"/></>
            }
          </svg>
        </button>
      </div>

      {/* Mobile drawer */}
      {menuOpen && (
        <div style={{ background:'var(--paper)', borderTop:'1px solid var(--fog)', padding:'24px clamp(24px,5vw,80px) 32px' }}>
          <div style={{ display:'flex', flexDirection:'column', gap:'20px' }}>
            {links.map(l => (
              <button key={l.id} onClick={() => navigate(l.id)} style={{
                background:'none', border:'none', cursor:'pointer', textAlign:'left', padding:0,
                fontFamily:'var(--sans)', fontSize:'15px', fontWeight:'400',
                color: currentPage === l.id ? gold : 'var(--ink)',
              }}>{l.label}</button>
            ))}
            <button onClick={() => navigate('contact')} className="btn-primary" style={{ width:'fit-content', marginTop:'8px' }}>Book a Strategy Call</button>
          </div>
        </div>
      )}

      <style>{`
        @media (max-width: 960px) {
          .nav-desktop { display: none !important; }
          .nav-hamburger { display: flex !important; }
          .btn-primary.nav-cta { display: none !important; }
        }
      `}</style>
    </nav>
  );
}

/* ─── FOOTER ─────────────────────────────────────────── */
function Footer({ navigate, accentColor }) {
  const gold = accentColor || '#B8962E';
  const links = [
    { id:'home',     label:'Home' },
    { id:'brenda',   label:'Meet Brenda Richey' },
    { id:'approach', label:'Our Approach' },
    { id:'method',   label:'Our Method' },
    { id:'blogs',    label:'Our Blog' },
    { id:'faqs',     label:'FAQ' },
    { id:'contact',  label:'Contact Us' },
  ];

  const socials = [
    {
      label: 'Instagram',
      href: 'https://www.instagram.com/meteracollective/',
      icon: <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><rect x="2" y="2" width="20" height="20" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="0.5" fill="currentColor"/></svg>,
    },
    {
      label: 'Facebook',
      href: 'https://www.facebook.com/meteracollective',
      icon: <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z"/></svg>,
    },
    {
      label: 'LinkedIn',
      href: 'https://www.linkedin.com/company/metera-collective/',
      icon: <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-2-2 2 2 0 00-2 2v7h-4v-7a6 6 0 016-6z"/><rect x="2" y="9" width="4" height="12"/><circle cx="4" cy="4" r="2"/></svg>,
    },
  ];

  return (
    <footer style={{ background:'var(--ink)', color:'var(--paper)', paddingTop:'clamp(64px,8vw,100px)' }}>
      <div style={{ maxWidth:'1280px', margin:'0 auto', padding:'0 clamp(24px,5vw,80px)' }}>
        <div style={{ display:'grid', gridTemplateColumns:'2fr 1fr 1fr', gap:'clamp(40px,5vw,80px)', paddingBottom:'clamp(48px,6vw,80px)', borderBottom:'1px solid rgba(184,150,46,0.2)' }} className="footer-grid">

          {/* Brand */}
          <div>
            <img src="assets/logo.webp" alt="Metera Collective" style={{ height:'56px', width:'auto', marginBottom:'24px', filter:'brightness(0) invert(1)' }} />
            <p style={{ fontFamily:'var(--sans)', fontSize:'14px', fontWeight:'300', color:'rgba(248,245,239,0.6)', lineHeight:'1.7', maxWidth:'320px', marginBottom:'28px' }}>
              A fractional sales development firm built for startups and small companies looking to scale — meeting every client exactly where they are.
            </p>
            <a href="mailto:hello@meteracollective.com" style={{ fontFamily:'var(--sans)', fontSize:'13px', color:gold, textDecoration:'none' }}>
              hello@meteracollective.com
            </a>
            <div style={{ display:'flex', gap:'16px', marginTop:'28px' }}>
              {socials.map(s => (
                <a key={s.label} href={s.href} target="_blank" rel="noopener noreferrer" aria-label={s.label}
                  style={{ color:'rgba(248,245,239,0.45)', transition:'color 0.2s', display:'flex', alignItems:'center', justifyContent:'center', width:'36px', height:'36px', border:'1px solid rgba(248,245,239,0.12)', flexShrink:0 }}
                  onMouseEnter={e => e.currentTarget.style.color = gold}
                  onMouseLeave={e => e.currentTarget.style.color = 'rgba(248,245,239,0.45)'}
                >{s.icon}</a>
              ))}
            </div>
          </div>

          {/* Nav */}
          <div>
            <p style={{ fontFamily:'var(--sans)', fontSize:'10px', fontWeight:'500', letterSpacing:'0.18em', textTransform:'uppercase', color:'rgba(248,245,239,0.35)', marginBottom:'24px' }}>Navigation</p>
            <div style={{ display:'flex', flexDirection:'column', gap:'14px' }}>
              {links.map(l => (
                <button key={l.id} onClick={() => navigate(l.id)} style={{
                  background:'none', border:'none', cursor:'pointer', textAlign:'left', padding:0,
                  fontFamily:'var(--sans)', fontSize:'14px', fontWeight:'300', color:'rgba(248,245,239,0.65)', transition:'color 0.2s',
                }}
                onMouseEnter={e => e.currentTarget.style.color = gold}
                onMouseLeave={e => e.currentTarget.style.color = 'rgba(248,245,239,0.65)'}
                >{l.label}</button>
              ))}
            </div>
          </div>

          {/* Contact */}
          <div>
            <p style={{ fontFamily:'var(--sans)', fontSize:'10px', fontWeight:'500', letterSpacing:'0.18em', textTransform:'uppercase', color:'rgba(248,245,239,0.35)', marginBottom:'24px' }}>Contact</p>
            <div style={{ display:'flex', flexDirection:'column', gap:'16px' }}>
              {[
                { label:'Phone', val:'(918) 201-0820', href:'tel:9182010820' },
                { label:'Email', val:'hello@meteracollective.com', href:'mailto:hello@meteracollective.com' },
                { label:'Location', val:'Tuskahoma, Oklahoma', href:null },
              ].map(c => (
                <div key={c.label}>
                  <p style={{ fontFamily:'var(--sans)', fontSize:'10px', letterSpacing:'0.1em', textTransform:'uppercase', color:'rgba(248,245,239,0.3)', marginBottom:'5px' }}>{c.label}</p>
                  {c.href
                    ? <a href={c.href} style={{ fontFamily:'var(--sans)', fontSize:'14px', fontWeight:'300', color:'rgba(248,245,239,0.65)', textDecoration:'none' }}>{c.val}</a>
                    : <p style={{ fontFamily:'var(--sans)', fontSize:'14px', fontWeight:'300', color:'rgba(248,245,239,0.65)' }}>{c.val}</p>
                  }
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* Bottom */}
        <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', padding:'24px 0', flexWrap:'wrap', gap:'12px' }}>
          <div style={{ display:'flex', alignItems:'center', gap:'20px', flexWrap:'wrap' }}>
            <p style={{ fontFamily:'var(--sans)', fontSize:'12px', fontWeight:'300', color:'rgba(248,245,239,0.3)' }}>
              © 2026 Metera Collective. All rights reserved.
            </p>
            <button onClick={() => navigate('privacy')} style={{
              background:'none', border:'none', cursor:'pointer', padding:0,
              fontFamily:'var(--sans)', fontSize:'12px', fontWeight:'300', color:'rgba(248,245,239,0.3)',
              textDecoration:'underline', transition:'color 0.2s',
            }}
            onMouseEnter={e => e.currentTarget.style.color = 'rgba(248,245,239,0.65)'}
            onMouseLeave={e => e.currentTarget.style.color = 'rgba(248,245,239,0.3)'}
            >Privacy Policy</button>
          </div>
          <button onClick={() => navigate('contact')} style={{
            display:'inline-flex', alignItems:'center', gap:'8px',
            padding:'10px 20px', background:gold, color:'var(--paper)',
            fontFamily:'var(--sans)', fontSize:'11px', fontWeight:'500', letterSpacing:'0.14em', textTransform:'uppercase',
            border:'none', cursor:'pointer', transition:'background 0.25s',
          }}
          onMouseEnter={e => e.currentTarget.style.background = '#8C6E1C'}
          onMouseLeave={e => e.currentTarget.style.background = gold}
          >
            Book a Strategy Call
          </button>
        </div>
      </div>
      <style>{`
        @media (max-width: 720px) {
          .footer-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </footer>
  );
}

/* ─── INNER PAGE HERO ────────────────────────────────── */
function PageHero({ eyebrow, title, subhead, imgUrl, accentColor }) {
  const gold = accentColor || '#B8962E';
  return (
    <section style={{ position:'relative', paddingTop:'140px', paddingBottom:'100px', background:'var(--ink)', overflow:'hidden', ...(imgUrl ? { backgroundImage:`url(${imgUrl})`, backgroundSize:'cover', backgroundPosition:'center' } : {}) }}>
      <div style={{ position:'absolute', inset:0, background:'linear-gradient(105deg,rgba(12,12,12,0.55) 0%,rgba(12,12,12,0.2) 55%,rgba(12,12,12,0.05) 100%)' }} />
      <div style={{ position:'absolute', left:0, top:'10%', bottom:'10%', width:'3px', background:`linear-gradient(to bottom,transparent,${gold},transparent)` }} />
      <div style={{ maxWidth:'1280px', margin:'0 auto', padding:'0 clamp(24px,5vw,80px)', position:'relative', zIndex:1 }}>
        <p className="t-eyebrow" style={{ color:gold, marginBottom:'16px' }}>{eyebrow}</p>
        <h1 className="t-h1" style={{ color:'var(--paper)', maxWidth:'680px' }}>{title}</h1>
        {subhead && <p className="t-subhead" style={{ color:'rgba(248,245,239,0.6)', marginTop:'16px', maxWidth:'520px' }}>{subhead}</p>}
      </div>
    </section>
  );
}

/* ─── CTA BAND ───────────────────────────────────────── */
function CTABand({ navigate, accentColor, heading, sub }) {
  const gold = accentColor || '#B8962E';
  return (
    <section style={{ background:gold, padding:'clamp(64px,8vw,100px) 0', position:'relative', overflow:'hidden' }}>
      <div style={{ position:'absolute', inset:0, backgroundImage:'repeating-linear-gradient(105deg,rgba(255,255,255,0.04) 0,rgba(255,255,255,0.04) 1px,transparent 1px,transparent 60px)', pointerEvents:'none' }} />
      <div style={{ maxWidth:'1280px', margin:'0 auto', padding:'0 clamp(24px,5vw,80px)', position:'relative', zIndex:1, textAlign:'center' }}>
        <p style={{ fontFamily:'var(--sans)', fontSize:'11px', fontWeight:'500', letterSpacing:'0.2em', textTransform:'uppercase', color:'rgba(248,245,239,0.65)', marginBottom:'20px' }}>Ready to Scale</p>
        <h2 style={{ fontFamily:'var(--serif)', fontSize:'clamp(36px,5vw,60px)', fontWeight:'300', color:'var(--paper)', lineHeight:1.1, marginBottom:'24px', letterSpacing:'-0.01em' }}>
          {heading || "Let's build your sales engine."}
        </h2>
        <p style={{ fontFamily:'var(--sans)', fontSize:'17px', fontWeight:'300', color:'rgba(248,245,239,0.75)', maxWidth:'520px', margin:'0 auto 40px', lineHeight:1.7 }}>
          {sub || "That conversation doesn't cost anything, and it just might change everything."}
        </p>
        <button onClick={() => navigate('contact')} style={{
          display:'inline-flex', alignItems:'center', gap:'10px', padding:'16px 40px',
          background:'var(--ink)', color:'var(--paper)',
          fontFamily:'var(--sans)', fontSize:'12px', fontWeight:'500', letterSpacing:'0.14em', textTransform:'uppercase',
          border:'none', cursor:'pointer', transition:'background 0.25s',
        }}
        onMouseEnter={e => e.currentTarget.style.background = '#1a1a1a'}
        onMouseLeave={e => e.currentTarget.style.background = 'var(--ink)'}
        >
          Book a Strategy Call
          <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.5"><line x1="2" y1="7" x2="12" y2="7"/><polyline points="8,3 12,7 8,11"/></svg>
        </button>
      </div>
    </section>
  );
}

Object.assign(window, { Nav, Footer, PageHero, CTABand, useReveal });