/* global React, ReactDOM,
   Hero, TrustSection, ExperienceSection, ServicesSection, WhyUsSection,
   FeaturedSection, AIHealthcareSection, FinalCTA,
   AboutPage, ServicesPage, SolutionsPage, IndustriesPage, CareersPage, ContactPage,
   IcoArrowRight, IcoLinkedIn, IcoMail, IcoPhone, IcoLocation, IcoNetwork,
   TweaksPanel, TweakSection, TweakColor, TweakRadio, TweakToggle, useTweaks */

// ============= LOGO =============
const Logo = ({ height = 36, variant = 'color' }) => (
  <img
    src={variant === 'white' ? 'assets/logo-full-white.png' : 'assets/logo-full.png'}
    alt="Eminencetel"
    style={{ height: `50px`, width: 'auto', display: 'block' }}
  />
);

// ============= PAGES =============
const PAGES = [
  { key: 'home',       label: 'Home' },
  { key: 'about',      label: 'About' },
  { key: 'services',   label: 'Services' },
  { key: 'solutions',  label: 'Solutions' },
  { key: 'industries', label: 'Industries' },
  { key: 'careers',    label: 'Careers' },
  { key: 'contact',    label: 'Contact' },
];

// ============= HAMBURGER ICON =============
const HamburgerIcon = ({ open }) => (
  <svg
    width="24" height="24" viewBox="0 0 24 24"
    fill="none" stroke="currentColor" strokeWidth="2"
    strokeLinecap="round" strokeLinejoin="round"
  >
    {open ? (
      // X icon when open
      <>
        <line x1="18" y1="6"  x2="6"  y2="18" />
        <line x1="6"  y1="6"  x2="18" y2="18" />
      </>
    ) : (
      // Hamburger icon when closed
      <>
        <line x1="3" y1="6"  x2="21" y2="6"  />
        <line x1="3" y1="12" x2="21" y2="12" />
        <line x1="3" y1="18" x2="21" y2="18" />
      </>
    )}
  </svg>
);

// ============= NAV =============
const Nav = ({ current, onNavigate, darkBg, accent }) => {
  const [menuOpen, setMenuOpen] = React.useState(false);
  const dark = darkBg;

  // Close menu on outside click
  const menuRef = React.useRef(null);
  React.useEffect(() => {
    const handler = (e) => {
      if (menuRef.current && !menuRef.current.contains(e.target)) {
        setMenuOpen(false);
      }
    };
    document.addEventListener('mousedown', handler);
    return () => document.removeEventListener('mousedown', handler);
  }, []);

  // Close menu on page change
  const handleNavigate = (key) => {
    setMenuOpen(false);
    onNavigate(key);
  };

  return (
    <nav className={`nav ${dark ? 'nav--dark' : ''}`} ref={menuRef}>
      <div className="container nav__inner">

        {/* Brand */}
        <div className="nav__brand" onClick={() => handleNavigate('home')} style={{ cursor: 'pointer' }}>
          <Logo height={38} variant={dark ? 'white' : 'color'} />
        </div>

        {/* Desktop links */}
        <div className="nav__links">
          {PAGES.map(p => (
            <div
              key={p.key}
              className={`nav__link ${current === p.key ? 'nav__link--active' : ''}`}
              onClick={() => handleNavigate(p.key)}
            >
              {p.label}
            </div>
          ))}
          <button
            className="btn btn--primary btn--sm nav__cta"
            onClick={() => handleNavigate('contact')}
          >
            Get consultation
          </button>
        </div>

        {/* Hamburger button — visible only on mobile */}
        <button
          className="nav__hamburger"
          onClick={() => setMenuOpen(o => !o)}
          aria-label={menuOpen ? 'Close menu' : 'Open menu'}
          style={{
            display:         'none',          // shown via CSS media query
            background:      'none',
            border:          'none',
            cursor:          'pointer',
            padding:         '6px',
            color:           dark ? '#fff' : '#0A1F44',
            lineHeight:      0,
          }}
        >
          <HamburgerIcon open={menuOpen} />
        </button>
      </div>

      {/* Mobile dropdown menu */}
      {menuOpen && (
        <div className="nav__mobile-menu">
          {PAGES.map(p => (
            <div
              key={p.key}
              className={`nav__mobile-link ${current === p.key ? 'nav__mobile-link--active' : ''}`}
              onClick={() => handleNavigate(p.key)}
            >
              {p.label}
            </div>
          ))}
          <div style={{ padding: '10px 20px 16px' }}>
            <button
              className="btn btn--primary btn--sm"
              style={{ width: '100%' }}
              onClick={() => handleNavigate('contact')}
            >
              Get consultation
            </button>
          </div>
        </div>
      )}

      {/* Inline styles scoped to nav — avoids touching your global CSS file */}
      <style>{`
        /* Hide hamburger on desktop, show desktop links */
        @media (min-width: 769px) {
          .nav__hamburger { display: none !important; }
          .nav__links     { display: flex !important; }
          .nav__mobile-menu { display: none !important; }
        }

        /* Hide desktop links on mobile, show hamburger */
        @media (max-width: 768px) {
          .nav__links     { display: none !important; }
          .nav__hamburger { display: flex !important; align-items: center; justify-content: center; }
        }

        /* Mobile dropdown */
        .nav__mobile-menu {
          position:         absolute;
          top:              100%;
          left:             0;
          right:            0;
          z-index:          999;
          background:       var(--navy, #0A1F44);
          box-shadow:       0 8px 24px rgba(0,0,0,0.25);
          border-top:       1px solid rgba(255,255,255,0.08);
          animation:        mobileMenuIn 0.18s ease;
        }

        @keyframes mobileMenuIn {
          from { opacity: 0; transform: translateY(-6px); }
          to   { opacity: 1; transform: translateY(0);    }
        }

        .nav__mobile-link {
          display:     block;
          padding:     14px 20px;
          color:       rgba(255,255,255,0.85);
          font-size:   15px;
          font-weight: 500;
          cursor:      pointer;
          border-bottom: 1px solid rgba(255,255,255,0.07);
          transition:  background 0.15s, color 0.15s;
        }

        .nav__mobile-link:hover {
          background: rgba(255,255,255,0.08);
          color:      #fff;
        }

        .nav__mobile-link--active {
          color:       var(--electric, #007BFF);
          font-weight: 700;
          background:  rgba(0,123,255,0.08);
        }

        /* Make sure nav is positioned relative so dropdown anchors correctly */
       .nav { position: sticky; top: 0; z-index: 100; }
      `}</style>
    </nav>
  );
};

// ============= FOOTER =============
const Footer = ({ onNavigate }) => (
  <footer className="footer">
    <div className="container">
      <div className="footer__grid">
        <div className="footer__brand-block">
          <div className="footer__brand">
            <Logo height={42} variant="white" />
          </div>
          <p className="footer__desc">
            Next-generation telecom infrastructure and intelligent connectivity company specialising in Private 5G, indoor mobile coverage, Neutral Host systems, and AI-driven IoT technologies.
          </p>
          <div className="footer__socials">
            <a href="#" aria-label="LinkedIn"><IcoLinkedIn size={18} /></a>
            <a href="mailto:info@eminencetel.co.uk" aria-label="Email"><IcoMail size={18} /></a>
          </div>
        </div>

        <div>
          <h4>Quick links</h4>
          <div className="footer__links">
            {PAGES.map(p => (
              <button key={p.key} onClick={() => onNavigate(p.key)}>{p.label}</button>
            ))}
          </div>
        </div>

        <div>
          <h4>Solutions</h4>
          <div className="footer__links">
            <button onClick={() => onNavigate('solutions')}>Private 5G networks</button>
            <button onClick={() => onNavigate('solutions')}>Indoor coverage</button>
            <button onClick={() => onNavigate('solutions')}>Neutral host</button>
            <button onClick={() => onNavigate('solutions')}>Repeater systems</button>
            <button onClick={() => onNavigate('solutions')}>AI-driven IoT</button>
          </div>
        </div>

        <div>
          <h4>Contact</h4>
          <div className="footer__contact">
            Unit 9<br />
            The Cobalt centre<br />
            Siskin Parkway East<br />
            Coventry<br />
            CV3 4PE<br />
            <a href="mailto:info@eminencetel.co.uk">info@eminencetel.co.uk</a>
          </div>
        </div>
      </div>
      <div className="footer__bottom">
        <div>© 2026 Eminencetel Ltd. All rights reserved.</div>
        <div>Registered in England &amp; Wales.</div>
      </div>
    </div>
  </footer>
);

// ============= TWEAKS DEFAULTS =============
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": ["#0A1F44", "#007BFF", "#4DA8FF"],
  "density": "comfortable",
  "animations": true
}/*EDITMODE-END*/;

const PALETTES = {
  '#0A1F44': {
    label: 'Navy + Electric',
    navy: '#0A1F44', navy2: '#0E2752', navy3: '#142E60', navyDeep: '#06122A',
    electric: '#007BFF', electric2: '#2E94FF', electricGlow: '#4DA8FF', cyan: '#00D4FF',
  },
  '#0A1929': {
    label: 'Midnight + Teal',
    navy: '#0A1929', navy2: '#0E2236', navy3: '#15334D', navyDeep: '#050E18',
    electric: '#0EA5A5', electric2: '#22C5C5', electricGlow: '#5EE5E5', cyan: '#7FFFD4',
  },
  '#1A1F2E': {
    label: 'Graphite + Amber',
    navy: '#1A1F2E', navy2: '#222838', navy3: '#2D344A', navyDeep: '#0F1320',
    electric: '#F59E0B', electric2: '#FBBF24', electricGlow: '#FCD34D', cyan: '#FDE68A',
  },
  '#1E1B4B': {
    label: 'Royal + Violet',
    navy: '#1E1B4B', navy2: '#2A2670', navy3: '#3730A3', navyDeep: '#0F0E2E',
    electric: '#8B5CF6', electric2: '#A78BFA', electricGlow: '#C4B5FD', cyan: '#DDD6FE',
  },
};

const PALETTE_OPTIONS = [
  ['#0A1F44', '#007BFF', '#4DA8FF'],
  ['#0A1929', '#0EA5A5', '#7FFFD4'],
  ['#1A1F2E', '#F59E0B', '#FCD34D'],
  ['#1E1B4B', '#8B5CF6', '#C4B5FD'],
];

const applyPalette = (paletteArr) => {
  const key = Array.isArray(paletteArr) ? paletteArr[0] : paletteArr;
  const p = PALETTES[key] || PALETTES['#0A1F44'];
  const root = document.documentElement;
  root.style.setProperty('--navy',          p.navy);
  root.style.setProperty('--navy-2',        p.navy2);
  root.style.setProperty('--navy-3',        p.navy3);
  root.style.setProperty('--navy-deep',     p.navyDeep);
  root.style.setProperty('--electric',      p.electric);
  root.style.setProperty('--electric-2',    p.electric2);
  root.style.setProperty('--electric-glow', p.electricGlow);
  root.style.setProperty('--cyan-accent',   p.cyan);
};

// ============= APP =============
const App = () => {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [page, setPage] = React.useState('home');

  const onNavigate = (key) => {
    setPage(key);
    window.scrollTo({ top: 0, behavior: 'instant' });
  };

  React.useEffect(() => { applyPalette(tweaks.palette); }, [tweaks.palette]);

  React.useEffect(() => {
    document.body.dataset.density = tweaks.density;
  }, [tweaks.density]);

  React.useEffect(() => {
    if (!tweaks.animations) {
      document.documentElement.style.setProperty('--t-fast', '0ms');
      document.documentElement.style.setProperty('--t-base', '0ms');
      document.documentElement.style.setProperty('--t-slow', '0ms');
    } else {
      document.documentElement.style.removeProperty('--t-fast');
      document.documentElement.style.removeProperty('--t-base');
      document.documentElement.style.removeProperty('--t-slow');
    }
  }, [tweaks.animations]);

  const paletteKey = Array.isArray(tweaks.palette) ? tweaks.palette[0] : tweaks.palette;
  const accent = (PALETTES[paletteKey] || PALETTES['#0A1F44']).electric;
  const isHome = page === 'home';

  return (
    <>
      <Nav current={page} onNavigate={onNavigate} darkBg={isHome} accent={accent} />

      <main data-screen-label={page}>
        {page === 'home' && (
          <>
            <Hero onNavigate={onNavigate} />
            <TrustSection />
            <ExperienceSection />
            <ServicesSection onNavigate={onNavigate} />
            <WhyUsSection />
            <FeaturedSection onNavigate={onNavigate} />
            <AIHealthcareSection />
            <FinalCTA onNavigate={onNavigate} />
          </>
        )}
        {page === 'about'      && <AboutPage />}
        {page === 'services'   && <ServicesPage onNavigate={onNavigate} />}
        {page === 'solutions'  && <SolutionsPage />}
        {page === 'industries' && <IndustriesPage />}
        {page === 'careers'    && <CareersPage />}
        {page === 'contact'    && <ContactPage />}
      </main>

      {!isHome && <FinalCtaIfNotHomeContact page={page} onNavigate={onNavigate} />}

      <Footer onNavigate={onNavigate} />

      <TweaksPanel title="Tweaks">
        <TweakSection title="Brand palette" subtitle="Try alternate identity directions">
          <TweakColor
            label="Palette"
            value={tweaks.palette}
            onChange={v => setTweak('palette', v)}
            options={PALETTE_OPTIONS}
          />
          <div style={{ fontSize: 12, color: '#5B6B82', marginTop: 6, lineHeight: 1.5 }}>
            <strong style={{ color: '#0A1F44' }}>{(PALETTES[paletteKey] || PALETTES['#0A1F44']).label}</strong>
          </div>
        </TweakSection>

        <TweakSection title="Layout">
          <TweakRadio
            label="Density"
            value={tweaks.density}
            onChange={v => setTweak('density', v)}
            options={['comfortable', 'compact']}
          />
        </TweakSection>

        <TweakSection title="Motion">
          <TweakToggle
            label="Animations"
            value={tweaks.animations}
            onChange={v => setTweak('animations', v)}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
};

const FinalCtaIfNotHomeContact = ({ page, onNavigate }) => {
  if (page === 'contact') return null;
  if (page === 'services') return null;
  return <FinalCTA onNavigate={onNavigate} />;
};

// ============= MOUNT =============
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);