// shell.jsx — Header, Footer, Page wrapper

function Header({ route }) {
  const [open, setOpen] = useState(false);
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const items = [
  { to: "home", label: "Home" },
  { to: "services", label: "Services" },
  { to: "case-studies", label: "Case Studies" },
  { to: "portfolio", label: "Portfolio" },
  { to: "testimonials", label: "Feedback" },
  { to: "about", label: "About" },
  { to: "blog", label: "Blog" },
  { to: "contact", label: "Contact" }];


  return (
    <header className={`dj-header ${scrolled ? "is-scrolled" : ""}`}>
      <div className="dj-header-inner">
        <Link to="home" className="dj-header-brand"><Logo /></Link>
        <nav className="dj-header-nav">
          {items.map((it) =>
          <Link key={it.to} to={it.to} className={`dj-nav-link ${route === it.to ? "is-active" : ""}`}>
              {it.label}
            </Link>
          )}
        </nav>
        <div className="dj-header-cta">
          <Link to="book" className="dj-nav-link dj-nav-link-cta">
            Book a demo
            <svg width="12" height="12" viewBox="0 0 14 14" aria-hidden><path d="M3 7h7M7 3l4 4-4 4" stroke="currentColor" strokeWidth="1.5" fill="none" strokeLinecap="round" strokeLinejoin="round" /></svg>
          </Link>
          <button className="dj-header-burger" aria-label="Menu" onClick={() => setOpen((v) => !v)}>
            <span style={{ transform: open ? "rotate(45deg) translate(3px,3px)" : "" }} />
            <span style={{ opacity: open ? 0 : 1 }} />
            <span style={{ transform: open ? "rotate(-45deg) translate(3px,-3px)" : "" }} />
          </button>
        </div>
      </div>
      {open &&
      <div className="dj-mobile-nav">
          {items.map((it) =>
        <Link key={it.to} to={it.to} className="dj-mobile-link" onClick={() => setOpen(false)}>
              {it.label}
            </Link>
        )}
          <Link to="book" className="dj-mobile-link is-cta" onClick={() => setOpen(false)}>Book a demo →</Link>
        </div>
      }
    </header>);

}

function Footer() {
  return (
    <footer className="dj-footer">
      <div className="dj-footer-top">
        <Reveal>
          <div className="dj-footer-headline">
            <span className="dj-footer-eye">Ready when you are</span>
            <h2 className="dj-h1 dj-footer-h1" style={{ color: "rgb(255, 250, 250)" }}>
              Let's build the system<br />
              <em>that scales your brand.</em>
            </h2>
            <div className="dj-footer-ctas">
              <Button to="book" kind="primary" size="lg">Book a 1-on-1 consult</Button>
              <Button to="contact" kind="ghost" size="lg" icon={false}>Or send a message →</Button>
            </div>
          </div>
        </Reveal>
      </div>
      <div className="dj-footer-grid">
        <div className="dj-footer-col">
          <Logo />
          <p className="dj-footer-tag">{dj.brand.tag}</p>
          <p className="dj-footer-meta">{dj.brand.location}</p>
          <p className="dj-footer-meta">{dj.brand.email}</p>
          <p className="dj-footer-meta">{dj.brand.phone}</p>
        </div>
        <div className="dj-footer-col">
          <h4 className="dj-footer-h4">Company</h4>
          <Link to="about" className="dj-footer-link">About & Team</Link>
          <Link to="case-studies" className="dj-footer-link">Case Studies</Link>
          <Link to="portfolio" className="dj-footer-link">Live Portfolio</Link>
          <Link to="testimonials" className="dj-footer-link">Client Feedback</Link>
        </div>
        <div className="dj-footer-col">
          <h4 className="dj-footer-h4">Work</h4>
          <Link to="services" className="dj-footer-link">All Services</Link>
          <Link to="services" className="dj-footer-link">AI Agents</Link>
          <Link to="services" className="dj-footer-link">Automation</Link>
          <Link to="services" className="dj-footer-link">Paid Media</Link>
          <Link to="services" className="dj-footer-link">AI SEO + Content</Link>
        </div>
        <div className="dj-footer-col">
          <h4 className="dj-footer-h4">Channels</h4>
          {dj.brand.socials.map((s) =>
          <a key={s.label} href={s.href} className="dj-footer-link">{s.label} ↗</a>
          )}
        </div>
      </div>
      <div className="dj-footer-bottom">
        <span>© {new Date().getFullYear()} Digital Jaao. All rights reserved.</span>
        <span className="dj-footer-mono">Built in Jaipur · for the AI-first era.</span>
      </div>
    </footer>);

}

// Page transition shell
function PageFrame({ children, routeKey }) {
  const [mounted, setMounted] = useState(false);
  useEffect(() => {
    setMounted(false);
    const a = requestAnimationFrame(() => requestAnimationFrame(() => setMounted(true)));
    return () => cancelAnimationFrame(a);
  }, [routeKey]);
  return (
    <main key={routeKey} className="dj-page" style={{
      opacity: mounted ? 1 : 0,
      transform: mounted ? "translate3d(0,0,0)" : "translate3d(0,12px,0)",
      transition: "opacity 500ms cubic-bezier(0.22,1,0.36,1), transform 500ms cubic-bezier(0.22,1,0.36,1)"
    }}>
      {children}
    </main>);

}

Object.assign(window, { Header, Footer, PageFrame });