/* Animated header, full-screen menu overlay and the big animated footer. */
const { Button } = window.ZaviFxDesignSystem_f15c31;
const { ThemeToggle } = window;

const LINKS = [
  { label: 'Home', page: 'home', n: '01' },
  { label: 'Services', page: 'services', n: '02' },
  { label: 'Work', page: 'work', n: '03' },
  { label: 'Case Studies', page: 'case-study', n: '04' },
  { label: 'About', page: 'about', n: '05' },
  { label: 'Insights', page: 'insights', n: '06' },
  { label: 'Contact', page: 'contact', n: '07' },
];

function BrandMark({ variant = 'gradient', h = 26 }) {
  const src = window.ASSETS + (variant === 'white' ? 'logo-zavifx-white.png' : 'logo-zavifx-gradient.png');
  return <img src={src} alt="ZaviFx" style={{ height: h, width: 'auto' }} />;
}

function SiteHeader({ page, go }) {
  const [open, setOpen] = React.useState(false);
  const [solid, setSolid] = React.useState(false);
  React.useEffect(() => {
    const on = () => setSolid(scrollY > 40);
    on(); window.addEventListener('scroll', on, { passive: true });
    return () => window.removeEventListener('scroll', on);
  }, []);
  React.useEffect(() => { document.body.style.overflow = open ? 'hidden' : ''; return () => { document.body.style.overflow = ''; }; }, [open]);
  const jump = (p) => { setOpen(false); go(p); };
  return (
    <>
      <header className={'zx-head' + (solid ? ' is-solid' : '') + (page === 'home' ? ' is-onhero' : '')}>
        <div className="zx-container zx-head__row">
          <button type="button" className="zx-head__brand" onClick={() => jump('home')} aria-label="ZaviFx home" data-magnetic>
            <BrandMark variant={page === 'home' && !solid ? 'white' : 'gradient'} h={38} />
          </button>
          <nav className="zx-head__nav" aria-label="Primary">
            {LINKS.map((l) => (
              <button key={l.page} type="button" className="zx-navlink" aria-current={page === l.page ? 'page' : undefined} onClick={() => jump(l.page)}>
                <span className="zx-navlink__roll">
                  <span className="zx-navlink__a">{l.label}</span>
                  <span className="zx-navlink__b" aria-hidden="true">{l.label}</span>
                </span>
              </button>
            ))}
          </nav>
          <div className="zx-head__end">
            <ThemeToggle />
            <Button size="sm" className="zx-head__cta" onClick={() => jump('contact')} data-magnetic>Book a Free Consultation</Button>
            <button type="button" className={'zx-burger' + (open ? ' is-open' : '')} onClick={() => setOpen((o) => !o)} aria-expanded={open} aria-label={open ? 'Close menu' : 'Open menu'}>
              <i /><i /><span className="zx-sr-only">Menu</span>
            </button>
          </div>
        </div>
      </header>

      <div className={'zx-menu' + (open ? ' is-open' : '')} aria-hidden={!open}>
        <div className="zx-menu__bg" aria-hidden="true" />
        <div className="zx-container zx-menu__inner">
          <nav className="zx-menu__list" aria-label="Menu">
            {LINKS.map((l, i) => (
              <button key={l.page} type="button" className="zx-menu__item" style={{ transitionDelay: (open ? 0.06 + i * 0.045 : 0) + 's' }} tabIndex={open ? 0 : -1} onClick={() => jump(l.page)}>
                <span className="zx-menu__num">{l.n}</span>
                <span className="zx-menu__label">{l.label}</span>
                <span className="zx-menu__arrow" aria-hidden="true">→</span>
              </button>
            ))}
          </nav>
          <div className="zx-menu__side">
            <div className="zx-menu__block">
              <span className="zx-menu__k">Studio</span>
              <p>Hyderabad, India<br />Mon–Fri, 10:00–19:00 IST</p>
            </div>
            <div className="zx-menu__block">
              <span className="zx-menu__k">Contact</span>
              <p>REPLACE: email<br />REPLACE: phone</p>
            </div>
            <div className="zx-menu__social">
              {['LinkedIn', 'Instagram', 'X', 'Dribbble'].map((s) => <a key={s} href="#" data-magnetic>{s}</a>)}
            </div>
          </div>
        </div>
      </div>
    </>
  );
}

function SiteFooterBig({ go }) {
  return (
    <footer className="zx-foot">
      <div className="zx-foot__glow" aria-hidden="true" />
      <div className="zx-container">
        <div className="zx-foot__cta" data-reveal>
          <span className="zx-foot__k">Let's build it</span>
          <button type="button" className="zx-foot__huge" onClick={() => go('contact')}>
            <span>Start a project</span>
            <i aria-hidden="true">→</i>
          </button>
          <p>A 30-minute consultation, a written audit summary, no pitch deck.</p>
        </div>

        <div className="zx-foot__grid">
          <div className="zx-foot__brand" data-reveal>
            <button type="button" className="zx-foot__mark" onClick={() => go('home')} aria-label="ZaviFx home">
              <BrandMark variant="white" h={58} />
            </button>
            <p>Digital strategy, design, development and performance marketing from Hyderabad, India.</p>
            <div className="zx-foot__social">
              {['Li', 'Ig', 'X', 'Fb'].map((s) => <a key={s} href="#" aria-label={s} data-magnetic>{s}</a>)}
            </div>
          </div>
          {[
            { t: 'Services', l: ['Digital marketing', 'SEO', 'WordPress development', 'UI/UX design', 'Branding'], p: 'services' },
            { t: 'Company', l: ['About ZaviFx', 'Our process', 'Work', 'Case studies'], p: 'about' },
            { t: 'Resources', l: ['Insights', 'Privacy policy', 'Terms & conditions'], p: 'insights' },
          ].map((col, i) => (
            <div className="zx-foot__col" key={col.t} data-reveal data-reveal-d={String(i + 1)}>
              <span className="zx-foot__k">{col.t}</span>
              {col.l.map((x) => <button type="button" key={x} onClick={() => go(col.p)}>{x}</button>)}
            </div>
          ))}
        </div>

        <div className="zx-foot__marq" aria-hidden="true">
          <div className="zx-foot__marqtrack">
            {[0, 1].map((k) => (
              <span key={k}>ZaviFx <i>·</i> Digital Experiences Built To Drive Real Growth <i>·</i> Hyderabad <i>·</i> </span>
            ))}
          </div>
        </div>

        <div className="zx-foot__bottom">
          <span>© {new Date().getFullYear()} ZaviFx. Hyderabad, India.</span>
          <div>
            <button type="button" onClick={() => go('legal')}>Privacy</button>
            <button type="button" onClick={() => go('legal')}>Terms</button>
            <button type="button" onClick={() => go('contact')}>Contact</button>
          </div>
        </div>
      </div>
    </footer>
  );
}
Object.assign(window, { SiteHeader, SiteFooterBig, BrandMark, LINKS });