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

// =================== EXPANDABLE BODY ===================
const ExpandableBody = ({ preview, full, benefits, footer }) => {
  const [open, setOpen] = React.useState(false);
  return (
    <div>
      <p style={{ margin: 0 }}>{preview}</p>
      {open && (
        <div>
          {full.map((para, i) => (
            <p key={i} style={{ marginTop: 12, marginBottom: 0 }}>{para}</p>
          ))}
          {benefits && benefits.length > 0 && (
            <>
              <div style={{ marginTop: 16, marginBottom: 8, fontSize: 12, fontWeight: 600, color: 'var(--grey-500)', letterSpacing: '0.1em', textTransform: 'uppercase' }}>
                Key Benefits
              </div>
              <ul style={{ margin: 0, paddingLeft: 18 }}>
                {benefits.map((b, i) => (
                  <li key={i} style={{ fontSize: 14, color: 'var(--navy)', lineHeight: 1.6, marginBottom: 4 }}>{b}</li>
                ))}
              </ul>
            </>
          )}
          {footer && (
            <p style={{ marginTop: 14, marginBottom: 0, fontStyle: 'italic', color: 'var(--grey-500)', fontSize: 14 }}>{footer}</p>
          )}
        </div>
      )}
      <button
        onClick={() => setOpen(o => !o)}
        style={{
          background: 'none',
          border: 'none',
          padding: 0,
          cursor: 'pointer',
          fontSize: 13,
          fontWeight: 600,
          color: 'var(--electric)',
          marginTop: 10,
          display: 'inline-flex',
          alignItems: 'center',
          gap: 4,
          fontFamily: 'var(--font-display)',
          letterSpacing: '0.02em',
        }}
      >
        {open ? 'Show less ↑' : 'Read more ↓'}
      </button>
    </div>
  );
};

// =================== PAGE HERO (shared) ===================
const PageHero = ({ eyebrow, title, sub, image }) => (
  <section
    className="page-hero"
    style={image ? {
      backgroundImage: `url(${image})`,
      backgroundSize: 'cover',
      backgroundPosition: 'center',
    } : {}}
  >
    {/* Dark overlay so text stays readable */}
    {image && (
      <div style={{
        position: 'absolute',
        inset: 0,
        background: 'linear-gradient(90deg, rgba(6,18,42,0.92) 0%, rgba(10,31,68,0.80) 45%, rgba(10,31,68,0.35) 100%)',
        zIndex: 1,
      }} />
    )}

    <div className="page-hero__bg">
      <NetworkBg density="sparse" variant="page" />
    </div>

    <div className="container" style={{ position: 'relative', zIndex: 2 }}>
      <div className="page-hero__inner" style={{ maxWidth: 760 }}>
        {eyebrow && <span className="eyebrow">{eyebrow}</span>}
        <h1>{title}</h1>
        {sub && <p>{sub}</p>}
      </div>
    </div>
  </section>
);

// =================== ABOUT PAGE ===================
const VALUES = [
  { Ico: IcoSparkle, title: 'Innovation', body: 'Driving modern connectivity through smart technology solutions.' },
  { Ico: IcoShield, title: 'Integrity', body: 'Building trusted long-term partnerships through transparency and accountability.' },
  { Ico: IcoCheck, title: 'Quality', body: 'Delivering exceptional standards across every project.' },
  { Ico: IcoShield, title: 'Safety', body: 'Maintaining a strong safety-first operational culture.' },
  { Ico: IcoNetwork, title: 'Collaboration', body: 'Working closely with clients, vendors, and project stakeholders.' },
];

const DIFFERENTIATORS = [
  'Telecom engineering expertise',
  'AI-driven technology innovation',
  'Internal software development capabilities',
  'IoT infrastructure solutions',
  'Smart connectivity systems',
];

const AboutPage = () => (
  <>
    <PageHero
      eyebrow="About Eminencetel"
      title="Building smarter telecom infrastructure across the UK."
      sub="A UK-based telecommunications infrastructure and technology company delivering advanced connectivity solutions for enterprise, healthcare, transport, and public sector organisations."
      image="assets/6.png"
    />

    <section className="section">
      <div className="container">
        <div className="about-grid">
          <div>
            <span className="eyebrow">Company introduction</span>
            <h2 className="section__title">Telecom engineering meets intelligent software.</h2>
            <p className="section__sub">
              Eminencetel combines telecom engineering expertise with innovative software and AI-driven IoT technologies to create scalable, future-ready communication infrastructure.
            </p>
          </div>
          <div className="about-card">
            <span className="eyebrow">Our experience</span>
            <h3>Trusted telecom delivery across the UK.</h3>
            <p>
              With experience supporting the deployment of more than 3,000 telecom sites nationwide, Eminencetel has established a strong reputation for quality, reliability, and delivery excellence. Our teams support projects from acquisition and design through to deployment, integration, and ongoing operational support.
            </p>
          </div>
        </div>
      </div>
    </section>

    <section className="section section--grey">
      <div className="container">
        <div className="about-grid">
          <div className="about-card">
            <span className="eyebrow">Our mission</span>
            <h3>Reliable, innovative, cost-effective.</h3>
            <p>
              To deliver reliable, innovative, and cost-effective telecom infrastructure and connectivity solutions that empower organisations to stay connected and future-ready.
            </p>
          </div>
          <div className="about-card">
            <span className="eyebrow">Our vision</span>
            <h3>One of the UK's leading providers.</h3>
            <p>
              To become one of the UK's leading providers of intelligent telecom and digital connectivity infrastructure.
            </p>
          </div>
        </div>

        <div style={{ marginTop: 80 }}>
          <div className="section__head section__head--center" style={{ textAlign: 'center' }}>
            <span className="eyebrow">Our values</span>
            <h2 className="section__title">The principles guiding every deployment.</h2>
          </div>
          <div className="values-grid">
            {VALUES.map(({ Ico, title, body }) => (
              <div className="value-card" key={title}>
                <div className="value-card__icon">
                  <Ico size={20} />
                </div>
                <h4>{title}</h4>
                <p>{body}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>

    <section className="section">
      <div className="container">
        <div className="section__head">
          <span className="eyebrow">What makes us different</span>
          <h2 className="section__title">Beyond traditional telecom infrastructure.</h2>
          <p className="section__sub">
            Unlike many telecom providers, Eminencetel combines deep field engineering with internal software innovation — enabling complete end-to-end digital infrastructure ecosystems.
          </p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 16 }}>
          {DIFFERENTIATORS.map((d, i) => (
            <div key={d} style={{
              padding: '28px 22px',
              background: 'linear-gradient(180deg, var(--white) 0%, var(--grey-50) 100%)',
              border: '1px solid var(--grey-200)',
              borderRadius: 'var(--r-lg)',
            }}>
              <div style={{
                fontFamily: 'var(--font-display)',
                fontSize: 13,
                color: 'var(--electric)',
                fontWeight: 600,
                marginBottom: 12,
                letterSpacing: '0.08em'
              }}></div>
              <div style={{ fontFamily: 'var(--font-display)', fontSize: 16, fontWeight: 600, color: 'var(--navy)', lineHeight: 1.3 }}>{d}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  </>
);

// =================== SERVICES PAGE ===================
const FULL_SERVICES = [
  {
    title: 'Site Acquisition',
    body: 'Comprehensive acquisition services supporting telecom infrastructure expansion projects across the UK.',
    chips: ['Site identification', 'Landlord negotiations', 'Lease coordination', 'Planning support', 'Regulatory assistance'],
  },
  {
    title: 'Telecom Design',
    body: 'Professional telecom design services tailored to modern connectivity requirements.',
    chips: ['Telecom site design', 'CAD drawings', 'Equipment layouts', 'Infrastructure planning', 'Compliance documentation'],
  },
  {
    title: 'Telecom Infrastructure Deployment',
    body: 'End-to-end network deployment and integration services.',
    chips: ['Equipment installation', 'Network integration', 'Infrastructure upgrades', 'Site implementation', 'Cable management'],
  },
  {
    title: 'Maintenance & Support',
    body: 'Responsive telecom maintenance and operational support services ensuring network reliability.',
    chips: ['24/7 support', 'Preventive maintenance', 'Network reliability', 'Rapid response'],
  },
  {
    title: 'Radio Network Optimisation (RNO)',
    body: 'Enhance network performance, coverage, and user experience with advanced optimisation services for 2G, 3G, 4G LTE, and 5G networks.',
    chips: ['Coverage & Capacity Optimisation','KPI Monitoring & Performance Tuning','Drive Testing & Benchmarking','Interference Analysis & Mitigation',
      'Neighbour & Handover Optimisation','LTE & 5G Optimization','VoLTE Performance Optimisation'],
  },
  {
    title: 'Advanced Wireless Technologies',
    body: 'Supporting modern telecom technologies with scalable, reliable, and future-ready wireless network solutions.',
    chips: ['4G LTE','5G SA','Private 5G','5G NR','VoLTE','Massive MIMO','Multi-Vendor Support','Advanced RF Analytics','Remote & Onsite Support','Spectrum Efficiency'],
  },
];

const ServicesPage = ({ onNavigate }) => (
  <>
    <PageHero
      eyebrow="Services"
      title="Telecom infrastructure &amp; engineering services."
      sub="Reliable, scalable, and future-ready telecom solutions tailored for modern organisations."
       image="assets/4.png"
    />
    <section className="section">
      <div className="container">
        {FULL_SERVICES.map((s, i) => (
          <div className="service-row" key={s.title}>
            <div className="service-row__num"></div>
            <div className="service-row__title">
              <h3>{s.title}</h3>
              <p>{s.body}</p>
            </div>
            <div className="service-row__chips">
              {s.chips.map(c => <span key={c}>{c}</span>)}
            </div>
          </div>
        ))}
      </div>
    </section>

    <section className="final-cta" style={{ padding: '100px 0' }}>
      <div className="container final-cta__inner">
        <h2>Need a tailored service package?</h2>
        <p>Tell us about your project — our team will scope the right combination of services for your environment.</p>
        <div className="final-cta__ctas">
          <button className="btn btn--primary" onClick={() => onNavigate('contact')}>
            Request consultation <IcoArrowRight size={16} className="btn__arrow" />
          </button>
        </div>
      </div>
    </section>
  </>
);

// =================== SOLUTIONS PAGE ===================
const SOLUTIONS = [
  {
    title: 'Indoor Multi-Operator Coverage',
    preview: 'Reliable mobile connectivity is essential for modern businesses, yet indoor environments often suffer from weak signals due to building materials, structural layouts, and network congestion. Our Indoor Multi-Operator Coverage Solution ensures seamless voice and high-speed data connectivity throughout your premises by enabling coverage from multiple mobile network operators within a single integrated system.',
    full: [
      'Designed for offices, hotels, hospitals, shopping centres, warehouses, and large commercial buildings, the solution utilizes advanced Distributed Antenna Systems (DAS), small cells, and signal enhancement technologies to deliver consistent indoor coverage across all major operators. This eliminates dead zones, improves call quality, enhances user experience, and supports critical business communications.',
      'By providing a future-ready infrastructure, organisations can improve employee productivity, customer satisfaction, and operational efficiency while ensuring compliance with modern connectivity requirements. Whether for a new building or an existing facility, our tailored solutions are scalable, cost-effective, and engineered to meet the growing demands of mobile users and connected devices.',
    ],
    benefits: [
      'Seamless coverage from multiple mobile operators',
      'Enhanced voice quality and high-speed data performance',
      'Elimination of indoor signal dead zones',
      'Scalable design for buildings of all sizes',
      'Improved user experience and business productivity',
      'Future-ready infrastructure supporting 4G, 5G, and emerging technologies',
    ],
    footer: 'Empower your building with uninterrupted mobile connectivity and deliver a superior digital experience for everyone inside.',
    ideal: ['Hospitals', 'Airports', 'Universities', 'Commercial buildings', 'Public sector'],
    viz: 'indoor',
  },
  {
    title: 'Private 5G Networks',
    preview: 'A dedicated enterprise-grade wireless network delivering secure, ultra-reliable, and low-latency connectivity for mission-critical operations, automation, and digital transformation initiatives.',
    full: [
      'A Private 5G Network provides organisations, public authorities, and industrial facilities with a dedicated wireless infrastructure tailored to their specific operational requirements. Unlike public mobile networks, Private 5G offers complete control over coverage, security, capacity, and performance, ensuring reliable connectivity for business-critical applications and sensitive data.',
      'Designed for manufacturing plants, logistics hubs, healthcare campuses, ports, utilities, universities, and smart facilities, Private 5G enables ultra-low latency communications, high bandwidth, and seamless connectivity between people, machines, sensors, and IoT devices. This supports real-time monitoring, automation, predictive maintenance, autonomous systems, and advanced analytics.',
      'Private 5G also serves as a foundation for Smart City and Industry 4.0 initiatives by enabling intelligent infrastructure, connected operations, and future-ready digital services. Our scalable solutions are engineered to deliver secure, resilient, and high-performance connectivity while supporting long-term innovation and growth.',
    ],
    benefits: [
      'Dedicated and secure enterprise-grade wireless infrastructure',
      'Ultra-low latency for real-time applications and automation',
      'High bandwidth and reliable connectivity across large sites',
      'Enhanced cybersecurity and full network control',
      'Supports IoT, AI, robotics, and autonomous systems',
      'Scalable architecture tailored to operational requirements',
      'Enables Industry 4.0 and Smart City initiatives',
      'Future-ready platform supporting advanced 5G services and innovation',
    ],
    footer: 'Transform operations with a secure, high-performance Private 5G Network designed for the connected enterprises and smart environments of tomorrow.',
    ideal: [
      'Manufacturing facilities',
      'Logistics hubs',
      'Healthcare campuses',
      'Ports and airports',
      'Utilities',
      'Smart cities',
      'University campuses',
    ],
    viz: 'p5g',
  },
  {
    title: 'Neutral Host Infrastructure',
    preview: 'A shared telecommunications platform that enables multiple mobile operators and service providers to deliver seamless connectivity through a single, common infrastructure.',
    full: [
      'Neutral Host Infrastructure provides a shared telecommunications platform that enables multiple mobile network operators and service providers to deliver seamless connectivity through a single, common infrastructure. By eliminating the need for separate networks and duplicate equipment, organisations, property owners, and public authorities can significantly reduce deployment costs while ensuring comprehensive coverage and capacity.',
      'Ideal for airports, stadiums, shopping centres, transport hubs, smart cities, commercial buildings, and large public venues, Neutral Host solutions support multiple operators across a unified network architecture. This approach enhances mobile coverage, improves user experience, accelerates service deployment, and optimises the use of valuable space and infrastructure resources.',
      'As connectivity demands continue to grow, Neutral Host Infrastructure provides a scalable and future-ready foundation that supports 4G, 5G, Private Networks, IoT applications, and emerging digital services. For Smart City initiatives, it enables efficient deployment of connected technologies, public Wi-Fi, intelligent transport systems, smart utilities, and digital citizen services without requiring each operator to build separate infrastructure.',
    ],
    benefits: [
      'Shared infrastructure supporting multiple mobile operators',
      'Reduced capital and operational expenditure',
      'Faster deployment and simplified network management',
      'Enhanced indoor and outdoor coverage and capacity',
      'Optimised use of space, power, and infrastructure assets',
      'Future-ready support for 4G, 5G, Private Networks, and IoT',
      'Enables Smart City connectivity and digital transformation initiatives',
      'Improved user experience for residents, visitors, and businesses',
    ],
    footer: 'Build a smarter, more connected future with Neutral Host Infrastructure that delivers cost-effective, scalable, and operator-agnostic connectivity for modern environments.',
    ideal: [
      'Airports',
      'Stadiums',
      'Shopping centres',
      'Transport hubs',
      'Commercial buildings',
      'Smart cities',
      'Large public venues',
    ],
    viz: 'neutral',
  },
  {
    title: 'Repeater & Signal Enhancement',
    preview: 'Improving indoor and outdoor mobile signal strength across challenging environments, eliminating dead zones, and ensuring reliable connectivity.',
    full: [
      'Reliable mobile connectivity is essential for business operations, public services, and everyday communication. However, many buildings, underground areas, remote locations, and complex structures experience weak or inconsistent mobile signals due to distance from network towers, physical obstructions, or challenging environmental conditions. Our Repeater & Signal Enhancement Solutions are designed to overcome these challenges by amplifying and distributing mobile signals to areas where coverage is limited or unavailable.',
      'Using advanced repeater systems, signal boosters, and coverage enhancement technologies, we improve both voice and data performance across indoor and outdoor environments. The solution captures existing network signals, strengthens them, and redistributes them throughout the coverage area, ensuring users benefit from reliable connectivity, improved call quality, and faster mobile data speeds.',
      'Ideal for offices, hotels, warehouses, retail centres, healthcare facilities, transportation hubs, residential developments, and rural locations, our solutions provide a cost-effective alternative to building new network infrastructure. Each deployment is carefully designed to meet regulatory requirements and deliver optimal performance across supported mobile networks.',
      'Whether addressing isolated coverage issues or enhancing connectivity across large facilities, our signal enhancement solutions help organisations maintain productivity, improve customer experience, and ensure uninterrupted communication.',
    ],
    benefits: [
      'Improved mobile signal strength and coverage',
      'Enhanced voice quality and faster mobile data performance',
      'Elimination of indoor and outdoor coverage dead zones',
      'Cost-effective alternative to new network infrastructure',
      'Supports multiple mobile operators and technologies',
      'Fast deployment with minimal operational disruption',
      'Scalable solutions for buildings, campuses, and remote locations',
      'Future-ready support for 4G, 5G, and emerging mobile technologies',
    ],
    footer: 'Deliver stronger, more reliable connectivity with intelligent Repeater & Signal Enhancement solutions that keep people, devices, and businesses connected wherever they operate.',
    ideal: [
      'Basements and car parks',
      'Warehouses',
      'Hotels',
      'Healthcare facilities',
      'Retail centres',
      'Residential developments',
      'Remote and rural locations',
    ],
    viz: 'repeater',
  },
  {
    title: 'AI-Driven IoT Technology',
    preview: 'Intelligent connected ecosystems that combine Artificial Intelligence and IoT to enable real-time monitoring, automation, predictive analytics, and data-driven decision-making.',
    full: [
      'AI-Driven IoT Technology combines the power of Artificial Intelligence (AI) and the Internet of Things (IoT) to create intelligent, connected ecosystems that enable real-time monitoring, automation, and data-driven decision-making. By integrating smart sensors, connected devices, and advanced analytics, organisations can transform raw data into actionable insights that improve efficiency, reduce costs, and enhance operational performance.',
      'Our AI-powered IoT solutions continuously collect and analyse data from devices, equipment, infrastructure, and environmental systems. Through machine learning and predictive analytics, the platform can identify patterns, detect anomalies, forecast potential issues, and automate responses without human intervention. This enables businesses to optimise operations, improve asset utilisation, reduce downtime, and enhance customer experiences.',
      'The solution is ideal for Smart Cities, utilities, transportation, manufacturing, healthcare, agriculture, and commercial facilities. From intelligent traffic management and smart energy systems to predictive maintenance and environmental monitoring, AI-Driven IoT enables organisations to build more responsive, sustainable, and efficient environments.',
      'For Smart City initiatives, AI-powered IoT provides real-time visibility into urban infrastructure, helping authorities improve public services, optimise resource consumption, enhance public safety, and support sustainability goals. The combination of intelligent automation and connected infrastructure creates smarter communities that are better equipped to meet future demands.',
    ],
    benefits: [
      'Real-time monitoring and intelligent data analytics',
      'Predictive maintenance and automated decision-making',
      'Improved operational efficiency and cost reduction',
      'Enhanced asset management and resource optimisation',
      'Scalable connectivity for millions of connected devices',
      'Increased security through proactive threat detection',
      'Supports Smart City innovation and sustainable development',
      'Enables data-driven business and operational strategies',
    ],
    footer: 'Unlock the potential of connected intelligence with AI-Driven IoT Technology that transforms data into smarter decisions, greater efficiency, and sustainable growth.',
    ideal: [
      'Smart cities',
      'Utilities',
      'Transportation networks',
      'Manufacturing facilities',
      'Healthcare providers',
      'Agriculture operations',
      'Commercial buildings',
      'Industrial campuses',
    ],
    viz: 'ai',
  },
  {
    title: 'Smart Pole Solutions',
    preview: 'Smarter infrastructure for connected cities with multifunctional smart poles and pods that combine connectivity, mobility, lighting, monitoring, and digital services into a single intelligent platform.',
    full: [
      'Smart Pole and Pod Solutions provide a versatile and future-ready platform for deploying next-generation connectivity, smart city applications, and digital infrastructure within urban and rural environments. By transforming traditional street furniture into intelligent, multi-purpose assets, smart poles and pods create a foundation for connected communities, enhanced public services, and sustainable city development.',
      'Designed to support a wide range of technologies, these solutions can integrate 4G/5G small cells, Wi-Fi access points, IoT sensors, CCTV cameras, environmental monitoring systems, public safety equipment, EV charging facilities, digital signage, and smart lighting within a single compact structure. This reduces street clutter while maximising infrastructure efficiency and delivering significant cost savings.',
      'Smart Poles and Pods play a critical role in Smart City initiatives by enabling real-time data collection, intelligent traffic management, public safety monitoring, air quality assessment, and enhanced digital services for citizens and businesses. Their modular design allows municipalities, utility providers, and network operators to deploy and scale services quickly while adapting to evolving technological requirements.',
      'Our solutions are engineered for seamless integration with existing infrastructure and can be customised to meet the specific needs of cities, campuses, transportation networks, commercial developments, and public spaces. With support for advanced connectivity and intelligent applications, Smart Pole and Pod Solutions help create safer, more efficient, and digitally connected environments.',
    ],
    benefits: [
      'Multi-functional infrastructure supporting multiple technologies',
      'Enables 4G, 5G, Wi-Fi, IoT, and Smart City applications',
      'Reduces street clutter through integrated design',
      'Supports intelligent traffic, environmental, and public safety systems',
      'Accelerates digital transformation and smart city development',
      'Scalable and modular architecture for future expansion',
      'Improved operational efficiency and sustainability',
      'Enhanced connectivity and digital services for communities',
    ],
    footer: 'Build the connected cities of tomorrow with Smart Pole and Pod Solutions that combine communications, intelligence, and public infrastructure into a single smart platform.',
    ideal: [
      'Smart cities',
      'Urban developers',
      'Local councils',
      'Telecom operators',
      'University campuses',
      'Transport networks',
      'Commercial developments',
      'Public spaces',
    ],
    chips: [
      '4G / 5G Small Cells',
      'Wi-Fi 6 Hotspots',
      'IoT Sensors',
      'Smart LED Lighting',
      'Environmental Monitoring',
      'CCTV & Public Safety',
      'EV Charging',
      'Digital Signage',
    ],
    viz: 'smartpole',
  },
  {
    title: 'Rapid Deploy Connectivity Solutions',
    preview: 'Fast, flexible, and reliable communication infrastructure designed for emergency response, remote locations, temporary deployments, and mission-critical operations.',
    full: [
      'Rapid Deploy Connectivity Solutions provide fast, flexible, and reliable communication infrastructure for locations and situations where traditional network deployments are impractical, time-consuming, or unavailable. Designed for temporary, emergency, remote, and high-demand environments, these solutions enable organisations to establish secure connectivity within hours rather than weeks or months.',
      'Leveraging technologies such as portable 4G/5G networks, satellite backhaul, mobile base stations, Wi-Fi systems, and edge computing platforms, Rapid Deploy Connectivity Solutions deliver immediate access to voice, data, IoT, and critical communications services. Whether supporting emergency response operations, construction sites, public events, military deployments, disaster recovery efforts, or temporary business facilities, these solutions ensure uninterrupted connectivity wherever it is needed.',
      'Our deployable platforms are engineered for mobility, scalability, and resilience, allowing organisations to rapidly expand network coverage, increase capacity, or restore communications in challenging environments. With support for private networks, public network integration, and Smart City applications, they provide a versatile foundation for both short-term and long-term connectivity requirements.',
      'By enabling rapid communications deployment, organisations can maintain operational continuity, improve coordination, enhance public safety, and support mission-critical services without the delays associated with conventional infrastructure projects.',
    ],
    benefits: [
      'Fast deployment and immediate network availability',
      'Portable and scalable connectivity solutions',
      'Supports 4G, 5G, Wi-Fi, satellite, and private networks',
      'Ideal for emergency response, disaster recovery, and temporary sites',
      'Reliable communications in remote and challenging environments',
      'Secure connectivity for mission-critical operations',
      'Flexible architecture tailored to specific operational needs',
      'Enables rapid support for Smart City and public service initiatives',
    ],
    footer: 'Stay connected when and where it matters most with Rapid Deploy Connectivity Solutions that deliver resilient, high-performance communications on demand.',
    ideal: [
      'Emergency response teams',
      'Disaster recovery operations',
      'Construction sites',
      'Public events',
      'Military deployments',
      'Remote connectivity projects',
      'Temporary business facilities',
      'Public sector organisations',
    ],
    chips: [
      '5-Minute Deployment',
      '4G / 5G Networks',
      'Satellite Backhaul',
      'Private Networks',
      'Wi-Fi Connectivity',
      'Edge Computing',
      'Portable Infrastructure',
      'Mission-Critical Communications',
    ],
    viz: 'rapiddeploy',
  },
];

const MiniViz = ({ kind }) => {
  const common = { width: '100%', height: '100%', position: 'absolute', inset: 0 };
  if (kind === 'indoor') {
    return (
      <svg viewBox="0 0 200 150" style={common}>
        <rect x="20" y="20" width="160" height="110" fill="none" stroke="rgba(255,255,255,0.2)" />
        <line x1="20" y1="65" x2="180" y2="65" stroke="rgba(255,255,255,0.15)" />
        <line x1="20" y1="100" x2="180" y2="100" stroke="rgba(255,255,255,0.15)" />
        <line x1="70" y1="20" x2="70" y2="130" stroke="rgba(255,255,255,0.15)" />
        <line x1="130" y1="20" x2="130" y2="130" stroke="rgba(255,255,255,0.15)" />
        {[[45,42],[100,42],[155,42],[45,82],[100,82],[155,82],[45,115],[100,115],[155,115]].map(([x,y],i) => (
          <g key={i}>
            <circle cx={x} cy={y} r="3" fill="#00D4FF"><animate attributeName="opacity" values="1;0.3;1" dur="1.8s" repeatCount="indefinite" begin={`${i*0.15}s`}/></circle>
            <circle cx={x} cy={y} r="9" fill="none" stroke="rgba(0,212,255,0.3)" />
          </g>
        ))}
      </svg>
    );
  }
  if (kind === 'p5g') {
    return (
      <svg viewBox="0 0 200 150" style={common}>
        <g transform="translate(100, 75)">
          <text textAnchor="middle" y="6" fontFamily="Poppins" fontSize="26" fontWeight="600" fill="#4DA8FF">5G</text>
          <circle r="40" fill="none" stroke="rgba(0,123,255,0.4)" />
          <circle r="55" fill="none" stroke="rgba(0,123,255,0.25)" />
          <circle r="70" fill="none" stroke="rgba(0,123,255,0.12)" />
          <circle r="30" fill="none" stroke="#00D4FF">
            <animate attributeName="r" values="30;70;70" dur="2.4s" repeatCount="indefinite"/>
            <animate attributeName="opacity" values="0.9;0;0" dur="2.4s" repeatCount="indefinite"/>
          </circle>
        </g>
      </svg>
    );
  }
  if (kind === 'neutral') {
    return (
      <svg viewBox="0 0 200 150" style={common}>
        <circle cx="100" cy="75" r="22" fill="rgba(0,123,255,0.2)" stroke="#4DA8FF" strokeWidth="1"/>
        <text x="100" y="79" textAnchor="middle" fontFamily="'IBM Plex Mono', monospace" fontSize="9" fill="#fff">HUB</text>
        {[0,1,2,3].map(i => {
          const angle = (i*90 - 45) * Math.PI/180;
          const x = 100 + Math.cos(angle) * 55;
          const y = 75 + Math.sin(angle) * 55;
          const colors = ['#00D4FF','#4DA8FF','#007BFF','#9CC8FF'];
          return (
            <g key={i}>
              <line x1="100" y1="75" x2={x} y2={y} stroke={colors[i]} strokeWidth="1" opacity="0.5"/>
              <circle cx={x} cy={y} r="10" fill="rgba(10,31,68,0.6)" stroke={colors[i]} strokeWidth="1"/>
              <text x={x} y={y+3} textAnchor="middle" fontFamily="'IBM Plex Mono', monospace" fontSize="8" fill={colors[i]}>OP{i+1}</text>
            </g>
          );
        })}
      </svg>
    );
  }
  if (kind === 'repeater') {
    return (
      <svg viewBox="0 0 200 150" style={common}>
        {[20, 60, 100, 140].map(x => (
          <rect key={x} x={x-12} y="100" width="24" height="3" fill="#4DA8FF" />
        ))}
        {[1, 2, 3, 4].map((bar, i) => (
          <rect key={i} x={120 + i*12} y={80-i*10} width="8" height={15+i*10} fill="#00D4FF" opacity={0.4 + i*0.15}/>
        ))}
        <g stroke="rgba(0,212,255,0.5)" strokeWidth="1" fill="none">
          <path d="M30 100 Q30 80 50 80 Q70 80 70 100" />
          <path d="M70 100 Q70 70 90 70 Q110 70 110 100" />
        </g>
      </svg>
    );
  }
  if (kind === 'ai') {
    return (
      <svg viewBox="0 0 200 150" style={common}>
        <circle cx="100" cy="75" r="20" fill="rgba(0,123,255,0.25)" stroke="#00D4FF"/>
        <text x="100" y="79" textAnchor="middle" fontFamily="Poppins" fontSize="11" fontWeight="600" fill="#fff">AI</text>
        {[0,72,144,216,288].map((deg, i) => {
          const angle = (deg - 90) * Math.PI/180;
          const x = 100 + Math.cos(angle)*45;
          const y = 75 + Math.sin(angle)*45;
          return (
            <g key={i}>
              <line x1="100" y1="75" x2={x} y2={y} stroke="rgba(0,212,255,0.4)"/>
              <circle cx={x} cy={y} r="6" fill="rgba(10,31,68,0.8)" stroke="#4DA8FF"/>
              <circle cx={x} cy={y} r="2" fill="#00D4FF">
                <animate attributeName="opacity" values="1;0.3;1" dur={`${1.5+i*0.2}s`} repeatCount="indefinite"/>
              </circle>
            </g>
          );
        })}
      </svg>
    );
  }
  if (kind === 'smartpole') {
    return (
      <svg viewBox="0 0 210 130" style={common}>
        <rect x="96" y="35" width="8" height="90" rx="4"
              fill="rgba(0,123,255,0.35)"
              stroke="#00D4FF" />
        <circle cx="100" cy="28" r="7"
                fill="rgba(0,212,255,0.18)"
                stroke="#00D4FF" />
        {[16, 26, 36].map((r, i) => (
          <path key={i} d={`M ${100-r} 30 A ${r} ${r} 0 0 1 ${100+r} 30`}
            fill="none" stroke="rgba(0,212,255,0.5)" strokeWidth="1.5">
            <animate attributeName="opacity" values="0.2;1;0.2" dur={`${1.5 + i * 0.3}s`} repeatCount="indefinite"/>
          </path>
        ))}
        <line x1="100" y1="52" x2="132" y2="52" stroke="#ffffff" strokeWidth="2" />
        <rect x="132" y="48" width="16" height="8" rx="2"
              fill="rgba(255,255,180,0.5)" stroke="#FFD966">
          <animate attributeName="opacity" values="0.6;1;0.6" dur="2s" repeatCount="indefinite"/>
        </rect>
        <rect x="82" y="78" width="12" height="18" rx="2"
              fill="rgba(10,31,68,0.9)" stroke="#4DA8FF" />
        <path d="M88 82 L84 89 H88 L86 94" fill="none" stroke="#00D4FF" strokeWidth="1.5" />
        {[0,1,2].map((n) => (
          <path key={n}
            d={`M ${72 - n*4} ${62 + n*4} A ${12 + n*5} ${12 + n*5} 0 0 1 ${96 + n*4} ${62 + n*4}`}
            fill="none" stroke="rgba(0,212,255,0.45)" strokeWidth="1.4" />
        ))}
        <circle cx="84" cy="76" r="2.5" fill="#00D4FF" />
        <circle cx="116" cy="88" r="7" fill="rgba(0,123,255,0.18)" stroke="#4DA8FF" />
        <circle cx="116" cy="88" r="2" fill="#00D4FF">
          <animate attributeName="r" values="2;4;2" dur="1.8s" repeatCount="indefinite"/>
        </circle>
        <line x1="100" y1="70" x2="84" y2="76" stroke="rgba(0,212,255,0.25)" strokeDasharray="3 3" />
        <line x1="100" y1="78" x2="116" y2="88" stroke="rgba(0,212,255,0.25)" strokeDasharray="3 3" />
      </svg>
    );
  }
  if (kind === 'rapiddeploy') {
    return (
      <svg viewBox="0 0 210 130" style={common}>
        <rect x="78" y="82" width="44" height="28" rx="4"
              fill="rgba(10,31,68,0.9)" stroke="#4DA8FF" />
        <rect x="72" y="70" width="56" height="10" rx="2"
              fill="rgba(0,212,255,0.18)" stroke="#00D4FF" />
        <line x1="100" y1="82" x2="100" y2="42" stroke="#ffffff" strokeWidth="2" />
        {[18, 28, 38].map((r, i) => (
          <path key={i} d={`M ${100-r} 48 A ${r} ${r} 0 0 1 ${100+r} 48`}
            fill="none" stroke="rgba(0,212,255,0.5)" strokeWidth="1.5">
            <animate attributeName="opacity" values="0.2;1;0.2" dur={`${1.5 + i * 0.4}s`} repeatCount="indefinite"/>
          </path>
        ))}
        <g transform="translate(145 28)">
          <rect width="12" height="8" fill="rgba(0,123,255,0.25)" stroke="#00D4FF" />
          <line x1="-8" y1="4" x2="0" y2="4" stroke="#4DA8FF" />
          <line x1="12" y1="4" x2="20" y2="4" stroke="#4DA8FF" />
        </g>
        <line x1="145" y1="36" x2="108" y2="58" stroke="rgba(0,212,255,0.3)" strokeDasharray="3 3">
          <animate attributeName="opacity" values="0.2;1;0.2" dur="2s" repeatCount="indefinite"/>
        </line>
        {[40, 58, 160].map((x, i) => (
          <circle key={i} cx={x} cy={100 - i * 10} r="4" fill="#00D4FF">
            <animate attributeName="r" values="3;5;3" dur={`${1.2 + i * 0.3}s`} repeatCount="indefinite"/>
          </circle>
        ))}
      </svg>
    );
  }
  return null;
};

const SolutionsPage = () => (
  <>
    <PageHero
      eyebrow="Solutions"
      title="Advanced connectivity solutions."
      sub="Innovative technologies designed for modern communication environments — built around the way your organisation actually operates."
      image="assets/3.png"
    />
    <section className="section section--grey">
      <div className="container">
        <div className="solutions-stack">
          {SOLUTIONS.map((s, i) => (
            <div className="solution-row" key={s.title}>
              <div className="solution-row__viz">
                <MiniViz kind={s.viz} />
              </div>
              <div className="solution-row__content">
                <h3>{s.title}</h3>

                {/* Use ExpandableBody if full paragraphs exist, else plain preview */}
                {s.full && s.full.length > 0 ? (
                  <ExpandableBody
                    preview={s.preview}
                    full={s.full}
                    benefits={s.benefits}
                    footer={s.footer}
                  />
                ) : (
                  <p>{s.preview}</p>
                )}

                {s.ideal && (
                  <>
                    <div style={{ fontSize: 12.5, fontWeight: 600, color: 'var(--grey-500)', letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: 8, marginTop: 14 }}>
                      Ideal for
                    </div>
                    <div className="service-row__chips">
                      {s.ideal.map(c => <span key={c}>{c}</span>)}
                    </div>
                  </>
                )}

                {s.chips && (
                  <div className="service-row__chips" style={{ marginTop: 10 }}>
                    {s.chips.map(c => <span key={c}>{c}</span>)}
                  </div>
                )}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  </>
);

// =================== INDUSTRIES PAGE ===================
const INDUSTRIES = [
  { Ico: IcoHospital,    name: 'NHS & Healthcare',       body: 'Advanced connectivity and IoT technologies supporting smarter healthcare environments and operational efficiency.' },
  { Ico: IcoPlane,       name: 'Airports & Transport',   body: 'Reliable telecom infrastructure for high-demand transport and operational environments.' },
  { Ico: IcoBuilding,    name: 'Local Authorities',      body: 'Cost-effective telecom and smart infrastructure solutions supporting digital transformation initiatives.' },
  { Ico: IcoBriefcase,   name: 'Commercial & Enterprise',body: 'Future-ready wireless infrastructure designed for modern business operations and smart buildings.' },
  { Ico: IcoTower, name: 'Telecom Operators', body: 'End-to-end infrastructure support for network operators — from site acquisition and design through to deployment, optimisation, and ongoing maintenance.' },
];

const IndustriesPage = () => (
  <>
    <PageHero
      eyebrow="Industries we support"
      title="Connectivity for critical UK sectors."
      sub="Delivering intelligent telecom and connectivity solutions across the industries that underpin everyday life — healthcare, transport, public services, and enterprise."
      image="assets/2.png"
    />
    <section className="section">
      <div className="container">
        <div className="industries-grid">
          {INDUSTRIES.map(({ Ico, name, body }) => (
            <div className="industry-card" key={name}>
              <div className="industry-card__icon">
                <Ico size={28} />
              </div>
              <h3>{name}</h3>
              <p>{body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  </>
);

// =================== CAREERS PAGE ===================
const CAREER_WHY = [
  'Career development opportunities',
  'Innovative telecom projects',
  'Technology-driven culture',
  'Nationwide project exposure',
  'Collaborative working environment',
];

const ROLES = [
  { title: 'Telecom Engineers', loc: 'UK-wide · Field' },
  { title: 'Telecom Riggers', loc: 'UK-wide · Field' },
  { title: 'Design Engineers', loc: 'Redditch / Hybrid' },
  { title: 'Project Managers', loc: 'UK-wide · Hybrid' },
  { title: 'Software Developers', loc: 'Redditch / Remote' },
  { title: 'Field Engineers', loc: 'UK-wide · Field' },
];

const CareersPage = () => (
  <>
    <PageHero
      eyebrow="Careers"
      title="Join the Eminencetel team."
      sub="Build your future with a company delivering next-generation telecom and intelligent connectivity solutions."
      image="assets/1.png"
    />
    <section className="section">
      <div className="container">
        <div className="section__head">
          <span className="eyebrow">Why work with us</span>
          <h2 className="section__title">A career in modern telecom.</h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 16, marginBottom: 80 }}>
          {CAREER_WHY.map((w, i) => (
            <div key={w} style={{
              padding: '24px 20px',
              background: 'var(--grey-50)',
              borderRadius: 'var(--r-md)',
              border: '1px solid var(--grey-200)'
            }}>
              <div style={{ color: 'var(--electric)', fontFamily: 'var(--font-display)', fontSize: 13, fontWeight: 600, marginBottom: 12 }}></div>
              <div style={{ fontFamily: 'var(--font-display)', fontSize: 15, fontWeight: 600, color: 'var(--navy)', lineHeight: 1.35 }}>{w}</div>
            </div>
          ))}
        </div>

        <div className="section__head">
          <span className="eyebrow">Current opportunities</span>
          <h2 className="section__title">Open roles.</h2>
        </div>
        <div className="careers-grid" style={{ marginTop: 0 }}>
          {ROLES.map(r => (
            <div className="career-card" key={r.title}>
              <div>
                <h4>{r.title}</h4>
                <span>{r.loc}</span>
              </div>
              <IcoArrowRight size={18} style={{ color: 'var(--electric)' }} />
            </div>
          ))}
        </div>

        <div style={{
          marginTop: 80,
          padding: '48px',
          background: 'linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%)',
          color: 'white',
          borderRadius: 'var(--r-lg)',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between',
          gap: 32,
          flexWrap: 'wrap'
        }}>
          <div>
            <div style={{ color: 'var(--electric-glow)', fontSize: 13, fontWeight: 600, letterSpacing: '0.12em', textTransform: 'uppercase', marginBottom: 12 }}>Apply</div>
            <h3 style={{ color: 'white', fontSize: 28, marginBottom: 10 }}>Send your CV.</h3>
            <p style={{ color: 'rgba(255,255,255,0.7)', maxWidth: 480 }}>
              Don't see the right role? We're always interested in hearing from talented telecom professionals and software engineers.
            </p>
          </div>
          <a href="mailto:hr@eminencetel.co.uk" className="btn btn--primary">
            hr@eminencetel.co.uk <IcoArrowRight size={16} className="btn__arrow" />
          </a>
        </div>
      </div>
    </section>
  </>
);

// =================== CONTACT PAGE ===================
const ContactPage = () => {
  const [form, setForm] = React.useState({
    name: '', company: '', email: '', phone: '', service: '', message: ''
  });
  const [errors, setErrors] = React.useState({});
  const [submitted, setSubmitted] = React.useState(false);

  const update = (field) => (e) => {
    setForm(f => ({ ...f, [field]: e.target.value }));
    if (errors[field]) setErrors(er => ({ ...er, [field]: null }));
  };

  const validate = () => {
    const er = {};
    if (!form.name.trim()) er.name = 'Please enter your full name';
    if (!form.email.trim()) er.email = 'Email is required';
    else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email)) er.email = 'Please enter a valid email';
    if (!form.message.trim()) er.message = 'Please share a few details about your enquiry';
    return er;
  };

  const onSubmit = (e) => {
    e.preventDefault();
    const er = validate();
    setErrors(er);
    if (Object.keys(er).length === 0) {
      setSubmitted(true);
    }
  };

  return (
    <>
      <PageHero
        eyebrow="Contact us"
        title="Let's discuss your connectivity requirements."
        sub="Whether you're scoping a new deployment, planning a refresh, or exploring AI-driven IoT — our team is ready to help."
        image="assets/5.png"
      />
      <section className="section">
        <div className="container">
          <div className="contact-grid">
            <div className="contact-info">
              <div className="contact-info__block">
                <div className="contact-info__label">Head office</div>
                <div className="contact-info__value">
                  Unit 9<br />
                  The Cobalt centre<br />
                  Siskin Parkway East<br />
                  Coventry<br />
                  CV3 4PE<br />
                </div>
              </div>
              <div className="contact-info__block">
                <div className="contact-info__label">General enquiries</div>
                <div className="contact-info__value">
                  <a href="mailto:info@eminencetel.co.uk">info@eminencetel.co.uk</a>
                </div>
              </div>
              <div className="contact-info__block">
                <div className="contact-info__label">Careers</div>
                <div className="contact-info__value">
                  <a href="mailto:hr@eminencetel.co.uk">hr@eminencetel.co.uk</a>
                </div>
              </div>
            </div>

            <form className="contact-form" onSubmit={onSubmit} noValidate>
              {submitted ? (
                <div className="form-success">
                  <div className="form-success__icon">
                    <IcoCheck size={32} />
                  </div>
                  <h3>Message received.</h3>
                  <p>Thanks {form.name.split(' ')[0]} — our team will respond within one working day.</p>
                </div>
              ) : (
                <>
                  <div className="form-row">
                    <div className="form-field">
                      <label htmlFor="cf-name">Full name *</label>
                      <input id="cf-name" type="text" value={form.name} onChange={update('name')}
                        className={errors.name ? 'has-error' : ''} placeholder="Jane Smith" />
                      {errors.name && <span className="form-error">{errors.name}</span>}
                    </div>
                    <div className="form-field">
                      <label htmlFor="cf-company">Company name</label>
                      <input id="cf-company" type="text" value={form.company} onChange={update('company')} placeholder="Acme Health Trust" />
                    </div>
                  </div>

                  <div className="form-row">
                    <div className="form-field">
                      <label htmlFor="cf-email">Email address *</label>
                      <input id="cf-email" type="email" value={form.email} onChange={update('email')}
                        className={errors.email ? 'has-error' : ''} placeholder="jane@company.co.uk" />
                      {errors.email && <span className="form-error">{errors.email}</span>}
                    </div>
                    <div className="form-field">
                      <label htmlFor="cf-phone">Phone number</label>
                      <input id="cf-phone" type="tel" value={form.phone} onChange={update('phone')} placeholder="+44 ..." />
                    </div>
                  </div>

                  <div className="form-field">
                    <label htmlFor="cf-service">Service required</label>
                    <select id="cf-service" value={form.service} onChange={update('service')}>
                      <option value="">Select a service…</option>
                      <option>Private 5G installation</option>
                      <option>Indoor multi-operator coverage</option>
                      <option>Neutral host infrastructure</option>
                      <option>Repeater & signal enhancement</option>
                      <option>AI-driven IoT</option>
                      <option>Site acquisition</option>
                      <option>Telecom design</option>
                      <option>Infrastructure deployment</option>
                      <option>Maintenance & support</option>
                      <option>Other / not sure</option>
                    </select>
                  </div>

                  <div className="form-field">
                    <label htmlFor="cf-message">Message *</label>
                    <textarea id="cf-message" value={form.message} onChange={update('message')}
                      className={errors.message ? 'has-error' : ''}
                      placeholder="Tell us about your project, environment, and timeline…" />
                    {errors.message && <span className="form-error">{errors.message}</span>}
                  </div>

                  <button type="submit" className="btn btn--primary" style={{ width: '100%' }}>
                    Send message <IcoArrowRight size={16} className="btn__arrow" />
                  </button>
                </>
              )}
            </form>
          </div>
        </div>
      </section>
    </>
  );
};

Object.assign(window, {
  PageHero, AboutPage, ServicesPage, SolutionsPage, IndustriesPage, CareersPage, ContactPage,
});