// Shared shell: router, nav, footer, reveal hook, layout primitives
const { useState, useEffect, useRef, useMemo, createContext, useContext } = React;

// Tiny hash router
const RouteCtx = createContext({ route: 'home', go: () => {} });

function useRoute() {
  return useContext(RouteCtx);
}

function RouteProvider({ children }) {
  const parse = () => {
    const h = (window.location.hash || '#/').replace(/^#\/?/, '');
    const [path, anchor] = h.split('#');
    return { route: path || 'home', anchor: anchor || null };
  };
  const [state, setState] = useState(parse());
  useEffect(() => {
    const onHash = () => { setState(parse()); window.scrollTo({ top: 0, behavior: 'instant' }); };
    window.addEventListener('hashchange', onHash);
    return () => window.removeEventListener('hashchange', onHash);
  }, []);
  const go = (route, anchor) => {
    const target = anchor ? `#/${route}#${anchor}` : `#/${route}`;
    if (window.location.hash === target) {
      if (anchor) document.getElementById(anchor)?.scrollIntoView({ behavior: 'smooth', block: 'start' });
      return;
    }
    window.location.hash = target;
  };
  useEffect(() => {
    if (state.anchor) {
      setTimeout(() => document.getElementById(state.anchor)?.scrollIntoView({ behavior: 'smooth', block: 'start' }), 60);
    }
  }, [state.route, state.anchor]);
  return <RouteCtx.Provider value={{ route: state.route, anchor: state.anchor, go }}>{children}</RouteCtx.Provider>;
}

// Reveal primitive — content is always visible. Animation flourish removed;
// executive readers on low-bandwidth or no-JS get everything without a fade wait.
function Reveal({ children, as: Tag = 'div', className = '' }) {
  return <Tag className={className}>{children}</Tag>;
}

// Navigation link
function NavLink({ to, children }) {
  const { route, go } = useRoute();
  const active = route === to;
  return (
    <button
      onClick={() => go(to)}
      className={`smallcaps transition-colors ${active ? 'text-sienna' : 'text-ink hover:text-sienna'}`}
    >
      {children}
    </button>
  );
}

function TopBar() {
  const { go, route } = useRoute();
  const [scrolled, setScrolled] = useState(false);
  const [mobileOpen, setMobileOpen] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <header className={`sticky top-0 z-40 transition-colors ${scrolled ? 'bg-paper/90 backdrop-blur-sm rule-bottom' : 'bg-transparent'}`}>
      <div className="mx-auto max-w-[1320px] px-6 md:px-10">
        <div className="flex items-center justify-between h-16 md:h-20">
          <button onClick={() => go('home')} className="flex items-baseline gap-3 group">
            <span className="font-display text-[22px] md:text-[24px] leading-none tracking-tight">Prathyusha Vemula</span>
            <span className="hidden md:inline smallcaps text-muted">— AI Transformation</span>
          </button>
          <nav className="hidden md:flex items-center gap-7">
            <NavLink to="pov">POV</NavLink>
            <NavLink to="industries">Industries</NavLink>
            <NavLink to="cases">Case studies</NavLink>
            <NavLink to="tools">Tools</NavLink>
            <NavLink to="writing">Writing</NavLink>
            <NavLink to="now">Now</NavLink>
            <NavLink to="about">About</NavLink>
            <button onClick={() => go('contact')} className="smallcaps text-ink hover:text-sienna transition-colors border-b border-ink hover:border-sienna pb-0.5">
              Contact →
            </button>
          </nav>
          <button onClick={() => setMobileOpen(v => !v)} className="md:hidden smallcaps">
            {mobileOpen ? 'Close' : 'Menu'}
          </button>
        </div>
        {mobileOpen && (
          <div className="md:hidden pb-6 pt-2 rule-top">
            {[['pov','POV'],['industries','Industries'],['cases','Case studies'],['tools','Tools'],['writing','Writing'],['now','Now'],['about','About']].map(([r,l]) => (
              <button key={r} onClick={() => { setMobileOpen(false); go(r); }} className="block w-full text-left py-3 font-display text-2xl">
                {l}
              </button>
            ))}
            <button onClick={() => { setMobileOpen(false); go('contact'); }} className="mt-3 inline-block smallcaps border-b border-ink pb-0.5">Contact →</button>
          </div>
        )}
      </div>
    </header>
  );
}

function Footer() {
  const { go } = useRoute();
  return (
    <footer className="rule-top mt-24">
      <div className="mx-auto max-w-[1320px] px-6 md:px-10 py-14 grid md:grid-cols-12 gap-10">
        <div className="md:col-span-5">
          <div className="font-display text-3xl leading-tight">Prathyusha Vemula</div>
          <p className="mt-3 text-ink2 max-w-md">
            12+ years leading AI transformation programs inside regulated enterprises. Senior Consultant at Concentrix. Open to VP and Director roles.
          </p>
          <div className="mt-6 flex flex-wrap gap-x-6 gap-y-2 smallcaps">
            <a className="link-underline" href="mailto:vemula.prathyusha@gmail.com">Email</a>
            <a className="link-underline" href="https://cal.com/prathyushavemula" target="_blank" rel="noreferrer">Book a time</a>
            <a className="link-underline" href="https://www.linkedin.com/in/vnmprathyusha" target="_blank" rel="noreferrer">LinkedIn</a>
          </div>
        </div>
        <div className="md:col-span-4 md:col-start-7">
          <div className="smallcaps text-muted">Sections</div>
          <div className="mt-3 grid grid-cols-2 gap-y-1">
            {[['home','Home'],['pov','POV'],['industries','Industries'],['cases','Case studies'],['tools','Tools'],['writing','Writing'],['now','Now'],['about','About'],['resume','Resume'],['contact','Contact']].map(([r,l]) => (
              <button key={r} onClick={() => go(r)} className="text-left py-1 hover:text-sienna">{l}</button>
            ))}
          </div>
        </div>
        <div className="md:col-span-3">
          <div className="smallcaps text-muted">Colophon</div>
          <p className="mt-3 text-sm text-ink2">Set in Newsreader and Geist. Last revised April 2026.</p>
        </div>
      </div>
      <div className="rule-top">
        <div className="mx-auto max-w-[1320px] px-6 md:px-10 py-5 flex items-center justify-between smallcaps text-muted">
          <span>© 2026 Prathyusha Vemula</span>
          <span className="ornament text-sienna">❧</span>
          <span>Bengaluru, India</span>
        </div>
      </div>
    </footer>
  );
}

// Section header primitive — used across all pages for editorial consistency
function SectionHead({ numeral, kicker, title, lede, id }) {
  return (
    <Reveal className="grid md:grid-cols-12 gap-6 md:gap-10 items-baseline" as="header">
      <div className="md:col-span-3">
        <div className="flex items-baseline gap-4">
          {numeral && <span className="font-display italic text-sienna text-2xl leading-none">{numeral}</span>}
          <span className="smallcaps text-muted" id={id}>{kicker}</span>
        </div>
      </div>
      <div className="md:col-span-9">
        <h2 className="font-display text-[40px] md:text-[56px] leading-[1.02] tracking-tight text-balance">{title}</h2>
        {lede && <p className="mt-5 max-w-[62ch] text-lg md:text-xl text-ink2 leading-relaxed">{lede}</p>}
      </div>
    </Reveal>
  );
}

// Generic image placeholder with monospace note (no handmade SVG)
function Placeholder({ label, className = '', aspect = '4/3' }) {
  return (
    <div className={`paper-placeholder border border-ink/15 ${className}`} style={{ aspectRatio: aspect }}>
      <div className="w-full h-full flex items-end p-3">
        <span className="font-mono text-[11px] text-ink/60">[ {label} ]</span>
      </div>
    </div>
  );
}

Object.assign(window, { RouteCtx, useRoute, RouteProvider, Reveal, NavLink, TopBar, Footer, SectionHead, Placeholder });