// RFPS Services Inc — Homepage.
// Content lives inside a max-width 1200px wrapper. Uses Royal Fire visual DNA
// (deep navy, coral leaf, red accent). Adds motion, scroll-reveal, hover states,
// a sticky nav, an animated portal-dashboard infographic, and expanded content.

// The five service sub-pages. Reused by:
//   1. The 'Services' entry in NAV_ITEMS (dropdown)
//   2. The homepage Services accordion (link-through)
//   3. Each sub-page's related-services strip
// Keep this list in sync with the service-subpage configs.
const SERVICE_LINKS = [
  { tag: '01', label: 'Inspections & Testing',   href: 'Inspections-Testing.html' },
  { tag: '02', label: 'Maintenance & Service',   href: 'Maintenance-Service.html' },
  { tag: '03', label: 'Retrofits & Upgrades',    href: 'Retrofits-Upgrades.html'  },
  { tag: '04', label: '24/7 Emergency Response', href: 'Emergency-Response.html'  },
  { tag: '05', label: 'Backflow Prevention',     href: 'Backflow-Prevention.html' },
];

const ABOUT_LINKS = [
  { tag: '01', label: 'About RFPS',    href: 'About.html' },
  { tag: '02', label: 'Our Team',      href: 'Our-Team.html' },
  { tag: '03', label: 'How We Work',   href: 'How-We-Work.html' },
];

const NAV_ITEMS = [
  { label: 'About',       href: 'About.html', children: ABOUT_LINKS },
  { label: 'Services',    href: 'Services.html', children: SERVICE_LINKS },
  { label: 'Careers',     href: 'Careers.html' },
  { label: 'Resources',   href: 'Blog.html' },
  { label: 'Contact',     href: 'Contact.html' },
];

const CLIENT_PORTAL_URL = 'https://royalfire.com/portal';

// ============================================================================
// BOOKING MODAL — full-form popup, opens when user clicks "Book an Inspection"
// ============================================================================
const BookingContext = React.createContext({ open: false, setOpen: () => {} });

function useBooking() { return React.useContext(BookingContext); }

function BookingProvider({ children }) {
  const [open, setOpen] = React.useState(false);
  React.useEffect(() => {
    const onKey = (e) => { if (e.key === 'Escape') setOpen(false); };
    if (open) {
      document.addEventListener('keydown', onKey);
      document.body.style.overflow = 'hidden';
    }
    return () => {
      document.removeEventListener('keydown', onKey);
      document.body.style.overflow = '';
    };
  }, [open]);
  return (
    <BookingContext.Provider value={{ open, setOpen }}>
      {children}
      {open && <BookingModal onClose={() => setOpen(false)}/>}
    </BookingContext.Provider>
  );
}

function BookingModal({ onClose }) {
  const [step, setStep] = React.useState(1);
  const [form, setForm] = React.useState({
    service: '',
    urgency: 'planned',
    name: '', company: '', email: '', phone: '',
    address: '', buildings: '1', systems: [], notes: '',
    consent: false
  });
  const toggleSystem = (s) => setForm(f => ({...f, systems: f.systems.includes(s) ? f.systems.filter(x=>x!==s) : [...f.systems, s]}));
  const setF = (k, v) => setForm(f => ({...f, [k]: v}));

  const services = [
    { id: 'inspection', title: 'Annual Inspection', body: 'Full NFPA-25 inspection with signed report.', icon: IconInspection },
    { id: 'monthly',    title: 'Monthly/Quarterly', body: 'Recurring inspection cycle for critical systems.', icon: IconCal },
    { id: 'retrofit',   title: 'Retrofit Quote',    body: 'Scope a sprinkler / standpipe upgrade.', icon: IconRetrofit },
    { id: 'emergency',  title: 'Service Call',       body: 'Repair, follow-up or non-urgent service.', icon: IconMaintenance },
  ];
  const systemOptions = ['Wet sprinkler', 'Dry sprinkler', 'Standpipe', 'Fire pump', 'Backflow', 'Kitchen suppression', 'Special hazard (CO₂/FM-200)', 'Fire extinguishers'];

  return (
    <div
      onClick={onClose}
      style={{
        position:'fixed', inset: 0, zIndex: 100,
        background:'rgba(6,20,38,0.75)', backdropFilter:'blur(6px)',
        display:'flex', alignItems:'center', justifyContent:'center',
        padding: 20,
        animation:'fadeIn 0.25s ease-out'
      }}>
      <div
        onClick={e => e.stopPropagation()}
        style={{
          background:'#fff', width:'100%', maxWidth: 880, maxHeight:'92vh', overflow:'auto',
          borderRadius: 10, display:'grid', gridTemplateColumns:'320px 1fr',
          boxShadow:'0 30px 80px rgba(0,0,0,0.5)',
          animation:'fadeUp 0.35s ease-out'
        }}>
        {/* Left rail — brand pane */}
        <div style={{background:'#0B213A', color:'#fff', padding:'32px 28px', display:'flex', flexDirection:'column', gap: 24, position:'relative', overflow:'hidden'}}>
          <div style={{position:'absolute', top:-40, right:-30, opacity: 0.08}}>
            <MapleLeafSimple size={220} color="#E5A9B0" strokeWidth={2}/>
          </div>
          <div style={{position:'relative'}}>
            <RFPSLogo variant="light" size="sm"/>
          </div>
          <div style={{position:'relative'}}>
            <div style={{fontFamily:'Inter', fontSize: 11, fontWeight: 600, letterSpacing:'0.28em', color:'#F5A524', marginBottom: 12}}>
              BOOK AN INSPECTION
            </div>
            <h2 style={{fontFamily:'"Archivo Black", sans-serif', fontSize: 26, lineHeight: 1.05, margin: 0, letterSpacing:'-0.01em'}}>
              Get a quote in 5&nbsp;business days.
            </h2>
            <p style={{fontFamily:'Inter', fontSize: 13, lineHeight: 1.6, color:'#DDE3EA', marginTop: 14, margin:'14px 0 0'}}>
              Tell us about your property. A licensed tech follows up within one business day
              to scope the walkthrough — no sales pressure.
            </p>
          </div>
          {/* Steps indicator */}
          <div style={{position:'relative', display:'flex', flexDirection:'column', gap: 12, marginTop: 8}}>
            {['Service type', 'Property details', 'Contact'].map((label, i) => {
              const num = i + 1;
              const active = step === num;
              const done = step > num;
              return (
                <div key={label} style={{display:'flex', alignItems:'center', gap: 12}}>
                  <div style={{
                    width: 24, height: 24, borderRadius:'50%',
                    background: done ? '#F5A524' : (active ? '#E22227' : 'rgba(255,255,255,0.1)'),
                    color: done ? '#0B213A' : '#fff',
                    display:'flex', alignItems:'center', justifyContent:'center',
                    fontFamily:'"Archivo Black", sans-serif', fontSize: 11,
                    transition: 'background 0.3s ease'
                  }}>
                    {done ? '✓' : num}
                  </div>
                  <span style={{fontFamily:'Inter', fontSize: 13, fontWeight: active ? 700 : 500, color: active ? '#fff' : (done ? '#F5A524' : '#8B95A3')}}>{label}</span>
                </div>
              );
            })}
          </div>
          <div style={{marginTop:'auto', position:'relative', paddingTop: 20, borderTop:'1px solid rgba(255,255,255,0.1)', fontFamily:'Inter', fontSize: 11.5, color:'#8B95A3', lineHeight: 1.6}}>
            <div style={{color:'#F5A524', fontWeight: 700, letterSpacing:'0.14em', marginBottom: 6}}>NEED IT TODAY?</div>
            <div>Call our 24/7 line —</div>
            <a href="tel:6135916506" style={{color:'#fff', fontWeight: 700, textDecoration:'none'}}>613 · 591 · 6506</a>
          </div>
        </div>

        {/* Right — form pane */}
        <div style={{padding:'32px 34px', display:'flex', flexDirection:'column', minHeight: 520, position:'relative'}}>
          {/* Close */}
          <button onClick={onClose} style={{
            all:'unset', cursor:'pointer', position:'absolute', top: 16, right: 20,
            width: 32, height: 32, borderRadius:'50%', background:'#F5F1EA',
            display:'flex', alignItems:'center', justifyContent:'center'
          }}
          onMouseEnter={e=>e.currentTarget.style.background='#E4E7EB'}
          onMouseLeave={e=>e.currentTarget.style.background='#F5F1EA'}>
            <svg width="12" height="12" viewBox="0 0 12 12"><path d="M2 2 L10 10 M10 2 L2 10" stroke="#0B213A" strokeWidth="1.6" strokeLinecap="round"/></svg>
          </button>

          {step === 1 && (
            <div style={{animation:'fadeUp 0.3s ease-out'}}>
              <h3 style={{fontFamily:'"Archivo Black", sans-serif', fontSize: 22, margin:'0 0 6px', color:'#0B213A', letterSpacing:'-0.01em'}}>What can we help with?</h3>
              <p style={{fontFamily:'Inter', fontSize: 13, color:'#64707D', margin:'0 0 20px'}}>Pick the service that best fits — you can add detail on the next step.</p>
              <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap: 10}}>
                {services.map(s => {
                  const Icon = s.icon;
                  const selected = form.service === s.id;
                  return (
                    <button key={s.id} onClick={() => setF('service', s.id)} style={{
                      all:'unset', cursor:'pointer', padding:'16px 14px',
                      background: selected ? '#0B213A' : '#F5F1EA',
                      color: selected ? '#fff' : '#0B213A',
                      border:`1px solid ${selected ? '#0B213A' : 'transparent'}`,
                      transition:'background 0.2s ease',
                      display:'flex', flexDirection:'column', gap: 8
                    }}>
                      <div style={{display:'flex', justifyContent:'space-between', alignItems:'center'}}>
                        <Icon size={22} color={selected ? '#F5A524' : '#12365A'}/>
                        {selected && <span style={{color:'#F5A524', fontFamily:'"Archivo Black", sans-serif', fontSize: 11}}>✓ SELECTED</span>}
                      </div>
                      <div style={{fontFamily:'"Archivo Black", sans-serif', fontSize: 14, letterSpacing:'-0.005em'}}>{s.title}</div>
                      <div style={{fontFamily:'Inter', fontSize: 12, color: selected ? '#C9CFD6' : '#64707D', lineHeight: 1.4}}>{s.body}</div>
                    </button>
                  );
                })}
              </div>
              <div style={{marginTop: 20}}>
                <label style={{fontFamily:'Inter', fontSize: 12, fontWeight: 600, letterSpacing:'0.14em', color:'#64707D', textTransform:'uppercase'}}>Urgency</label>
                <div style={{display:'flex', gap: 8, marginTop: 10}}>
                  {[
                    ['planned','Planned · flexible timing'],
                    ['soon','Within 30 days'],
                    ['urgent','Urgent · this week'],
                  ].map(([id, label]) => (
                    <button key={id} onClick={() => setF('urgency', id)} style={{
                      all:'unset', cursor:'pointer', padding:'10px 14px', flex: 1, textAlign:'center',
                      background: form.urgency === id ? '#E22227' : '#F5F1EA',
                      color: form.urgency === id ? '#fff' : '#0B213A',
                      fontFamily:'Inter', fontSize: 12, fontWeight: 600,
                      transition:'background 0.2s ease'
                    }}>
                      {label}
                    </button>
                  ))}
                </div>
              </div>
            </div>
          )}

          {step === 2 && (
            <div style={{animation:'fadeUp 0.3s ease-out'}}>
              <h3 style={{fontFamily:'"Archivo Black", sans-serif', fontSize: 22, margin:'0 0 6px', color:'#0B213A', letterSpacing:'-0.01em'}}>Tell us about the property.</h3>
              <p style={{fontFamily:'Inter', fontSize: 13, color:'#64707D', margin:'0 0 20px'}}>Rough details are fine — we'll confirm on the walkthrough.</p>
              <div style={{display:'grid', gridTemplateColumns:'2fr 1fr', gap: 12}}>
                <FormField label="Property address" placeholder="123 Main St, Ottawa, ON" value={form.address} onChange={v=>setF('address', v)}/>
                <FormField label="# of buildings" placeholder="1" value={form.buildings} onChange={v=>setF('buildings', v)}/>
              </div>
              <div style={{marginTop: 16}}>
                <label style={{fontFamily:'Inter', fontSize: 12, fontWeight: 600, letterSpacing:'0.14em', color:'#64707D', textTransform:'uppercase'}}>Systems on site (select all that apply)</label>
                <div style={{display:'flex', flexWrap:'wrap', gap: 6, marginTop: 10}}>
                  {systemOptions.map(s => {
                    const on = form.systems.includes(s);
                    return (
                      <button key={s} onClick={()=>toggleSystem(s)} style={{
                        all:'unset', cursor:'pointer',
                        padding:'8px 12px', fontFamily:'Inter', fontSize: 12, fontWeight: 500,
                        background: on ? '#0B213A' : '#F5F1EA',
                        color: on ? '#fff' : '#0B213A',
                        border: `1px solid ${on ? '#0B213A' : '#E4E7EB'}`,
                        transition:'background 0.2s ease'
                      }}>
                        {on ? '✓ ' : ''}{s}
                      </button>
                    );
                  })}
                </div>
              </div>
              <FormField label="Anything else we should know?" placeholder="Deficiency history, portfolio size, existing vendor…" textarea value={form.notes} onChange={v=>setF('notes', v)}/>
            </div>
          )}

          {step === 3 && (
            <div style={{animation:'fadeUp 0.3s ease-out'}}>
              <h3 style={{fontFamily:'"Archivo Black", sans-serif', fontSize: 22, margin:'0 0 6px', color:'#0B213A', letterSpacing:'-0.01em'}}>Who do we call back?</h3>
              <p style={{fontFamily:'Inter', fontSize: 13, color:'#64707D', margin:'0 0 20px'}}>One of our estimators will reach out within one business day.</p>
              <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap: 12}}>
                <FormField label="Full name" placeholder="Alex Chen" value={form.name} onChange={v=>setF('name', v)}/>
                <FormField label="Company" placeholder="Property Ops Inc." value={form.company} onChange={v=>setF('company', v)}/>
                <FormField label="Email" placeholder="alex@company.com" type="email" value={form.email} onChange={v=>setF('email', v)}/>
                <FormField label="Phone" placeholder="(613) 555-0100" type="tel" value={form.phone} onChange={v=>setF('phone', v)}/>
              </div>
              <label style={{display:'flex', gap: 10, alignItems:'flex-start', marginTop: 20, cursor:'pointer'}}>
                <input type="checkbox" checked={form.consent} onChange={e=>setF('consent', e.target.checked)} style={{marginTop: 3}}/>
                <span style={{fontFamily:'Inter', fontSize: 12, color:'#3A4552', lineHeight: 1.5}}>
                  Consent to being contacted by RFPS Services about this request. We don't
                  share your details, and we don't put you on a mailing list.
                </span>
              </label>
            </div>
          )}

          {step === 4 && (
            <div style={{animation:'fadeUp 0.4s ease-out', display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', textAlign:'center', flex: 1, gap: 20, padding: 20}}>
              <div style={{width: 84, height: 84, borderRadius:'50%', background:'#F5A524', display:'flex', alignItems:'center', justifyContent:'center'}}>
                <svg width="40" height="40" viewBox="0 0 40 40"><path d="M10 20 L18 28 L32 12" stroke="#0B213A" strokeWidth="3.5" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>
              </div>
              <h3 style={{fontFamily:'"Archivo Black", sans-serif', fontSize: 30, margin: 0, color:'#0B213A', letterSpacing:'-0.015em'}}>Request received.</h3>
              <p style={{fontFamily:'Inter', fontSize: 15, lineHeight: 1.6, color:'#3A4552', margin: 0, maxWidth: 360}}>
                A licensed estimator will reach out to <strong>{form.email || 'your inbox'}</strong> within
                one business day. If it's urgent, call our 24/7 line: <strong>613 · 591 · 6506</strong>.
              </p>
              <div style={{marginTop: 10, fontFamily:'Inter', fontSize: 12, color:'#64707D'}}>
                Reference: <span style={{fontFamily:'"Courier New", monospace', color:'#0B213A'}}>RFPS-{Date.now().toString(36).slice(-6).toUpperCase()}</span>
              </div>
              <button onClick={onClose} style={{
                marginTop: 14, background:'#0B213A', color:'#fff', border:'none',
                padding:'14px 24px', fontFamily:'Inter', fontWeight: 700, fontSize: 12,
                letterSpacing:'0.14em', textTransform:'uppercase', cursor:'pointer'
              }}>Close</button>
            </div>
          )}

          {/* Nav buttons */}
          {step < 4 && (
            <div style={{marginTop:'auto', paddingTop: 24, display:'flex', justifyContent:'space-between', alignItems:'center', gap: 10}}>
              <button onClick={()=>step > 1 ? setStep(step-1) : onClose()} style={{
                all:'unset', cursor:'pointer', fontFamily:'Inter', fontSize: 12, fontWeight: 600,
                letterSpacing:'0.14em', textTransform:'uppercase', color:'#64707D', padding: 8
              }}>
                {step === 1 ? '← Cancel' : '← Back'}
              </button>
              <button
                disabled={step === 1 && !form.service}
                onClick={() => step === 3 ? setStep(4) : setStep(step+1)}
                style={{
                  background: (step === 1 && !form.service) ? '#C9CFD6' : '#E22227',
                  color:'#fff', border:'none', padding:'14px 28px',
                  fontFamily:'Inter', fontWeight: 700, fontSize: 12, letterSpacing:'0.14em', textTransform:'uppercase',
                  cursor: (step === 1 && !form.service) ? 'not-allowed' : 'pointer',
                  transition:'background 0.2s ease',
                  display:'flex', alignItems:'center', gap: 10
                }}
                onMouseEnter={e=>{ if(!(step===1&&!form.service)) e.currentTarget.style.background='#B01A1E'; }}
                onMouseLeave={e=>{ if(!(step===1&&!form.service)) e.currentTarget.style.background='#E22227'; }}
              >
                {step === 3 ? 'Submit request' : 'Continue'} <span>→</span>
              </button>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

// Small form field component
function FormField({ label, placeholder, value, onChange, type='text', textarea=false }) {
  const [focused, setFocused] = React.useState(false);
  return (
    <label style={{display:'flex', flexDirection:'column', gap: 6, marginTop: 12}}>
      <span style={{fontFamily:'Inter', fontSize: 11, fontWeight: 600, letterSpacing:'0.14em', color:'#64707D', textTransform:'uppercase'}}>{label}</span>
      {textarea ? (
        <textarea
          rows={3} value={value} placeholder={placeholder}
          onChange={e=>onChange(e.target.value)}
          onFocus={()=>setFocused(true)} onBlur={()=>setFocused(false)}
          style={{
            padding:'12px 14px', fontFamily:'Inter', fontSize: 14, color:'#0B213A',
            background:'#F5F1EA',
            border:`1px solid ${focused ? '#0B213A' : 'transparent'}`,
            outline:'none', resize:'vertical', transition:'border-color 0.2s ease'
          }}/>
      ) : (
        <input
          type={type} value={value} placeholder={placeholder}
          onChange={e=>onChange(e.target.value)}
          onFocus={()=>setFocused(true)} onBlur={()=>setFocused(false)}
          style={{
            padding:'12px 14px', fontFamily:'Inter', fontSize: 14, color:'#0B213A',
            background:'#F5F1EA',
            border:`1px solid ${focused ? '#0B213A' : 'transparent'}`,
            outline:'none', transition:'border-color 0.2s ease'
          }}/>
      )}
    </label>
  );
}

// Scroll-in-view hook — adds a class when the element enters the viewport
function useInView(threshold = 0.15) {
  const ref = React.useRef(null);
  const [seen, setSeen] = React.useState(false);
  React.useEffect(() => {
    if (!ref.current || seen) return;
    const io = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) { setSeen(true); io.disconnect(); }
    }, { threshold });
    io.observe(ref.current);
    return () => io.disconnect();
  }, [seen, threshold]);
  return [ref, seen];
}

// ============================================================================
// TOP BAR — a slim red 24/7 emergency strip that sits above the nav
// ============================================================================
function TopEmergencyBar() {
  return (
    <div style={{background:'#E22227', color:'#fff', fontFamily:'Inter', fontSize: 12}}>
      <div style={{maxWidth: 1200, margin:'0 auto', padding:'8px 24px', display:'flex', alignItems:'center', justifyContent:'space-between', gap: 20}}>
        <div style={{display:'flex', alignItems:'center', gap: 10}}>
          <span style={{
            display:'inline-block', width: 8, height: 8, borderRadius:'50%', background:'#fff',
            animation:'pulseDot 2s ease-in-out infinite'
          }}/>
          <span style={{fontWeight: 600, letterSpacing:'0.06em'}}>24/7 EMERGENCY LINE</span>
          <span style={{opacity: 0.9}}>·  Ontario & Quebec</span>
        </div>
        <a href="tel:6135916506" style={{color:'#fff', textDecoration:'none', fontWeight:700, letterSpacing:'0.04em'}}>
          613&nbsp;·&nbsp;591&nbsp;·&nbsp;6506
        </a>
      </div>
    </div>
  );
}

// ============================================================================
// NAV DESKTOP ITEM — single nav link, or link + hover-dropdown if it has children
// ============================================================================
function NavDesktopItem({ item, hoverKey, setHoverKey }) {
  const hasDropdown = Array.isArray(item.children) && item.children.length > 0;
  const isOpen = hoverKey === item.label;
  const closeTimer = React.useRef(null);

  const openNow = () => {
    if (closeTimer.current) { clearTimeout(closeTimer.current); closeTimer.current = null; }
    setHoverKey(item.label);
  };
  const closeSoon = () => {
    closeTimer.current = setTimeout(() => setHoverKey(null), 140);
  };
  React.useEffect(() => () => { if (closeTimer.current) clearTimeout(closeTimer.current); }, []);

  return (
    <div
      style={{position:'relative'}}
      onMouseEnter={openNow}
      onMouseLeave={hasDropdown ? closeSoon : () => setHoverKey(null)}
    >
      <a
        href={item.href}
        style={{
          color:'#F5F1EA', fontFamily:'Inter', fontSize: 13, fontWeight: 500,
          letterSpacing:'0.06em', textTransform:'uppercase', textDecoration:'none',
          position:'relative', padding:'6px 0',
          opacity: hoverKey && hoverKey !== item.label ? 0.55 : 1,
          transition:'opacity 0.2s ease',
          display:'inline-flex', alignItems:'center', gap: 6,
        }}
      >
        {item.label}
        {hasDropdown && (
          <span style={{
            fontSize: 9, opacity: 0.8,
            transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)',
            transition:'transform 0.25s ease',
            display:'inline-block'
          }}>▾</span>
        )}
        <span style={{
          position:'absolute', left: 0, bottom: 0, height: 2,
          width: isOpen ? '100%' : 0,
          background:'#E22227', transition:'width 0.25s ease'
        }}/>
      </a>

      {hasDropdown && (
        <div
          role="menu"
          aria-hidden={!isOpen}
          style={{
            position:'absolute', top:'calc(100% + 14px)', left:'-14px', zIndex: 50,
            background:'rgba(6,20,38,0.98)',
            backdropFilter:'blur(14px)',
            border:'1px solid rgba(255,255,255,0.08)',
            minWidth: 320,
            padding:'8px 0',
            opacity: isOpen ? 1 : 0,
            transform: isOpen ? 'translateY(0)' : 'translateY(-6px)',
            pointerEvents: isOpen ? 'auto' : 'none',
            transition:'opacity 0.2s ease, transform 0.2s ease',
            boxShadow:'0 20px 50px rgba(0,0,0,0.35)',
          }}
        >
          {/* Small caret bridging the gap so mouse doesn't 'fall off' between label and menu */}
          <span style={{position:'absolute', top:-14, left: 24, width: 90, height: 14}}/>
          {item.children.map(child => (
            <NavDropdownLink key={child.href} child={child}/>
          ))}
        </div>
      )}
    </div>
  );
}

// A single dropdown row — dark panel, red rail on hover
function NavDropdownLink({ child }) {
  const [hover, setHover] = React.useState(false);
  return (
    <a
      href={child.href}
      role="menuitem"
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        display:'grid', gridTemplateColumns:'34px 1fr auto', alignItems:'center', gap: 14,
        padding:'12px 20px',
        color:'#F5F1EA', textDecoration:'none',
        fontFamily:'Inter', fontSize: 13, fontWeight: 500,
        letterSpacing:'0.03em',
        background: hover ? 'rgba(226,34,39,0.10)' : 'transparent',
        borderLeft: hover ? '3px solid #E22227' : '3px solid transparent',
        paddingLeft: hover ? 17 : 20,
        transition:'background 0.2s ease, border-color 0.2s ease, padding-left 0.2s ease',
      }}
    >
      <span style={{
        fontFamily:'"JetBrains Mono", "Archivo Black", sans-serif', fontSize: 11,
        fontWeight: 700, letterSpacing:'0.12em',
        color: hover ? '#F5A524' : 'rgba(245,241,234,0.5)'
      }}>{child.tag}</span>
      <span style={{whiteSpace:'nowrap'}}>{child.label}</span>
      <span style={{
        fontFamily:'"Archivo Black", sans-serif', fontSize: 14,
        color: hover ? '#E22227' : 'rgba(245,241,234,0.35)',
        transform: hover ? 'translateX(3px)' : 'translateX(0)',
        transition:'transform 0.2s ease, color 0.2s ease',
      }}>→</span>
    </a>
  );
}

// ============================================================================
// NAV DRAWER ITEM — mobile drawer entry, expands to show child links if present
// ============================================================================
function NavDrawerItem({ item, index, mobileOpen, onClose }) {
  const hasChildren = Array.isArray(item.children) && item.children.length > 0;
  const [expanded, setExpanded] = React.useState(false);
  const delay = 0.1 + index * 0.06;

  return (
    <div style={{
      borderBottom:'1px solid rgba(255,255,255,0.08)',
      transform: mobileOpen ? 'translateX(0)' : 'translateX(-20px)',
      opacity: mobileOpen ? 1 : 0,
      transition: `transform 0.4s ease ${delay}s, opacity 0.4s ease ${delay}s`,
    }}>
      <div style={{display:'flex', alignItems:'center'}}>
        <a
          href={item.href}
          onClick={onClose}
          style={{
            flex: 1,
            display:'block', padding:'20px 4px',
            color:'#F5F1EA', fontFamily:'"Archivo Black", sans-serif', fontSize: 28,
            letterSpacing:'-0.01em', textDecoration:'none',
          }}
        >
          <span style={{fontFamily:'Inter', fontSize: 12, color:'#E22227', letterSpacing:'0.24em', marginRight: 14, fontWeight: 700, verticalAlign:'middle'}}>
            0{index + 1}
          </span>
          {item.label}
        </a>
        {hasChildren && (
          <button
            aria-label={expanded ? `Collapse ${item.label}` : `Expand ${item.label}`}
            aria-expanded={expanded}
            onClick={() => setExpanded(v => !v)}
            style={{
              background:'transparent', border:'1px solid rgba(255,255,255,0.2)',
              width: 44, height: 44, cursor:'pointer', color:'#F5F1EA',
              display:'flex', alignItems:'center', justifyContent:'center',
              padding: 0, marginLeft: 8,
              fontFamily:'"Archivo Black", sans-serif', fontSize: 20,
              transform: expanded ? 'rotate(45deg)' : 'rotate(0deg)',
              transition:'transform 0.25s ease, background 0.2s ease'
            }}
          >
            +
          </button>
        )}
      </div>
      {hasChildren && (
        <div style={{
          maxHeight: expanded ? 600 : 0,
          overflow:'hidden',
          transition:'max-height 0.35s ease',
        }}>
          <div style={{padding:'6px 4px 22px 4px', display:'flex', flexDirection:'column', gap: 2}}>
            {item.children.map(child => (
              <a
                key={child.href}
                href={child.href}
                onClick={onClose}
                style={{
                  display:'grid', gridTemplateColumns:'40px 1fr auto', alignItems:'center', gap: 14,
                  padding:'14px 10px',
                  color:'#DDE3EA', textDecoration:'none',
                  fontFamily:'Inter', fontSize: 15, fontWeight: 500,
                  borderLeft:'2px solid rgba(226,34,39,0.35)',
                }}
              >
                <span style={{fontFamily:'"JetBrains Mono", monospace', fontSize: 11, color:'#F5A524', letterSpacing:'0.12em', fontWeight: 700}}>{child.tag}</span>
                <span>{child.label}</span>
                <span style={{color:'#E22227', fontFamily:'"Archivo Black", sans-serif'}}>→</span>
              </a>
            ))}
          </div>
        </div>
      )}
    </div>
  );
}

// ============================================================================
// NAV — sticky, transparent-to-solid on scroll
// ============================================================================
function Nav() {
  const { setOpen: setBookingOpen } = useBooking();
  const [scrolled, setScrolled] = React.useState(false);
  const [open, setOpen] = React.useState(null); // active dropdown
  const [mobileOpen, setMobileOpen] = React.useState(false);
  React.useEffect(() => {
    const el = document.getElementById('homepage-scroll') || window;
    const onScroll = () => {
      const y = el === window ? window.scrollY : el.scrollTop;
      setScrolled(y > 40);
    };
    el.addEventListener('scroll', onScroll);
    return () => el.removeEventListener('scroll', onScroll);
  }, []);
  React.useEffect(() => {
    if (mobileOpen) document.body.style.overflow = 'hidden';
    else document.body.style.overflow = '';
    return () => { document.body.style.overflow = ''; };
  }, [mobileOpen]);
  return (
    <div data-nav-root style={{
      position:'sticky', top: 0, zIndex: 40,
      background: scrolled ? 'rgba(6,20,38,0.96)' : 'rgba(6,20,38,0.85)',
      backdropFilter:'blur(14px)',
      borderBottom: scrolled ? '1px solid rgba(255,255,255,0.08)' : '1px solid rgba(255,255,255,0)',
      transition: 'background 0.3s ease, border-color 0.3s ease',
      color:'#fff'
    }}>
      <div data-nav-inner style={{maxWidth: 1200, margin:'0 auto', padding: scrolled ? '14px 24px' : '20px 24px', display:'flex', alignItems:'center', gap: 24, transition:'padding 0.3s ease'}}>
        <a href="index.html" aria-label="RFPS Services — home" style={{display:'inline-flex', textDecoration:'none'}}>
          <RFPSLogo variant="light" size="md"/>
        </a>
        <div style={{flex:1}}/>
        <nav data-nav-desktop style={{display:'flex', gap: 28}}>
          {NAV_ITEMS.map(n => (
            <NavDesktopItem
              key={n.label}
              item={n}
              hoverKey={open}
              setHoverKey={setOpen}
            />
          ))}
        </nav>
        <a data-nav-cta href={CLIENT_PORTAL_URL} target="_blank" rel="noopener noreferrer" style={{
          fontFamily:'Inter', fontWeight: 700, fontSize: 12, letterSpacing:'0.12em', textTransform:'uppercase',
          background:'#E22227', color:'#fff', border:'none', padding:'12px 20px', cursor:'pointer',
          display:'flex', alignItems:'center', gap: 10, marginLeft: 8, textDecoration:'none'
        }}
        onMouseEnter={e=>e.currentTarget.style.background='#B01A1E'}
        onMouseLeave={e=>e.currentTarget.style.background='#E22227'}
        >
          Client Portal <span>→</span>
        </a>
        {/* Mobile hamburger — hidden on desktop via CSS */}
        <button
          data-nav-hamburger
          aria-label={mobileOpen ? 'Close menu' : 'Open menu'}
          aria-expanded={mobileOpen}
          onClick={() => setMobileOpen(v => !v)}
          style={{
            display:'none',
            background:'transparent', border:'1px solid rgba(255,255,255,0.25)',
            width: 44, height: 44, padding: 0, cursor:'pointer',
            alignItems:'center', justifyContent:'center', flexDirection:'column', gap: 5,
            marginLeft: 'auto'
          }}>
          <span style={{display:'block', width: 20, height: 2, background:'#fff', transition:'transform 0.25s ease, opacity 0.25s ease', transform: mobileOpen ? 'translateY(7px) rotate(45deg)' : 'none'}}/>
          <span style={{display:'block', width: 20, height: 2, background:'#fff', transition:'opacity 0.2s ease', opacity: mobileOpen ? 0 : 1}}/>
          <span style={{display:'block', width: 20, height: 2, background:'#fff', transition:'transform 0.25s ease', transform: mobileOpen ? 'translateY(-7px) rotate(-45deg)' : 'none'}}/>
        </button>
      </div>

      {/* Mobile drawer */}
      <div data-nav-drawer aria-hidden={!mobileOpen} style={{
        display:'none',
        position:'fixed', top: 0, left: 0, right: 0, bottom: 0, zIndex: 39,
        background:'#061426',
        opacity: mobileOpen ? 1 : 0,
        pointerEvents: mobileOpen ? 'auto' : 'none',
        transition:'opacity 0.3s ease',
        paddingTop: 96, paddingLeft: 24, paddingRight: 24,
        flexDirection:'column', gap: 4,
        overflowY:'auto'
      }}>
        <div style={{position:'absolute', top:-40, right:-30, opacity: 0.08, pointerEvents:'none'}}>
          <MapleLeafSimple size={280} color="#E5A9B0" strokeWidth={2}/>
        </div>
        {NAV_ITEMS.map((n, i) => (
          <NavDrawerItem
            key={n.label}
            item={n}
            index={i}
            mobileOpen={mobileOpen}
            onClose={() => setMobileOpen(false)}
          />
        ))}
        <div style={{marginTop: 32, display:'flex', flexDirection:'column', gap: 12}}>
          <button
            onClick={() => { setMobileOpen(false); setBookingOpen(true); }}
            style={{
              background:'#E22227', color:'#fff', border:'none', padding:'18px 22px',
              fontFamily:'Inter', fontWeight:700, fontSize: 12, letterSpacing:'0.14em', textTransform:'uppercase',
              cursor:'pointer', display:'flex', alignItems:'center', justifyContent:'space-between'
            }}>
            Book an inspection <span>→</span>
          </button>
          <a
            href={CLIENT_PORTAL_URL}
            target="_blank"
            rel="noopener noreferrer"
            onClick={() => setMobileOpen(false)}
            style={{
              background:'transparent', color:'#fff', border:'1px solid rgba(255,255,255,0.3)',
              padding:'18px 22px',
              fontFamily:'Inter', fontWeight:600, fontSize: 12, letterSpacing:'0.14em', textTransform:'uppercase',
              cursor:'pointer', display:'flex', alignItems:'center', justifyContent:'space-between',
              textDecoration:'none'
            }}>
            Client portal <span>→</span>
          </a>
          <a href="tel:6135916506" style={{
            marginTop: 8,
            fontFamily:'Inter', fontSize: 13, color:'#DDE3EA', textDecoration:'none',
            display:'flex', alignItems:'center', gap: 12, padding:'12px 4px'
          }}>
            <IconPhone size={18} color="#F5A524"/>
            <div>
              <div style={{fontWeight: 700, color:'#fff'}}>613 · 591 · 6506</div>
              <div style={{fontSize: 11, color:'#8B95A3', letterSpacing:'0.14em', marginTop: 2}}>24/7 EMERGENCY LINE</div>
            </div>
          </a>
        </div>
      </div>
    </div>
  );
}

// ============================================================================
// HERO
// ============================================================================
function Hero() {
  const { setOpen } = useBooking();
  const [tick, setTick] = React.useState(0);
  React.useEffect(() => { const t = setInterval(() => setTick(x => x+1), 3200); return () => clearInterval(t); }, []);
  const words = ['fail.', 'wait.', 'compromise.', 'go dark.'];
  const word = words[tick % words.length];
  return (
    <section style={{position:'relative', background:'#061426', overflow:'hidden', minHeight: 720}}>
      {/* Video backdrop — autoplay, muted, loop, silent on iOS */}
      <video
        src="reference/rfps-hero.mp4"
        poster="reference/rf-hero-shot.jpg"
        autoPlay
        muted
        loop
        playsInline
        preload="auto"
        aria-hidden="true"
        style={{
          position:'absolute', inset: 0, width:'100%', height:'100%', objectFit:'cover',
          filter:'brightness(0.55) contrast(1.05)'
        }}
      />
      {/* Gradient overlay */}
      <div style={{position:'absolute', inset:0, background:'linear-gradient(90deg, rgba(6,20,38,0.9) 0%, rgba(6,20,38,0.55) 50%, rgba(6,20,38,0.15) 100%)'}}/>
      {/* Grid overlay */}
      <div style={{position:'absolute', inset:0, backgroundImage: 'linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px)', backgroundSize:'80px 80px'}}/>

      {/* Floating leaves — subtle ambient */}
      <div style={{position:'absolute', top: 100, right: '15%', opacity: 0.06, animation:'float 8s ease-in-out infinite'}}>
        <MapleLeafSimple size={280} color="#E5A9B0" strokeWidth={2}/>
      </div>

      <div style={{position:'relative', maxWidth: 1200, margin:'0 auto', padding:'110px 24px 90px', color:'#fff'}}>
        <div style={{display:'flex', alignItems:'center', gap: 14, marginBottom: 28, animation:'slideRight 0.6s ease-out'}}>
          <span style={{width: 40, height: 1, background:'#E22227'}}/>
          <span style={{fontFamily:'Inter', fontSize: 11, fontWeight: 600, letterSpacing:'0.36em', color:'#F5F1EA'}}>
            FIRE&nbsp;SAFETY · INSPECTION · SERVICE
          </span>
          <span style={{width: 6, height: 6, borderRadius:'50%', background:'#E22227'}}/>
          <span style={{fontFamily:'Inter', fontSize: 11, fontWeight: 600, letterSpacing:'0.28em', color:'#F5F1EA'}}>
            ONTARIO & QUEBEC
          </span>
        </div>
        <h1 style={{
          fontFamily:'"Archivo Black", "Arial Black", sans-serif',
          fontSize: 108, lineHeight: 0.92, margin: 0, letterSpacing:'-0.015em', color:'#fff',
          maxWidth: 940
        }}>
          The team you<br/>call when it<br/>
          <span style={{color:'#E22227', display:'inline-flex', alignItems:'baseline', gap: 8}}>
            can't&nbsp;
            <span key={word} style={{display:'inline-block', animation:'fadeUp 0.5s ease-out'}}>
              {word}
            </span>
          </span>
        </h1>
        <p style={{
          marginTop: 32, fontFamily:'Inter', fontSize: 18, lineHeight: 1.55, maxWidth: 560,
          color:'#DDE3EA', fontWeight: 400
        }}>
          Inspections, testing, retrofits, maintenance and 24/7 emergency response for
          fire protection systems across Ontario and Quebec. NFPA compliant. Fully documented. On time.
        </p>
        <div style={{display:'flex', gap: 14, marginTop: 40, alignItems:'center'}}>
          <button
            onClick={() => setOpen(true)}
            style={{
              background:'#E22227', color:'#fff', border:'none', padding:'18px 30px',
              fontFamily:'Inter', fontWeight:700, fontSize:13, letterSpacing:'0.14em', textTransform:'uppercase',
              cursor:'pointer', display:'flex', alignItems:'center', gap: 12,
              transition: 'transform 0.15s ease, background 0.2s ease'
            }}
            onMouseEnter={e=>{e.currentTarget.style.background='#B01A1E'; e.currentTarget.style.transform='translateY(-2px)';}}
            onMouseLeave={e=>{e.currentTarget.style.background='#E22227'; e.currentTarget.style.transform='translateY(0)';}}>
            Book an inspection <span style={{fontSize:16}}>→</span>
          </button>
          <a href="Services.html" style={{
            background:'transparent', color:'#fff', border:'1px solid rgba(255,255,255,0.35)', padding:'18px 30px',
            fontFamily:'Inter', fontWeight:600, fontSize:13, letterSpacing:'0.14em', textTransform:'uppercase',
            cursor:'pointer', transition:'background 0.2s ease', textDecoration:'none',
            display:'inline-flex', alignItems:'center', gap: 10
          }}
          onMouseEnter={e=>e.currentTarget.style.background='rgba(255,255,255,0.08)'}
          onMouseLeave={e=>e.currentTarget.style.background='transparent'}>
            See our services
          </a>
          <div style={{marginLeft: 12, display:'flex', alignItems:'center', gap: 10, opacity: 0.85}}>
            <div style={{display:'flex', gap: -4}}>
              {[0,1,2,3].map(i => (
                <div key={i} style={{width: 30, height: 30, borderRadius:'50%', background: ['#F5A524','#E5A9B0','#12365A','#4B6478'][i], border:'2px solid #061426', marginLeft: i>0 ? -10 : 0}}/>
              ))}
            </div>
            <div style={{fontFamily:'Inter', fontSize: 12, color:'#DDE3EA', lineHeight: 1.4}}>
              <div style={{fontWeight: 600}}>1,200+ inspections</div>
              <div style={{color:'#8B95A3'}}>completed in 2025</div>
            </div>
          </div>
        </div>
      </div>

      {/* Bottom brand ticker */}
      <div style={{position:'absolute', bottom: 0, left: 0, right: 0, background:'rgba(6,20,38,0.6)', borderTop:'1px solid rgba(255,255,255,0.08)', padding: '14px 0', overflow:'hidden'}}>
        <div style={{display:'flex', gap: 60, animation:'marquee 30s linear infinite', width:'max-content'}}>
          {[...Array(2)].map((_,r) => (
            <div key={r} style={{display:'flex', gap: 60, paddingRight: 60}}>
              {['NFPA 25','ULC S536','OFC O. Reg. 213/07','CSA B64.10','TSSA CERTIFIED','ISO 9001','SIA MEMBER','CFAA'].map(x => (
                <span key={x} style={{fontFamily:'Inter', fontSize: 12, letterSpacing:'0.22em', color:'#8B95A3', fontWeight: 600, whiteSpace:'nowrap'}}>
                  {x}
                </span>
              ))}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================================================
// STATS STRIP with count-up animation
// ============================================================================
function CountUp({ to, suffix = '', duration = 1600 }) {
  const [ref, seen] = useInView(0.3);
  const [n, setN] = React.useState(0);
  React.useEffect(() => {
    if (!seen) return;
    const start = performance.now();
    const raf = () => {
      const t = Math.min(1, (performance.now() - start) / duration);
      const ease = 1 - Math.pow(1 - t, 3);
      setN(Math.floor(to * ease));
      if (t < 1) requestAnimationFrame(raf);
    };
    requestAnimationFrame(raf);
  }, [seen, to, duration]);
  return <span ref={ref}>{n}{suffix}</span>;
}

function Stats() {
  const stats = [
    { n: 24, suffix:'/7', label:'Emergency response · always answered by a human' },
    { n: 1200, suffix:'+', label:'Inspections completed in 2025 across ON & QC' },
    { n: 2, suffix:'\u202FProvinces', label:'Ontario and Quebec coverage · 500 km radius', small: true },
    { n: 100, suffix:'%', label:'On-time inspection rate over the last 12 months' },
  ];
  return (
    <section style={{background:'#0B213A', color:'#fff'}}>
      <div style={{maxWidth: 1200, margin: '0 auto', padding:'0 24px', display:'grid', gridTemplateColumns:'repeat(4,1fr)'}}>
        {stats.map((s, i) => (
          <div key={i} style={{
            padding:'46px 28px',
            borderRight: i < 3 ? '1px solid rgba(255,255,255,0.08)' : 'none'
          }}>
            <div style={{fontFamily:'"Archivo Black", "Arial Black", sans-serif', fontWeight: 900, fontSize: s.small ? 40 : 52, letterSpacing:'-0.02em', lineHeight: 1, color:'#fff', whiteSpace:'nowrap'}}>
              <CountUp to={s.n} suffix={s.suffix}/>
            </div>
            <div style={{fontFamily:'Inter', fontSize: 12, letterSpacing:'0.08em', color:'#C9CFD6', marginTop: 12, lineHeight: 1.5, maxWidth: 210}}>{s.label}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

// ============================================================================
// SERVICES — expandable cards
// ============================================================================
function Services() {
  const { setOpen } = useBooking();
  const [active, setActive] = React.useState(0);
  const services = [
    {
      tag: '01',
      title: 'Inspections & Testing',
      href: 'Inspections-Testing.html',
      icon: IconInspection,
      short: 'NFPA-compliant inspections on the cycle your building needs.',
      body: `Weekly, monthly, quarterly, semi-annual and annual inspections in accordance with
             NFPA 25 and the Ontario Fire Code. Every visit is documented, signed by a licensed
             technician and delivered directly to your client portal within 24 hours.`,
      bullets: ['Sprinkler systems (wet, dry, pre-action, deluge)', 'Standpipe & hose systems', 'Fire pumps · monthly churn tests', 'Backflow prevention · CSA B64.10'],
      codes: ['NFPA 25', 'ULC S536', 'OFC O. Reg. 213/07']
    },
    {
      tag: '02',
      title: 'Maintenance & Service',
      href: 'Maintenance-Service.html',
      icon: IconMaintenance,
      short: 'Planned maintenance and same-day service for critical systems.',
      body: `Preventative maintenance programs that keep systems running between inspection
             cycles. Same-day emergency service for sprinkler, standpipe, fire pump, backflow
             and special-hazard systems. All work performed by our licensed field technicians.`,
      bullets: ['Preventative maintenance programs', 'Repairs & component replacement', 'Fire pump overhauls', 'Cold-weather startups & shutdowns'],
      codes: ['CFAA', 'TSSA', 'CSA B64']
    },
    {
      tag: '03',
      title: 'Retrofits & Upgrades',
      href: 'Retrofits-Upgrades.html',
      icon: IconRetrofit,
      short: 'Bringing older buildings up to code — without disrupting tenants.',
      body: `From tenant fit-outs to building-wide sprinkler retrofits, we phase the work,
             coordinate with building operations and keep occupants safe during construction.
             Deep experience with heritage, institutional and occupied-in-place work.`,
      bullets: ['Full building sprinkler retrofits', 'Tenant fit-out coordination', 'Standpipe upgrades to current code', 'Fire pump replacements'],
      codes: ['NBC 2020', 'OBC 3.2.5', 'NFPA 13R / 13']
    },
    {
      tag: '04',
      title: '24/7 Emergency Response',
      href: 'Emergency-Response.html',
      icon: IconEmergency,
      short: 'A fleet ready to roll. A human answers the phone. Always.',
      body: `When your system fails, you need a licensed tech on site — not a call center in
             another time zone. Our fleet of fully-equipped service vehicles is staged
             across the region for rapid response, day or night.`,
      bullets: ['Sub-2-hour response in-region', 'Fully-equipped service vehicles', 'On-call technicians overnight', 'Direct dispatch, no phone tree'],
      codes: ['24/7/365', 'ON & QC', 'Sub-2hr SLA']
    },
    {
      tag: '05',
      title: 'Backflow Prevention',
      href: 'Backflow-Prevention.html',
      icon: IconBackflow,
      short: 'Testing, servicing and certification of backflow devices.',
      body: `Annual backflow testing and certification to CSA B64.10 — a critical piece
             of your water supply's fire protection compliance. Our testers are certified
             in both provinces we service.`,
      bullets: ['Annual backflow certification', 'Device replacement & repair', 'Cross-connection surveys', 'City & municipal reporting'],
      codes: ['CSA B64.10', 'AWWA', 'Municipal']
    },
  ];

  return (
    <section id="services" style={{background:'#F5F1EA', padding:'110px 0'}}>
      <div style={{maxWidth: 1200, margin:'0 auto', padding: '0 24px'}}>
        <div style={{display:'grid', gridTemplateColumns: '1fr 1fr', gap: 60, alignItems:'flex-end', marginBottom: 60}}>
          <div>
            <div style={{display:'flex', alignItems:'center', gap: 14, marginBottom: 22}}>
              <span style={{width: 26, height: 1, background:'#E22227'}}/>
              <span style={{fontFamily:'Inter', fontSize:11, fontWeight:600, letterSpacing:'0.32em', color:'#12365A'}}>WHAT WE DO</span>
            </div>
            <h2 style={{fontFamily:'"Archivo Black", "Arial Black", sans-serif', fontWeight: 900, fontSize: 68, lineHeight: 0.95, margin: 0, letterSpacing:'-0.015em', color:'#0B213A'}}>
              Every system,<br/>every code, <span style={{color:'#E22227'}}>every&nbsp;time.</span>
            </h2>
          </div>
          <p style={{fontFamily:'Inter', fontSize: 16, lineHeight: 1.7, color:'#3A4552', margin: 0, maxWidth: 460}}>
            Our field crews service sprinkler, standpipe, fire pump, backflow, kitchen
            suppression and special-hazard systems across commercial, institutional and
            industrial properties. Click any service to expand.
          </p>
        </div>

        {/* Split accordion — list on left, detail on right */}
        <div style={{display:'grid', gridTemplateColumns: '1fr 1.2fr', gap: 20, minHeight: 440}}>
          <div style={{display:'flex', flexDirection:'column', gap: 2, background:'#fff'}}>
            {services.map((s, i) => {
              const Icon = s.icon;
              const isActive = i === active;
              return (
                <button
                  key={s.tag}
                  onClick={() => setActive(i)}
                  style={{
                    all:'unset', cursor:'pointer',
                    padding: '22px 26px', display:'flex', alignItems:'center', gap: 20,
                    background: isActive ? '#0B213A' : '#fff',
                    color: isActive ? '#fff' : '#0B213A',
                    borderLeft: `4px solid ${isActive ? '#E22227' : 'transparent'}`,
                    transition: 'background 0.25s ease, border-color 0.25s ease, color 0.25s ease'
                  }}
                  onMouseEnter={e => { if (!isActive) e.currentTarget.style.background = '#EDE7DC'; }}
                  onMouseLeave={e => { if (!isActive) e.currentTarget.style.background = '#fff'; }}
                >
                  <span style={{fontFamily:'"Archivo Black", sans-serif', fontSize: 14, color: isActive ? '#E22227' : '#B01A1E', letterSpacing: '0.08em'}}>{s.tag}</span>
                  <Icon size={28} color={isActive ? '#F5A524' : '#12365A'}/>
                  <div style={{flex: 1}}>
                    <div style={{fontFamily:'"Archivo Black", sans-serif', fontSize: 22, letterSpacing:'-0.005em'}}>{s.title}</div>
                    <div style={{fontFamily:'Inter', fontSize: 13, marginTop: 4, color: isActive ? '#C9CFD6' : '#64707D', lineHeight: 1.4}}>{s.short}</div>
                  </div>
                  <span style={{fontFamily:'Inter', fontSize: 18, opacity: isActive ? 1 : 0.4}}>{isActive ? '—' : '+'}</span>
                </button>
              );
            })}
          </div>

          {/* Detail panel */}
          <div key={active} style={{
            background:'#0B213A', color:'#fff', padding: '44px 44px 40px', position:'relative', overflow:'hidden',
            animation: 'fadeIn 0.4s ease-out'
          }}>
            <img src="reference/rf-inspections-hero.jpg" alt="" style={{
              position:'absolute', right: -60, top: -30, width: '60%', opacity: 0.18, mixBlendMode:'lighten'
            }}/>
            <div style={{position:'relative'}}>
              <div style={{display:'flex', alignItems:'center', gap: 16, marginBottom: 26}}>
                <span style={{fontFamily:'"Archivo Black", sans-serif', fontSize: 36, color:'#E22227', letterSpacing:'-0.02em'}}>{services[active].tag}</span>
                {React.createElement(services[active].icon, {size: 48, color:'#F5A524'})}
              </div>
              <h3 style={{fontFamily:'"Archivo Black", sans-serif', fontSize: 40, lineHeight: 1, margin:'0 0 20px', letterSpacing:'-0.015em'}}>
                {services[active].title}
              </h3>
              <p style={{fontFamily:'Inter', fontSize: 16, lineHeight: 1.65, color:'#DDE3EA', maxWidth: 480}}>
                {services[active].body}
              </p>
              <div style={{marginTop: 28, display:'grid', gridTemplateColumns:'1fr 1fr', gap: 8}}>
                {services[active].bullets.map((b, i) => (
                  <div key={i} style={{display:'flex', gap: 10, alignItems:'flex-start', fontFamily:'Inter', fontSize: 13, color:'#F5F1EA'}}>
                    <span style={{color:'#E22227', marginTop: 3}}>+</span>
                    {b}
                  </div>
                ))}
              </div>
              <div style={{marginTop: 32, display:'flex', gap: 8, flexWrap:'wrap'}}>
                {services[active].codes.map(c => (
                  <span key={c} style={{fontFamily:'Inter', fontSize: 11, letterSpacing:'0.14em', textTransform:'uppercase', fontWeight: 600, color:'#F5A524', border:'1px solid rgba(245,165,36,0.4)', padding:'6px 12px'}}>
                    {c}
                  </span>
                ))}
              </div>
              <div style={{marginTop: 40, display:'flex', gap: 28, alignItems:'center', flexWrap:'wrap'}}>
                <a href={services[active].href || '#'} style={{
                  fontFamily:'Inter', fontSize: 12, fontWeight: 700, letterSpacing:'0.14em', textTransform:'uppercase', color:'#fff',
                  display:'inline-flex', alignItems:'center', gap: 10,
                  borderBottom: '1px solid rgba(255,255,255,0.4)', paddingBottom: 4,
                  textDecoration:'none',
                  transition:'border-color 0.2s ease, color 0.2s ease'
                }}
                onMouseEnter={e=>{e.currentTarget.style.borderColor='#F5A524'; e.currentTarget.style.color='#F5A524';}}
                onMouseLeave={e=>{e.currentTarget.style.borderColor='rgba(255,255,255,0.4)'; e.currentTarget.style.color='#fff';}}
                >
                  See full details <span>→</span>
                </a>
                <button onClick={()=>setOpen(true)} style={{
                  all:'unset', cursor:'pointer',
                  fontFamily:'Inter', fontSize: 12, fontWeight: 700, letterSpacing:'0.14em', textTransform:'uppercase', color:'#DDE3EA',
                  display:'inline-flex', alignItems:'center', gap: 10,
                  borderBottom: '1px solid rgba(255,255,255,0.2)', paddingBottom: 4,
                  transition:'border-color 0.2s ease, color 0.2s ease'
                }}
                onMouseEnter={e=>{e.currentTarget.style.borderColor='#F5A524'; e.currentTarget.style.color='#F5A524';}}
                onMouseLeave={e=>{e.currentTarget.style.borderColor='rgba(255,255,255,0.2)'; e.currentTarget.style.color='#DDE3EA';}}
                >
                  Get a quote <span>→</span>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============================================================================
// PROCESS — how we work, 4-step animated timeline
// ============================================================================
function Process() {
  const [ref, seen] = useInView(0.2);
  const steps = [
    { n:'01', title: 'Walkthrough', body: 'A licensed tech visits your property. No obligation. We map the systems, note the codes that apply, and identify what needs attention.' },
    { n:'02', title: 'Scoped Proposal', body: 'You get a clear, itemized proposal within 5 business days. Every line cites the code it satisfies, so procurement doesn\'t have to ask.' },
    { n:'03', title: 'Scheduled Service', body: 'Once approved, your building is added to our inspection calendar. We show up on the day, in the window, in uniform — with parts on the truck.' },
    { n:'04', title: 'Portal Delivery', body: 'Every report — signed, timestamped, PDF and interactive — lands in your portal within 24 hours. Deficiencies get their own remediation timeline.' },
  ];
  return (
    <section id="process" style={{background:'#FBFAF7', padding:'110px 0'}}>
      <div style={{maxWidth: 1200, margin: '0 auto', padding:'0 24px'}} ref={ref}>
        <div style={{textAlign:'center', marginBottom: 70, maxWidth: 720, marginLeft:'auto', marginRight:'auto'}}>
          <div style={{display:'inline-flex', alignItems:'center', gap: 14, marginBottom: 22}}>
            <span style={{width: 26, height: 1, background:'#E22227'}}/>
            <span style={{fontFamily:'Inter', fontSize:11, fontWeight:600, letterSpacing:'0.32em', color:'#12365A'}}>HOW WE WORK</span>
            <span style={{width: 26, height: 1, background:'#E22227'}}/>
          </div>
          <h2 style={{fontFamily:'"Archivo Black", sans-serif', fontWeight: 900, fontSize: 60, lineHeight: 1, margin: 0, letterSpacing:'-0.015em', color:'#0B213A'}}>
            Four steps.<br/><span style={{color:'#E22227'}}>Nothing hidden.</span>
          </h2>
        </div>

        <div style={{display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap: 20, position:'relative'}}>
          {/* connecting line */}
          <div style={{position:'absolute', top: 30, left: '12.5%', right: '12.5%', height: 2, background:'#E4E7EB', overflow:'hidden'}}>
            <div style={{height:'100%', background:'linear-gradient(90deg, #E22227, #F5A524)', width: seen ? '100%' : '0%', transition:'width 2s ease 0.3s'}}/>
          </div>
          {steps.map((s, i) => (
            <div key={s.n} style={{
              display:'flex', flexDirection:'column', alignItems:'center', textAlign:'center', gap: 16,
              opacity: seen ? 1 : 0, transform: seen ? 'translateY(0)' : 'translateY(20px)',
              transition:`opacity 0.6s ease ${i*0.15}s, transform 0.6s ease ${i*0.15}s`
            }}>
              <div style={{
                width: 60, height: 60, borderRadius: '50%',
                background:'#0B213A', color:'#fff',
                fontFamily:'"Archivo Black", sans-serif', fontSize: 20, letterSpacing:'-0.02em',
                display:'flex', alignItems:'center', justifyContent:'center',
                boxShadow:'0 4px 14px rgba(11,33,58,0.25)', position:'relative', zIndex: 2
              }}>
                {s.n}
              </div>
              <h3 style={{fontFamily:'"Archivo Black", sans-serif', fontSize: 22, margin: 0, color:'#0B213A', letterSpacing:'-0.005em'}}>{s.title}</h3>
              <p style={{fontFamily:'Inter', fontSize: 14, lineHeight: 1.6, color:'#3A4552', margin: 0, maxWidth: 240}}>{s.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================================================
// PORTAL SECTION — animated infographic (no dashboard screenshot)
// ============================================================================
function PortalInfographic() {
  const [ref, seen] = useInView(0.25);
  // animated numbers
  return (
    <div ref={ref} style={{position:'relative', width: '100%', aspectRatio:'1 / 0.85', background:'linear-gradient(135deg, #12365A 0%, #061426 100%)', borderRadius: 12, overflow:'hidden', boxShadow:'0 30px 80px rgba(0,0,0,0.55)'}}>
      {/* Grid background */}
      <div style={{position:'absolute', inset:0, backgroundImage:'linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px)', backgroundSize:'40px 40px', opacity: 0.6}}/>
      {/* SVG animated infographic */}
      <svg width="100%" height="100%" viewBox="0 0 600 500" fill="none" style={{position:'absolute', inset:0}} preserveAspectRatio="xMidYMid meet">
        <defs>
          <linearGradient id="pipeGrad" x1="0" y1="0" x2="1" y2="0">
            <stop offset="0" stopColor="#F5A524" stopOpacity="0"/>
            <stop offset="0.5" stopColor="#F5A524"/>
            <stop offset="1" stopColor="#F5A524" stopOpacity="0"/>
          </linearGradient>
          <filter id="glow"><feGaussianBlur stdDeviation="3"/></filter>
        </defs>

        {/* Central portal hub */}
        <g transform="translate(300, 250)">
          <circle r="70" fill="none" stroke="#F5A524" strokeWidth="1.5" opacity="0.3"/>
          <circle r="55" fill="none" stroke="#F5A524" strokeWidth="1.5" opacity="0.5" style={{animation:'spin 30s linear infinite', transformOrigin:'center'}} strokeDasharray="4 6"/>
          <circle r="40" fill="#0B213A" stroke="#F5A524" strokeWidth="2"/>
          <text textAnchor="middle" y="-4" fill="#F5A524" fontFamily='"Archivo Black", sans-serif' fontSize="14" letterSpacing="0.02em">RFPS</text>
          <text textAnchor="middle" y="16" fill="#F5F1EA" fontFamily="Inter" fontSize="9" letterSpacing="0.28em">PORTAL</text>
        </g>

        {/* Input nodes on the LEFT — buildings/inspections coming IN */}
        {[
          { y: 90, label:'Field Inspections', delay: 0.2 },
          { y: 180, label:'Deficiencies Logged', delay: 0.4 },
          { y: 270, label:'Technician Reports', delay: 0.6 },
          { y: 360, label:'Building Records', delay: 0.8 },
          { y: 440, label:'Compliance Cycles', delay: 1.0 },
        ].map((node, i) => (
          <g key={i} style={{opacity: seen ? 1 : 0, transition:`opacity 0.4s ease ${node.delay}s`}}>
            <rect x="10" y={node.y - 14} width="130" height="28" rx="4" fill="#12365A" stroke="rgba(245,165,36,0.4)" strokeWidth="1"/>
            <text x="75" y={node.y + 4} textAnchor="middle" fill="#F5F1EA" fontFamily="Inter" fontSize="10" fontWeight="600" letterSpacing="0.05em">{node.label}</text>
            {/* animated dashed pipe to hub */}
            <path
              d={`M 140 ${node.y} Q 200 ${node.y}, 240 ${(node.y + 250) / 2} T 260 250`}
              stroke="url(#pipeGrad)"
              strokeWidth="2"
              fill="none"
              strokeDasharray="4 8"
              style={{animation: seen ? `dashFlow ${2 + i*0.3}s linear infinite` : 'none'}}
            />
            {/* traveling dot */}
            {seen && (
              <circle r="3" fill="#F5A524" filter="url(#glow)">
                <animateMotion dur={`${2.5 + i*0.4}s`} repeatCount="indefinite" begin={`${node.delay}s`}
                  path={`M 140 ${node.y} Q 200 ${node.y}, 240 ${(node.y + 250) / 2} T 260 250`}/>
              </circle>
            )}
          </g>
        ))}

        {/* Output nodes on the RIGHT — what YOU get */}
        {[
          { y: 90, label:'PDF Reports', icon:'📄', delay: 1.2 },
          { y: 180, label:'Live Compliance', icon:'✓', delay: 1.4 },
          { y: 270, label:'Deficiency Tracking', icon:'⚠', delay: 1.6 },
          { y: 360, label:'Historical Archive', icon:'▤', delay: 1.8 },
          { y: 440, label:'Multi-Property View', icon:'⊞', delay: 2.0 },
        ].map((node, i) => (
          <g key={i} style={{opacity: seen ? 1 : 0, transition:`opacity 0.4s ease ${node.delay}s`}}>
            {/* animated pipe from hub */}
            <path
              d={`M 340 250 Q 360 ${(node.y + 250)/2}, 400 ${node.y} T 460 ${node.y}`}
              stroke="url(#pipeGrad)"
              strokeWidth="2"
              fill="none"
              strokeDasharray="4 8"
              style={{animation: seen ? `dashFlow ${2 + i*0.3}s linear infinite reverse` : 'none'}}
            />
            {seen && (
              <circle r="3" fill="#F5A524" filter="url(#glow)">
                <animateMotion dur={`${2.5 + i*0.4}s`} repeatCount="indefinite" begin={`${node.delay}s`}
                  path={`M 340 250 Q 360 ${(node.y + 250)/2}, 400 ${node.y} T 460 ${node.y}`}/>
              </circle>
            )}
            <rect x="460" y={node.y - 14} width="130" height="28" rx="4" fill="#12365A" stroke="rgba(245,165,36,0.4)" strokeWidth="1"/>
            <text x="525" y={node.y + 4} textAnchor="middle" fill="#F5F1EA" fontFamily="Inter" fontSize="10" fontWeight="600" letterSpacing="0.05em">{node.label}</text>
          </g>
        ))}

        {/* Little floating stats around the hub */}
        <g style={{opacity: seen ? 1 : 0, transition:'opacity 0.6s ease 1.4s'}}>
          <g transform="translate(300, 130)">
            <rect x="-100" y="-14" width="200" height="28" rx="14" fill="#E22227"/>
            <circle cx="-80" cy="0" r="3" fill="#fff" style={{animation:'pulseDot 2s ease-in-out infinite'}}/>
            <text textAnchor="middle" x="10" y="4" fill="#fff" fontFamily='"Archivo Black", sans-serif' fontSize="11" letterSpacing="0.06em">
              LIVE · {seen ? '1,247' : '0'} REPORTS
            </text>
          </g>
          <g transform="translate(300, 370)">
            <rect x="-92" y="-14" width="184" height="28" rx="14" fill="#F5A524"/>
            <text textAnchor="middle" y="4" fill="#0B213A" fontFamily='"Archivo Black", sans-serif' fontSize="11" letterSpacing="0.06em">
              100% ON-TIME · 2025
            </text>
          </g>
        </g>
      </svg>

      {/* Corner tag */}
      <div style={{position:'absolute', top: 20, left: 20, fontFamily:'Inter', fontSize: 10, letterSpacing:'0.24em', color:'#F5A524', fontWeight: 700, display:'flex', alignItems:'center', gap: 8}}>
        <span style={{width: 8, height: 8, borderRadius:'50%', background:'#F5A524', animation:'pulseDot 2s ease-in-out infinite'}}/>
        HOW THE PORTAL WORKS
      </div>
      <div style={{position:'absolute', bottom: 20, right: 24, fontFamily:'Inter', fontSize: 10, letterSpacing:'0.14em', color:'#8B95A3'}}>
        portal.rfpsservices.com
      </div>
    </div>
  );
}

function Portal() {
  return (
    <section id="portal" style={{background:'#061426', color:'#fff', padding:'110px 0'}}>
      <div style={{maxWidth: 1200, margin:'0 auto', padding:'0 24px', display:'grid', gridTemplateColumns:'1fr 1.2fr', gap: 80, alignItems:'center'}}>
        <div>
          <div style={{display:'flex', alignItems:'center', gap: 14, marginBottom: 22}}>
            <span style={{width: 26, height: 1, background:'#F5A524'}}/>
            <span style={{fontFamily:'Inter', fontSize:11, fontWeight:600, letterSpacing:'0.32em', color:'#F5A524'}}>CLIENT PORTAL</span>
          </div>
          <h2 style={{fontFamily:'"Archivo Black", sans-serif', fontWeight: 900, fontSize: 64, lineHeight: 0.95, margin: 0, letterSpacing:'-0.015em'}}>
            Every report,<br/>every building,<br/><span style={{color:'#F5A524'}}>one login.</span>
          </h2>
          <p style={{fontFamily:'Inter', fontSize: 16, lineHeight: 1.7, color:'#DDE3EA', marginTop: 28, maxWidth: 480}}>
            The RFPS client portal is the operating system for your fire protection compliance.
            Log in to see live inspection status, download signed reports, review deficiencies
            with their remediation timelines, and access a full historical record for every
            property under your care.
          </p>
          {/* Feature bullets */}
          <div style={{marginTop: 30, display:'flex', flexDirection:'column', gap: 14}}>
            {[
              ['Live status', 'See scheduled, in-progress and completed inspections in real time.'],
              ['Deficiency tracking', 'Each deficiency has its own remediation timeline and owner.'],
              ['Multi-property view', 'One dashboard for your entire portfolio — filter by system or region.'],
              ['24hr report delivery', 'Signed PDFs and interactive reports land in your portal within a day.'],
            ].map(([h, b]) => (
              <div key={h} style={{display:'flex', gap: 14, alignItems:'flex-start'}}>
                <span style={{color:'#F5A524', marginTop: 2, fontFamily:'"Archivo Black"', fontSize: 14}}>+</span>
                <div>
                  <span style={{fontFamily:'Inter', fontWeight:700, fontSize: 14, color:'#fff'}}>{h}</span>
                  <span style={{fontFamily:'Inter', fontSize: 14, color:'#8B95A3'}}> — {b}</span>
                </div>
              </div>
            ))}
          </div>
          <div style={{display:'flex', gap: 14, marginTop: 40}}>
            <button style={{
              background:'#F5A524', color:'#0B213A', border:'none', padding:'16px 28px',
              fontFamily:'Inter', fontWeight:700, fontSize:12, letterSpacing:'0.14em', textTransform:'uppercase',
              cursor:'pointer', transition: 'transform 0.15s ease'
            }}
            onMouseEnter={e=>e.currentTarget.style.transform='translateY(-2px)'}
            onMouseLeave={e=>e.currentTarget.style.transform='translateY(0)'}
            >Sign in to portal →</button>
            <button style={{
              background:'transparent', color:'#fff', border:'1px solid rgba(255,255,255,0.3)', padding:'16px 28px',
              fontFamily:'Inter', fontWeight:600, fontSize:12, letterSpacing:'0.14em', textTransform:'uppercase',
              cursor:'pointer'
            }}>Request access</button>
          </div>
        </div>
        <PortalInfographic/>
      </div>
    </section>
  );
}

// ============================================================================
// COVERAGE MAP
// ============================================================================
function Coverage() {
  const [hover, setHover] = React.useState(null);
  // Cities positioned on the ON+QC map coordinate system (viewBox 0 0 600 500)
  // Coordinates roughly correspond to real geography, with Ottawa near the border
  const cities = [
    { name: 'Ottawa',        x: 306, y: 402, primary: true, offset:'left' },
    { name: 'Gatineau',      x: 306, y: 391, primary: true },
    { name: 'Montréal',      x: 335, y: 400 },
    { name: 'Québec City',   x: 367, y: 371 },
    { name: 'Trois-Rivières',x: 349, y: 381 },
    { name: 'Kingston',      x: 295, y: 428 },
    { name: 'Toronto',       x: 256, y: 441 },
    { name: 'Cornwall',      x: 319, y: 411 },
    { name: 'North Bay',     x: 255, y: 382 },
    { name: 'Sudbury',       x: 234, y: 378 },
  ];
  return (
    <section id="coverage" style={{background:'#F5F1EA', padding:'110px 0'}}>
      <div style={{maxWidth: 1200, margin:'0 auto', padding: '0 24px'}}>
        <div style={{display:'grid', gridTemplateColumns:'1fr 1.4fr', gap: 60, alignItems:'flex-start'}}>
          <div style={{position:'sticky', top: 100}}>
            <div style={{display:'flex', alignItems:'center', gap: 14, marginBottom: 22}}>
              <span style={{width: 26, height: 1, background:'#E22227'}}/>
              <span style={{fontFamily:'Inter', fontSize:11, fontWeight:600, letterSpacing:'0.32em', color:'#12365A'}}>COVERAGE</span>
            </div>
            <h2 style={{fontFamily:'"Archivo Black", sans-serif', fontWeight: 900, fontSize: 52, lineHeight: 1, margin: 0, letterSpacing:'-0.015em', color:'#0B213A'}}>
              Two provinces.<br/><span style={{color:'#E22227'}}>One fleet.</span>
            </h2>
            <p style={{fontFamily:'Inter', fontSize: 16, lineHeight: 1.7, color:'#3A4552', marginTop: 24, maxWidth: 400}}>
              Our home base is Ottawa. From there our fleet covers eastern Ontario and
              southern Quebec — with active service in the greater Toronto, Montréal
              and Québec City corridors.
            </p>
            <div style={{marginTop: 32, display:'grid', gridTemplateColumns:'1fr 1fr', gap: 16}}>
              <div>
                <div style={{fontFamily:'"Archivo Black", sans-serif', fontSize: 40, color:'#0B213A', lineHeight: 1}}><CountUp to={12}/></div>
                <div style={{fontFamily:'Inter', fontSize: 11, letterSpacing:'0.12em', textTransform:'uppercase', color:'#64707D', marginTop: 4}}>Service vehicles</div>
              </div>
              <div>
                <div style={{fontFamily:'"Archivo Black", sans-serif', fontSize: 40, color:'#E22227', lineHeight: 1}}><CountUp to={500} suffix=" km"/></div>
                <div style={{fontFamily:'Inter', fontSize: 11, letterSpacing:'0.12em', textTransform:'uppercase', color:'#64707D', marginTop: 4}}>Service radius</div>
              </div>
            </div>
            <div style={{marginTop: 24, paddingTop: 20, borderTop:'1px solid #C9CFD6', display:'flex', flexDirection:'column', gap: 10}}>
              <div style={{display:'flex', alignItems:'center', gap: 10, fontFamily:'Inter', fontSize: 12, color:'#3A4552'}}>
                <span style={{width: 12, height: 12, background:'rgba(226,34,39,0.22)', border:'1px solid #E22227'}}/>
                Primary service zone · sub-2hr response
              </div>
              <div style={{display:'flex', alignItems:'center', gap: 10, fontFamily:'Inter', fontSize: 12, color:'#3A4552'}}>
                <span style={{width: 12, height: 12, background:'rgba(245,165,36,0.18)', border:'1px dashed #F5A524'}}/>
                Extended coverage · scheduled visits
              </div>
            </div>
          </div>

          {/* SVG map — Ontario + Quebec */}
          <div style={{background:'#0B213A', padding: 24, borderRadius: 8, position:'relative', overflow:'hidden'}}>
            <svg viewBox="0 0 600 500" style={{width:'100%', height: 'auto', display:'block'}}>
              <defs>
                <radialGradient id="primaryZone" cx="0.5" cy="0.5" r="0.5">
                  <stop offset="0" stopColor="#E22227" stopOpacity="0.35"/>
                  <stop offset="0.7" stopColor="#E22227" stopOpacity="0.12"/>
                  <stop offset="1" stopColor="#E22227" stopOpacity="0"/>
                </radialGradient>
                <radialGradient id="extendedZone" cx="0.5" cy="0.5" r="0.5">
                  <stop offset="0" stopColor="#F5A524" stopOpacity="0.15"/>
                  <stop offset="1" stopColor="#F5A524" stopOpacity="0"/>
                </radialGradient>
                <pattern id="mapGrid" width="30" height="30" patternUnits="userSpaceOnUse">
                  <path d="M 30 0 L 0 0 0 30" fill="none" stroke="rgba(245,165,36,0.05)" strokeWidth="0.5"/>
                </pattern>
              </defs>

              {/* Background grid */}
              <rect width="600" height="500" fill="url(#mapGrid)"/>

              {/* ONTARIO — accurate silhouette:
                    - Hudson Bay indent on the north-east
                    - Wide midsection, James Bay dips down from the top
                    - Narrows south into the peninsula between the Great Lakes
                    - Ottawa River forms the east border w/ Quebec
              */}
              <path
                d="M 253.6 278.8 L 253.0 357.0 L 261.6 377.7 L 264.9 381.6 L 280.6 385.7 L 288.1 393.7 L 289.3 391.5 L 290.8 392.1 L 292.7 398.2 L 297.1 401.2 L 300.7 399.9 L 303.8 403.0 L 309.2 399.7 L 320.2 397.2 L 323.6 398.8 L 322.5 404.3 L 324.6 406.9 L 310.9 415.5 L 302.1 425.0 L 288.3 432.0 L 287.2 431.5 L 289.7 429.6 L 287.5 430.7 L 288.0 428.9 L 280.5 430.9 L 283.8 430.2 L 283.8 431.6 L 287.1 429.6 L 286.4 432.8 L 290.2 430.9 L 287.5 434.7 L 290.2 434.8 L 286.3 436.8 L 285.8 434.6 L 281.5 434.9 L 278.5 432.7 L 259.6 437.4 L 252.9 443.3 L 250.3 448.7 L 256.2 451.6 L 259.9 449.9 L 261.9 457.8 L 244.5 460.5 L 241.1 464.5 L 245.7 466.0 L 229.1 463.6 L 222.9 469.2 L 222.0 472.4 L 222.0 470.9 L 214.7 475.3 L 213.1 480.0 L 211.5 477.3 L 207.9 478.5 L 204.7 476.5 L 206.0 471.1 L 214.2 470.2 L 214.3 467.0 L 211.3 465.9 L 213.6 458.1 L 223.5 448.1 L 223.5 431.7 L 230.0 419.9 L 228.9 411.9 L 224.2 405.4 L 229.8 405.8 L 231.6 413.3 L 234.3 412.1 L 231.8 416.7 L 235.1 416.0 L 234.4 420.3 L 238.4 417.4 L 239.3 420.0 L 246.0 423.2 L 247.4 418.4 L 245.8 415.3 L 248.0 414.3 L 248.9 416.5 L 251.9 416.9 L 251.6 414.0 L 250.2 415.4 L 245.9 408.6 L 247.4 408.0 L 245.5 406.0 L 246.5 402.8 L 242.5 402.8 L 241.8 397.8 L 240.4 398.7 L 237.1 390.8 L 231.5 390.7 L 231.3 388.7 L 224.5 390.3 L 226.8 388.2 L 224.1 388.7 L 226.2 387.7 L 225.2 386.3 L 223.3 388.8 L 223.9 386.8 L 215.6 384.9 L 206.6 385.3 L 192.1 381.8 L 190.4 376.8 L 185.7 378.4 L 184.7 376.5 L 187.0 373.6 L 186.4 372.2 L 185.3 373.5 L 185.4 370.7 L 188.0 369.4 L 182.2 367.2 L 184.9 360.4 L 178.8 353.2 L 181.3 345.7 L 167.4 344.9 L 159.6 327.3 L 148.0 327.5 L 137.8 321.8 L 134.8 322.5 L 136.9 327.1 L 135.5 331.1 L 133.8 330.0 L 130.7 335.0 L 134.0 327.7 L 131.8 325.6 L 128.2 336.4 L 125.5 337.6 L 128.0 331.7 L 122.8 333.8 L 120.1 342.0 L 117.5 344.6 L 112.4 344.8 L 109.1 342.1 L 100.9 342.6 L 99.3 338.9 L 94.2 342.8 L 89.7 343.6 L 83.4 336.7 L 80.1 336.7 L 78.8 339.7 L 77.1 334.8 L 74.2 334.3 L 75.1 332.6 L 70.9 330.6 L 66.1 330.4 L 59.6 333.2 L 58.7 330.7 L 48.8 328.7 L 47.1 327.3 L 45.3 315.0 L 40.9 314.1 L 40.9 237.2 L 120.5 152.7 L 122.2 147.3 L 126.3 147.5 L 138.6 156.9 L 143.5 166.6 L 144.5 165.5 L 147.0 167.8 L 166.3 173.3 L 177.4 181.2 L 173.4 189.1 L 176.5 183.4 L 179.1 182.3 L 184.6 183.5 L 193.9 181.8 L 198.2 183.9 L 198.8 186.0 L 196.9 182.6 L 206.9 183.7 L 207.1 186.5 L 212.7 185.2 L 215.7 187.4 L 215.4 185.2 L 217.4 192.3 L 214.1 206.4 L 218.3 215.6 L 217.1 219.9 L 218.5 227.3 L 216.6 228.6 L 215.9 234.2 L 226.0 245.5 L 227.1 248.9 L 221.6 251.4 L 226.8 250.4 L 239.1 262.0 L 241.5 269.8 L 233.4 277.2 L 241.9 270.3 L 247.3 272.2 L 253.6 278.8 Z"
                fill="#12365A"
                stroke="rgba(245,165,36,0.35)"
                strokeWidth="1.2"
              />
              <text x="90" y="270" fill="rgba(245,241,234,0.32)" fontFamily='"Archivo Black", sans-serif' fontSize="18" letterSpacing="0.14em">ONTARIO</text>

              {/* QUÉBEC — accurate silhouette:
                    - Huge landmass, extends far north
                    - Ungava Bay bite on north-east
                    - Hudson Bay coast on north-west (concave)
                    - St. Lawrence River forms the south-east edge (angled cut)
                    - Tapers southwest into Ottawa/Montreal region
              */}
              <path
                d="M 559.1 268.7 L 557.1 266.6 L 550.3 267.3 L 546.6 271.0 L 538.3 271.7 L 538.5 274.4 L 534.8 278.0 L 534.7 276.7 L 533.2 277.5 L 533.1 283.4 L 531.9 280.5 L 530.6 283.9 L 517.8 295.6 L 517.6 293.7 L 511.7 295.5 L 508.9 295.6 L 508.9 294.3 L 496.2 298.1 L 498.2 296.0 L 495.3 297.1 L 494.5 295.4 L 482.7 293.1 L 473.4 295.3 L 467.7 293.1 L 438.6 293.7 L 436.7 295.8 L 432.9 295.8 L 431.9 294.1 L 430.5 295.5 L 431.7 297.1 L 429.2 296.1 L 422.3 304.4 L 419.1 315.2 L 409.1 316.3 L 406.6 318.0 L 408.1 319.8 L 405.1 321.1 L 404.7 318.1 L 401.9 324.2 L 396.2 327.5 L 387.8 341.5 L 378.4 336.3 L 368.9 334.8 L 372.8 335.8 L 371.7 337.5 L 377.1 336.8 L 387.1 342.2 L 380.4 355.8 L 376.6 357.2 L 373.6 364.6 L 365.8 372.6 L 376.1 366.8 L 390.9 345.1 L 399.5 336.5 L 409.9 329.2 L 429.2 319.7 L 443.5 316.5 L 452.3 317.6 L 462.0 324.3 L 463.0 327.8 L 457.6 325.0 L 463.0 330.7 L 461.5 331.1 L 462.6 333.0 L 447.9 344.3 L 440.5 342.0 L 439.4 339.7 L 436.8 342.4 L 431.5 341.9 L 425.0 346.8 L 419.4 348.1 L 416.0 344.6 L 405.6 346.3 L 405.5 354.4 L 396.5 360.2 L 396.4 357.4 L 393.9 356.8 L 383.7 373.7 L 382.8 379.6 L 379.6 384.9 L 380.0 391.3 L 373.6 399.9 L 374.8 402.6 L 372.6 401.9 L 371.5 406.3 L 370.4 403.8 L 367.7 406.0 L 365.8 404.8 L 363.7 406.1 L 362.9 411.0 L 318.9 411.5 L 324.6 406.9 L 322.5 404.3 L 323.6 398.8 L 317.0 397.1 L 303.8 403.0 L 300.7 399.9 L 297.1 401.2 L 292.7 398.2 L 290.8 392.1 L 289.3 391.5 L 288.1 393.7 L 280.6 385.7 L 264.9 381.6 L 254.8 364.4 L 253.0 357.0 L 253.6 278.8 L 256.4 283.2 L 253.6 278.2 L 253.4 265.5 L 257.6 263.7 L 257.1 266.0 L 260.5 267.3 L 263.0 274.2 L 262.4 269.0 L 265.1 267.1 L 260.4 260.6 L 263.1 259.1 L 262.3 257.0 L 265.8 254.3 L 266.9 250.4 L 269.0 250.3 L 266.9 249.5 L 267.1 244.2 L 264.1 243.0 L 262.9 238.6 L 265.1 236.0 L 262.8 236.1 L 263.8 234.0 L 261.1 232.8 L 262.3 227.5 L 259.4 222.2 L 262.0 220.9 L 258.8 217.7 L 260.2 214.8 L 262.2 215.2 L 259.0 212.1 L 261.2 210.7 L 257.0 209.3 L 260.2 207.0 L 255.7 206.8 L 257.0 205.6 L 254.6 204.3 L 253.8 198.0 L 250.5 196.5 L 269.9 188.0 L 277.8 182.5 L 292.8 165.3 L 294.7 157.6 L 294.5 142.0 L 290.8 129.5 L 282.1 117.9 L 274.3 113.7 L 269.1 108.3 L 270.0 110.2 L 266.8 108.5 L 268.1 106.5 L 266.7 100.7 L 269.9 101.8 L 273.2 95.1 L 278.8 91.1 L 275.7 90.6 L 278.3 87.9 L 277.6 84.1 L 283.8 87.3 L 280.7 84.5 L 284.1 82.2 L 282.3 79.5 L 285.5 75.7 L 291.0 76.1 L 291.4 74.1 L 285.4 74.3 L 286.7 75.2 L 284.6 75.0 L 283.8 76.9 L 279.5 76.2 L 282.6 74.7 L 278.0 68.2 L 282.5 65.5 L 276.8 63.4 L 281.2 59.0 L 276.0 60.9 L 275.9 59.2 L 271.9 60.1 L 278.7 50.9 L 277.3 45.3 L 280.5 45.0 L 279.7 42.9 L 281.7 43.3 L 274.4 39.1 L 272.3 29.4 L 274.2 24.4 L 282.4 20.0 L 307.3 27.2 L 303.2 29.6 L 311.0 26.2 L 321.4 30.8 L 319.1 27.7 L 323.4 27.5 L 333.4 22.5 L 343.4 30.5 L 347.7 30.6 L 348.0 33.8 L 345.4 36.8 L 347.1 35.8 L 348.1 37.5 L 348.1 34.4 L 353.4 36.2 L 353.2 38.7 L 356.3 40.3 L 352.1 42.8 L 356.5 42.0 L 356.8 39.7 L 362.1 41.9 L 358.2 43.6 L 359.7 45.0 L 357.7 45.8 L 361.9 46.3 L 358.6 47.1 L 360.8 48.1 L 362.0 51.9 L 363.4 50.4 L 364.8 52.7 L 366.9 51.6 L 376.0 55.2 L 381.5 53.5 L 381.4 58.0 L 384.4 59.7 L 386.8 57.2 L 388.1 58.1 L 388.1 54.2 L 390.1 53.8 L 392.1 59.6 L 387.3 62.4 L 388.1 64.8 L 385.8 65.9 L 388.6 76.1 L 385.6 76.2 L 386.3 77.9 L 369.4 76.2 L 375.7 78.3 L 387.2 78.4 L 386.7 79.8 L 389.4 80.6 L 388.2 84.3 L 390.0 85.3 L 386.9 88.5 L 388.5 91.5 L 386.7 92.7 L 391.5 92.0 L 393.9 94.5 L 389.7 96.2 L 392.4 97.8 L 391.1 99.4 L 390.2 98.3 L 389.6 104.1 L 387.9 104.5 L 387.9 101.4 L 385.2 98.7 L 386.2 103.7 L 384.8 102.7 L 380.1 105.0 L 384.5 104.9 L 386.0 109.0 L 388.8 105.3 L 395.3 102.1 L 400.3 101.6 L 405.8 104.9 L 406.0 108.8 L 408.1 110.1 L 406.0 119.3 L 392.0 127.3 L 405.2 121.2 L 408.4 111.2 L 410.6 109.3 L 412.7 115.1 L 408.9 120.5 L 412.6 117.0 L 414.3 111.8 L 414.6 123.8 L 417.8 116.0 L 423.1 114.3 L 425.1 111.0 L 426.4 112.6 L 429.5 111.3 L 431.6 103.9 L 433.2 103.4 L 438.8 108.7 L 437.0 115.0 L 440.3 109.4 L 436.5 104.9 L 437.6 103.0 L 440.7 103.3 L 438.1 102.1 L 439.6 99.6 L 442.3 101.5 L 441.0 99.2 L 447.2 99.0 L 441.8 96.6 L 441.4 94.0 L 443.5 95.7 L 444.8 94.2 L 443.8 91.5 L 446.7 93.7 L 444.2 89.0 L 451.8 91.5 L 445.9 88.5 L 444.1 83.5 L 447.0 81.0 L 451.8 82.9 L 448.4 80.2 L 450.6 79.1 L 449.9 76.7 L 453.3 73.0 L 452.2 71.9 L 453.8 69.5 L 457.9 70.9 L 453.5 71.8 L 457.0 75.2 L 452.8 76.6 L 456.3 79.2 L 454.1 81.7 L 453.9 88.1 L 455.6 90.0 L 460.5 88.8 L 458.4 90.2 L 457.9 95.5 L 461.2 99.5 L 455.4 98.3 L 453.2 101.5 L 461.1 102.5 L 463.0 105.5 L 468.4 102.7 L 472.2 105.5 L 464.5 107.1 L 464.0 109.8 L 466.7 109.6 L 467.6 111.6 L 463.0 114.4 L 459.3 120.2 L 462.3 121.4 L 464.4 127.2 L 466.2 126.6 L 469.3 129.6 L 470.7 128.0 L 466.9 139.0 L 468.7 139.2 L 466.9 147.1 L 463.4 150.8 L 466.9 156.8 L 462.9 157.1 L 463.3 159.9 L 466.8 161.8 L 464.9 164.9 L 467.2 163.9 L 468.0 165.7 L 472.7 166.1 L 469.1 169.7 L 472.7 175.5 L 476.8 177.2 L 477.5 181.1 L 471.7 184.8 L 471.1 187.5 L 472.9 189.4 L 469.7 197.5 L 460.7 194.4 L 442.2 195.2 L 439.9 190.9 L 434.7 189.0 L 427.3 181.3 L 429.7 193.5 L 428.4 194.6 L 418.5 187.3 L 421.4 196.2 L 423.8 197.3 L 420.2 199.9 L 416.1 198.5 L 417.7 205.9 L 413.7 209.7 L 418.5 216.0 L 417.6 219.9 L 422.4 221.3 L 425.5 225.8 L 423.4 240.0 L 425.8 240.6 L 426.0 239.0 L 426.9 240.8 L 428.8 239.5 L 429.1 234.6 L 431.4 232.6 L 433.2 233.9 L 432.0 251.1 L 433.4 252.6 L 434.2 248.7 L 440.6 254.7 L 441.2 253.1 L 443.8 254.6 L 445.4 251.0 L 450.1 251.8 L 457.2 259.4 L 455.4 261.2 L 457.3 265.4 L 461.6 261.4 L 460.7 256.4 L 461.7 252.8 L 463.6 252.2 L 462.8 236.7 L 465.7 236.3 L 466.2 231.6 L 469.3 230.8 L 471.4 234.0 L 470.7 238.5 L 473.6 241.1 L 467.4 241.9 L 464.1 245.1 L 466.1 246.3 L 466.0 249.7 L 469.9 252.8 L 470.1 254.7 L 467.6 254.0 L 468.6 255.6 L 559.1 255.6 L 559.1 268.7 Z"
                fill="#12365A"
                stroke="rgba(245,165,36,0.35)"
                strokeWidth="1.2"
              />
              <text x="380" y="200" fill="rgba(245,241,234,0.32)" fontFamily='"Archivo Black", sans-serif' fontSize="18" letterSpacing="0.14em">QUÉBEC</text>

              {/* US border to the south - subtle line */}
              <path d="M 40 495 L 600 495" stroke="rgba(245,165,36,0.1)" strokeWidth="0.5" strokeDasharray="3 3"/>

              {/* Extended coverage zone — larger, softer */}
              <ellipse cx="320" cy="400" rx="140" ry="55" fill="url(#extendedZone)"/>
              <ellipse cx="320" cy="400" rx="140" ry="55" fill="none" stroke="#F5A524" strokeWidth="1" strokeDasharray="4 4" opacity="0.5"/>

              {/* Primary service zone — tight around Ottawa */}
              <ellipse cx="310" cy="402" rx="55" ry="30" fill="url(#primaryZone)"/>
              <ellipse cx="310" cy="402" rx="55" ry="30" fill="none" stroke="#E22227" strokeWidth="1.2" strokeDasharray="3 3"/>

              {/* HQ pin at Ottawa — bigger, animated */}
              <g transform="translate(306, 402)">
                <circle r="16" fill="none" stroke="#E22227" strokeWidth="1" opacity="0.5" style={{animation:'pulse 2.5s ease-in-out infinite', transformOrigin:'center'}}/>
                <circle r="9" fill="none" stroke="#E22227" strokeWidth="1.5"/>
                <circle r="4.5" fill="#E22227"/>
                <circle r="1.8" fill="#fff"/>
              </g>

              {/* Cities */}
              {cities.map((c) => {
                const isHovered = hover === c.name;
                const isPrimary = c.primary;
                return (
                  <g key={c.name}
                     onMouseEnter={()=>setHover(c.name)}
                     onMouseLeave={()=>setHover(null)}
                     style={{cursor:'pointer'}}>
                    {!isPrimary && <circle cx={c.x} cy={c.y} r={isHovered ? 6 : 3.5} fill="#F5A524" stroke="#fff" strokeWidth="1"
                      style={{transition:'r 0.2s ease'}}/>}
                    <text
                      x={c.offset === 'left' ? c.x - 8 : c.x + 8}
                      y={c.y + 3.5}
                      textAnchor={c.offset === 'left' ? 'end' : 'start'}
                      fontFamily="Inter"
                      fontSize={isPrimary ? "13" : "11"}
                      fontWeight={isHovered || isPrimary ? 700 : 500}
                      fill={isHovered ? '#F5A524' : (isPrimary ? '#fff' : '#F5F1EA')}
                      style={{transition:'fill 0.2s ease'}}
                    >
                      {c.name}
                    </text>
                  </g>
                );
              })}

              {/* HQ label */}
              <g transform="translate(306, 378)">
                <rect x="-32" y="-11" width="64" height="18" rx="9" fill="#E22227"/>
                <text textAnchor="middle" y="3" fontFamily='"Archivo Black", sans-serif' fontSize="9" fill="#fff" letterSpacing="0.1em">RFPS HQ</text>
              </g>
            </svg>
            <div style={{position:'absolute', bottom: 14, right: 20, fontFamily:'Inter', fontSize: 9, color:'#8B95A3', letterSpacing:'0.14em'}}>
              ONTARIO · QUÉBEC  ·  RFPS SERVICE NETWORK
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============================================================================
// INDUSTRIES + TESTIMONIALS
// ============================================================================
function Industries() {
  const inds = [
    { name:'High-rise Residential', count:'240+ buildings' },
    { name:'Commercial & Office',   count:'380+ buildings' },
    { name:'Retail & Mixed-use',    count:'180+ locations' },
    { name:'Institutional',          count:'90+ facilities' },
    { name:'Medical & Long-term Care', count:'60+ facilities' },
    { name:'Data Centres',           count:'12 sites' },
    { name:'Industrial',             count:'40+ plants' },
    { name:'Government',             count:'25 buildings' },
  ];
  return (
    <section style={{background:'#FBFAF7', padding:'110px 0'}}>
      <div style={{maxWidth: 1200, margin:'0 auto', padding:'0 24px'}}>
        <div style={{display:'grid', gridTemplateColumns:'1fr 1.5fr', gap: 60, alignItems:'flex-start'}}>
          <div>
            <div style={{display:'flex', alignItems:'center', gap: 14, marginBottom: 22}}>
              <span style={{width: 26, height: 1, background:'#E22227'}}/>
              <span style={{fontFamily:'Inter', fontSize:11, fontWeight:600, letterSpacing:'0.32em', color:'#12365A'}}>WHO WE SERVE</span>
            </div>
            <h2 style={{fontFamily:'"Archivo Black", sans-serif', fontWeight: 900, fontSize: 48, lineHeight: 1.02, margin: 0, letterSpacing:'-0.015em', color:'#0B213A'}}>
              From the top<br/>floor of a tower<br/>to the loading<br/>dock of a plant.
            </h2>
            <p style={{fontFamily:'Inter', fontSize:15, lineHeight:1.7, color:'#3A4552', marginTop:24, maxWidth: 400}}>
              Every property type comes with its own code, its own risks and its own
              stakeholders. We've worked with all of them.
            </p>
          </div>
          <div style={{display:'grid', gridTemplateColumns:'repeat(2,1fr)', gap: 0, borderTop:'1px solid #C9CFD6'}}>
            {inds.map((i, idx) => (
              <div key={i.name} style={{
                padding:'22px 0', borderBottom:'1px solid #C9CFD6',
                borderRight: idx % 2 === 0 ? '1px solid #C9CFD6' : 'none',
                paddingLeft: idx % 2 === 1 ? 24 : 0,
                paddingRight: idx % 2 === 0 ? 24 : 0,
                display:'flex', justifyContent:'space-between', alignItems:'center', gap: 14,
                cursor:'pointer', transition:'background 0.2s ease'
              }}
              onMouseEnter={e=>e.currentTarget.style.background='#F5F1EA'}
              onMouseLeave={e=>e.currentTarget.style.background='transparent'}
              >
                <div style={{display:'flex', alignItems:'center', gap: 14, minWidth: 0}}>
                  <span style={{fontFamily:'"Archivo Black", sans-serif', fontSize:14, color:'#E22227', flexShrink: 0}}>—</span>
                  <span style={{fontFamily:'Inter', fontSize: 17, fontWeight:600, color:'#0B213A'}}>{i.name}</span>
                </div>
                <span style={{fontFamily:'Inter', fontSize: 12, color:'#64707D', letterSpacing:'0.06em', textAlign:'right', whiteSpace:'nowrap', flexShrink: 0}}>{i.count}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function Testimonials() {
  const items = [
    {
      quote: "They caught deficiencies our previous vendor had signed off on for three years running. Their reports are the reason we passed our insurance re-cert without a single conditional item.",
      name: "Sarah M.", role: "VP Property Operations · REIT (24 buildings)",
    },
    {
      quote: "Two-hour response at 2am on a Tuesday. Tech showed up in uniform with the right parts on the truck. That's not a service — that's a partnership.",
      name: "David P.", role: "Facilities Director · Class-A Office Tower",
    },
    {
      quote: "The portal made our compliance audit painless. Every inspection, every deficiency, every remediation — all in one place, all searchable, all signed.",
      name: "Amara K.", role: "Regional Facilities Manager · Retail Chain",
    },
  ];
  const [idx, setIdx] = React.useState(0);
  React.useEffect(()=>{ const t = setInterval(()=>setIdx(i => (i+1) % items.length), 6500); return ()=>clearInterval(t); }, []);
  return (
    <section style={{background:'#0B213A', color:'#fff', padding:'110px 0'}}>
      <div style={{maxWidth: 1200, margin:'0 auto', padding:'0 24px'}}>
        <div style={{display:'grid', gridTemplateColumns:'1fr 2fr', gap: 60, alignItems:'flex-start'}}>
          <div>
            <div style={{display:'flex', alignItems:'center', gap: 14, marginBottom: 22}}>
              <span style={{width: 26, height: 1, background:'#F5A524'}}/>
              <span style={{fontFamily:'Inter', fontSize:11, fontWeight:600, letterSpacing:'0.32em', color:'#F5A524'}}>CLIENTS</span>
            </div>
            <h2 style={{fontFamily:'"Archivo Black", sans-serif', fontWeight: 900, fontSize: 48, lineHeight: 1.02, margin: 0, letterSpacing:'-0.015em'}}>
              What they<br/>tell us.
            </h2>
            <div style={{marginTop: 40, display:'flex', gap: 10}}>
              {items.map((_, i) => (
                <button key={i} onClick={()=>setIdx(i)} style={{
                  all:'unset', cursor:'pointer',
                  width: 40, height: 4, background: i === idx ? '#F5A524' : 'rgba(255,255,255,0.2)',
                  transition:'background 0.3s ease'
                }}/>
              ))}
            </div>
          </div>
          <div key={idx} style={{position:'relative', animation:'fadeUp 0.5s ease-out'}}>
            <div style={{fontFamily:'"Archivo Black", sans-serif', fontSize: 120, color:'#F5A524', opacity: 0.15, lineHeight: 1, position:'absolute', top: -30, left: -10, pointerEvents:'none'}}>"</div>
            <blockquote style={{
              fontFamily:'"Instrument Serif", "Times New Roman", serif',
              fontStyle:'italic',
              fontSize: 32, lineHeight: 1.35, margin: 0,
              color:'#fff', position:'relative', maxWidth: 640
            }}>
              {items[idx].quote}
            </blockquote>
            <div style={{marginTop: 30, display:'flex', alignItems:'center', gap: 14}}>
              <span style={{width: 40, height: 1, background:'#F5A524'}}/>
              <div>
                <div style={{fontFamily:'Inter', fontSize: 14, fontWeight: 700, color:'#fff'}}>{items[idx].name}</div>
                <div style={{fontFamily:'Inter', fontSize: 12, color:'#8B95A3', marginTop: 2}}>{items[idx].role}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============================================================================
// FAQ
// ============================================================================
function FAQ() {
  const [open, setOpen] = React.useState(0);
  const items = [
    { q:'Are you licensed and insured in both Ontario and Quebec?', a:'Yes. Our field technicians hold the required Ontario and Quebec certifications for fire protection service (including CFAA, TSSA and CSA B64.10). We carry $5M in general liability and $2M in professional liability. Certificates provided on request.' },
    { q:'How fast is your emergency response?', a:'Our target is under 2 hours in-region (Ottawa/Gatineau/Kingston). We stage service vehicles across the region so a technician can typically be on-site faster than a call to another provider even gets returned.' },
    { q:'Do you handle both inspections AND repairs?', a:'Yes. We are a single vendor for both — which means the technician who finds a deficiency in the morning can typically fix it in the afternoon. No hand-offs, no scheduling ping-pong.' },
    { q:'What does the portal cost?', a:'Nothing. Access to the RFPS client portal is included with any inspection or service contract. There are no per-user or per-property fees.' },
    { q:'Do you service special-hazard systems?', a:'Yes — CO₂, clean agent (FM-200, Novec 1230), foam, kitchen suppression (Ansul, Kidde), and specialty gaseous systems. We have factory-trained technicians for each.' },
    { q:'What size properties do you service?', a:'From single-tenant offices to portfolios of 40+ buildings. If you need a phased retrofit while occupied, we\'ve done it — from a heritage courthouse to an active data centre.' },
  ];
  return (
    <section style={{background:'#F5F1EA', padding:'110px 0'}}>
      <div style={{maxWidth: 1200, margin:'0 auto', padding:'0 24px'}}>
        <div style={{textAlign:'center', marginBottom: 60}}>
          <div style={{display:'inline-flex', alignItems:'center', gap: 14, marginBottom: 22}}>
            <span style={{width: 26, height: 1, background:'#E22227'}}/>
            <span style={{fontFamily:'Inter', fontSize:11, fontWeight:600, letterSpacing:'0.32em', color:'#12365A'}}>QUESTIONS PEOPLE ASK</span>
            <span style={{width: 26, height: 1, background:'#E22227'}}/>
          </div>
          <h2 style={{fontFamily:'"Archivo Black", sans-serif', fontWeight: 900, fontSize: 52, lineHeight: 1, margin: 0, letterSpacing:'-0.015em', color:'#0B213A'}}>
            Straight answers.
          </h2>
        </div>
        <div style={{maxWidth: 860, margin:'0 auto', display:'flex', flexDirection:'column', gap: 0}}>
          {items.map((it, i) => (
            <div key={i} style={{borderTop:'1px solid #C9CFD6', borderBottom: i === items.length -1 ? '1px solid #C9CFD6' : 'none'}}>
              <button onClick={()=>setOpen(open === i ? -1 : i)} style={{
                all:'unset', cursor:'pointer', width:'100%', padding:'22px 0',
                display:'flex', alignItems:'center', justifyContent:'space-between', gap: 20
              }}>
                <span style={{fontFamily:'Inter', fontSize: 17, fontWeight:600, color:'#0B213A'}}>{it.q}</span>
                <span style={{
                  width: 32, height: 32, borderRadius:'50%', background: open === i ? '#E22227' : '#0B213A',
                  color:'#fff',
                  transition:'transform 0.3s ease, background 0.25s ease',
                  transform: open === i ? 'rotate(45deg)' : 'rotate(0)',
                  display:'inline-flex', alignItems:'center', justifyContent:'center',
                  flexShrink: 0
                }}>
                  <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
                    <path d="M6 1 V11 M1 6 H11" stroke="#fff" strokeWidth="1.8" strokeLinecap="round"/>
                  </svg>
                </span>
              </button>
              <div style={{
                overflow:'hidden',
                maxHeight: open === i ? 400 : 0,
                transition:'max-height 0.45s ease'
              }}>
                <p style={{fontFamily:'Inter', fontSize: 15, lineHeight: 1.7, color:'#3A4552', margin:0, paddingBottom: 24, maxWidth: 720}}>
                  {it.a}
                </p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================================================
// CTA + FOOTER
// ============================================================================
function CTA() {
  const { setOpen } = useBooking();
  return (
    <section id="contact" style={{position:'relative', overflow:'hidden'}}>
      <img src="reference/rf-emergency2.jpg" alt="" style={{position:'absolute', inset:0, width:'100%', height:'100%', objectFit:'cover', filter:'brightness(0.4)'}}/>
      <div style={{position:'absolute', inset:0, background:'linear-gradient(90deg, rgba(6,20,38,0.85) 0%, rgba(6,20,38,0.3) 100%)'}}/>
      <div style={{position:'relative', maxWidth: 1200, margin:'0 auto', padding:'110px 24px', color:'#fff'}}>
        <div style={{maxWidth: 760}}>
          <div style={{fontFamily:'Inter', fontSize:11, fontWeight:600, letterSpacing:'0.32em', color:'#F5A524', marginBottom: 22}}>
            READY WHEN YOU ARE
          </div>
          <h2 style={{fontFamily:'"Archivo Black", sans-serif', fontWeight: 900, fontSize: 84, lineHeight: 0.95, margin:0, letterSpacing:'-0.015em'}}>
            Get a same-week<br/>inspection quote.
          </h2>
          <p style={{fontFamily:'Inter', fontSize: 17, lineHeight: 1.6, marginTop: 26, maxWidth: 560, color:'#DDE3EA'}}>
            Send us your property list. We come back with a scoped, priced, code-cited
            proposal in five business days or fewer. No sales pressure. No obligation.
          </p>
          <div style={{marginTop: 40, display:'flex', gap: 14, flexWrap:'wrap'}}>
            <button onClick={()=>setOpen(true)} style={{
              background:'#E22227', color:'#fff', border:'none', padding:'18px 28px',
              fontFamily:'Inter', fontWeight:700, fontSize:12, letterSpacing:'0.14em', textTransform:'uppercase',
              cursor:'pointer', transition:'background 0.2s ease',
              display:'flex', alignItems:'center', gap: 10
            }}
            onMouseEnter={e=>e.currentTarget.style.background='#B01A1E'}
            onMouseLeave={e=>e.currentTarget.style.background='#E22227'}
            >Book an inspection <span>→</span></button>
            <a href="tel:6135916506" style={{
              background:'transparent', color:'#fff', border:'1px solid rgba(255,255,255,0.35)', padding:'18px 28px',
              fontFamily:'Inter', fontWeight:600, fontSize:12, letterSpacing:'0.14em', textTransform:'uppercase',
              cursor:'pointer', textDecoration:'none', display:'inline-flex', alignItems:'center', gap: 10,
              transition:'background 0.2s ease'
            }}
            onMouseEnter={e=>e.currentTarget.style.background='rgba(255,255,255,0.08)'}
            onMouseLeave={e=>e.currentTarget.style.background='transparent'}
            >613 · 591 · 6506 (24/7)</a>
          </div>
          <div style={{marginTop: 30, display:'flex', gap: 30, fontFamily:'Inter', fontSize: 13, color:'#DDE3EA'}}>
            <div style={{display:'flex', alignItems:'center', gap: 10}}><IconPhone size={18} color="#F5A524"/> 613 · 591 · 6506 (24/7)</div>
            <div style={{display:'flex', alignItems:'center', gap: 10}}><IconClipboard size={18} color="#F5A524"/> quotes@rfpsservices.com</div>
          </div>
        </div>
      </div>
    </section>
  );
}

// Small footer link — either a plain anchor href, or an onClick handler
// (used for footer links that need to open the booking modal).
function FooterLink({ href, onClick, target, rel, children }) {
  const [hover, setHover] = React.useState(false);
  const baseStyle = {
    display:'block', fontFamily:'Inter', fontSize:13,
    color: hover ? '#F5A524' : '#DDE3EA',
    padding:'5px 0', textDecoration:'none',
    background:'transparent', border:'none', textAlign:'left',
    cursor:'pointer', transition:'color 0.2s ease', width:'100%'
  };
  if (onClick && !href) {
    return (
      <button
        onClick={onClick}
        onMouseEnter={()=>setHover(true)}
        onMouseLeave={()=>setHover(false)}
        style={{...baseStyle, fontFamily:'Inter'}}>
        {children}
      </button>
    );
  }
  return (
    <a href={href} target={target} rel={rel}
       onMouseEnter={()=>setHover(true)}
       onMouseLeave={()=>setHover(false)}
       style={baseStyle}>
      {children}
    </a>
  );
}

// The three link columns in the footer. Kept in sync with the top-nav routes
// so users have one canonical destination per topic. Booking-modal triggers
// use onClick instead of href.
function FooterColumns() {
  const { setOpen: setBookingOpen } = useBooking();
  const columns = [
    {
      title: 'Services',
      links: [
        { label: 'Inspections & Testing',    href: 'Inspections-Testing.html' },
        { label: 'Maintenance & Service',    href: 'Maintenance-Service.html' },
        { label: 'Retrofits & Upgrades',     href: 'Retrofits-Upgrades.html' },
        { label: '24/7 Emergency Response',  href: 'Emergency-Response.html' },
        { label: 'Backflow Prevention',      href: 'Backflow-Prevention.html' },
        { label: 'All services',             href: 'Services.html' },
      ]
    },
    {
      title: 'Company',
      links: [
        { label: 'About RFPS',      href: 'About.html' },
        { label: 'Our Team',        href: 'Our-Team.html' },
        { label: 'How We Work',     href: 'How-We-Work.html' },
        { label: 'Careers',         href: 'Careers.html' },
        { label: 'Contact',         href: 'Contact.html' },
      ]
    },
    {
      title: 'Resources',
      links: [
        { label: 'Client Portal',        href: CLIENT_PORTAL_URL, target:'_blank', rel:'noopener noreferrer' },
        { label: 'Book an Inspection',   onClick: () => setBookingOpen(true) },
        { label: 'Request a Quote',      onClick: () => setBookingOpen(true) },
        { label: 'Resources & Blog',     href: 'Blog.html' },
        { label: 'Emergency: 613-591-6506', href: 'tel:6135916506' },
      ]
    },
  ];
  return (
    <>
      {columns.map(col => (
        <div key={col.title}>
          <div style={{fontFamily:'"Archivo Black", sans-serif', fontSize:12, letterSpacing:'0.18em', color:'#fff', marginBottom: 16}}>
            {col.title.toUpperCase()}
          </div>
          {col.links.map(l => (
            <FooterLink key={l.label} href={l.href} onClick={l.onClick} target={l.target} rel={l.rel}>
              {l.label}
            </FooterLink>
          ))}
        </div>
      ))}
    </>
  );
}

function Footer() {
  return (
    <footer style={{background:'#061426', color:'#DDE3EA'}}>
      <div style={{maxWidth: 1200, margin:'0 auto', padding:'70px 24px 30px'}}>
        <div style={{display:'grid', gridTemplateColumns:'1.4fr 1fr 1fr 1fr', gap: 40, alignItems:'flex-start'}}>
          <div>
            <a href="index.html" aria-label="RFPS Services — home" style={{display:'inline-flex', textDecoration:'none'}}>
              <RFPSLogo variant="light" size="md"/>
            </a>
            <p style={{fontFamily:'Inter', fontSize:13, lineHeight:1.6, color:'#8B95A3', marginTop:22, maxWidth: 340}}>
              RFPS Services Inc. — the service, inspection and maintenance division of the
              Royal Fire Protection family of companies. Serving Ontario and Quebec since 2015.
            </p>
            <div style={{marginTop: 22, fontFamily:'Inter', fontSize: 12.5, color:'#8B95A3', display:'flex', flexDirection:'column', gap: 4}}>
              <span>6 Antares Drive, Phase 1, Suite 200</span>
              <span>Ottawa, ON K2E 8A9</span>
              <a href="mailto:info@rfpsservices.com" style={{color:'#8B95A3', textDecoration:'none', marginTop: 6}}>info@rfpsservices.com</a>
              <a href="tel:6135916506" style={{color:'#8B95A3', textDecoration:'none'}}>(613) 591-6506 · 24/7</a>
            </div>
          </div>
          <FooterColumns/>
        </div>
        <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', marginTop: 50, paddingTop: 22, borderTop:'1px solid rgba(255,255,255,0.08)', fontFamily:'Inter', fontSize: 11, color:'#64707D', letterSpacing:'0.06em', gap: 20, flexWrap:'wrap'}}>
          <span>© 2026 RFPS Services Inc. All rights reserved.</span>
          <span style={{display:'flex', gap: 20}}>
            <a href="Privacy.html" style={{color:'inherit', textDecoration:'none'}}>Privacy</a>
            <a href="Terms.html" style={{color:'inherit', textDecoration:'none'}}>Terms</a>
            <a href="Accessibility.html" style={{color:'inherit', textDecoration:'none'}}>Accessibility</a>
          </span>
          <a href="https://royalfire.com" target="_blank" rel="noopener noreferrer" style={{color:'inherit', textDecoration:'none'}}>
            A sister company of Royal Fire Protection
          </a>
        </div>
        <div style={{marginTop: 18, paddingTop: 18, borderTop:'1px solid rgba(255,255,255,0.04)', display:'flex', justifyContent:'center', alignItems:'center', gap: 10, fontFamily:'Inter', fontSize: 10.5, color:'#64707D', letterSpacing:'0.14em', textTransform:'uppercase'}}>
          <span>Website by</span>
          <a href="https://fullview.ca/" target="_blank" rel="noopener noreferrer" style={{display:'inline-flex', alignItems:'center', textDecoration:'none'}} aria-label="FullView Design">
            <img src="reference/fullview-logo.png" alt="FullView Design" style={{height: 14, width:'auto', display:'block', opacity: 0.85}}/>
          </a>
        </div>
      </div>
    </footer>
  );
}

// ============================================================================
// HOMEPAGE
// ============================================================================
function Homepage() {
  return (
    <BookingProvider>
      <div id="homepage-scroll" style={{background:'#fff', color:'#0A0F14', fontFamily:'Inter'}}>
        <LeafAnimations/>
        <TopEmergencyBar/>
        <Nav/>
        <Hero/>
        <Stats/>
        <Services/>
        <Process/>
        <Portal/>
        <Coverage/>
        <Industries/>
        <Testimonials/>
        <FAQ/>
        <CTA/>
        <Footer/>
      </div>
    </BookingProvider>
  );
}

// v2 — mobile-responsive homepage. Exposes HomepageV2 globally so both
// versions of the design can coexist in the project.
// Also exports shared chrome (Nav, Footer, TopEmergencyBar, BookingProvider, etc.)
// and repeatable sections (Process, Coverage, Testimonials, PortalInfographic)
// so sub-pages like Services.html can render a consistent site frame without
// duplicating code.
Object.assign(window, {
  HomepageV2: Homepage,
  RFPS_SERVICE_LINKS: SERVICE_LINKS,
  RFPS_Nav: Nav,
  RFPS_Footer: Footer,
  RFPS_TopEmergencyBar: TopEmergencyBar,
  RFPS_BookingProvider: BookingProvider,
  RFPS_useBooking: useBooking,
  RFPS_useInView: useInView,
  RFPS_Process: Process,
  RFPS_Coverage: Coverage,
  RFPS_Testimonials: Testimonials,
  RFPS_PortalInfographic: PortalInfographic,
});