// Shared layout: Nav with dropdown, mobile menu, Footer, PageHero, CTABanner, hooks
const { useEffect, useState } = React;

/* ---------- Reveal-on-scroll hook ---------- */
function useReveal() {
  useEffect(() => {
    const els = document.querySelectorAll('.reveal');
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          e.target.classList.add('in');
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.12 });
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, []);
}

/* ---------- Active page detection ---------- */
function getActivePage() {
  const path = typeof window !== 'undefined' ? window.location.pathname : '';
  const f = path.split('/').pop() || 'index.html';
  // map filename → nav id
  if (!f || f === 'index.html' || f === '') return 'home';
  if (f === 'about.html') return 'about';
  if (f === 'services.html') return 'services';
  if (f === 'ai-platform.html') return 'services';
  if (f === 'infrastructure.html') return 'services';
  if (f === 'solutions.html') return 'solutions';
  if (f === 'success-stories.html') return 'success-stories';
  if (f === 'contact.html') return 'contact';
  return '';
}
function getActiveChild() {
  const f = (typeof window !== 'undefined' ? window.location.pathname : '').split('/').pop() || 'index.html';
  if (f === 'ai-platform.html') return 'ai-platform';
  if (f === 'infrastructure.html') return 'infrastructure';
  if (f === 'services.html') return 'services-overview';
  return '';
}

const Caret = () =>
<svg className="caret" width="10" height="10" viewBox="0 0 10 10" fill="none">
    <path d="m2 4 3 3 3-3" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
  </svg>;


/* ---------- Nav ---------- */
const Nav = () => {
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);
  const active = getActivePage();
  const activeChild = getActiveChild();

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

  return (
    <>
      <nav className={`nav ${scrolled ? 'scrolled' : ''}`}>
        <div className="nav-inner">
          <a href="index.html" className="brand" aria-label="CloudEngine Digital home">
            <img src="assets/cloudengine-logo.png" alt="CloudEngine Digital" className="brand-logo" style={{ width: "180px", height: "38px" }} />
          </a>
          <div className="nav-links">
            {NAV.map((n) =>
            <div key={n.id} className="nav-item">
                <a
                href={n.href}
                className={`nav-link ${n.children ? 'has-children' : ''} ${active === n.id ? 'active' : ''}`}>
                
                  {n.label}
                  {n.children && <Caret />}
                </a>
                {n.children &&
              <div className="dropdown" role="menu">
                    {n.children.map((c) =>
                <a
                  key={c.id}
                  href={c.href}
                  className={`dd-item ${activeChild === c.id ? 'active' : ''}`}
                  role="menuitem">
                  
                        <b>{c.label}</b>
                        <span>{c.desc}</span>
                      </a>
                )}
                  </div>
              }
              </div>
            )}
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <a href="contact.html" className="btn btn-accent nav-cta" style={{ padding: '12px 20px', fontSize: 14 }}>
              Get in touch <I.arrow />
            </a>
            <button className="menu-toggle" aria-label="Open menu" onClick={() => setOpen((o) => !o)}>
              <span className="bar" /><span className="bar" /><span className="bar" />
            </button>
          </div>
        </div>
      </nav>
      <div className={`mobile-menu ${open ? 'open' : ''}`}>
        {NAV.map((n) =>
        <React.Fragment key={n.id}>
            <a href={n.href} className={active === n.id ? 'active' : ''}>{n.label}</a>
            {n.children && n.children.map((c) =>
          <a key={c.id} className="sub" href={c.href}>— {c.label}</a>
          )}
          </React.Fragment>
        )}
      </div>
    </>);

};

/* ---------- Page Hero (for sub-pages) ---------- */
const PageHero = ({ eyebrow, crumbs = [], title, sub, children, image, heroStyle }) =>
<section
  className={`page-hero${image ? ' page-hero--image' : ''}`}
  data-screen-label={eyebrow}
  style={Object.assign({}, image ? { backgroundImage: `url(${image})` } : {}, heroStyle || {})}>
  
    {image && <div className="page-hero__overlay" aria-hidden="true"></div>}
    <div className="wrap">
      <div className="crumbs reveal in">
        {crumbs.map((c, i) =>
      <React.Fragment key={i}>
            {c.href ? <a href={c.href}>{c.label}</a> : <span>{c.label}</span>}
            {i < crumbs.length - 1 && <span className="sep">/</span>}
          </React.Fragment>
      )}
      </div>
      <div className="reveal in">
        <h1>{title}</h1>
      </div>
      {sub && (
    image ?
    <div className="lead-sub-card reveal in d1"><p className="lead-sub">{sub}</p></div> :
    <p className="lead-sub reveal in d1">{sub}</p>)
    }
      {children && <div className="reveal in d2" style={{ marginTop: 32 }}>{children}</div>}
    </div>
  </section>;


/* ---------- CTA Banner ---------- */
const CTABanner = ({ title = "Plan your next AI milestone with us.", sub = "Tell us where you are with enterprise AI today. We'll get back within one business day with a tailored briefing.", primary = "Get in touch", primaryHref = "contact.html", secondary = "See solutions", secondaryHref = "solutions.html" }) =>
<section className="cta-banner">
    <div className="wrap">
      <div className="reveal">
        <div className="eyebrow" style={{ color: 'rgba(255,255,255,.85)' }}>Next step</div>
        <h2 style={{ marginTop: 16 }}>{title}</h2>
        <p>{sub}</p>
        <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap' }}>
          <a href={primaryHref} className="btn btn-accent">{primary} <I.arrow /></a>
          {secondary && <a href={secondaryHref} className="btn btn-ghost">{secondary}</a>}
        </div>
      </div>
    </div>
  </section>;


/* ---------- Footer ---------- */
const Footer = () =>
<footer className="footer">
    <div className="wrap">
      <div className="footer-grid">
        <div className="footer-brand">
          <a href="index.html" className="brand"><img src="assets/cloudengine-logo.png" alt="CloudEngine Digital" className="brand-logo" /></a>
          <p>CloudEngine Digital connects strategy, platform, and operations for production-ready AI programs and delivers the data-center infrastructure and enterprise use cases that runs them.</p>
          <div className="footer-social">
            <a href="https://www.linkedin.com/company/cloudengined/" target="_blank" rel="noopener noreferrer" aria-label="CloudEngine Digital on LinkedIn" className="social-link">
              <img src="assets/linkedin.png" alt="LinkedIn" className="social-icon" />
            </a>
          </div>
        </div>
        <div className="footer-col">
          <h5>Infrastructure</h5>
          <ul>
            <li><a href="infrastructure.html#network-design">Network Design & Planning</a></li>
            <li><a href="infrastructure.html#rack-stack">Rack/Stack & Structured Cabling</a></li>
            <li><a href="infrastructure.html#logical">Logical Configuration / Verification</a></li>
            <li><a href="infrastructure.html#testing">Advanced Testing & Verification</a></li>
            <li><a href="infrastructure.html#handover">Customer Handover Documentation</a></li>
          </ul>
        </div>
        <div className="footer-col">
          <h5>AI Platform</h5>
          <ul>
            <li><a href="ai-platform.html#gpu">GPU Virtualization</a></li>
            <li><a href="ai-platform.html#data">Data Foundation</a></li>
            <li><a href="ai-platform.html#llm">LLM Operations</a></li>
            <li><a href="ai-platform.html#sec">LLM Security</a></li>
          </ul>
        </div>
        <div className="footer-col">
          <h5>Company</h5>
          <ul>
            <li><a href="about.html">About</a></li>
            <li><a href="services.html">Services</a></li>
            <li><a href="contact.html">Contact</a></li>
            <li><a href="careers.html">Careers</a></li>
          </ul>
        </div>
      </div>
      <div className="footer-bot">
        <span>© 2026 CloudEngine Digital Pte. Ltd. All rights reserved.</span>
        <span className="mono">Singapore HQ · APAC · Global</span>
      </div>
    </div>
  </footer>;


/* ---------- Page wrapper ---------- */
const Page = ({ children }) => {
  useReveal();
  return (
    <>
      <Nav />
      <main>{children}</main>
      <Footer />
    </>);

};

Object.assign(window, { Nav, Footer, PageHero, CTABanner, Page, useReveal, getActivePage });