// Nav, Hero, Trust/logos, Stats, Services, WhyUs, Testimonials, FinalCTA, Footer

const Nav = ({ onToggleMobile, mobileOpen }) => {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <nav className={`nav ${scrolled ? 'scrolled' : ''}`}>
      <div className="container nav-inner">
        <a href="#" className="brand">
          <span className="brand-mark">W</span>
          <span>Warmonks <span className="brand-suffix">UK</span></span>
        </a>
        <div className="nav-links">
          <a href="#services" className="nav-link">Services</a>
          <a href="#work" className="nav-link">Work</a>
          <a href="#process" className="nav-link">Process</a>
          <a href="#testimonials" className="nav-link">Clients</a>
          <a href="#why" className="nav-link">Why us</a>
          <button className="nav-link nav-link-btn" onClick={() => window.__openContact?.()}>Contact us</button>
        </div>
        <div className="nav-cta">
          <a href="#work" className="btn btn-secondary">View work</a>
          <a href="#contact" className="btn btn-primary" onClick={(e) => { e.preventDefault(); window.__openBooking?.(); }}>Book a call <Icon name="arrowRight" size={16} /></a>
          <button className="mobile-toggle" aria-label="Menu" onClick={onToggleMobile}>
            <Icon name={mobileOpen ? 'close' : 'menu'} size={20} />
          </button>
        </div>
      </div>
    </nav>
  );
};

const MobileSheet = ({ open, onClose }) => (
  <div className={`mobile-sheet ${open ? 'open' : ''}`}>
    {['Services', 'Work', 'Process', 'Clients', 'Why us'].map(l => (
      <a key={l} href={`#${l.toLowerCase().replace(' ', '')}`} onClick={onClose}>{l}</a>
    ))}
    <button className="mobile-sheet-contact" onClick={() => { onClose(); window.__openContact?.(); }}>Contact us</button>
    <a href="#contact" className="btn btn-primary" onClick={(e) => { e.preventDefault(); onClose(); window.__openBooking?.(); }}>Book a free consultation</a>
  </div>
);

const Hero = () => (
  <section className="hero">
    <div className="container">
      <div className="hero-grid">
        <div>
          <span className="eyebrow reveal" style={{transitionDelay: '0.05s'}}><span className="dot"></span>UK-based · Trusted by 80+ small businesses</span>
          <h1 className="reveal" style={{marginTop: '22px', transitionDelay: '0.15s'}}>
            Affordable websites &amp; <span className="accent">digital growth</span> for UK businesses.
          </h1>
          <p className="sub reveal" style={{transitionDelay: '0.25s'}}>We help electricians, care homes, restaurants and local SMEs launch professional websites, improve visibility, and generate more enquiries — without the huge upfront costs.</p>
          <div className="hero-ctas reveal" style={{transitionDelay: '0.35s'}}>
            <a href="#contact" className="btn btn-primary" onClick={(e) => { e.preventDefault(); window.__openBooking?.(); }}>Book free consultation <Icon name="arrowRight" size={16} /></a>
            <a href="#work" className="btn btn-secondary">View our work</a>
          </div>
          <div className="hero-meta reveal" style={{transitionDelay: '0.42s'}}>
            <span className="item"><Icon name="check" size={16} /> No huge upfront costs</span>
            <span className="item"><Icon name="check" size={16} /> Cancel anytime</span>
            <span className="item"><Icon name="check" size={16} /> UK-based support</span>
          </div>
        </div>
        <div className="hero-visual reveal" style={{transitionDelay: '0.2s'}}>
          <img src="images/hero-banner.png" alt="Warmonks hero" className="hero-img" />
        </div>
      </div>
    </div>
  </section>
);

const HeroDashboard = () => (
  <div className="mockup">
    <div className="mockup-bar">
      <span className="dot"></span><span className="dot"></span><span className="dot"></span>
      <div className="urlbar"><span className="lock">●</span>warmonks.co.uk/dashboard</div>
    </div>
    <div className="mockup-body">
      <div className="dash-head">
        <div>
          <div className="dash-title">Overview · Last 30 days</div>
          <div className="dash-h">Bramley Electrical, Manchester</div>
        </div>
        <span className="pill"><span className="dot"></span>Site live</span>
      </div>
      <div className="dash-stats">
        <div className="stat-card"><div className="l">Enquiries</div><div className="v">142</div><div className="d">↑ 24%</div></div>
        <div className="stat-card"><div className="l">Visitors</div><div className="v">3,418</div><div className="d">↑ 38%</div></div>
        <div className="stat-card"><div className="l">Calls</div><div className="v">61</div><div className="d">↑ 12%</div></div>
      </div>
      <div className="dash-chart">
        <div className="chart-head">
          <span className="label">Enquiries by week</span>
          <span className="legend">
            <span><span className="swatch" style={{background:'#2F6BFF'}}></span>This month</span>
            <span><span className="swatch" style={{background:'#C9D3E5'}}></span>Last</span>
          </span>
        </div>
        <DashChart />
      </div>
      <div className="dash-list">
        <div className="row">
          <div className="left"><div className="badge">L</div><div>New form submission · Leeds</div></div>
          <div className="right">2m ago</div>
        </div>
        <div className="row">
          <div className="left"><div className="badge">B</div><div>Phone call · Birmingham</div></div>
          <div className="right">14m ago</div>
        </div>
        <div className="row">
          <div className="left"><div className="badge">M</div><div>WhatsApp enquiry · Manchester</div></div>
          <div className="right">38m ago</div>
        </div>
      </div>
    </div>
  </div>
);

const DashChart = () => {
  // Build a clean two-series chart
  const points = [22, 38, 30, 52, 44, 68, 58, 82];
  const prev =   [18, 26, 24, 32, 30, 38, 36, 44];
  const w = 360, h = 86, pad = 6;
  const max = 100;
  const toPath = (arr) => arr.map((v, i) => {
    const x = pad + (i * (w - pad * 2)) / (arr.length - 1);
    const y = h - pad - (v / max) * (h - pad * 2);
    return `${i === 0 ? 'M' : 'L'} ${x.toFixed(1)} ${y.toFixed(1)}`;
  }).join(' ');
  const toArea = (arr) => {
    const line = arr.map((v, i) => {
      const x = pad + (i * (w - pad * 2)) / (arr.length - 1);
      const y = h - pad - (v / max) * (h - pad * 2);
      return `${i === 0 ? 'M' : 'L'} ${x.toFixed(1)} ${y.toFixed(1)}`;
    }).join(' ');
    return `${line} L ${w - pad} ${h - pad} L ${pad} ${h - pad} Z`;
  };
  return (
    <svg width="100%" height={h} viewBox={`0 0 ${w} ${h}`} preserveAspectRatio="none" style={{display: 'block', marginTop: 8}}>
      <defs>
        <linearGradient id="gA" x1="0" x2="0" y1="0" y2="1">
          <stop offset="0%" stopColor="#2F6BFF" stopOpacity="0.18"/>
          <stop offset="100%" stopColor="#2F6BFF" stopOpacity="0"/>
        </linearGradient>
      </defs>
      <path d={toArea(points)} fill="url(#gA)" />
      <path d={toPath(prev)} stroke="#C9D3E5" strokeWidth="1.5" fill="none" strokeDasharray="3 3" />
      <path d={toPath(points)} stroke="#2F6BFF" strokeWidth="2" fill="none" strokeLinecap="round" />
      {points.map((v, i) => {
        const x = pad + (i * (w - pad * 2)) / (points.length - 1);
        const y = h - pad - (v / max) * (h - pad * 2);
        return <circle key={i} cx={x} cy={y} r="2.4" fill="#fff" stroke="#2F6BFF" strokeWidth="1.6" />;
      })}
    </svg>
  );
};

const TrustLogos = () => {
  const logos = [
    { src: 'images/beelovera.png',          alt: 'Beelovera' },
    { src: 'images/gamex.png',              alt: 'GameX' },
    { src: 'images/ideal-care.png',         alt: 'Ideal Care' },
    { src: 'images/ideal-live-n-care.png',  alt: 'Ideal Live N Care' },
    { src: 'images/rbs-auditors.png',       alt: 'RBS Auditors' },
  ];
  const pairs = [];
  for (let i = 0; i < logos.length; i += 2) pairs.push(logos.slice(i, i + 2));
  return (
    <section className="trust" style={{padding: '64px 0 24px'}}>
      <div className="container">
        <div className="trust-head reveal">Trusted by UK small businesses across the country</div>
        <div className="reveal" style={{transitionDelay: '0.1s'}}>
        <Carousel trackClassName="logos" interval={3500}>
          {pairs.map((pair, idx) => (
            <div key={idx} className="logo-slide">
              {pair.map(logo => (
                <div key={logo.alt} className="logo-slot">
                  <img src={logo.src} alt={logo.alt} />
                </div>
              ))}
            </div>
          ))}
        </Carousel>
        </div>
      </div>
    </section>
  );
};

const Stats = () => {
  const items = [
    { v: '120', plus: '+', l: 'Projects delivered for UK businesses' },
    { v: '80', plus: '+', l: 'Active UK clients on monthly plans' },
    { v: '14', plus: ' days', l: 'Typical launch time, start to finish' },
    { v: '4.9', plus: '/5', l: 'Average client rating · 60 reviews' },
  ];
  return (
    <section className="stats">
      <div className="container">
        <div className="stats-grid">
          {items.map((s, i) => (
            <div className="stat reveal" key={i}>
              <div className="v">{s.v}<span className="plus">{s.plus}</span></div>
              <div className="l">{s.l}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const ServiceDrawer = ({ service, open, onClose }) => (
  <>
    <div className={`drawer-overlay${open ? ' open' : ''}`} onClick={onClose} />
    <div className={`service-drawer${open ? ' open' : ''}`} role="dialog" aria-modal="true">
      <div className="drawer-header">
        <span className="section-eyebrow" style={{marginBottom: 0}}>Service {service.tag}</span>
        <button className="drawer-close" onClick={onClose} aria-label="Close panel">
          <Icon name="close" size={16} />
        </button>
      </div>
      <div className="drawer-body">
        <span className="drawer-icon"><Icon name={service.ic} size={26} /></span>
        <h2 className="drawer-title">{service.title}</h2>
        <p className="drawer-detail">{service.detail}</p>
        <div className="drawer-ctas">
          <a href="#contact" className="btn btn-primary" onClick={(e) => { e.preventDefault(); onClose(); window.__openBooking?.(); }}>
            Book a free consultation <Icon name="arrowRight" size={16} />
          </a>
          <a href="#" className="btn btn-secondary">
            <Icon name="whatsapp" size={16} /> WhatsApp us
          </a>
        </div>
      </div>
    </div>
  </>
);

const Services = () => {
  const items = [
    {
      ic: 'laptop', tag: '01', title: 'Business websites',
      body: 'Fast, modern websites designed to convert visitors into enquiries — built to reflect your trade.',
      detail: `We build fast, mobile-first websites on proven stacks — WordPress, custom HTML/CSS, or headless — designed around your customers' search intent and trust signals. Every site is GDPR compliant, includes on-page SEO from day one, and is built to convert visitors into real enquiries. We handle design, copywriting direction, and launch — you just approve and go live.`,
    },
    {
      ic: 'refresh', tag: '02', title: 'Subscription plans',
      body: 'Launch from £12 a month. Hosting, updates and small changes included. No huge upfront cost.',
      detail: `No large upfront bill and no surprise invoices. Your monthly subscription covers UK-based hosting, an SSL certificate, security patches, plugin updates, and up to an hour of small content changes each month. Plans start from £12/month and you can scale up, pause, or cancel with 30 days' notice — your domain always stays yours, no lock-in.`,
    },
    {
      ic: 'seo', tag: '03', title: 'Local SEO',
      body: 'Rank for the searches your customers actually type — "electrician near me", "care home Leeds".',
      detail: `We research the exact phrases your local customers type into Google, then optimise your pages, meta titles, schema markup, and internal links so you consistently rank above national chains that don't understand your area. You'll receive plain-English monthly reports showing exactly where you've climbed, with clear next steps.`,
    },
    {
      ic: 'pin', tag: '04', title: 'Google Business Profile',
      body: 'Get found on Google Maps. We set up, optimise and manage your profile for steady local enquiries.',
      detail: 'Most local searches end at the Maps result — before anyone visits a website. We claim or clean up your Google Business Profile, upload professional photos, write keyword-rich service descriptions, and set up a reliable process for gathering five-star reviews. Monthly maintenance keeps your listing accurate and signals to Google that your business is active and trusted.',
    },
    {
      ic: 'chat', tag: '05', title: 'Social media management',
      body: 'Posts, replies and ad campaigns that build trust on Instagram, Facebook and LinkedIn.',
      detail: 'Consistent, on-brand posting across Instagram, Facebook, and LinkedIn — written in your voice, not agency-speak. We handle content creation, scheduling, comment replies, and targeted ad campaigns within your budget. A monthly analytics summary shows reach, engagement, and leads generated, without drowning you in dashboards.',
    },
    {
      ic: 'cart', tag: '06', title: 'Ecommerce development',
      body: 'Sell online with a clean, fast Shopify or WooCommerce store — wired up to Stripe and Royal Mail.',
      detail: 'We build and configure Shopify or WooCommerce stores optimised for UK conversion — Stripe and PayPal payments, Royal Mail and courier shipping integrations, and VAT-ready product pages. Every store is tested on mobile and across browsers before launch, and includes a 60-day post-launch support window to handle real-world tweaks once customers start buying.',
    },
  ];

  const [active, setActive] = React.useState(null);
  const [open, setOpen] = React.useState(false);

  const openDrawer = React.useCallback((item) => setActive(item), []);
  const closeDrawer = React.useCallback(() => {
    setOpen(false);
    setTimeout(() => setActive(null), 320);
  }, []);

  React.useEffect(() => {
    window.__openService = (title) => {
      const svc = items.find(s => s.title === title);
      if (svc) openDrawer(svc);
    };
    return () => { delete window.__openService; };
  }, [openDrawer]);

  React.useEffect(() => {
    if (!active) return;
    const raf = requestAnimationFrame(() => setOpen(true));
    return () => cancelAnimationFrame(raf);
  }, [active]);

  React.useEffect(() => {
    if (!open) return;
    const onKey = (e) => { if (e.key === 'Escape') closeDrawer(); };
    window.addEventListener('keydown', onKey);
    document.body.style.overflow = 'hidden';
    return () => {
      window.removeEventListener('keydown', onKey);
      document.body.style.overflow = '';
    };
  }, [open, closeDrawer]);

  return (
    <section className="services" id="services">
      <div className="container">
        <div className="section-head reveal">
          <div className="sh-row">
            <div>
              <span className="section-eyebrow">Services</span>
              <h2 style={{marginTop: '14px'}}>Everything a UK small business needs to grow online.</h2>
            </div>
            <a href="#work" className="btn btn-primary head-cta">View our work <Icon name="arrowRight" size={16} /></a>
          </div>
        </div>
        <div className="reveal" style={{transitionDelay: '0.12s'}}>
          <Carousel trackClassName="services-grid">
            {items.map((s) => (
              <div className="service-card" key={s.title} onClick={() => openDrawer(s)}>
                <span className="tag">{s.tag}</span>
                <span className="ic"><Icon name={s.ic} size={22} /></span>
                <h3>{s.title}</h3>
                <p>{s.body}</p>
                <span className="more">Learn more <Icon name="arrowRight" size={14} /></span>
              </div>
            ))}
          </Carousel>
        </div>
      </div>
      {active && <ServiceDrawer service={active} open={open} onClose={closeDrawer} />}
    </section>
  );
};

const WhyUs = () => {
  const items = [
    { ic: 'gbp', t: 'Affordable pricing', d: 'Honest fixed monthly fees from £12. No surprise invoices, no agency rates.' },
    { ic: 'shield', t: 'UK focused support', d: 'Based in the UK, working UK hours. We understand your customers and your council.' },
    { ic: 'bolt', t: 'Fast delivery', d: 'Most starter sites are live in under 14 days. We move at small-business speed.' },
    { ic: 'refresh', t: 'Flexible monthly plans', d: 'Scale up or down whenever the business changes. Cancel anytime, your domain stays yours.' },
    { ic: 'chat', t: 'Friendly communication', d: 'One named contact, plain English, replies on WhatsApp or email within a working day.' },
    { ic: 'sparkle', t: 'Ongoing support', d: `We don't disappear after launch. Updates, fixes and small changes included on every plan.` },
  ];
  return (
    <section className="why" id="why">
      <div className="container">
        <div className="section-head reveal">
          <div className="sh-row">
            <div>
              <span className="section-eyebrow">Why Warmonks</span>
              <h2 style={{marginTop: '14px'}}>Built for the realities of a UK small business.</h2>
            </div>
            <p style={{margin: 0}}>We're a small team that does the work ourselves — no offshoring, no junior account handlers, no padded retainers.</p>
          </div>
        </div>
        <div className="reveal" style={{transitionDelay: '0.12s'}}>
          <Carousel trackClassName="why-grid" interval={4000}>
            {items.map((it, i) => (
              <div className="why-cell" key={i}>
                <span className="ic"><Icon name={it.ic} size={20} /></span>
                <h3>{it.t}</h3>
                <p>{it.d}</p>
              </div>
            ))}
          </Carousel>
        </div>
      </div>
    </section>
  );
};

const VideoModal = ({ onClose }) => {
  React.useEffect(() => {
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    document.addEventListener('keydown', onKey);
    return () => document.removeEventListener('keydown', onKey);
  }, [onClose]);
  return (
    <div
      style={{position:'fixed',inset:0,background:'rgba(0,0,0,0.85)',zIndex:9999,display:'flex',alignItems:'center',justifyContent:'center'}}
      onClick={onClose}
    >
      <div
        style={{position:'relative',width:'min(860px,92vw)',aspectRatio:'16/9'}}
        onClick={(e) => e.stopPropagation()}
      >
        <button
          onClick={onClose}
          aria-label="Close video"
          style={{position:'absolute',top:'-36px',right:0,background:'none',border:'none',color:'#fff',fontSize:'24px',cursor:'pointer',lineHeight:1}}
        >&#x2715;</button>
        <iframe
          src="https://www.youtube.com/embed/9xwazD5SyVg?autoplay=1"
          title="Daniel Bramley testimonial"
          allow="autoplay; encrypted-media"
          allowFullScreen
          style={{width:'100%',height:'100%',border:'none',borderRadius:'12px'}}
        />
      </div>
    </div>
  );
};

const Testimonials = () => {
  const [videoOpen, setVideoOpen] = React.useState(false);
  const items = [
    {
      quote: `"The new website finally reflects the quality of our care services. Families can easily find information, make enquiries, and connect with us. The whole process was smooth from start to finish."`,
      name: 'Jayan', role: 'Owner · Ideal Care', initials: 'JY',
    },
    {
      quote: '"The new website captures the atmosphere of our venue perfectly. Guests can easily explore menus, events, and booking options, which has improved the overall customer experience."',
      name: 'Priya Shah', role: 'Manager · The Star of the East', initials: 'PS',
    },
    {
      quote: '"Our website now gives families and caregivers a much better experience. The design is clean, easy to navigate, and perfectly represents our supported living services."',
      name: `Jayan`, role: 'Owner · Ideal Live N Care', initials: 'JY',
    },
    {
      quote: '"The team transformed our ideas into a polished online store. The website is fast, modern, and makes it easy for customers to browse and purchase products."',
      name: 'Mei Tan', role: 'Beelovera · Beauty Brand', initials: 'BD',
    },
    {
      quote: '"From design to launch, everything was handled professionally. The website helps us showcase our gaming platform while providing users with a seamless experience across devices."',
      name: 'Anoob', role: 'Founder · Gamex', initials: 'AN',
    },
  ];
  return (
    <>
    {videoOpen && <VideoModal onClose={() => setVideoOpen(false)} />}
    <section id="testimonials">
      <div className="container">
        <div className="section-head reveal">
          <div className="sh-row">
            <div>
              <span className="section-eyebrow">Clients</span>
              <h2 style={{marginTop: '14px'}}>Trusted by trades, care homes and shops across the UK.</h2>
            </div>
            <a href="#contact" className="btn btn-primary head-cta">Read all reviews <Icon name="arrowRight" size={14} /></a>
          </div>
        </div>
        <div className="reveal" style={{transitionDelay: '0.12s'}}>
        <Carousel trackClassName="testi-grid" interval={5500}>
          <div className="video-testi" onClick={() => setVideoOpen(true)} style={{cursor:'pointer'}}>
            <img src="images/portfolio/jayan-image.jpg" alt="Jayan" className="v-thumb" />
            <div className="v-overlay" />
            <div className="play"><Icon name="play" size={24} /></div>
            <div className="v-content">
              <div className="v-meta">VIDEO TESTIMONIAL · 1:42</div>
              <div className="v-quote" style={{marginTop: 12}}>"The website feels professional, trustworthy, and makes it easy for families to get in touch."</div>
              <div className="v-who">
                <div className="av">JY</div>
                <div>
                  <div style={{color:'#fff', fontWeight: 600}}>Jayan</div>
                  <div>Founder · Ideal Care</div>
                </div>
              </div>
            </div>
          </div>
          {items.slice(0, 4).map((t, i) => (
            <div className="testi-card" key={i}>
              <div className="stars">
                {[0,1,2,3,4].map(n => <Icon key={n} name="star" size={14} />)}
              </div>
              <div className="quote">{t.quote}</div>
              <div className="who">
                <div className="avatar">{t.initials}</div>
                <div>
                  <div className="name">{t.name}</div>
                  <div className="role">{t.role}</div>
                </div>
              </div>
            </div>
          ))}
        </Carousel>
        </div>
      </div>
    </section>
    </>
  );
};

const FinalCTA = () => (
  <section className="final-cta" id="contact">
    <div className="container">
      <h2 className="reveal">Let's build your business online.</h2>
      <p className="reveal" style={{transitionDelay: '0.1s'}}>Affordable websites and digital growth solutions, designed for UK businesses. Book a free 20-minute call — no sales pressure, just honest advice.</p>
      <div className="cta-row reveal" style={{transitionDelay: '0.2s'}}>
        <a href="#" className="btn btn-blue" onClick={(e) => { e.preventDefault(); window.__openBooking?.(); }}>Book a free consultation <Icon name="arrowRight" size={16} /></a>
        <a href="#" className="btn btn-secondary"><Icon name="whatsapp" size={16} /> WhatsApp us</a>
      </div>
      <div className="cta-meta reveal" style={{transitionDelay: '0.3s'}}>
        <span className="item"><Icon name="check" size={14} /> Reply within one working day</span>
        <span className="item"><Icon name="check" size={14} /> Fixed monthly pricing, no surprises</span>
        <span className="item"><Icon name="check" size={14} /> UK team, real people</span>
      </div>
    </div>
  </section>
);

const FooterCol = ({ id, title, openKey, setOpenKey, children }) => {
  const open = openKey === id;
  return (
    <div className={`footer-col ${open ? 'open' : ''}`}>
      <button className="footer-col-head" aria-expanded={open}
        onClick={() => setOpenKey(open ? null : id)}>
        <h4>{title}</h4>
        <span className="acc-chevron"><Icon name="arrowRight" size={16} /></span>
      </button>
      <div className="acc-body">
        {children}
      </div>
    </div>
  );
};

const Footer = () => {
  const [openKey, setOpenKey] = React.useState('services');
  return (
    <footer>
      <div className="container">
        <div className="footer-grid">
          <div className="footer-brand">
            <a href="#" className="brand">
              <span className="brand-mark">W</span>
              <span>Warmonks <span className="brand-suffix">UK</span></span>
            </a>
            <p>We help UK trades, care homes and local businesses get found online &mdash; professional websites, local SEO and real support from a team that actually picks up the phone.</p>
          </div>
          <FooterCol id="services" title="Services" openKey={openKey} setOpenKey={setOpenKey}>
            <ul>
              {[
                'Business websites',
                'Subscription plans',
                'Local SEO',
                'Google Business Profile',
                'Social media management',
                'Ecommerce development',
              ].map(name => (
                <li key={name}>
                  <a href="#services" onClick={(e) => { e.preventDefault(); window.__openService?.(name); }}>{name}</a>
                </li>
              ))}
            </ul>
          </FooterCol>
          <FooterCol id="company" title="Company" openKey={openKey} setOpenKey={setOpenKey}>
            <ul>
              <li><a href="#services">Services</a></li>
              <li><a href="#work">Work</a></li>
              <li><a href="#process">Process</a></li>
              <li><a href="#testimonials">Clients</a></li>
              <li><a href="#why">Why us</a></li>
              <li><a href="#" onClick={(e) => { e.preventDefault(); window.__openContact?.(); }}>Contact us</a></li>
            </ul>
          </FooterCol>
          <FooterCol id="contact" title="Get in touch" openKey={openKey} setOpenKey={setOpenKey}>
            <ul>
              <li><a href="mailto:hello@warmonks.co.uk"><Icon name="mail" size={14} /> &nbsp;hello@warmonks.co.uk</a></li>
              <li><a href="tel:+441234567890"><Icon name="phone" size={14} /> &nbsp;+44 (0) 1234 567 890</a></li>
              <li><a href="#"><Icon name="whatsapp" size={14} /> &nbsp;Message on WhatsApp</a></li>
            </ul>
          </FooterCol>
        </div>
        <div className="footer-bottom">
          <div>© 2026 Warmonks.</div>
          <div className="socials">
            <a href="#" aria-label="LinkedIn"><Icon name="linkedin" size={16} /></a>
            <a href="#" aria-label="Instagram"><Icon name="instagram" size={16} /></a>
            <a href="#" aria-label="Twitter"><Icon name="twitter" size={16} /></a>
          </div>
        </div>
      </div>
    </footer>
  );
};

const ContactModal = ({ onClose }) => {
  React.useEffect(() => {
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', onKey);
    document.body.style.overflow = 'hidden';
    return () => {
      window.removeEventListener('keydown', onKey);
      document.body.style.overflow = '';
    };
  }, [onClose]);

  const items = [
    { ic: 'phone',    label: 'Phone',     value: '+44 (0) 1234 567 890',    href: 'tel:+441234567890' },
    { ic: 'whatsapp', label: 'WhatsApp',  value: 'Message us on WhatsApp',  href: '#' },
    { ic: 'mail',     label: 'Email',     value: 'hello@warmonks.co.uk',    href: 'mailto:hello@warmonks.co.uk' },
    { ic: 'pin',      label: 'Address',   value: '123 High Street, Manchester, M1 1AB, United Kingdom', href: null },
  ];

  return (
    <div className="modal-wrap" onClick={(e) => { if (e.target === e.currentTarget) onClose(); }}>
      <div className="contact-modal" role="dialog" aria-modal="true" aria-label="Contact us">
        <div className="contact-modal-header">
          <div>
            <span className="section-eyebrow" style={{marginBottom: 0}}>Get in touch</span>
            <h2 className="contact-modal-title">Contact us</h2>
          </div>
          <button className="drawer-close" onClick={onClose} aria-label="Close">
            <Icon name="close" size={16} />
          </button>
        </div>
        <div className="contact-modal-body">
          <p style={{marginBottom: '24px'}}>We'd love to hear from you. Reach out via any of the channels below — we typically reply within one working day.</p>
          <div className="contact-items">
            {items.map((item) => (
              <div className="contact-item" key={item.label}>
                <span className="contact-item-ic"><Icon name={item.ic} size={20} /></span>
                <div>
                  <div className="contact-item-label">{item.label}</div>
                  {item.href
                    ? <a href={item.href} className="contact-item-value">{item.value}</a>
                    : <div className="contact-item-value">{item.value}</div>
                  }
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { Nav, MobileSheet, Hero, TrustLogos, Stats, Services, WhyUs, Testimonials, FinalCTA, Footer, ContactModal });