// components.jsx — Nav, Footer, Lightbox, Hero variants

const { useState, useEffect, useRef } = React;

// ───────────────────────────────────────────────────────────────────────
// Hash router helpers
// ───────────────────────────────────────────────────────────────────────
function useHashRoute() {
  const [hash, setHash] = useState(() => window.location.hash || '#/');
  useEffect(() => {
    const onHash = () => {
      setHash(window.location.hash || '#/');
      window.scrollTo({ top: 0, behavior: 'instant' });
    };
    window.addEventListener('hashchange', onHash);
    return () => window.removeEventListener('hashchange', onHash);
  }, []);
  const route = hash.replace(/^#\//, '').split('?')[0] || '';
  return { route, hash };
}

function navTo(href, e) {
  if (e) e.preventDefault();
  if (window.location.hash === href) {
    window.scrollTo({ top: 0, behavior: 'smooth' });
  } else {
    window.location.hash = href;
  }
}

// ───────────────────────────────────────────────────────────────────────
// Wordmark
// ───────────────────────────────────────────────────────────────────────
function Wordmark({ size = 'md', className = '', tone = 'forest' }) {
  const sizes = {
    sm: { name: 18, label: 8 },
    md: { name: 26, label: 9.5 },
    lg: { name: 44, label: 11 },
  };
  const s = sizes[size];
  return (
    <span className={`wordmark ${className}`} style={{ color: tone === 'cream' ? 'var(--cream)' : 'var(--forest)' }}>
      <span className="wordmark-name" style={{ fontSize: s.name }}>Pinnacle Hills</span>
      <span className="wordmark-rule">
        <span className="flourish-line"></span>
        <span style={{ fontSize: s.label }}>Portraits</span>
        <span className="flourish-line"></span>
      </span>
    </span>
  );
}

// ───────────────────────────────────────────────────────────────────────
// Nav
// ───────────────────────────────────────────────────────────────────────
function Nav({ variant = 'centered', currentRoute, overHero = false, heroTone = 'dark' }) {
  const [drawer, setDrawer] = useState(false);
  const [scrolled, setScrolled] = useState(false);

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

  const showOverlay = overHero && !scrolled;
  const links = NAV_LINKS.filter(l => l.id !== 'home');

  const linkEl = (l) => (
    <a
      key={l.id}
      href={l.href}
      onClick={(e) => navTo(l.href, e)}
      className={`nav-link ${currentRoute === l.id || (currentRoute === '' && l.id === 'home') ? 'is-active' : ''}`}
    >
      {l.label}
    </a>
  );

  return (
    <React.Fragment>
      <nav
        className={`nav ${showOverlay ? 'nav-over-hero' : ''}`}
        data-variant={variant}
        data-tone={heroTone}
      >
        <div className="nav-inner">
          <div className="nav-left nav-desktop-only">
            {variant === 'leftmark' || variant === 'minimal' ? (
              <a href="#/" onClick={(e) => navTo('#/', e)} aria-label="Pinnacle Hills Portraits home">
                <Wordmark size={variant === 'minimal' ? 'sm' : 'md'} tone={showOverlay && heroTone === 'dark' ? 'cream' : 'forest'} />
              </a>
            ) : (
              <>
                {linkEl(links[0])}
                {linkEl(links[1])}
              </>
            )}
          </div>

          {variant !== 'leftmark' && variant !== 'minimal' && (
            <div className="nav-center">
              <a href="#/" onClick={(e) => navTo('#/', e)} aria-label="Pinnacle Hills Portraits home">
                <Wordmark size={variant === 'thin' ? 'sm' : 'md'} tone={showOverlay && heroTone === 'dark' ? 'cream' : 'forest'} />
              </a>
            </div>
          )}

          <div className="nav-right">
            <div className="nav-desktop-only" style={{ display: 'flex', gap: '2.25rem', alignItems: 'center' }}>
              {variant === 'minimal' ? null : variant === 'leftmark' ? (
                <>{links.map(linkEl)}</>
              ) : (
                <>{linkEl(links[2])}{linkEl(links[3])}</>
              )}
            </div>
            <button className="nav-hamburger nav-mobile-only" onClick={() => setDrawer(true)} aria-label="Open menu">
              <span className="nav-hamburger-line"></span>
              <span className="nav-hamburger-line"></span>
              <span className="nav-hamburger-line"></span>
            </button>
            {variant === 'minimal' && (
              <button className="nav-hamburger nav-desktop-only" onClick={() => setDrawer(true)} aria-label="Open menu">
                <span className="nav-hamburger-line"></span>
                <span className="nav-hamburger-line"></span>
                <span className="nav-hamburger-line"></span>
              </button>
            )}
          </div>
        </div>
      </nav>

      <div className={`nav-drawer-backdrop ${drawer ? 'is-open' : ''}`} onClick={() => setDrawer(false)} aria-hidden="true" />

      {/* Mobile drawer (used for minimal variant always; for others on narrow only) */}
      <aside className={`nav-drawer ${drawer ? 'is-open' : ''}`} aria-hidden={!drawer}>
        <div className="nav-drawer-top">
          <Wordmark size="sm" />
          <button className="nav-drawer-close" onClick={() => setDrawer(false)}>Close</button>
        </div>
        <div className="nav-drawer-links">
          {NAV_LINKS.map(l => (
            <a key={l.id} href={l.href}
              className={`nav-drawer-link ${currentRoute === l.id || (currentRoute === '' && l.id === 'home') ? 'is-active' : ''}`}
              onClick={(e) => { navTo(l.href, e); setDrawer(false); }}>
              {l.label}
            </a>
          ))}
        </div>
        <div className="nav-drawer-foot">
          <span>Northwest Arkansas</span>
          <span>Est. 2026</span>
        </div>
      </aside>
    </React.Fragment>
  );
}

// ───────────────────────────────────────────────────────────────────────
// Footer
// ───────────────────────────────────────────────────────────────────────
function Footer() {
  return (
    <footer className="footer">
      <div className="footer-top">
        <div className="footer-col">
          <span className="footer-mark">Pinnacle Hills</span>
          <span className="footer-rule">
            <span className="flourish-line"></span>
            <span>Portraits</span>
            <span className="flourish-line"></span>
          </span>
          <p className="footer-tag">Heirloom portraiture for the modern family. Northwest Arkansas.</p>
        </div>

        <div className="footer-col">
          <h4>Explore</h4>
          <a href="#/portfolio" onClick={(e)=>navTo('#/portfolio', e)}>Portfolio</a>
          <a href="#/about"     onClick={(e)=>navTo('#/about', e)}>About</a>
          <a href="#/investment" onClick={(e)=>navTo('#/investment', e)}>Investment</a>
          <a href="#/contact"   onClick={(e)=>navTo('#/contact', e)}>Inquire</a>
        </div>

        <div className="footer-col">
          <h4>The Studio</h4>
          <p>141 White St</p>
          <p>Farmington, AR 72730</p>
          <p style={{ opacity: 0.7, marginTop: '0.75rem' }}>By appointment</p>
        </div>

        <div className="footer-col">
          <h4>Elsewhere</h4>
          <a href="https://www.instagram.com/allisonwinklephotography/" target="_blank" rel="noreferrer">Instagram</a>
          <a href="mailto:studio@pinnaclehillsportraits.com">studio@pinnaclehillsportraits.com</a>
        </div>
      </div>

      <div className="footer-bottom">
        <span>© Pinnacle Hills Portraits · MMXXVI</span>
        <span>Made to be kept</span>
      </div>
    </footer>
  );
}

// ───────────────────────────────────────────────────────────────────────
// Lightbox
// ───────────────────────────────────────────────────────────────────────
function Lightbox({ photos, index, onClose, onPrev, onNext }) {
  const open = index !== null && index !== undefined && index >= 0;
  useEffect(() => {
    if (!open) return;
    const onKey = (e) => {
      if (e.key === 'Escape') onClose();
      if (e.key === 'ArrowLeft') onPrev();
      if (e.key === 'ArrowRight') onNext();
    };
    window.addEventListener('keydown', onKey);
    document.body.style.overflow = 'hidden';
    return () => {
      window.removeEventListener('keydown', onKey);
      document.body.style.overflow = '';
    };
  }, [open, onClose, onPrev, onNext]);

  if (!open) return null;
  const photo = photos[index];
  // Portal to body so position:fixed escapes any transformed ancestor (.page-anim).
  return ReactDOM.createPortal(
    <div className={`lightbox is-open`} onClick={onClose}>
      <button className="lightbox-close" onClick={(e)=>{e.stopPropagation(); onClose();}}>Close ✕</button>
      <button className="lightbox-prev" onClick={(e)=>{e.stopPropagation(); onPrev();}}>← Prev</button>
      <button className="lightbox-next" onClick={(e)=>{e.stopPropagation(); onNext();}}>Next →</button>
      <img className="lightbox-img" src={photo.src} alt={photo.cap} onClick={(e)=>e.stopPropagation()} />
    </div>,
    document.body
  );
}

// ───────────────────────────────────────────────────────────────────────
// Hero variants
// ───────────────────────────────────────────────────────────────────────
function HeroFull({ image }) {
  return (
    <section className="hero">
      <div className="hero-full">
        <img className="hero-full-img" src={image} alt="" />
        <div className="hero-meta">
          <span>Northwest Arkansas</span>
          <span>Est. MMXXVI</span>
        </div>
        <div className="hero-content">
          <div className="hero-wordmark">Pinnacle Hills</div>
          <div className="hero-wordmark-rule">
            <span className="flourish-line"></span>
            <span>Portraits</span>
            <span className="flourish-line"></span>
          </div>
          <div className="hero-tagline">Heirloom portraiture for the modern family.</div>
        </div>
        <div className="hero-scroll">
          <span>Scroll</span>
          <span className="hero-scroll-line"></span>
        </div>
      </div>
    </section>
  );
}

function HeroCarousel({ images }) {
  const [i, setI] = useState(0);
  useEffect(() => {
    const t = setInterval(() => setI((p) => (p + 1) % images.length), 5500);
    return () => clearInterval(t);
  }, [images.length]);
  return (
    <section className="hero">
      <div className="hero-full">
        {images.map((src, idx) => (
          <img key={idx} className={`hero-carousel-img ${idx === i ? 'is-active' : ''}`} src={src} alt="" />
        ))}
        <div className="hero-meta">
          <span>Northwest Arkansas</span>
          <span>Selected work · 2025–26</span>
        </div>
        <div className="hero-content">
          <div className="hero-wordmark">Pinnacle Hills</div>
          <div className="hero-wordmark-rule">
            <span className="flourish-line"></span>
            <span>Portraits</span>
            <span className="flourish-line"></span>
          </div>
          <div className="hero-tagline">Heirloom portraiture for the modern family.</div>
        </div>
        <div className="hero-carousel-dots">
          {images.map((_, idx) => (
            <button
              key={idx}
              className={`hero-carousel-dot ${idx === i ? 'is-active' : ''}`}
              onClick={() => setI(idx)}
              aria-label={`Image ${idx + 1}`}
            />
          ))}
        </div>
      </div>
    </section>
  );
}

function HeroSplit({ image }) {
  return (
    <section className="hero">
      <div className="hero-split">
        <div className="hero-split-img-wrap">
          <img src={image} alt="" />
        </div>
        <div className="hero-split-text">
          <div className="hero-split-eyebrow">
            <span className="flourish-line"></span>
            <span>Northwest Arkansas · Est. MMXXVI</span>
          </div>
          <h1 className="hero-split-head">A portrait,<br/><em>in the truest sense.</em></h1>
          <p className="hero-split-body">
            Pinnacle Hills Portraits is a Northwest Arkansas studio specializing in heirloom-quality family portraiture — composed, lit, and finished for the wall it will live on.
          </p>
          <button className="hero-split-cta" onClick={() => navTo('#/portfolio')}>
            <span>View the work</span>
            <span className="arrow">→</span>
          </button>
        </div>
      </div>
    </section>
  );
}

function HeroMosaic({ images }) {
  return (
    <section className="hero hero-mosaic">
      <div className="hero-mosaic-grid">
        <div className="hero-mosaic-tile tile-text t1">
          <div className="hero-mosaic-mark"><em>Pinnacle</em><br/>Hills Portraits</div>
          <p className="hero-mosaic-sub">Heirloom portraiture<br/>for the modern family.</p>
          <div style={{ marginTop: 'auto', paddingTop: '2rem' }}>
            <button className="hero-split-cta" onClick={() => navTo('#/portfolio')}>
              <span>The Portfolio</span>
              <span className="arrow">→</span>
            </button>
          </div>
        </div>
        <div className="hero-mosaic-tile t2"><img src={images[0]} alt="" /></div>
        <div className="hero-mosaic-tile t3"><img src={images[1]} alt="" /></div>
        <div className="hero-mosaic-tile t4"><img src={images[2]} alt="" /></div>
        <div className="hero-mosaic-tile t5"><img src={images[3]} alt="" /></div>
        <div className="hero-mosaic-tile t6"><img src={images[4]} alt="" /></div>
      </div>
    </section>
  );
}

function HeroMatted({ image }) {
  return (
    <section className="hero hero-matted">
      <div className="hero-matted-inner">
        <div className="hero-matted-meta">
          <span>Est. MMXXVI</span>
          <span>Selected Work</span>
        </div>
        <div className="hero-matted-frame">
          <img src={image} alt="" />
        </div>
        <div className="hero-matted-caption">
          <h1 className="hero-matted-head">A portrait, <em>in the truest sense.</em></h1>
          <p className="hero-matted-side">
            A Northwest Arkansas studio for heirloom family portraiture — composed, lit, and finished for the wall it will live on.
          </p>
        </div>
      </div>
    </section>
  );
}

function HeroEditorial({ image }) {
  return (
    <section className="hero">
      <div className="hero-editorial">
        <picture>
          <source media="(max-width: 900px)" srcSet="maternity/IMG_7634-Edit.webp" />
          <img className="hero-editorial-img" src={image} alt="" />
        </picture>
        <div className="hero-editorial-content">
          <h1 className="hero-editorial-wordmark">Pinnacle Hills</h1>
          <div className="hero-editorial-rule">
            <span className="flourish-line"></span>
            <span>Portraits</span>
            <span className="flourish-line"></span>
          </div>
          <p className="hero-editorial-tagline">
            <em>Heirloom portraiture for the modern family.</em>
          </p>
        </div>
        <div className="hero-editorial-meta">
          <span>Est. MMXXVI</span>
          <span>Selected Work</span>
        </div>
      </div>
    </section>
  );
}

function Hero({ variant, image, images }) {
  switch (variant) {
    case 'carousel':  return <HeroCarousel images={images} />;
    case 'split':     return <HeroSplit image={image} />;
    case 'mosaic':    return <HeroMosaic images={images} />;
    case 'matted':    return <HeroMatted image={image} />;
    case 'fullbleed': return <HeroFull image={image} />;
    case 'editorial':
    default:          return <HeroEditorial image={image} />;
  }
}

Object.assign(window, {
  useHashRoute, navTo, Wordmark, Nav, Footer, Lightbox, Hero,
});