/* global React, NetworkBg, HeroViz,
   IcoHospital, IcoPlane, IcoBuilding, IcoBriefcase, IcoCampus, IcoTower,
   IcoMapPin, IcoBlueprint, IcoCog, IcoFiveG, IcoShare, IcoWifi, IcoSignal, IcoBrain,
   IcoArrowRight, IcoCheck, IcoShield, IcoSparkle, IcoMonitor, IcoPulse, IcoNetwork */

// ============ HERO ============
const Hero = ({ onNavigate }) => {
  return (
    <section className="hero">
      <div className="hero__net">
        <NetworkBg density="normal" variant="hero" />
      </div>
      <div className="hero__glow" />
      <div className="container hero__container">
        <div>
          <span className="hero__eyebrow">
            <span className="hero__eyebrow-dot" />
            Next-generation telecom infrastructure
          </span>
          <h1>
            Intelligent telecom &amp;<br />
            connectivity solutions for a<br />
            <span className="grad">connected future.</span>
          </h1>
          <p className="hero__sub">
            Eminencetel delivers advanced telecom infrastructure, Private 5G networks, indoor multi-operator coverage, Neutral Host systems, and AI-driven IoT technologies across the UK.
          </p>
          <p className="hero__support">
            Helping organisations improve connectivity, operational performance, and digital transformation with scalable and cost-effective network solutions.
          </p>
          <div className="hero__ctas">
            <button className="btn btn--primary" onClick={() => onNavigate('contact')}>
              Get consultation
              <IcoArrowRight size={16} className="btn__arrow" />
            </button>
            <button className="btn btn--ghost-dark" onClick={() => onNavigate('solutions')}>
              Explore solutions
            </button>
          </div>
          <div className="hero__stats">
            <div>
              <div className="hero__stat__num">3,000<span style={{ color: '#4DA8FF' }}>+</span></div>
              <div className="hero__stat__label">UK telecom sites deployed</div>
            </div>
            <div>
              <div className="hero__stat__num">4G/5G</div>
              <div className="hero__stat__label">Multi-operator ready</div>
            </div>
            <div>
              <div className="hero__stat__num">24/7</div>
              <div className="hero__stat__label">UK-wide field teams</div>
            </div>
          </div>
        </div>
        <div className="hero__viz">
          <HeroViz />
        </div>
      </div>
    </section>
  );
};

// ============ TRUST ============
const TRUST_ITEMS = [
  { name: 'NHS &\nHealthcare', Ico: IcoHospital },
  { name: 'Airports &\nTransport hubs', Ico: IcoPlane },
  { name: 'Local\nauthorities', Ico: IcoBuilding },
  { name: 'Commercial\nbuildings', Ico: IcoBriefcase },
  { name: 'Enterprise\ncampuses', Ico: IcoCampus },
  { name: 'Telecom\noperators', Ico: IcoTower },
];

const TrustSection = () => (
  <section className="trust">
    <div className="container">
      <div className="trust__label">Supporting Critical UK Infrastructure</div>
      <div className="trust__row">
        {TRUST_ITEMS.map(({ name, Ico }) => (
          <div className="trust__item" key={name}>
            <Ico size={32} className="trust__icon" />
            <div className="trust__name" style={{ whiteSpace: 'pre-line' }}>{name}</div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

// ============ EXPERIENCE ============
const ExperienceSection = () => {
  const [count, setCount] = React.useState(0);
  const ref = React.useRef(null);

  React.useEffect(() => {
    const obs = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) {
        let start = performance.now();
        const duration = 1800;
        const step = (now) => {
          const t = Math.min(1, (now - start) / duration);
          const eased = 1 - Math.pow(1 - t, 3);
          setCount(Math.round(3000 * eased));
          if (t < 1) requestAnimationFrame(step);
        };
        requestAnimationFrame(step);
        obs.disconnect();
      }
    }, { threshold: 0.3 });
    if (ref.current) obs.observe(ref.current);
    return () => obs.disconnect();
  }, []);

  return (
    <section className="experience section" ref={ref}>
      <div className="experience__bg">
        <NetworkBg density="sparse" variant="experience" />
      </div>
      <div className="container">
        <div className="experience__inner">
          <div>
            <span className="eyebrow">Proven nationwide delivery</span>
            <h2>Telecom infrastructure delivered at national scale.</h2>
            <p>
              Eminencetel has extensive experience supporting telecom infrastructure projects nationwide. Our teams have contributed to the successful deployment of more than 3,000 telecom sites across the United Kingdom.
            </p>
            <p>
              From indoor connectivity systems and wireless infrastructure to enterprise telecom deployments, we deliver reliable and scalable solutions tailored to modern connectivity demands.
            </p>
          </div>
          <div style={{ textAlign: 'right' }}>
            <div className="experience__num">
              {count.toLocaleString()}
              <span className="experience__plus">+</span>
            </div>
            <div className="experience__caption">UK telecom sites successfully deployed</div>
          </div>
        </div>
      </div>
    </section>
  );
};

// ============ SERVICES ============
const SERVICES = [
  { Ico: IcoMapPin, title: 'Site Acquisition', body: 'Professional telecom acquisition services including landlord coordination, planning support, and site management.' },
  { Ico: IcoBlueprint, title: 'Telecom Design', body: 'Scalable and technically compliant telecom infrastructure design services tailored for modern networks.' },
  { Ico: IcoCog, title: 'Infrastructure Deployment', body: 'End-to-end installation, integration, and network deployment services.' },
  // { Ico: IcoFiveG, title: 'Private 5G Installation', body: 'Secure and high-performance wireless networks for enterprise and mission-critical environments.' },
  // { Ico: IcoShare, title: 'Neutral Host Solutions', body: 'Shared infrastructure systems supporting seamless multi-operator connectivity.' },
  { Ico: IcoWifi, title: 'Indoor Multi-Operator Coverage', body: 'Advanced indoor signal solutions for hospitals, airports, campuses, and commercial environments.' },
  // { Ico: IcoSignal, title: 'Repeater Solutions', body: 'Reliable repeater technologies that eliminate indoor dead zones and improve signal performance.' },
  { Ico: IcoBrain, title: 'AI-Driven IoT Solutions',body: 'Innovative smart technologies developed by our internal software team for healthcare and intelligent infrastructure.' },
  { Ico: IcoSignal,title: 'Radio Network Optimisation (RNO)',body: 'Improve network coverage, performance, and user experience with advanced RNO services for 2G, 3G, 4G LTE, and 5G networks.'},
  { Ico: IcoNetwork, title: 'Advanced Wireless Technologies',body: 'Supporting modern mobile technologies including 2G, 3G, 4G LTE, 5G NR, VoLTE, and Massive MIMO with scalable and future-ready network solutions.'}
];

const ServicesSection = ({ onNavigate }) => (
  <section className="section section--grey">
    <div className="container">
      <div className="section__head">
        <span className="eyebrow">Our core services</span>
        <h2 className="section__title">From acquisition to AI — one telecom partner.</h2>
        <p className="section__sub">
          End-to-end delivery across every stage of the telecom lifecycle, backed by deep field engineering experience and an internal software team building the next generation of intelligent connectivity.
        </p>
      </div>
      <div className="services-grid">
        {SERVICES.map(({ Ico, title, body }) => (
          <div className="service-card" key={title} onClick={() => onNavigate('services')}>
            <div className="service-card__icon">
              <Ico size={22} />
            </div>
            <h3>{title}</h3>
            <p>{body}</p>
            <div className="service-card__arrow">
              Learn more <IcoArrowRight size={14} />
            </div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

// ============ WHY US ============
const WHY = [
  { num: '01', title: '3,000+ UK telecom site deployments', body: 'Extensive nationwide project delivery experience across every sector.' },
  { num: '02', title: 'Cost-effective enterprise solutions', body: 'Advanced technologies delivered at competitive costs versus major industry providers.' },
  { num: '03', title: 'Vendor technology partnerships', body: 'Strong partnerships with leading telecom and connectivity technology vendors.' },
  { num: '04', title: 'Future-ready infrastructure', body: 'Solutions designed to support evolving digital and connectivity requirements.' },
  { num: '05', title: 'Agile UK-wide delivery teams', body: 'Responsive engineering and project management capabilities across the United Kingdom.' },
];

const WhyUsSection = () => (
  <section className="section">
    <div className="container">
      <div className="section__head">
        {/* <span className="eyebrow">Why Eminencetel</span> */}
        <h2 className="section__title">Why Eminencetel</h2>
      </div>
      <div className="why-grid">
        {WHY.map(({ num, title, body }) => (
         <div className="why-card" key={title}>
            <h3>{title}</h3>
            <p>{body}</p>
          </div>
        ))}
      </div>
    </div>
  </section>
);

// ============ FEATURED — Indoor Coverage ============
const IndoorVenueViz = () => (
  <svg viewBox="0 0 400 300" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
    <defs>
      <radialGradient id="iv-coverage" cx="50%" cy="40%" r="50%">
        <stop offset="0%" stopColor="#4DA8FF" stopOpacity="0.5" />
        <stop offset="60%" stopColor="#007BFF" stopOpacity="0.15" />
        <stop offset="100%" stopColor="#0A1F44" stopOpacity="0" />
      </radialGradient>
    </defs>

    {/* Floors of building */}
    <g stroke="rgba(255,255,255,0.18)" strokeWidth="1" fill="none">
      <rect x="60" y="60" width="280" height="180" rx="2" />
      <line x1="60" y1="105" x2="340" y2="105" />
      <line x1="60" y1="150" x2="340" y2="150" />
      <line x1="60" y1="195" x2="340" y2="195" />
      <line x1="130" y1="60" x2="130" y2="240" />
      <line x1="200" y1="60" x2="200" y2="240" />
      <line x1="270" y1="60" x2="270" y2="240" />
    </g>

    {/* Coverage halo */}
    <circle cx="200" cy="120" r="160" fill="url(#iv-coverage)" />

    {/* Antenna nodes inside */}
    {[
      [95, 82], [165, 82], [235, 82], [305, 82],
      [95, 127], [235, 127], [305, 127],
      [95, 172], [165, 172], [305, 172],
      [95, 217], [165, 217], [235, 217], [305, 217],
    ].map(([x, y], i) => (
      <g key={i}>
        <circle cx={x} cy={y} r="9" fill="rgba(0,123,255,0.15)" stroke="rgba(0,123,255,0.4)" strokeWidth="0.6" />
        <circle cx={x} cy={y} r="3" fill="#00D4FF">
          <animate attributeName="opacity" values="0.5;1;0.5" dur={`${1.6 + (i % 3) * 0.3}s`} repeatCount="indefinite" begin={`${i * 0.15}s`} />
        </circle>
      </g>
    ))}

    {/* Operator labels */}
    <g fontFamily="'IBM Plex Mono', monospace" fontSize="9" fill="rgba(255,255,255,0.6)">
      <rect x="60" y="20" width="280" height="22" fill="rgba(255,255,255,0.04)" stroke="rgba(255,255,255,0.12)" />
      <g>
        <circle cx="80" cy="31" r="3" fill="#00D4FF" />
        <text x="89" y="34">EE</text>
        <circle cx="140" cy="31" r="3" fill="#4DA8FF" />
        <text x="149" y="34">Vodafone</text>
        <circle cx="220" cy="31" r="3" fill="#007BFF" />
        <text x="229" y="34">O2</text>
        <circle cx="270" cy="31" r="3" fill="#9CC8FF" />
        <text x="279" y="34">Three</text>
      </g>
    </g>

    {/* Signal bars on side */}
    <g transform="translate(355, 250)">
      <rect x="0" y="-10" width="5" height="10" fill="#00D4FF" />
      <rect x="7" y="-15" width="5" height="15" fill="#00D4FF" />
      <rect x="14" y="-20" width="5" height="20" fill="#00D4FF" />
      <rect x="21" y="-25" width="5" height="25" fill="#4DA8FF" />
    </g>

    <text x="60" y="270" fontFamily="'IBM Plex Mono', monospace" fontSize="9" fill="rgba(255,255,255,0.55)">
      14 NODES · 4 OPERATORS · 100% COVERAGE
    </text>
  </svg>
);

const FEATURED_IDEAL = [
  'Hospitals', 'Airports', 'Shopping centres',
  'Universities', 'Corporate buildings', 'Public infrastructure'
];

const FeaturedSection = ({ onNavigate }) => (
  <section className="section section--grey">
    <div className="container">
      <div className="featured">
        <div>
          <span className="eyebrow">Featured solution</span>
          <h2 className="section__title">Smarter indoor connectivity.</h2>
          <p className="section__sub" style={{ marginBottom: 20 }}>
            Poor indoor mobile signal affects operational performance, communication reliability, and customer experience.
          </p>
          <p className="section__sub">
            Eminencetel delivers advanced indoor coverage systems designed to provide reliable multi-operator connectivity across complex environments.
          </p>
          <div className="featured__list">
            {FEATURED_IDEAL.map(label => (
              <div className="featured__chip" key={label}>
                <span className="featured__chip__dot" />
                {label}
              </div>
            ))}
          </div>
          <div style={{ marginTop: 32 }}>
            <button className="btn btn--primary" onClick={() => onNavigate('solutions')}>
              See indoor coverage solutions
              <IcoArrowRight size={16} className="btn__arrow" />
            </button>
          </div>
        </div>
        <div className="featured__viz">
          <IndoorVenueViz />
        </div>
      </div>
    </div>
  </section>
);

// ============ AI HEALTHCARE ============
const AI_FEATURES = [
  { Ico: IcoPulse, label: 'Smart healthcare connectivity' },
  { Ico: IcoMonitor, label: 'Real-time monitoring support' },
  { Ico: IcoNetwork, label: 'Intelligent infrastructure integration' },
  { Ico: IcoSparkle, label: 'AI-enabled operational systems' },
  { Ico: IcoShield, label: 'Future-ready digital healthcare environments' },
];

const AIHealthcareViz = () => (
  <svg viewBox="0 0 400 400" style={{ width: '100%', height: '100%' }}>
    <defs>
      <linearGradient id="aiCircle" x1="0%" y1="0%" x2="100%" y2="100%">
        <stop offset="0%" stopColor="#4DA8FF" stopOpacity="0.6" />
        <stop offset="100%" stopColor="#007BFF" stopOpacity="0.05" />
      </linearGradient>
      <radialGradient id="aiCore">
        <stop offset="0%" stopColor="#00D4FF" stopOpacity="0.9" />
        <stop offset="100%" stopColor="#007BFF" stopOpacity="0.2" />
      </radialGradient>
    </defs>

    {/* Hub */}
    <circle cx="200" cy="200" r="48" fill="url(#aiCore)" />
    <circle cx="200" cy="200" r="48" fill="none" stroke="rgba(255,255,255,0.4)" strokeWidth="1" />
    <text x="200" y="195" textAnchor="middle" fontFamily="Poppins, sans-serif" fontSize="13" fontWeight="600" fill="white">AI</text>
    <text x="200" y="212" textAnchor="middle" fontFamily="'IBM Plex Mono', monospace" fontSize="8" fill="rgba(255,255,255,0.7)">IoT CORE</text>

    {/* Connecting orbit */}
    <circle cx="200" cy="200" r="120" fill="none" stroke="rgba(255,255,255,0.15)" strokeWidth="1" strokeDasharray="3 4" />
    <circle cx="200" cy="200" r="170" fill="none" stroke="rgba(255,255,255,0.08)" strokeWidth="1" />

    {/* Connected nodes */}
    {[
      { angle: -90, label: 'Patient\nmonitor', Ico: 'M' },
      { angle: -30, label: 'Asset\ntracking', Ico: 'T' },
      { angle: 30, label: 'Smart\nbed', Ico: 'B' },
      { angle: 90, label: 'Lab\nanalytics', Ico: 'L' },
      { angle: 150, label: 'Access\ncontrol', Ico: 'A' },
      { angle: 210, label: 'Climate\nIoT', Ico: 'C' },
    ].map(({ angle, label, Ico }, i) => {
      const rad = (angle * Math.PI) / 180;
      const x = 200 + Math.cos(rad) * 120;
      const y = 200 + Math.sin(rad) * 120;
      return (
        <g key={i}>
          <line x1="200" y1="200" x2={x} y2={y} stroke="rgba(0, 212, 255, 0.3)" strokeWidth="1" />
          <circle cx={x} cy={y} r="22" fill="rgba(10, 31, 68, 0.9)" stroke="rgba(0, 212, 255, 0.5)" strokeWidth="1.2" />
          <text x={x} y={y + 4} textAnchor="middle" fontFamily="Poppins, sans-serif" fontSize="11" fontWeight="600" fill="#00D4FF">{Ico}</text>
          <text x={x} y={y + 38} textAnchor="middle" fontFamily="'IBM Plex Mono', monospace" fontSize="8" fill="rgba(255,255,255,0.55)" style={{ whiteSpace: 'pre' }}>
            {label.split('\n')[0]}
          </text>
          <text x={x} y={y + 48} textAnchor="middle" fontFamily="'IBM Plex Mono', monospace" fontSize="8" fill="rgba(255,255,255,0.55)">
            {label.split('\n')[1]}
          </text>
          {/* Pulsing dot */}
          <circle cx={x} cy={y - 14} r="2.5" fill="#00FF88">
            <animate attributeName="opacity" values="1;0.2;1" dur={`${1.4 + i * 0.2}s`} repeatCount="indefinite" />
          </circle>
        </g>
      );
    })}

    {/* Animated data flow rings */}
    <circle cx="200" cy="200" r="80" fill="none" stroke="#00D4FF" strokeWidth="0.8" opacity="0.5">
      <animate attributeName="r" values="60;180;180" dur="3s" repeatCount="indefinite" />
      <animate attributeName="opacity" values="0.6;0;0" dur="3s" repeatCount="indefinite" />
    </circle>
    <circle cx="200" cy="200" r="80" fill="none" stroke="#4DA8FF" strokeWidth="0.8" opacity="0.5">
      <animate attributeName="r" values="60;180;180" dur="3s" repeatCount="indefinite" begin="1.5s" />
      <animate attributeName="opacity" values="0.6;0;0" dur="3s" repeatCount="indefinite" begin="1.5s" />
    </circle>
  </svg>
);

const AIHealthcareSection = () => (
  <section className="section ai-section">
    <div className="ai-section__bg">
      <NetworkBg density="sparse" variant="ai" />
    </div>
    <div className="container">
      <div className="ai-grid">
        <div>
          <span className="eyebrow">AI &amp; healthcare technology</span>
          <h2 className="section__title" style={{ color: 'white' }}>
            AI-powered healthcare connectivity, built in-house.
          </h2>
          <p className="section__sub" style={{ color: 'rgba(255,255,255,0.7)', marginBottom: 4 }}>
            Our internal software development team has developed AI-driven IoT technologies designed to support smarter healthcare management and connected operational environments.
          </p>
          <div className="ai-features">
            {AI_FEATURES.map(({ Ico, label }) => (
              <div className="ai-feature" key={label}>
                <div className="ai-feature__icon">
                  <Ico size={18} />
                </div>
                <div className="ai-feature__text">{label}</div>
              </div>
            ))}
          </div>
        </div>
        <div>
          <AIHealthcareViz />
        </div>
      </div>
    </div>
  </section>
);

// ============ FINAL CTA ============
const FinalCTA = ({ onNavigate }) => (
  <section className="final-cta">
    <div style={{ position: 'absolute', inset: 0, opacity: 0.55 }}>
      <NetworkBg density="sparse" variant="cta" />
    </div>
    <div className="container final-cta__inner">
      <span className="eyebrow">Ready when you are</span>
      <h2>Ready to improve your connectivity infrastructure?</h2>
      <p>
        Whether you require Private 5G, indoor coverage enhancement, Neutral Host infrastructure, telecom deployment, or AI-driven IoT technologies — Eminencetel delivers scalable, cost-effective solutions tailored to your organisation.
      </p>
      <div className="final-cta__ctas">
        <button className="btn btn--primary" onClick={() => onNavigate('contact')}>
          Request consultation
          <IcoArrowRight size={16} className="btn__arrow" />
        </button>
        <button className="btn btn--ghost" onClick={() => onNavigate('contact')}>
          Contact our team
        </button>
      </div>
    </div>
  </section>
);

Object.assign(window, {
  Hero, TrustSection, ExperienceSection, ServicesSection, WhyUsSection,
  FeaturedSection, AIHealthcareSection, FinalCTA,
});