// Sections of the homepage
const Reveal = ({ children, delay = 0, as = "div", className = "", ...props }) => {
  const ref = React.useRef(null);
  const [shown, setShown] = React.useState(false);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) { setShown(true); io.disconnect(); } });
    }, { threshold: 0.12 });
    io.observe(el);
    return () => io.disconnect();
  }, []);
  const Tag = as;
  return <Tag ref={ref} className={`reveal ${shown ? 'in' : ''} ${delay ? 'd'+delay : ''} ${className}`} {...props}>{children}</Tag>;
};

const Navbar = () => {
  const [scrolled, setScrolled] = React.useState(false);
  const [active, setActive] = React.useState('home');
  const [menuOpen, setMenuOpen] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => {
      setScrolled(window.scrollY > 24);
      const sections = ['home','services','about','contact'];
      let cur = 'home';
      for (const id of sections) {
        const el = document.getElementById(id);
        if (el) {
          const r = el.getBoundingClientRect();
          if (r.top < window.innerHeight * 0.4) cur = id;
        }
      }
      setActive(cur);
    };
    window.addEventListener('scroll', onScroll);
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  React.useEffect(() => {
    document.body.style.overflow = menuOpen ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [menuOpen]);
  // Detect which page we're on so links route correctly
  const path = typeof location !== 'undefined' ? location.pathname : '';
  const onServices = /services/i.test(path);
  const onAbout = /about/i.test(path);
  const onContact = /contact/i.test(path);
  const onSubpage = onServices || onAbout || onContact;
  const svcBase = onServices ? '' : 'Vicore Services.html';
  const svcItems = [
    { label: 'IT Services',            href: svcBase + '#svc-it' },
    { label: 'Cybersecurity',          href: svcBase + '#svc-sec' },
    { label: 'Cloud & Infrastructure', href: svcBase + '#svc-cloud' },
    { label: 'Industries',             href: svcBase + '#svc-ind' },
  ];
  const close = () => setMenuOpen(false);
  const mobileMenu = (
    <div className={`nav-mobile ${menuOpen ? 'open' : ''}`}>
      <button className="nav-mobile-close" onClick={close} aria-label="Close menu">
        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
          <line x1="3" y1="3" x2="17" y2="17"/><line x1="17" y1="3" x2="3" y2="17"/>
        </svg>
      </button>
      <nav className="nav-mobile-links">
        <a href={onSubpage ? 'Vicore Homepage.html' : '#home'} className="nav-mobile-link" onClick={close}>Home</a>
        <div className="nav-mobile-group">
          <a href={onServices ? '#svc-it' : 'Vicore Services.html'} className="nav-mobile-link" onClick={close}>Services</a>
          <div className="nav-mobile-sub">
            {svcItems.map(item => (
              <a key={item.label} href={item.href} className="nav-mobile-sublink" onClick={close}>{item.label}</a>
            ))}
          </div>
        </div>
        <a href={onAbout ? '#about' : 'Vicore About.html'} className="nav-mobile-link" onClick={close}>About</a>
        <a href={onContact ? '#contact' : 'Vicore Contact.html'} className="nav-mobile-link" onClick={close}>Contact</a>
      </nav>
      <a href={onContact ? '#contact' : 'Vicore Contact.html'} className="btn btn-primary nav-mobile-cta" onClick={close}>Get Started</a>
    </div>
  );
  return (
    <>
      <header className={`nav ${scrolled ? 'scrolled' : ''}`}>
        <div className="container nav-inner">
          <a href={onSubpage ? 'Vicore Homepage.html' : '#home'} className="nav-logo" onClick={close}>
            <img src="assets/vicore-mark.png" alt="" className="mark-img"/>
            <img src="assets/vicore-wordmark-white.png" alt="VICORE" className="word-img"/>
          </a>
          <nav className="nav-links">
            <a href={onSubpage ? 'Vicore Homepage.html' : '#home'} className={`nav-link ${active==='home' && !onSubpage ? 'active' : ''}`}>Home</a>
            <div className="nav-dropdown">
              <a href={onServices ? '#svc-it' : 'Vicore Services.html'} className={`nav-link ${onServices || active==='services' ? 'active' : ''}`}>Services</a>
              <div className="nav-dropdown-menu">
                {svcItems.map(item => (
                  <a key={item.label} href={item.href} className="nav-dropdown-item">{item.label}</a>
                ))}
              </div>
            </div>
            <a href={onAbout ? '#about' : 'Vicore About.html'} className={`nav-link ${onAbout ? 'active' : ''}`}>About</a>
            <a href={onContact ? '#contact' : 'Vicore Contact.html'} className={`nav-link ${onContact ? 'active' : ''}`}>Contact</a>
          </nav>
          <a href={onContact ? '#contact' : 'Vicore Contact.html'} className="btn btn-primary nav-cta">Get Started</a>
          <button className="nav-hamburger" onClick={() => setMenuOpen(o => !o)} aria-label="Toggle menu" aria-expanded={menuOpen}>
            <span className={`ham-line ${menuOpen ? 'open' : ''}`}/>
            <span className={`ham-line ${menuOpen ? 'open' : ''}`}/>
            <span className={`ham-line ${menuOpen ? 'open' : ''}`}/>
          </button>
        </div>
      </header>
      {ReactDOM.createPortal(mobileMenu, document.body)}
    </>
  );
};

const Hero = () => (
  <section id="home" className="hero">
    <HeroCanvas />
    <div className="hero-veil" />
    <div className="container hero-inner">
      <Reveal>
        <span className="hero-eyebrow"><span className="dot"/><span style={{fontFamily:'JetBrains Mono, monospace', fontSize:11, letterSpacing:'0.22em', textTransform:'uppercase', color:'var(--muted)'}}>Michigan · Est. 2010</span></span>
      </Reveal>
      <Reveal delay={1}><img src="assets/vicore-wordmark-white.png" alt="VICORE" className="hero-wordmark-img"/></Reveal>
      <Reveal delay={2}><h2 className="hero-tagline grad-text">Secure. Optimize. Deliver.</h2></Reveal>
      <Reveal delay={3}><p className="hero-sub">Michigan's trusted IT and cybersecurity partner — securing and streamlining businesses since 2010.</p></Reveal>
      <Reveal delay={4}>
        <div className="hero-ctas">
          <a href="Vicore Contact.html" className="btn btn-primary">Get a Free Consultation <Icon name="arrow"/></a>
          <a href="#services" className="btn btn-ghost">Our Services</a>
        </div>
      </Reveal>
    </div>
    <div className="hero-scroll">
      <span>Scroll</span>
      <span className="line"/>
    </div>
  </section>
);

const Stats = () => {
  const data = [
    { n: '15+', l: 'Years in Business' },
    { n: '500+', l: 'Clients Served' },
    { n: '5–500+', l: 'Users Supported' },
    { n: '24/7', l: 'Support Available' },
  ];
  return (
    <section className="stats">
      <div className="container">
        <div className="stats-row">
          {data.map((s,i) => (
            <div className="stat" key={i}>
              <div className="stat-num grad-text">{s.n}</div>
              <div className="stat-label">{s.l}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const ServiceCard = ({ icon, title, desc }) => (
  <div className="scard">
    <div className="scard-icon"><Icon name={icon}/></div>
    <div className="scard-body">
      <h4>{title}</h4>
      <p>{desc}</p>
    </div>
  </div>
);

const Services = () => {
  const it = [
    { icon: 'server',  title: 'Managed IT Services',           desc: 'Proactive monitoring, patching, and end-user support.' },
    { icon: 'cloud',   title: 'Cloud Services & Hosting',      desc: 'Scalable, redundant cloud platforms tuned to your stack.' },
    { icon: 'network', title: 'Network Infrastructure & Design', desc: 'Resilient networks built for performance and uptime.' },
    { icon: 'consult', title: 'IT Consulting',                 desc: 'Roadmaps, audits, and migrations from real practitioners.' },
    { icon: 'backup',  title: 'Cloud Backup & Recovery',       desc: 'Encrypted backup with rapid, tested restore paths.' },
    { icon: 'layers',  title: 'Server / Desktop Virtualization', desc: 'VMware and Citrix expertise, deployed and supported.' },
    { icon: 'wifi',    title: 'Wireless Solutions',            desc: 'Site-surveyed Wi-Fi for warehouses, offices, and campuses.' },
    { icon: 'badge',   title: 'IT Compliance',                 desc: 'HIPAA, PCI, and SOC-aligned controls and reporting.' },
  ];
  const sec = [
    { icon: 'shield', title: 'IT Security Services',     desc: 'Layered defense, monitoring, and incident response.' },
    { icon: 'flame',  title: 'Firewall Management',      desc: 'Tuned policies, threat feeds, and 24/7 watch.' },
    { icon: 'key',    title: 'Zero Trust Secure Access', desc: 'Identity-aware access — least privilege, every session.' },
    { icon: 'target', title: 'Endpoint Protection',      desc: 'EDR with behavioral detection across every device.' },
    { icon: 'mail',   title: 'Secure Email & Filtering', desc: 'Phishing, spoofing, and malware blocked upstream.' },
    { icon: 'phone',  title: 'Mobile Security',          desc: 'MDM, encryption, and BYOD policy enforcement.' },
  ];
  return (
    <section id="services" className="block">
      <div className="container">
        <Reveal className="section-head">
          <div className="eyebrow">What We Do</div>
          <h2 className="section-title">Comprehensive IT solutions for modern business.</h2>
          <p className="section-lede">Two disciplines, one partner. We run the systems that keep your business moving — and the security that keeps them safe.</p>
        </Reveal>

        <div className="services-grid">
          <Reveal delay={1}>
            <div className="service-col-head"><span className="pill">IT Services</span><h3>Run it well.</h3></div>
            <div className="service-col">
              {it.map((s,i) => <ServiceCard key={i} {...s}/>)}
            </div>
          </Reveal>
          <Reveal delay={2}>
            <div className="service-col-head"><span className="pill">Cybersecurity</span><h3>Keep it safe.</h3></div>
            <div className="service-col">
              {sec.map((s,i) => <ServiceCard key={i} {...s}/>)}
            </div>
          </Reveal>
        </div>

        <Reveal className="services-foot" delay={3}>
          <a href="#" className="link-teal">View all services <Icon name="arrow"/></a>
        </Reveal>
      </div>
    </section>
  );
};

const Value = () => {
  const feats = [
    { icon: 'work',    title: 'Work From Anywhere',     desc: 'Hassle-free virtual apps and desktops, delivered from any device.' },
    { icon: 'layers',  title: 'Redundant Infrastructure', desc: 'Engineered for maximum reliability — 5 to 500+ users without compromise.' },
    { icon: 'consult', title: 'Expert Consulting',      desc: 'Deep bench across VMware, Citrix, Microsoft, and beyond.' },
  ];
  return (
    <section id="about" className="block value">
      <div className="container">
        <Reveal className="section-head" style={{maxWidth: 760}}>
          <div className="eyebrow">The Vicore Promise</div>
          <h2 className="section-title">Your office. Anywhere. Anytime.</h2>
          <p className="section-lede">Vicore delivers platform-agnostic virtual servers, desktops, and applications from any device, anywhere, anytime. We help businesses escape dead-end technologies with cost-effective migration plans — maximizing ROI on every IT investment.</p>
        </Reveal>
        <div className="value-grid">
          {feats.map((f,i) => (
            <Reveal key={i} delay={i+1}>
              <div className="vfeat">
                <div className="vfeat-icon"><Icon name={f.icon}/></div>
                <h4>{f.title}</h4>
                <p>{f.desc}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
};

const Industries = () => {
  const list = [
    { ic: 'health',  nm: 'Healthcare' },
    { ic: 'finance', nm: 'Financial Services' },
    { ic: 'factory', nm: 'Manufacturing' },
    { ic: 'cap',     nm: 'Education' },
    { ic: 'scales',  nm: 'Legal / Law' },
    { ic: 'hotel',   nm: 'Hospitality' },
  ];
  return (
    <section className="block" style={{paddingTop: 0}}>
      <div className="container">
        <Reveal className="section-head"><div className="eyebrow">Industries We Serve</div>
          <h2 className="section-title" style={{fontSize: 'clamp(28px, 3.6vw, 42px)'}}>Built for the businesses that move Michigan.</h2>
        </Reveal>
        <div className="ind-grid">
          {list.map((x,i) => (
            <Reveal key={i} delay={(i%5)+1}>
              <div className="ind-tile">
                <div className="ic" style={{width:36,height:36,margin:'0 auto 14px',color:'var(--teal)'}}><Icon name={x.ic} className=""/></div>
                <div className="nm">{x.nm}</div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
};

const Why = () => {
  const items = [
    { n: '01', t: 'Secure by Design',        d: 'Zero Trust architecture, endpoint protection, and managed firewalls — security baked in, not bolted on.' },
    { n: '02', t: 'Optimized for Performance', d: 'Desktop optimization, server health management, and disciplined patching keep your team productive.' },
    { n: '03', t: 'Partner, Not Just Vendor', d: 'Long-term planning, transparent pricing, and a dedicated team that knows your business.' },
    { n: '04', t: 'Michigan-Based, Detroit-Proven', d: 'Boots-on-the-ground service across Metro Detroit since 2010 — local accountability, enterprise depth.' },
  ];
  return (
    <section className="block" style={{background: 'linear-gradient(180deg, transparent, rgba(13,27,69,0.4))'}}>
      <div className="container">
        <Reveal className="section-head">
          <div className="eyebrow">Why Vicore</div>
          <h2 className="section-title">Four reasons clients stay for years.</h2>
        </Reveal>
        <div className="why-grid">
          {items.map((x,i) => (
            <Reveal key={i} delay={(i%2)+1}>
              <div className="why-card">
                <div className="why-num grad-text">{x.n}</div>
                <div>
                  <h4>{x.t}</h4>
                  <p>{x.d}</p>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
};

const CTABand = () => (
  <section id="contact" className="ctaband">
    <div className="ctaband-bg"/>
    <div className="container ctaband-inner">
      <Reveal><h2>Ready to secure and modernize your IT?</h2></Reveal>
      <Reveal delay={1}><p>Let Vicore build a custom technology roadmap for your business.</p></Reveal>
      <Reveal delay={2}><a href="Vicore Contact.html" className="btn btn-light">Schedule a Free Consultation <Icon name="arrow"/></a></Reveal>
    </div>
  </section>
);

const Footer = () => (
  <footer>
    <div className="container">
      <div className="foot-grid">
        <div className="foot">
          <div style={{display:'flex', alignItems:'center', gap:12}}>
            <img src="assets/vicore-mark.png" alt="" className="foot-mark-img"/>
            <img src="assets/vicore-wordmark-white.png" alt="VICORE" style={{height:20, width:'auto'}}/>
          </div>
          <p className="foot-tag">Secure · Optimize · IT · Solutions. Michigan's trusted partner for IT and cybersecurity since 2010.</p>
        </div>
        <div className="foot">
          <h5>Quick Links</h5>
          <ul>
            <li><a href="#home">Home</a></li>
            <li><a href="#services">Services</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div>
        <div className="foot">
          <h5>Services</h5>
          <ul>
            <li><a href="#services">Managed IT</a></li>
            <li><a href="#services">Cybersecurity</a></li>
            <li><a href="#services">Cloud & Hosting</a></li>
            <li><a href="#services">Virtualization</a></li>
            <li><a href="#services">Compliance</a></li>
          </ul>
        </div>
        <div className="foot">
          <h5>Contact</h5>
          <ul>
            <li><a href="tel:2486876818">(248) 687-6818</a></li>
            <li><a href="mailto:sales@vicoretech.com">sales@vicoretech.com</a></li>
            <li><a href="https://www.vicoretech.com">www.vicoretech.com</a></li>
          </ul>
        </div>
      </div>
      <div className="foot-bottom">
        <span>© 2026 Vicore LLC. All rights reserved.</span>
        <span>Troy, Michigan</span>
      </div>
    </div>
  </footer>
);

Object.assign(window, { Reveal, Navbar, Hero, Stats, Services, Value, Industries, Why, CTABand, Footer });