// Earthsoft shared components - Nav, Footer, PageHero, SubNav
// Used across all inner pages

// Set favicon + inject global responsive CSS
(function(){
  var l = document.querySelector("link[rel~='icon']") || document.createElement('link');
  l.rel = 'icon'; l.type = 'image/svg+xml'; l.href = 'favicon.svg';
  document.head.appendChild(l);

  var s = document.createElement('style');
  s.textContent = `
    /* Utility bar */
    .es-utility-bar{display:flex !important;}
    @media(max-width:768px){.es-utility-bar{display:none !important;}}

    /* Desktop nav links */
    .es-nav-links{display:flex !important;align-items:center;gap:0;}
    @media(max-width:768px){.es-nav-links{display:none !important;}}

    /* Hamburger */
    .es-hamburger{display:none;background:none;border:none;cursor:pointer;padding:8px;color:#1a2535;line-height:1;flex-direction:column;gap:5px;}
    @media(max-width:768px){.es-hamburger{display:flex !important;}}
    .es-hamburger span{display:block;width:22px;height:2px;background:#1a2535;border-radius:2px;transition:all .2s;}

    /* Mobile nav dropdown */
    .es-mobile-nav{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:3px solid #1a6fba;box-shadow:0 8px 24px rgba(10,22,40,0.12);z-index:300;max-height:80vh;overflow-y:auto;}
    .es-mobile-nav.open{display:block;}
    .es-mobile-nav a{display:block;padding:11px 20px;font-size:14px;color:#1a2535;text-decoration:none;border-bottom:1px solid #f0f2f5;}
    .es-mobile-nav a:active{background:#f8f9fb;}
    .es-mob-section{padding:8px 20px;font-size:10px;letter-spacing:3px;font-weight:700;color:#3B9FE8;background:#f8f9fb;border-bottom:1px solid #eef1f5;text-transform:uppercase;}
    .es-mob-sub{padding-left:32px !important;color:#5a6a80 !important;font-size:13px !important;}
    .es-mob-cta{background:#1a6fba !important;color:#fff !important;font-weight:600 !important;text-align:center;border-bottom:none !important;padding:14px 20px !important;}

    /* Footer grid */
    .es-footer-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:32px;margin-bottom:44px;}
    @media(max-width:1100px){.es-footer-grid{grid-template-columns:repeat(3,1fr) !important;gap:24px !important;}}
    @media(max-width:600px){.es-footer-grid{grid-template-columns:repeat(2,1fr) !important;gap:20px !important;}}
    @media(max-width:400px){.es-footer-grid{grid-template-columns:1fr !important;gap:16px !important;}}

    /* Footer bottom row */
    @media(max-width:600px){
      .es-footer-bottom{flex-direction:column !important;align-items:flex-start !important;gap:12px !important;}
      .es-footer-meta{flex-direction:column !important;gap:8px !important;}
    }

    /* PageHero */
    .es-page-hero{padding:52px 48px !important;}
    @media(max-width:768px){.es-page-hero{padding:32px 20px !important;}}
    @media(max-width:768px){.es-page-hero h1{font-size:clamp(20px,6vw,32px) !important;}}

    /* CTABand */
    .es-cta-band{padding:48px !important;}
    @media(max-width:768px){.es-cta-band{padding:32px 20px !important;}}
    .es-cta-inner{display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap;max-width:1280px;margin:0 auto;}
    @media(max-width:600px){.es-cta-inner{flex-direction:column !important;align-items:flex-start !important;}}

    /* SubNav */
    .es-subnav-wrap{padding:28px 48px !important;}
    @media(max-width:768px){.es-subnav-wrap{padding:20px 16px !important;}}

    /* Nav inner padding on mobile */
    @media(max-width:768px){
      .es-nav-inner{padding:0 20px !important;}
      .es-footer-inner{padding:36px 20px 28px !important;}
    }
  `;
  document.head.appendChild(s);
})();

const C = {
  bg:        '#f8f9fb',
  white:     '#ffffff',
  navy:      '#0a1628',
  navy2:     '#102040',
  blue:      '#1a6fba',
  blueLight: '#3B9FE8',
  bluePale:  '#e8f2fb',
  border:    '#dde3ec',
  text:      '#1a2535',
  muted:     '#5a6a80',
  dark:      '#0a1628',
};

const NAV_ITEMS = [
  { label: 'About Us', href: 'about.html', sub: [
    { label: 'Overview',                         href: 'about.html' },
    { label: 'Corporate Profile',                href: 'corporate-profile.html' },
    { label: 'Vision & Mission',                 href: 'vision-mission.html' },
    { label: 'Values & Culture',                 href: 'values-culture.html' },
    { label: 'Leadership Team',                  href: 'leadership-team.html' },
    { label: 'Earthsoft Foundation of Guidance', href: 'csr.html' },
  ]},
  { label: 'What We Do', href: 'services.html', sub: [
    { label: 'Overview',                       href: 'services.html' },
    { label: 'Software Development',           href: 'custom-software.html' },
    { label: 'Testing & Validation',           href: 'testing-validation.html' },
    { label: 'Managed Services & Maintenance', href: 'managed-services.html' },
    { label: 'Consulting',                     href: 'consulting.html' },
  ]},
  { label: 'Our Approach', href: 'methodologies.html', sub: [
    { label: 'Delivery Framework',   href: 'value-proposition.html' },
    { label: 'Methodologies',        href: 'methodologies.html' },
    { label: 'Technology Stack',     href: 'technology-stack.html' },
    { label: 'Quality Policy',       href: 'quality-policy.html' },
    { label: 'Corporate Governance', href: 'corporate-governance.html' },
  ]},
  { label: 'Clients', href: 'clients.html', sub: [
    { label: 'Overview',              href: 'clients.html' },
    { label: 'Companies Worked With', href: 'clients.html#customers' },
    { label: 'Testimonials',          href: 'clients.html#testimonials' },
  ]},
  { label: 'Career', href: 'career.html', sub: [
    { label: 'Overview',               href: 'career.html' },
    { label: 'Culture',                href: 'career-culture.html' },
    { label: 'Campus Programs',        href: 'career-campus.html' },
    { label: 'Growth & Opportunities', href: 'career-growth.html' },
    { label: 'Employee Development',   href: 'career-development.html' },
    { label: 'Recognition & Rewards',  href: 'career-recognition.html' },
    { label: 'Compensation & Benefits',href: 'career-compensation.html' },
    { label: 'Positions',              href: 'career-roles.html' },
  ]},
];

function EarthsoftNav({ activePage }) {
  const [activeNav, setActiveNav] = React.useState(null);
  const [mobileOpen, setMobileOpen] = React.useState(false);

  React.useEffect(() => {
    if (window.location.hash) {
      const id = window.location.hash.slice(1);
      setTimeout(() => {
        const el = document.getElementById(id);
        if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
      }, 80);
    }
  }, []);

  return (
    <>
      {/* Sticky wrapper for both bars */}
      <div style={{ position: 'sticky', top: 0, zIndex: 100 }}>

      {/* Utility bar */}
      <div className="es-utility-bar" style={{ background: C.navy, padding: '0 48px', justifyContent: 'flex-end', alignItems: 'center', gap: '24px', height: '36px' }}>
        {[
          { label: 'Contact Us', href: 'contact.html' },
          { label: 'Location',   href: 'contact.html#location' },
          { label: 'Site Map',   href: 'sitemap.html' },
        ].map(l => (
          <a key={l.label} href={l.href} style={{ fontSize: '12px', color: 'rgba(255,255,255,0.5)', cursor: 'pointer', letterSpacing: '0.3px', textDecoration: 'none', transition: 'color 0.15s' }}
            onMouseEnter={e => e.currentTarget.style.color = 'rgba(255,255,255,0.9)'}
            onMouseLeave={e => e.currentTarget.style.color = 'rgba(255,255,255,0.5)'}
          >{l.label}</a>
        ))}
      </div>

      {/* Main nav */}
      <nav style={{ background: C.white, borderBottom: `1px solid ${C.border}`, boxShadow: '0 1px 8px rgba(10,22,40,0.07)' }}>
        <div className="es-nav-inner" style={{ maxWidth: '1280px', margin: '0 auto', padding: '0 48px', height: '68px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>

          {/* Logo */}
          <a href="/" style={{ textDecoration: 'none' }}>
            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: 0 }}>
              <img src="earthsoft-logo-transparent.png" alt="Earthsoft" style={{ height: '34px', display: 'block' }} />
              <span style={{ fontSize: '8px', letterSpacing: '3px', color: '#8a9ab0', fontWeight: 300, marginTop: '4px', paddingLeft: '2px', textTransform: 'uppercase', whiteSpace: 'nowrap' }}>Transcending Boundaries</span>
            </div>
          </a>

          {/* Desktop nav links */}
          <div className="es-nav-links">
            {NAV_ITEMS.map(item => (
              <div key={item.label} style={{ position: 'relative' }}
                onMouseEnter={() => setActiveNav(item.label)}
                onMouseLeave={() => setActiveNav(null)}
              >
                <a href={item.href} style={{
                  padding: '24px 11px', fontSize: '13px',
                  color: activePage === item.label ? C.blue : (activeNav === item.label ? C.blue : C.muted),
                  cursor: 'pointer', display: 'block',
                  fontWeight: (activePage === item.label || activeNav === item.label) ? 600 : 400,
                  borderBottom: (activePage === item.label || activeNav === item.label) ? `2px solid ${C.blue}` : '2px solid transparent',
                  transition: 'all 0.18s', whiteSpace: 'nowrap', textDecoration: 'none',
                }}>{item.label}</a>
                {activeNav === item.label && (
                  <div style={{ position: 'absolute', top: '100%', left: 0, background: C.white, border: `1px solid ${C.border}`, borderTop: `2px solid ${C.blue}`, borderRadius: '0 0 6px 6px', padding: '8px 0', minWidth: '270px', zIndex: 200, boxShadow: '0 8px 24px rgba(10,22,40,0.10)' }}>
                    {item.sub.map(s => (
                      <a key={s.label} href={s.href} style={{ padding: '9px 20px', fontSize: '13px', color: C.muted, cursor: 'pointer', transition: 'all 0.15s', display: 'block', textDecoration: 'none' }}
                        onMouseEnter={e => { e.currentTarget.style.color = C.blue; e.currentTarget.style.background = C.bluePale; e.currentTarget.style.paddingLeft = '24px'; }}
                        onMouseLeave={e => { e.currentTarget.style.color = C.muted; e.currentTarget.style.background = 'transparent'; e.currentTarget.style.paddingLeft = '20px'; }}
                      >{s.label}</a>
                    ))}
                  </div>
                )}
              </div>
            ))}
            <a href="contact.html" style={{ marginLeft: '16px', padding: '10px 22px', background: C.blue, color: '#fff', border: 'none', borderRadius: '4px', fontWeight: 600, fontSize: '13px', cursor: 'pointer', whiteSpace: 'nowrap', textDecoration: 'none', transition: 'background 0.15s', display: 'inline-block' }}
              onMouseEnter={e => e.currentTarget.style.background = C.blueLight}
              onMouseLeave={e => e.currentTarget.style.background = C.blue}
            >Get in Touch</a>
          </div>

          {/* Hamburger button (mobile only) */}
          <button className="es-hamburger" onClick={() => setMobileOpen(!mobileOpen)} aria-label="Toggle menu">
            <span style={{ transform: mobileOpen ? 'rotate(45deg) translate(5px,5px)' : 'none' }} />
            <span style={{ opacity: mobileOpen ? 0 : 1 }} />
            <span style={{ transform: mobileOpen ? 'rotate(-45deg) translate(5px,-5px)' : 'none' }} />
          </button>
        </div>

        {/* Mobile menu */}
        <div className={`es-mobile-nav${mobileOpen ? ' open' : ''}`}>
          {NAV_ITEMS.map(item => (
            <React.Fragment key={item.label}>
              <div className="es-mob-section">{item.label}</div>
              {item.sub.map(s => (
                <a key={s.label} href={s.href} className="es-mob-sub">{s.label}</a>
              ))}
            </React.Fragment>
          ))}
          <a href="contact.html" className="es-mob-cta">Get in Touch</a>
        </div>
      </nav>
      </div>
    </>
  );
}

function EarthsoftFooter() {
  return (
    <footer style={{ background: C.navy, padding: '0' }}>
      <div style={{ height: '3px', background: `linear-gradient(90deg, ${C.blue}, ${C.blueLight}, ${C.blue})` }} />
      <div className="es-footer-inner" style={{ maxWidth: '1280px', margin: '0 auto', padding: '52px 48px 40px' }}>
        <div className="es-footer-grid">
          {[
            { title: 'About Us',     links: [{ label: 'Overview', href: 'about.html' }, { label: 'Corporate Profile', href: 'corporate-profile.html' }, { label: 'Vision & Mission', href: 'vision-mission.html' }, { label: 'Values & Culture', href: 'values-culture.html' }, { label: 'Leadership Team', href: 'leadership-team.html' }, { label: 'Earthsoft Foundation', href: 'csr.html' }] },
            { title: 'What We Do',   links: [{ label: 'Overview', href: 'services.html' }, { label: 'Software Development', href: 'custom-software.html' }, { label: 'Testing & Validation', href: 'testing-validation.html' }, { label: 'Managed Services & Maintenance', href: 'managed-services.html' }, { label: 'Consulting', href: 'consulting.html' }] },
            { title: 'Our Approach', links: [{ label: 'Delivery Framework', href: 'value-proposition.html' }, { label: 'Methodologies', href: 'methodologies.html' }, { label: 'Technology Stack', href: 'technology-stack.html' }, { label: 'Quality Policy', href: 'quality-policy.html' }, { label: 'Corporate Governance', href: 'corporate-governance.html' }] },
            { title: 'Clients',      links: [{ label: 'Overview', href: 'clients.html' }, { label: 'Companies Worked With', href: 'clients.html#customers' }, { label: 'Testimonials', href: 'clients.html#testimonials' }] },
            { title: 'Career',       links: [{ label: 'Overview', href: 'career.html' }, { label: 'Culture', href: 'career-culture.html' }, { label: 'Campus Programs', href: 'career-campus.html' }, { label: 'Growth & Opportunities', href: 'career-growth.html' }, { label: 'Employee Development', href: 'career-development.html' }, { label: 'Recognition & Rewards', href: 'career-recognition.html' }, { label: 'Compensation & Benefits', href: 'career-compensation.html' }, { label: 'Positions', href: 'career-roles.html' }] },
          ].map(col => (
            <div key={col.title}>
              <div style={{ fontSize: '11px', color: C.blueLight, letterSpacing: '2.5px', marginBottom: '16px', fontWeight: 600 }}>{col.title.toUpperCase()}</div>
              {col.links.map(l => (
                <a key={l.label} href={l.href} style={{ fontSize: '13px', color: 'rgba(255,255,255,0.42)', marginBottom: '10px', cursor: 'pointer', transition: 'color 0.15s', display: 'block', textDecoration: 'none' }}
                  onMouseEnter={e => e.currentTarget.style.color = '#fff'}
                  onMouseLeave={e => e.currentTarget.style.color = 'rgba(255,255,255,0.42)'}
                >{l.label}</a>
              ))}
            </div>
          ))}
        </div>
        <div className="es-footer-bottom" style={{ borderTop: '1px solid rgba(255,255,255,0.07)', paddingTop: '24px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: '20px' }}>
          <a href="/" style={{ textDecoration: 'none' }}>
            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: 0 }}>
              <img src="earthsoft-logo-white.png" alt="Earthsoft" style={{ height: '26px', display: 'block', opacity: 0.85 }} />
              <span style={{ fontSize: '8px', letterSpacing: '3px', color: 'rgba(255,255,255,0.28)', fontWeight: 300, marginTop: '5px', paddingLeft: '2px', textTransform: 'uppercase', whiteSpace: 'nowrap' }}>Transcending Boundaries</span>
            </div>
          </a>
          <div className="es-footer-meta" style={{ display: 'flex', alignItems: 'center', gap: '24px', flexWrap: 'wrap' }}>
            <span style={{ fontSize: '12px', color: 'rgba(255,255,255,0.35)' }}>Aundh, Pune - 411 007</span>
            <span style={{ fontSize: '12px', color: 'rgba(255,255,255,0.35)' }}><a href="mailto:rr@earthsoftai.com" style={{ color: 'inherit', textDecoration: 'none' }}>rr@earthsoftai.com</a></span>
            <span style={{ fontSize: '12px', color: 'rgba(255,255,255,0.18)' }}>© 2026 Earthsoft</span>
          </div>
        </div>
      </div>
    </footer>
  );
}

function PageHero({ section, title, subtitle, breadcrumb }) {
  return (
    <div className="es-page-hero" style={{ background: `linear-gradient(135deg, ${C.navy} 0%, ${C.navy2} 60%, #0d2b52 100%)`, padding: '52px 48px', position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', inset: 0, backgroundImage: 'radial-gradient(ellipse at 80% 50%, rgba(59,159,232,0.10) 0%, transparent 65%)', pointerEvents: 'none' }} />
      <div style={{ position: 'absolute', inset: 0, backgroundImage: 'linear-gradient(rgba(255,255,255,0.015) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.015) 1px, transparent 1px)', backgroundSize: '80px 80px', pointerEvents: 'none' }} />
      <div style={{ maxWidth: '1280px', margin: '0 auto', position: 'relative', zIndex: 1 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '20px', flexWrap: 'wrap' }}>
          <a href="/" style={{ fontSize: '12px', color: 'rgba(255,255,255,0.4)', textDecoration: 'none' }}>Home</a>
          {breadcrumb && breadcrumb.map((b, i) => (
            <React.Fragment key={i}>
              <span style={{ fontSize: '12px', color: 'rgba(255,255,255,0.2)' }}>›</span>
              {b.href ? <a href={b.href} style={{ fontSize: '12px', color: 'rgba(255,255,255,0.4)', textDecoration: 'none' }}>{b.label}</a> : <span style={{ fontSize: '12px', color: 'rgba(255,255,255,0.65)' }}>{b.label}</span>}
            </React.Fragment>
          ))}
        </div>
        <div style={{ fontSize: '11px', color: C.blueLight, letterSpacing: '3px', marginBottom: '10px', fontWeight: 600 }}>{section}</div>
        <h1 style={{ fontSize: 'clamp(22px, 3vw, 44px)', fontWeight: 700, color: '#fff', lineHeight: 1.15, letterSpacing: '-0.3px', marginBottom: subtitle ? '12px' : '0' }}>{title}</h1>
        {subtitle && <p style={{ fontSize: '15px', color: 'rgba(255,255,255,0.55)', maxWidth: '680px', lineHeight: 1.7, whiteSpace: 'pre-line', textAlign: 'justify' }}>{subtitle}</p>}
      </div>
    </div>
  );
}

// Sub-nav for sections (e.g. About Us, Career, Services)
function SubNav({ section, current, pages }) {
  return (
    <div className="es-subnav-wrap" style={{ background: C.navy, padding: '36px 48px' }}>
      <div style={{ maxWidth: '1280px', margin: '0 auto' }}>
        <div style={{ fontSize: '11px', color: C.blueLight, letterSpacing: '3px', marginBottom: '18px', fontWeight: 600 }}>MORE IN {section.toUpperCase()}</div>
        <div style={{ display: 'flex', gap: '10px', flexWrap: 'wrap' }}>
          {pages.map(p => {
            const isActive = p.label === current;
            return (
              <a key={p.label} href={p.href}
                style={{ padding: '10px 20px', background: isActive ? C.blueLight : 'rgba(255,255,255,0.06)', border: `1px solid ${isActive ? C.blueLight : 'rgba(255,255,255,0.10)'}`, borderRadius: '4px', fontSize: '13px', color: '#fff', textDecoration: 'none', fontWeight: isActive ? 600 : 400, transition: 'all 0.15s' }}
                onMouseEnter={e => { if (!isActive) { e.currentTarget.style.background = 'rgba(59,159,232,0.18)'; e.currentTarget.style.borderColor = C.blueLight; } }}
                onMouseLeave={e => { if (!isActive) { e.currentTarget.style.background = 'rgba(255,255,255,0.06)'; e.currentTarget.style.borderColor = 'rgba(255,255,255,0.10)'; } }}
              >{p.label}</a>
            );
          })}
        </div>
      </div>
    </div>
  );
}

// CTA band
function CTABand({ title, subtitle, primaryLabel, primaryHref, secondaryLabel, secondaryHref }) {
  return (
    <section className="es-cta-band" style={{ background: C.blue, padding: '48px' }}>
      <div className="es-cta-inner">
        <div>
          <h3 style={{ fontSize: '24px', fontWeight: 700, color: '#fff', marginBottom: '6px' }}>{title}</h3>
          {subtitle && <p style={{ fontSize: '14px', color: 'rgba(255,255,255,0.75)' }}>{subtitle}</p>}
        </div>
        <div style={{ display: 'flex', gap: '12px', flexWrap: 'wrap' }}>
          {primaryLabel && <a href={primaryHref || '#'} style={{ padding: '13px 26px', background: '#fff', color: C.blue, border: 'none', borderRadius: '4px', fontWeight: 700, fontSize: '14px', textDecoration: 'none' }}>{primaryLabel}</a>}
          {secondaryLabel && <a href={secondaryHref || '#'} style={{ padding: '13px 26px', background: 'transparent', color: '#fff', border: '1px solid rgba(255,255,255,0.4)', borderRadius: '4px', fontSize: '14px', textDecoration: 'none' }}>{secondaryLabel}</a>}
        </div>
      </div>
    </section>
  );
}

// Section sub-nav definitions
const ABOUT_PAGES = [
  { label: 'Overview',                      href: 'about.html' },
  { label: 'Corporate Profile',             href: 'corporate-profile.html' },
  { label: 'Vision & Mission',              href: 'vision-mission.html' },
  { label: 'Values & Culture',              href: 'values-culture.html' },
  { label: 'Leadership Team',               href: 'leadership-team.html' },
  { label: 'Delivery Framework',            href: 'value-proposition.html' },
  { label: 'Quality Policy',                href: 'quality-policy.html' },
  { label: 'Corporate Governance',          href: 'corporate-governance.html' },
  { label: 'Earthsoft Foundation of Guidance', href: 'csr.html' },
];

const CAREER_PAGES = [
  { label: 'Overview',           href: 'career.html' },
  { label: 'Culture',            href: 'career-culture.html' },
  { label: 'Campus Programs',    href: 'career-campus.html' },
  { label: 'Growth',             href: 'career-growth.html' },
  { label: 'Development',        href: 'career-development.html' },
  { label: 'Recognition',        href: 'career-recognition.html' },
  { label: 'Compensation',       href: 'career-compensation.html' },
  { label: 'Positions',         href: 'career-roles.html' },
];

const SERVICE_PAGES = [
  { label: 'Overview',                          href: 'services.html' },
  { label: 'Software Development',              href: 'custom-software.html' },
  { label: 'Testing & Validation',              href: 'testing-validation.html' },
  { label: 'Managed Services & Maintenance',    href: 'managed-services.html' },
  { label: 'Consulting',                        href: 'consulting.html' },
  { label: 'Methodologies',                     href: 'methodologies.html' },
];

Object.assign(window, { C, EarthsoftNav, EarthsoftFooter, PageHero, SubNav, CTABand, ABOUT_PAGES, CAREER_PAGES, SERVICE_PAGES });