// Top-level shell: header (with scroll-spy nav anchors), composed sections, footer.

const { Logo, Eyebrow, ScriptText, Button, Icons, wmTokens: T } = window;

const NAV = [
  { id: 'services',  label: 'Services' },
  { id: 'pricing',   label: 'Pricing' },
  { id: 'portfolio', label: 'Portfolio' },
  { id: 'about',     label: 'About' },
  { id: 'contact',   label: 'Contact' },
];

function App() {
  const [scrolled, setScrolled] = React.useState(false);
  const [active, setActive] = React.useState('');

  React.useEffect(() => {
    const onScroll = () => {
      setScrolled(window.scrollY > 24);
      // scroll-spy
      let curr = '';
      for (const { id } of NAV) {
        const el = document.getElementById(id);
        if (!el) continue;
        const top = el.getBoundingClientRect().top;
        if (top < 140) curr = id;
      }
      setActive(curr);
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const go = (id) => {
    const el = document.getElementById(id);
    if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
  };

  return (
    <div data-screen-label="WM Photos by Tom — Home">
      <Header scrolled={scrolled} active={active} go={go} />

      <main>
        <window.Hero        go={go} />
        <window.GalleryStrip />
        <window.Services    go={go} />
        <window.Portfolio   />
        <window.Pricing     go={go} />
        <window.About       go={go} />
        <window.Contact     />
      </main>

      <Footer go={go} />

      <window.Lightbox />
    </div>
  );
}

function Header({ scrolled, active, go }) {
  // Page bg is the indigo; header sits transparent on top until you scroll,
  // then switches to a translucent white blur bar with dark text.
  const onLight = scrolled;
  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 50,
      transition: 'all 240ms cubic-bezier(.22,.61,.36,1)',
      background: onLight ? 'rgba(255,255,255,0.84)' : 'transparent',
      backdropFilter: onLight ? 'blur(18px) saturate(140%)' : 'none',
      WebkitBackdropFilter: onLight ? 'blur(18px) saturate(140%)' : 'none',
      borderBottom: onLight ? `1px solid ${T.n100}` : 'none',
    }}>
      <div style={{
        maxWidth: 1280, margin: '0 auto',
        padding: '18px 64px',
        display: 'grid', gridTemplateColumns: '1fr auto 1fr',
        alignItems: 'center', gap: 32,
      }}>
        <a onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })} style={{ cursor: 'pointer', justifySelf: 'start' }}>
          <Logo variant={onLight ? 'dark' : 'light'} height={44} />
        </a>

        <nav className="hide-md" style={{ display: 'flex', gap: 4 }}>
          {NAV.map((p) => (
            <NavItem key={p.id} p={p}
              active={active === p.id}
              onLight={onLight}
              onClick={() => go(p.id)} />
          ))}
        </nav>

        <div className="nav-row" style={{ justifySelf: 'end', display: 'flex', gap: 14, alignItems: 'center' }}>
          <span className="hide-sm" style={{
            fontFamily: 'var(--font-body)', fontSize: 11, fontWeight: 700,
            letterSpacing: '0.18em', textTransform: 'uppercase',
            color: onLight ? T.green800 : 'rgba(255,255,255,0.9)',
            display: 'inline-flex', alignItems: 'center', gap: 8,
          }}>
            <span style={{ width: 7, height: 7, background: T.green500, borderRadius: 999, display: 'inline-block' }} />
            Booking now
          </span>
          <Button variant={onLight ? 'primary' : 'accent'} onClick={() => go('contact')}>
            Free consultation
          </Button>
        </div>
      </div>
    </header>
  );
}

function NavItem({ p, active, onLight, onClick }) {
  const [hover, setHover] = React.useState(false);
  const baseColor = onLight ? T.indigo900 : T.white;
  const isHot = active || hover;
  return (
    <a onClick={onClick}
       onMouseEnter={() => setHover(true)}
       onMouseLeave={() => setHover(false)}
       style={{
         fontFamily: 'var(--font-body)',
         fontSize: 14, fontWeight: 500,
         padding: '8px 14px',
         color: baseColor,
         cursor: 'pointer',
         position: 'relative',
         opacity: isHot ? 1 : 0.85,
         transition: 'opacity 200ms',
       }}>
      {p.label}
      <span style={{
        position: 'absolute', left: 14, right: 14, bottom: 2, height: 2,
        background: T.gold500,
        transform: isHot ? 'scaleX(1)' : 'scaleX(0)',
        transformOrigin: 'left',
        transition: 'transform 240ms cubic-bezier(.22,.61,.36,1)',
      }} />
    </a>
  );
}

function Footer({ go }) {
  return (
    <footer style={{ background: T.indigo900, color: T.white, padding: '80px 64px 36px' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div className="footer-grid" style={{
          display: 'grid',
          gridTemplateColumns: '1.4fr 1fr 1fr 1fr',
          gap: 48,
          alignItems: 'flex-start',
        }}>
          <div>
            <Logo variant="light" height={56} />
            <p style={{
              fontFamily: 'var(--font-body)', fontSize: 14, lineHeight: 1.7,
              color: T.indigo100, marginTop: 18, maxWidth: '32ch',
            }}>
              Professional photography for businesses, families, and the wild around Erie, Colorado. Headshots, team, events, real estate, family, and nature — one flat rate.
            </p>
            <ScriptText size={40} color={T.gold300} style={{ display: 'inline-block', marginTop: 14 }}>
              by Tom Taylor
            </ScriptText>
          </div>

          <FooterColumn title="Site" items={[
            { label: 'Services',  onClick: () => go('services') },
            { label: 'Pricing',   onClick: () => go('pricing') },
            { label: 'Portfolio', onClick: () => go('portfolio') },
            { label: 'About',     onClick: () => go('about') },
            { label: 'Contact',   onClick: () => go('contact') },
          ]} />

          <FooterColumn title="Studio" items={[
            { label: 'Erie, Colorado' },
            { label: 'Front Range available' },
            { label: 'Mon–Sat · By appointment' },
            { label: 'Erie Chamber of Commerce' },
            { label: 'VFW Post 1771' },
          ]} />

          <FooterColumn title="Reach me" items={[
            { label: 'wmphotosbytom@gmail.com', href: 'mailto:wmphotosbytom@gmail.com' },
            { label: '+1 (303) 817-2203', href: 'tel:+13038172203' },
            { label: '@tomtaylor3198 · Instagram', href: 'https://www.instagram.com/tomtaylor3198/' },
            { label: 'Windmill Photos by Tom Taylor · Facebook', href: 'https://www.facebook.com/WindmillPhotosbyTomTaylor' },
          ]} />
        </div>

        <hr style={{ border: 'none', borderTop: '1px solid rgba(255,255,255,0.14)', margin: '56px 0 24px' }} />

        <div style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          fontFamily: 'var(--font-body)', fontSize: 12,
          color: 'rgba(255,255,255,0.7)', flexWrap: 'wrap', gap: 16,
        }}>
          <div>© 2026 WM Photos by Tom. All rights reserved.</div>
          <div style={{ display: 'flex', gap: 22, alignItems: 'center' }}>
            <span style={{ letterSpacing: '0.12em', textTransform: 'uppercase', fontSize: 11, fontWeight: 600 }}>
              Named after <em style={{ fontStyle: 'italic', color: T.gold300 }}>Windmills of Your Mind</em>
            </span>
          </div>
        </div>
      </div>
    </footer>
  );
}

function FooterColumn({ title, items }) {
  return (
    <div>
      <Eyebrow style={{ marginBottom: 18, color: 'rgba(255,255,255,0.55)' }}>{title}</Eyebrow>
      <ul style={{
        listStyle: 'none', padding: 0, margin: 0,
        display: 'flex', flexDirection: 'column', gap: 11,
      }}>
        {items.map((it, i) => (
          <li key={i}>
            <a
              href={it.href}
              onClick={it.onClick}
              target={it.href && it.href.startsWith('http') ? '_blank' : undefined}
              rel={it.href && it.href.startsWith('http') ? 'noreferrer' : undefined}
              className="tlink"
              style={{
                fontFamily: 'var(--font-body)', fontSize: 14, color: T.white,
                cursor: (it.onClick || it.href) ? 'pointer' : 'default',
                opacity: 0.9,
              }}>{it.label}</a>
          </li>
        ))}
      </ul>
    </div>
  );
}

window.App = App;