/* ── Page sections ─────────────────────────────────────────────────────── */

/* ── Nav ─────────────────────────────────────────────────────────── */
function Nav() {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <nav className={'nav' + (scrolled ? ' scrolled' : '')}>
      <div className="wrap nav-inner">
        <div className="nav-mid">
          <ReeveWordmark size={30} />
        </div>
        <div className="nav-links">
          <a href="#model">Model</a>
          <a href="#product">Product</a>
          <a href="#vs">vs CAFM</a>
          <a href="#brand">For agents</a>
          <a href="#proof">Proof</a>
        </div>
        <div className="nav-cta">
          <a
            href="https://calendar.app.google/be3ib85HS3rDzJtr8"
            target="_blank"
            rel="noopener noreferrer"
            className="btn btn-primary"
          >
            Book a walkthrough
            <span className="arrow">→</span>
          </a>
        </div>
      </div>
    </nav>
  );
}

/* ── Hero ─────────────────────────────────────────────────────────── */
function Hero({ headline, sub }) {
  return (
    <>
      <section className="hero">
        <div className="wrap">
          <div className="hero-grid">
            <div className="hero-left">
              <h1 className="h-display fade-up d2" dangerouslySetInnerHTML={{ __html: headline }} />
              <p className="lede fade-up d3">{sub}</p>
              <div className="hero-ctas fade-up d4">
                <a
                  href="https://calendar.app.google/be3ib85HS3rDzJtr8"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="btn btn-primary"
                >
                  Book a walkthrough <span className="arrow">→</span>
                </a>
                <a href="#model" className="btn btn-ghost">See how reeve works</a>
              </div>
            </div>

            <div className="hero-right">
              <HeroVisual />
            </div>
          </div>

          <div className="hero-stat fade-up d4">
            <div className="hero-stat-pair">
              <div className="hero-stat-cell">
                <div className="hero-stat-big">2.2<sub>d</sub></div>
                <div className="hero-stat-cell-label">reeve average</div>
                <div className="hero-stat-cell-sub">Time to resolution</div>
              </div>
              <div className="hero-stat-vs">vs</div>
              <div className="hero-stat-cell hero-stat-cell-muted">
                <div className="hero-stat-big">19<sub>d</sub></div>
                <div className="hero-stat-cell-label">Industry average</div>
                <div className="hero-stat-cell-sub">For the sector</div>
              </div>
            </div>
            <div className="hero-stat-foot">
              Measured across <strong>100+ London buildings</strong>.
            </div>
          </div>
        </div>
      </section>
      <DispatchLog />
    </>
  );
}

/* ── Dispatch log ─ scrolling status ticker, sits under the hero ── */
function DispatchLog() {
  const items = [
    { time: '08:14', badge: 'R03', cls: 'r3', ev: 'P1 lift fault',  loc: 'Lyle St SE1',        s: 'dispatched · 6 min' },
    { time: '08:08', badge: 'R01', cls: 'r1', ev: 'HVAC',            loc: 'Tower 9 EC2',        s: 'on site' },
    { time: '07:52', badge: 'R02', cls: 'r2', ev: 'Leak',            loc: 'Greycote SW1',       s: 'resolved', ok: true },
    { time: '07:41', badge: 'R03', cls: 'r3', ev: 'Access',          loc: 'Lambert WC1',        s: 'triage' },
    { time: '07:20', badge: 'R01', cls: 'r1', ev: 'PPM fire panel',  loc: 'Westhall E1',        s: 'resolved', ok: true },
    { time: '07:02', badge: 'R03', cls: 'r3', ev: 'Cleaning',        loc: 'Thirty-Three EC1',   s: 'dispatched · 12 min' },
    { time: '06:48', badge: 'R02', cls: 'r2', ev: 'Pest',            loc: 'Hyperion W1',        s: 'resolved', ok: true },
    { time: '06:31', badge: 'R01', cls: 'r1', ev: 'Plumbing',        loc: 'Curtain Road EC2',   s: 'on site' },
  ];
  // double for marquee seamless loop
  const loop = [...items, ...items];
  return (
    <div className="dispatch-log">
      <div className="wrap">
        <div className="dispatch-track">
          {loop.map((it, i) => (
            <span className="item" key={i}>
              <span className="time">{it.time}</span>
              <span className={'badge ' + it.cls}>{it.badge}</span>
              <span className="ev">{it.ev}</span>
              <span>{it.loc}</span>
              <span className="sep">→</span>
              <span className={it.ok ? 'ok' : ''}>{it.s}</span>
            </span>
          ))}
        </div>
      </div>
    </div>
  );
}

/* ── Certifications strip ─ sits directly under the dispatch ticker ── */
function Certifications() {
  return (
    <section className="certs">
      <div className="wrap certs-row">
        <img
          src="assets/img/iso27001.png"
          alt="ISO 27001 certified"
          className="cert-img"
        />
        <svg
          width="72"
          height="72"
          viewBox="0 0 100 100"
          xmlns="http://www.w3.org/2000/svg"
          className="cert-bcorp"
          aria-label="Certified B Corporation"
        >
          <text x="50" y="14" textAnchor="middle" fontFamily="Inter Tight, ui-sans-serif, system-ui" fontSize="9" fontWeight="600" letterSpacing="0.5" fill="currentColor">
            CERTIFIED
          </text>
          <circle cx="50" cy="52" r="20" fill="none" stroke="currentColor" strokeWidth="2.6" />
          <text x="50" y="60" textAnchor="middle" fontFamily="Inter Tight, ui-sans-serif, system-ui" fontSize="26" fontWeight="700" fill="currentColor">
            B
          </text>
          <line x1="32" y1="80" x2="68" y2="80" stroke="currentColor" strokeWidth="1.4" />
          <text x="50" y="92" textAnchor="middle" fontFamily="Inter Tight, ui-sans-serif, system-ui" fontSize="9" fontWeight="600" letterSpacing="0.3" fill="currentColor">
            CORPORATION
          </text>
        </svg>
        <img
          src="assets/img/accreditations/iwfm.png"
          alt="IWFM corporate member"
          className="cert-img cert-img-sm"
        />
      </div>
    </section>
  );
}

/* ── Trust strip ─────────────────────────────────────────────────────── */
function Trust() {
  // Real Kitt client logos — used here as illustrative occupier brands
  // that already sit in Kitt-operated buildings.
  const clients = [
    { src: 'assets/img/logos/clients/kitt_client_miro.svg',       alt: 'Miro' },
    { src: 'assets/img/logos/clients/kitt_client_oatly.svg',      alt: 'Oatly' },
    { src: 'assets/img/logos/clients/kitt_client_kuoni.svg',      alt: 'Kuoni' },
    { src: 'assets/img/logos/clients/kitt_client_massmutual.svg', alt: 'MassMutual' },
    { src: 'assets/img/logos/clients/kitt_client_gumgum.svg',     alt: 'GumGum' },
    { src: 'assets/img/logos/clients/kitt_client_signifyd.svg',   alt: 'Signifyd' },
    { src: 'assets/img/logos/clients/kitt_client_flo.svg',        alt: 'Flo' },
    { src: 'assets/img/logos/clients/kitt_client_believ.svg',     alt: 'Believ' },
  ];
  return (
    <section className="trust">
      <div className="wrap trust-row">
        <span className="trust-label">Operating behind the scenes for occupiers like</span>
        <div className="trust-logos">
          {clients.map((c, i) => (
            <img key={i} className="trust-logo" src={c.src} alt={c.alt} />
          ))}
        </div>
      </div>
    </section>
  );
}

/* ── Problem ─────────────────────────────────────────────────────── */
function Problem() {
  const pains = [
    {
      n: '01',
      t: 'Too many routes, no single standard.',
      d: 'Different suppliers, different formats, different evidence. Every job is its own conversation.'
    },
    {
      n: '02',
      t: 'Suppliers are visible, not controlled.',
      d: 'You can see the directory. You can\'t see SLA breaches, recurring faults or what each supplier actually costs.'
    },
    {
      n: '03',
      t: 'Reporting and resolution arrive too late.',
      d: 'Static monthly reports describe last month. The building\'s already paid the price.'
    },
  ];
  return (
    <section className="section-pad" id="problem">
      <div className="wrap problem-grid">
        <div>
          <span className="eyebrow">The problem</span>
          <h2 className="h-section" style={{ marginTop: 20 }}>
            Ticketing systems log work. They don't run buildings.
          </h2>
        </div>
        <div>
          <p className="lede" style={{ marginBottom: 8 }}>
            Most property teams can already record a job. The hard part is everything after:
            triage, chasing suppliers, access, evidence, approvals, repeat faults, client updates —
            and knowing whether the building is actually getting better, faster.
          </p>
          <div className="pains">
            {pains.map(p => (
              <div className="pain" key={p.n}>
                <span className="pain-num">{p.n}</span>
                <div>
                  <div className="pain-title">{p.t}</div>
                  <div className="pain-desc">{p.d}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ── Routes ─────────────────────────────────────────────────────── */
function Routes() {
  return (
    <section className="routes-block" id="model">
      <div className="wrap">
        <div className="section-split">
          <div>
            <h2 className="h-section">
              One managed layer for every route to resolution.
            </h2>
          </div>
          <p className="section-split-lede">
            For each job your team picks the right route — your suppliers, our specialists or our team.
            reeve controls workflow, evidence and reporting across all three, so the building sees one standard.
          </p>
        </div>

        <div className="route-grid">
          <article className="route">
            <span className="route-tag"><span className="dot" /> Route 01</span>
            <h3 className="route-title">Use your suppliers.</h3>
            <p className="route-desc">Keep the contractors you trust. reeve onboards them to one workflow, tracks SLAs and reports on performance.</p>
            <ul className="route-list">
              <li>Supplier onboarding &amp; compliance pack</li>
              <li>SLA tracking and breach escalation</li>
              <li>Photo &amp; evidence on every job</li>
              <li>Per-supplier performance reporting</li>
            </ul>
            <div className="route-foot">
              <span>Continuity</span>
              <strong>Your roster, controlled</strong>
            </div>
          </article>

          <article className="route">
            <span className="route-tag"><span className="dot" /> Route 02</span>
            <h3 className="route-title">Use our specialists.</h3>
            <p className="route-desc">Vetted third parties reeve manages end-to-end. Same rhythm, same evidence trail, single point of accountability.</p>
            <ul className="route-list">
              <li>Vetted specialist network</li>
              <li>reeve is accountable for the route</li>
              <li>Cover gaps in your supplier list</li>
              <li>Mobilised inside 24 h</li>
            </ul>
            <div className="route-foot">
              <span>Coverage</span>
              <strong>reeve-managed</strong>
            </div>
          </article>

          <article className="route premium">
            <span className="route-tag"><span className="dot" /> Route 03 · default</span>
            <h3 className="route-title">Use our team.</h3>
            <p className="route-desc">reeve's own operatives for selected services. The fastest, most evidenced route — and the best margin per building.</p>
            <ul className="route-list">
              <li>Insourced, highly-utilised operatives</li>
              <li>Live "en route" tracking</li>
              <li>Highest evidence &amp; resolution standard</li>
              <li>Best commercial outcome per building</li>
            </ul>
            <div className="route-foot">
              <span>Speed · margin · standard</span>
              <strong>reeve-delivered</strong>
            </div>
          </article>
        </div>
      </div>
    </section>
  );
}

/* ── Services in scope ─ exact port of the home-page ServiceExplorer ── */
const SERVICES_DATA = [
  {
    id: 'cleaning',
    title: 'Cleaning & Housekeeping',
    cat: 'Soft FM',
    img: 'assets/img/cleaning.jpg',
    lede: 'Managed evening cleaning and housekeeping teams on the London Living Wage, bespoke task lists, overnight audits, waste and sanitary handling. Consumables fixed-cost.',
    included: ['London Living Wage cleaners', 'Weekly overnight audits', 'Sick cover, NI, pension', 'Consumables & equipment', 'Bespoke task list per site', 'Waste + sanitary bins'],
  },
  {
    id: 'compliance',
    title: 'Compliance, Health & Safety',
    cat: 'Regulatory',
    img: 'assets/img/compliance.jpg',
    lede: 'Statutory compliance including Fire Risk Assessment, Water Risk Assessment, L8 legionella testing, emergency lighting drain-down, fire extinguisher servicing, fire door inspections and signage reviews — remedials managed end-to-end.',
    included: ['Fire Risk Assessment', 'Water Risk Assessment', 'L8 legionella testing', 'Fire door & extinguisher', 'H&S signage review', 'First aid provision'],
  },
  {
    id: 'reactive',
    title: 'Reactive Maintenance',
    cat: 'Hard FM',
    img: 'assets/img/maintenance.jpg',
    lede: 'In-house electrical, plumbing, carpentry and handyman specialists. Preferential hourly rate beyond the included allowance, parts included for minor work.',
    included: ['In-house specialists', 'Included monthly hours', 'Preferential ad-hoc rate', 'Small parts included', 'Structured reporting', 'Supplier network'],
  },
  {
    id: 'hvac',
    title: 'HVAC Maintenance',
    cat: 'Hard FM',
    img: 'assets/img/hvac.jpg',
    lede: 'Annual servicing, quarterly filter swap, monthly checks, for all heating, ventilation and cooling systems.',
    included: ['Annual servicing', 'Quarterly filter clean', 'Monthly checks', 'Two-quote policy above £1k'],
  },
  {
    id: 'internet',
    title: 'Connectivity',
    cat: 'Tech',
    img: 'assets/img/tech.jpg',
    lede: 'Full fibre, microwave and 5G solutions, primary and backup lines, managed firewall and Wi-Fi, 24/7 ISP NOC monitoring with auto-ticketed fault triage.',
    included: ['Full fibre', 'Microwave & 5G', 'Primary + backup lines', 'Managed firewall & Wi-Fi', '24/7 NOC monitoring', 'Forge-managed triage'],
  },
  {
    id: 'security',
    title: 'Security & CCTV',
    cat: 'Tech',
    img: 'assets/img/security-delivery.jpg',
    lede: 'Motion-triggered CCTV on access/egress, out-of-hours monitoring, keyholding, guarding dispatch and police liaison on suspicious activation.',
    included: ['Motion-triggered CCTV', 'OOH remote monitoring', 'Keyholding & guarding', 'Police liaison', 'System PPM', 'Emergency OOH support'],
  },
  {
    id: 'plants',
    title: 'Plants & Foliage',
    cat: 'Soft FM',
    img: 'assets/img/plants.jpg',
    lede: 'Weekly technician visits, full health guarantee with free replacement, treatment included. Desk planters and floor-standing variants.',
    included: ['14 day visits', 'Water, dust, prune', 'Free plant replacement', 'Treatment included', 'Desk + floor-standing', 'Planting plan'],
  },
  {
    id: 'fb',
    title: 'Tea, Coffee & Milk',
    cat: 'F&B',
    img: 'assets/img/coffee-beans.jpg',
    lede: 'Artisan beans, three teas, dairy and alternatives. Monthly cadence with weekly top-ups, rapid restocks, tastings included.',
    included: ['Artisan coffee beans', '3-variety tea selection', 'Dairy + plant alternatives', 'Sugars & sweeteners', 'Coffee tastings', 'Rapid restocks'],
  },
  {
    id: 'coffee',
    title: 'Coffee Machines',
    cat: 'F&B',
    img: 'assets/img/coffee-machine.jpg',
    lede: 'Commercial-grade coffee machines, fully managed maintenance, 4hr engineer response. Installation, tech support and continuous cover included.',
    included: ['Jura, Cimabli & Nespresso machines', 'Maintenance & servicing', '~4h engineer response', 'Installation & tech support', 'Usage-based service', 'Lease or purchase'],
  },
  {
    id: 'snacks',
    title: 'Snacks, Fruit & Pantry',
    cat: 'F&B',
    img: 'assets/img/fb-snacks-basket.jpg',
    lede: 'A 500+ product range delivered next-day and put away into your fridge or pantry. Fresh fruit sourced from Borough Market, all transported on a fully electric fleet.',
    included: ['Next-day delivery', 'Putaway into fridge or pantry', 'Borough Market fruit', '500+ products', 'Electric delivery fleet'],
  },
];

function servicesImgPosition(id) {
  if (id === 'cleaning') return 'center 65%';
  if (id === 'fb') return 'center 70%';
  if (id === 'coffee') return 'center 65%';
  return 'center';
}

function ServicesCard({ s }) {
  return (
    <article
      style={{
        flex: '0 0 360px',
        scrollSnapAlign: 'start',
        display: 'flex',
        flexDirection: 'column',
        background: 'var(--paper)',
        border: '1px solid var(--rule)',
        borderRadius: 16,
        overflow: 'hidden',
        boxShadow: '0 2px 6px rgb(0 0 0 / 0.04)',
      }}
    >
      <div
        style={{
          height: 200,
          backgroundImage: `url(${s.img})`,
          backgroundSize: 'cover',
          backgroundPosition: servicesImgPosition(s.id),
          position: 'relative',
        }}
      >
        <div
          style={{
            position: 'absolute',
            top: 14,
            left: 14,
            background: 'var(--paper)',
            color: 'var(--ink)',
            padding: '5px 11px',
            borderRadius: 999,
            fontSize: 11,
            fontWeight: 600,
            letterSpacing: '0.04em',
            textTransform: 'uppercase',
            boxShadow: '0 2px 6px rgb(0 0 0 / 0.12)',
          }}
        >
          {s.cat}
        </div>
      </div>
      <div style={{ padding: 24, display: 'flex', flexDirection: 'column', flex: 1 }}>
        <h3
          style={{
            fontFamily: 'var(--display)',
            fontSize: 22,
            fontWeight: 600,
            letterSpacing: '-0.02em',
            lineHeight: 1.15,
            marginBottom: 12,
            color: 'var(--ink)',
          }}
        >
          {s.title}
        </h3>
        <p style={{ fontSize: 14, color: 'var(--ink-2)', lineHeight: 1.55, marginBottom: 18 }}>{s.lede}</p>
        <div style={{ marginTop: 'auto', paddingTop: 16, borderTop: '1px solid var(--rule)' }}>
          <div className="eyebrow" style={{ marginBottom: 10 }}>Included</div>
          <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'grid', gap: 6 }}>
            {s.included.map((it) => (
              <li key={it} style={{ display: 'flex', gap: 8, fontSize: 13, color: 'var(--ink)' }}>
                <span style={{ color: 'var(--accent)', flexShrink: 0, lineHeight: '18px' }}>✓</span>
                <span style={{ lineHeight: 1.4 }}>{it}</span>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </article>
  );
}

function Services() {
  const scrollerRef = React.useRef(null);
  const [canPrev, setCanPrev] = React.useState(false);
  const [canNext, setCanNext] = React.useState(true);

  const updateButtons = () => {
    const el = scrollerRef.current;
    if (!el) return;
    setCanPrev(el.scrollLeft > 4);
    setCanNext(el.scrollLeft + el.clientWidth < el.scrollWidth - 4);
  };

  React.useEffect(() => {
    updateButtons();
    const el = scrollerRef.current;
    if (!el) return;
    el.addEventListener('scroll', updateButtons, { passive: true });
    window.addEventListener('resize', updateButtons);
    return () => {
      el.removeEventListener('scroll', updateButtons);
      window.removeEventListener('resize', updateButtons);
    };
  }, []);

  const scrollBy = (dir) => {
    const el = scrollerRef.current;
    if (!el) return;
    const step = Math.round(el.clientWidth * 0.85);
    el.scrollBy({ left: dir * step, behavior: 'smooth' });
  };

  return (
    <section
      data-sect
      id="services"
      style={{ background: 'var(--paper-2)', borderTop: '1px solid var(--rule)', padding: 'clamp(72px, 9vw, 112px) 0' }}
    >
      <div className="wrap">
        <div
          style={{
            display: 'flex',
            flexWrap: 'wrap',
            alignItems: 'end',
            justifyContent: 'space-between',
            gap: 24,
            marginBottom: 24,
          }}
        >
          <div>
            <h2
              className="h-section"
              style={{ maxWidth: 760 }}
            >
              Every service your asset needs, ready and waiting.
            </h2>
          </div>
          <div style={{ display: 'flex', gap: 8 }}>
            <button
              type="button"
              aria-label="Previous services"
              onClick={() => scrollBy(-1)}
              disabled={!canPrev}
              style={{
                width: 44,
                height: 44,
                borderRadius: '50%',
                border: '1px solid var(--rule)',
                background: 'var(--paper)',
                color: canPrev ? 'var(--ink)' : 'var(--ink-3)',
                cursor: canPrev ? 'pointer' : 'default',
                opacity: canPrev ? 1 : 0.5,
                fontSize: 18,
                fontFamily: 'var(--display)',
              }}
            >
              ←
            </button>
            <button
              type="button"
              aria-label="Next services"
              onClick={() => scrollBy(1)}
              disabled={!canNext}
              style={{
                width: 44,
                height: 44,
                borderRadius: '50%',
                border: '1px solid var(--rule)',
                background: 'var(--paper)',
                color: canNext ? 'var(--ink)' : 'var(--ink-3)',
                cursor: canNext ? 'pointer' : 'default',
                opacity: canNext ? 1 : 0.5,
                fontSize: 18,
                fontFamily: 'var(--display)',
              }}
            >
              →
            </button>
          </div>
        </div>

        <div style={{ position: 'relative', marginTop: 16 }}>
          <style>{`
            .gantry-services-scroller { scrollbar-width: none; -ms-overflow-style: none; }
            .gantry-services-scroller::-webkit-scrollbar { display: none; }
          `}</style>
          <div
            ref={scrollerRef}
            className="gantry-services-scroller"
            style={{
              display: 'flex',
              gap: 20,
              overflowX: 'auto',
              scrollSnapType: 'x mandatory',
              padding: '8px 4px 32px',
              WebkitOverflowScrolling: 'touch',
            }}
          >
            {SERVICES_DATA.map((s) => (
              <ServicesCard key={s.id} s={s} />
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ── Front-door card with live whitelabel preview ─ swatches drive the
   logo colour, slider fill and tone-current colour. ── */
const BRAND_COLORS = [
  { name: 'Navy',   value: 'oklch(28% 0.06 250)' },
  { name: 'Bronze', value: 'oklch(60% 0.13 50)'  },
  { name: 'Forest', value: 'oklch(48% 0.09 160)' },
  { name: 'Brick',  value: 'oklch(48% 0.10 30)'  },
];

function FrontDoorCard() {
  const [activeIdx, setActiveIdx] = React.useState(0);
  const activeColor = BRAND_COLORS[activeIdx].value;

  return (
    <article className="m-card">
      <div className="m-card-visual m-vis-brand">
        <div className="m-brand-panel">
          {/* Logo row */}
          <div className="m-brand-row">
            <span className="m-brand-row-label">Logo</span>
            <div className="m-brand-logo">
              <div
                className="m-brand-logo-thumb"
                style={{ background: activeColor, transition: 'background 280ms ease' }}
              >
                M&amp;F
              </div>
              <div className="m-brand-logo-meta">
                <span className="m-brand-logo-name">marlow-finch.svg</span>
                <span className="m-brand-logo-size">240 × 60</span>
              </div>
              <span className="m-brand-replace">Replace</span>
            </div>
          </div>

          {/* Brand colour swatches */}
          <div className="m-brand-row">
            <span className="m-brand-row-label">Brand</span>
            <div className="m-brand-swatches">
              {BRAND_COLORS.map((c, i) => (
                <button
                  key={c.name}
                  type="button"
                  className={'m-swatch' + (i === activeIdx ? ' m-swatch-active' : '')}
                  style={{ background: c.value }}
                  aria-label={c.name}
                  aria-pressed={i === activeIdx}
                  onClick={() => setActiveIdx(i)}
                />
              ))}
              <button type="button" className="m-swatch m-swatch-add" aria-label="Add colour">+</button>
            </div>
          </div>

          {/* Tone slider */}
          <div className="m-brand-row">
            <span className="m-brand-row-label">Tone</span>
            <div className="m-tone">
              <div className="m-tone-track">
                <div
                  className="m-tone-fill"
                  style={{ background: activeColor, transition: 'background 280ms ease' }}
                />
                <div
                  className="m-tone-thumb"
                  style={{ borderColor: activeColor, transition: 'border-color 280ms ease' }}
                />
              </div>
              <div className="m-tone-labels">
                <span>Formal</span>
                <span
                  className="m-tone-current"
                  style={{ color: activeColor, transition: 'color 280ms ease' }}
                >
                  Warm
                </span>
                <span>Friendly</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div className="m-card-body">
        <span className="m-card-eyebrow">Whitelabelling</span>
        <h3 className="m-card-title">Client-branded across mobile &amp; desktop.</h3>
        <p className="m-card-desc">Tenants only ever see your brand. reeve runs the layer behind.</p>
      </div>
    </article>
  );
}

/* ── Modules ─ carousel format, cards LEFT, heading RIGHT ─────────── */
function Modules() {
  const scrollerRef = React.useRef(null);
  const [canPrev, setCanPrev] = React.useState(false);
  const [canNext, setCanNext] = React.useState(true);

  const updateButtons = () => {
    const el = scrollerRef.current;
    if (!el) return;
    setCanPrev(el.scrollLeft > 4);
    setCanNext(el.scrollLeft + el.clientWidth < el.scrollWidth - 4);
  };

  React.useEffect(() => {
    updateButtons();
    const el = scrollerRef.current;
    if (!el) return;
    el.addEventListener('scroll', updateButtons, { passive: true });
    window.addEventListener('resize', updateButtons);
    return () => {
      el.removeEventListener('scroll', updateButtons);
      window.removeEventListener('resize', updateButtons);
    };
  }, []);

  const scrollBy = (dir) => {
    const el = scrollerRef.current;
    if (!el) return;
    const step = Math.round(el.clientWidth * 0.85);
    el.scrollBy({ left: dir * step, behavior: 'smooth' });
  };

  return (
    <section className="section-pad" id="product">
      <div className="wrap">
        <div className="modules-carousel-layout">
          {/* LEFT: carousel */}
          <div className="modules-carousel-wrap">
            <div ref={scrollerRef} className="modules-carousel">
              {/* 1 — Live tracking */}
              <article className="m-card">
                <div className="m-card-visual m-vis-tracking">
                  <div className="m-tracking-phone">
                    <div className="m-tracking-head">
                      <span className="m-tracking-mark" />
                      <div>
                        <div className="m-tracking-brand">Marlow &amp; Finch</div>
                        <div className="m-tracking-sub">123 Lyle Street</div>
                      </div>
                      <span className="m-tracking-live"><span className="live-dot" />Live</span>
                    </div>
                    <div className="m-tracking-map">
                      <svg viewBox="0 0 200 100" preserveAspectRatio="none">
                        <defs>
                          {/* Route hugs the streets: east along bottom road,
                              north up a side street, east along mid road,
                              then north up to the destination on top road.
                              Q-rounded corners at each junction. */}
                          <path
                            id="m-route-path"
                            d="M 20 89 L 86 88 Q 90 88 93 84 L 95 58 Q 96 54 100 53 L 152 51 Q 156 51 157 47 L 158 25"
                          />
                        </defs>

                        {/* Building blocks — gentle texture between streets */}
                        <g fill="oklch(94% 0.008 80)" opacity="0.7">
                          <rect x="42" y="27" width="44" height="22" rx="1" />
                          <rect x="102" y="27" width="48" height="22" rx="1" />
                          <rect x="40" y="60" width="50" height="22" rx="1" />
                          <rect x="106" y="58" width="46" height="22" rx="1" />
                          <rect x="165" y="32" width="38" height="16" rx="1" />
                          <rect x="-5" y="60" width="32" height="22" rx="1" />
                          <rect x="-5" y="27" width="32" height="22" rx="1" />
                        </g>

                        {/* Small park / square */}
                        <rect
                          x="165"
                          y="58"
                          width="40"
                          height="22"
                          rx="2"
                          fill="oklch(92% 0.04 145)"
                          opacity="0.75"
                        />

                        {/* Streets — irregular London-ish layout */}
                        <g stroke="oklch(86% 0.005 80)" strokeWidth="4" fill="none" strokeLinecap="round" strokeLinejoin="round">
                          {/* horizontal arteries with subtle curves */}
                          <path d="M -5 22 Q 60 18 110 25 Q 160 32 210 28" />
                          <path d="M -5 54 Q 80 58 150 51 L 210 49" />
                          <path d="M -5 89 Q 70 92 150 85 L 210 80" />
                          {/* vertical roads — slight tilt, not parallel */}
                          <path d="M 32 -5 L 28 110" />
                          <path d="M 95 -5 L 98 110" />
                          <path d="M 158 -5 L 155 110" />
                          {/* diagonal cross street (Charing Cross Rd-style) */}
                          <path d="M 178 -5 L 128 56" strokeWidth="3" opacity="0.6" />
                          {/* small mews / side street */}
                          <path d="M 60 22 L 64 54" strokeWidth="2.5" opacity="0.55" />
                        </g>

                        {/* Faint base route */}
                        <use
                          href="#m-route-path"
                          stroke="color-mix(in oklch, var(--accent) 28%, transparent)"
                          strokeWidth="3"
                          fill="none"
                          strokeLinecap="round"
                          strokeLinejoin="round"
                        />

                        {/* Animated bright progress line — draws in as the
                            operative travels */}
                        <use
                          href="#m-route-path"
                          stroke="var(--accent)"
                          strokeWidth="3"
                          fill="none"
                          strokeLinecap="round"
                          strokeLinejoin="round"
                          pathLength="100"
                          strokeDasharray="100"
                          strokeDashoffset="100"
                        >
                          <animate
                            attributeName="stroke-dashoffset"
                            from="100"
                            to="0"
                            dur="7s"
                            repeatCount="indefinite"
                          />
                        </use>

                        {/* Origin marker — operative's starting point */}
                        <g transform="translate(20 89)">
                          <circle r="2.6" fill="var(--accent)" opacity="0.4" />
                        </g>

                        {/* Destination pin (the building) */}
                        <g transform="translate(158 25)">
                          <circle r="5" fill="oklch(0.32 0.06 250)" />
                          <circle r="1.5" fill="var(--paper)" />
                        </g>

                        {/* Moving operative — pulses & travels */}
                        <g>
                          <circle r="3" fill="var(--accent)" opacity="0.45">
                            <animate attributeName="r" values="3;11;3" dur="1.8s" repeatCount="indefinite" />
                            <animate attributeName="opacity" values="0.55;0;0.55" dur="1.8s" repeatCount="indefinite" />
                          </circle>
                          <circle r="3.5" fill="var(--accent)" stroke="var(--paper)" strokeWidth="1.4" />
                          <animateMotion dur="7s" repeatCount="indefinite" rotate="auto">
                            <mpath href="#m-route-path" />
                          </animateMotion>
                        </g>
                      </svg>
                    </div>
                    <div className="m-tracking-eta">
                      <div>
                        <div className="m-tracking-eta-label">Technician en route</div>
                        <div className="m-tracking-tech">Tariq M. · Van 04</div>
                      </div>
                      <div className="m-tracking-eta-num">6<small>min</small></div>
                    </div>
                  </div>
                </div>
                <div className="m-card-body">
                  <span className="m-card-eyebrow">Live tracking</span>
                  <h3 className="m-card-title">Technician en route, with an ETA the occupier can see.</h3>
                  <p className="m-card-desc">
                    Real-time dispatch, technician identity and certifications, photo evidence
                    attached on arrival — under your brand, never ours.
                  </p>
                </div>
              </article>

              {/* 2 — Front door (interactive whitelabel preview) */}
              <FrontDoorCard />

              {/* 3 — Workflow */}
              <article className="m-card">
                <div className="m-card-visual m-vis-tint">
                  <div className="m-audit">
                    <div className="m-audit-row"><span className="m-audit-time">08:14</span><span className="audit-state s-open">Logged</span><span className="m-audit-meta">P1 · Lyle St SE1</span></div>
                    <div className="m-audit-row"><span className="m-audit-time">08:17</span><span className="audit-state s-disp">Dispatched</span><span className="m-audit-meta">R03 · ETA 6 min</span></div>
                    <div className="m-audit-row"><span className="m-audit-time">08:24</span><span className="audit-state s-site">On site</span><span className="m-audit-meta">Photo · ID badge</span></div>
                    <div className="m-audit-row"><span className="m-audit-time">09:06</span><span className="audit-state s-ok">Resolved</span><span className="m-audit-meta">Report · 4 photos</span></div>
                  </div>
                </div>
                <div className="m-card-body">
                  <span className="m-card-eyebrow">Workflow</span>
                  <h3 className="m-card-title">Service requests with full audit trail.</h3>
                  <p className="m-card-desc">Triage, dispatch, on-site, resolved — every state stamped, evidenced and timestamped.</p>
                </div>
              </article>

              {/* 4 — Evidence (report mockup) */}
              <article className="m-card">
                <div className="m-card-visual m-vis-report">
                  <div className="m-report">
                    <div className="m-report-head">
                      <span className="m-report-title">Light out on 6th floor</span>
                      <span className="m-report-status">Closed</span>
                    </div>
                    <div className="m-report-body">
                      <div className="m-report-section">
                        <span className="m-report-label">Completed</span>
                        <div className="m-report-task">
                          <span className="m-report-check" aria-hidden="true">
                            <svg width="12" height="12" viewBox="0 0 14 14" fill="none">
                              <path d="M3 7.4 5.7 10 11 4.4" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
                            </svg>
                          </span>
                          <span>Investigate flickering light on 6th floor behind main tea point.</span>
                        </div>
                      </div>
                      <div className="m-report-bottom">
                        <img
                          src="assets/img/maintenance.jpg"
                          alt="Replaced light fitting"
                          className="m-report-photo"
                        />
                        <div className="m-report-section">
                          <span className="m-report-label">Visitor notes</span>
                          <p className="m-report-note">
                            G9 lamp had blown. New lamp purchased; fitting reinstalled.
                          </p>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div className="m-card-body">
                  <span className="m-card-eyebrow">Evidence</span>
                  <h3 className="m-card-title">Photo &amp; report on every job.</h3>
                  <p className="m-card-desc">Technicians attach photos and findings on arrival and at close. No clean-up after.</p>
                </div>
              </article>

              {/* 5 — CAFM-grade */}
              <article className="m-card">
                <div className="m-card-visual m-vis-tint">
                  <div className="m-cafm">
                    <div className="m-cafm-tile"><span className="m-cafm-tile-num">142</span><span className="m-cafm-tile-l">Assets registered</span></div>
                    <div className="m-cafm-tile"><span className="m-cafm-tile-num">38</span><span className="m-cafm-tile-l">PPMs scheduled</span></div>
                    <div className="m-cafm-tile"><span className="m-cafm-tile-num">100%</span><span className="m-cafm-tile-l">Statutory cover</span></div>
                    <div className="m-cafm-tile"><span className="m-cafm-tile-num">0</span><span className="m-cafm-tile-l">Audit findings</span></div>
                  </div>
                </div>
                <div className="m-card-body">
                  <span className="m-card-eyebrow">Compliance</span>
                  <h3 className="m-card-title">PPMs, assets &amp; statutory cover.</h3>
                  <p className="m-card-desc">Asset register, planned maintenance schedules, statutory compliance — the things auditors ask for.</p>
                </div>
              </article>

              {/* 6 — Suppliers */}
              <article className="m-card">
                <div className="m-card-visual m-vis-tint">
                  <div className="m-suppliers">
                    <span className="sup-chip">ThermaServ <i className="sup-dot good" /> 98%</span>
                    <span className="sup-chip">FrontGuard <i className="sup-dot warn" /> 86%</span>
                    <span className="sup-chip">LiftCo <i className="sup-dot good" /> 96%</span>
                    <span className="sup-chip">CityCool <i className="sup-dot good" /> 94%</span>
                  </div>
                </div>
                <div className="m-card-body">
                  <span className="m-card-eyebrow">Suppliers</span>
                  <h3 className="m-card-title">Supplier onboarding, SLAs and performance.</h3>
                  <p className="m-card-desc">Compliance documents in. SLAs set. Per-supplier scorecards out. Recurring-fault themes flagged before you ask.</p>
                </div>
              </article>

              {/* 7 — Estate ops (guest registration mockup) */}
              <article className="m-card">
                <div className="m-card-visual m-vis-guest">
                  <div className="m-guest">
                    <div className="m-guest-head">
                      <span className="m-guest-back" aria-hidden="true">
                        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                          <path d="M15 18l-6-6 6-6" />
                        </svg>
                      </span>
                      <span className="m-guest-title">Register a guest</span>
                    </div>
                    <div className="m-guest-body">
                      <div className="m-guest-field">
                        <label>Guest name</label>
                        <div className="m-guest-input">Maya Chen</div>
                      </div>
                      <div className="m-guest-field">
                        <label>Date</label>
                        <div className="m-guest-input m-guest-input-select">
                          <span>Thu 18 Jun · 9:30</span>
                          <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                            <path d="M6 9l6 6 6-6" />
                          </svg>
                        </div>
                      </div>
                      <div className="m-guest-coffee">
                        <span className="m-guest-coffee-icon" aria-hidden="true">
                          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
                            <path d="M4 8h12v6a4 4 0 0 1-4 4H8a4 4 0 0 1-4-4V8z" />
                            <path d="M16 10h2a2 2 0 0 1 0 4h-2" />
                            <path d="M8 3v2M11 3v2M14 3v2" />
                          </svg>
                        </span>
                        <span className="m-guest-coffee-label">Coffee on arrival</span>
                        <span className="m-guest-toggle m-guest-toggle-on" aria-hidden="true">
                          <span className="m-guest-toggle-handle" />
                        </span>
                      </div>
                      <button type="button" className="m-guest-submit">
                        Continue <span className="arrow">→</span>
                      </button>
                    </div>
                  </div>
                </div>
                <div className="m-card-body">
                  <span className="m-card-eyebrow">Estate ops</span>
                  <h3 className="m-card-title">Visitor, access &amp; F&amp;B.</h3>
                  <p className="m-card-desc">Visitor pre-registration, door access provisioning, breakfast and event ordering — one occupier app, your brand.</p>
                </div>
              </article>

              {/* 8 — Performance intelligence (AI agent comment) */}
              <article className="m-card">
                <div className="m-card-visual m-vis-summary">
                  <div className="m-summary">
                    <header className="m-summary-head">
                      <span className="m-summary-avatar">A</span>
                      <span className="m-summary-name">Ada</span>
                      <span className="m-summary-ai">
                        <svg width="9" height="9" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                          <path d="M10 3.2c.1-.27.49-.27.6 0l1.3 3.45a3 3 0 0 0 1.75 1.75l3.45 1.3c.27.1.27.49 0 .6l-3.45 1.3a3 3 0 0 0-1.75 1.75l-1.3 3.45a.32.32 0 0 1-.6 0l-1.3-3.45a3 3 0 0 0-1.75-1.75l-3.45-1.3a.32.32 0 0 1 0-.6l3.45-1.3a3 3 0 0 0 1.75-1.75l1.3-3.45Z" />
                        </svg>
                        AI
                      </span>
                      <span className="m-summary-time">2h ago</span>
                    </header>
                    <div className="m-summary-title">Building summary</div>
                    <div className="m-summary-subtitle">Marlow &amp; Finch — week 24</div>
                    <div className="m-summary-rows">
                      <div className="m-summary-row">
                        <span>Avg. resolution</span>
                        <span className="m-summary-pill m-summary-pill-green">2.2d</span>
                      </div>
                      <div className="m-summary-row">
                        <span>SLA hit rate</span>
                        <span className="m-summary-pill m-summary-pill-amber">96%</span>
                      </div>
                      <div className="m-summary-row">
                        <span>Recurring faults</span>
                        <span className="m-summary-pill m-summary-pill-blue">−42%</span>
                      </div>
                    </div>
                    <div className="m-summary-footer">
                      Top operating site this week. Above portfolio average across all routes.
                    </div>
                  </div>
                </div>
                <div className="m-card-body">
                  <span className="m-card-eyebrow">Performance intelligence</span>
                  <h3 className="m-card-title">A live, per-building operating picture.</h3>
                  <p className="m-card-desc">Resolution time, recurring faults, supplier performance, occupier sentiment — by building, by route, by service line.</p>
                </div>
              </article>
            </div>
          </div>

          {/* RIGHT: heading + lede + nav */}
          <div className="modules-text">
            <h2 className="h-section">The operating layer behind better buildings.</h2>
            <p className="lede">
              Software plus hands-on FM coordination — one workflow, one evidence trail,
              one service standard. Behind your brand on mobile and desktop.
            </p>
            <div className="modules-nav">
              <button
                type="button"
                aria-label="Previous module"
                onClick={() => scrollBy(-1)}
                disabled={!canPrev}
                className="modules-nav-btn"
              >←</button>
              <button
                type="button"
                aria-label="Next module"
                onClick={() => scrollBy(1)}
                disabled={!canNext}
                className="modules-nav-btn"
              >→</button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ── Desktop workstation mockup ─ lights-out flow with supplier step ─
   Phased animation, same arc as the phone GIF on the home page but on a
   desktop layout, with a new "supplier selected · cost" step inserted
   between AI triage and dispatch. ─ */
function DesktopWorkstation() {
  const [phase, setPhase] = React.useState(0);
  const [typed, setTyped] = React.useState('');
  const FULL_TEXT = 'Lights gone out in the board meeting room';

  React.useEffect(() => {
    const timers = [];
    if (phase === 0) {
      timers.push(setTimeout(() => setPhase(1), 900));
    } else if (phase === 1) {
      let i = 0;
      const tick = () => {
        i++;
        setTyped(FULL_TEXT.slice(0, i));
        if (i < FULL_TEXT.length) {
          timers.push(setTimeout(tick, 32 + Math.random() * 24));
        } else {
          timers.push(setTimeout(() => setPhase(2), 700));
        }
      };
      tick();
    } else if (phase === 2) {
      timers.push(setTimeout(() => setPhase(3), 1400));
    } else if (phase === 3) {
      timers.push(setTimeout(() => setPhase(4), 1300));
    } else if (phase === 4) {
      timers.push(setTimeout(() => setPhase(5), 1500));
    } else if (phase === 5) {
      timers.push(setTimeout(() => {
        setTyped('');
        setPhase(0);
      }, 5500));
    }
    return () => timers.forEach(clearTimeout);
  }, [phase]);

  const suppliers = [
    { name: 'reeve',            rating: '98%', cost: '£180', selected: true },
    { name: 'LightFix Co',      rating: '95%', cost: '£210', selected: false },
    { name: 'FrontGuard Maint', rating: '86%', cost: '£160', selected: false },
  ];

  return (
    <div className="desk-mockup">
      {/* Browser chrome */}
      <div className="desk-chrome">
        <div className="desk-chrome-dots">
          <span /><span /><span />
        </div>
        <div className="desk-chrome-title">reeve · ops · marlow &amp; finch</div>
      </div>

      <div className="desk-body">
        {/* Ticket header bar */}
        <div className="desk-ticket-head">
          <div>
            <div className="desk-mono">Ticket 04812</div>
            <div className="desk-ticket-title">New issue — boardroom</div>
          </div>
          <span
            className={
              'desk-status-pill ' + (
                phase < 2 ? 'desk-status-new' :
                phase < 5 ? 'desk-status-triaged' :
                'desk-status-dispatched'
              )
            }
          >
            {phase < 2 ? 'New' : phase < 5 ? 'Triaged' : 'Dispatched'}
          </span>
        </div>

        {/* Issue input */}
        <div className="desk-field">
          <div className="desk-label">Describe the issue</div>
          <div className="desk-input">
            <span className="desk-input-text">
              {phase >= 1 ? (phase === 1 ? typed : FULL_TEXT) : ''}
              {(phase === 0 || phase === 1) && <span className="desk-cursor" />}
            </span>
            {phase === 0 && !typed && (
              <span className="desk-input-placeholder">Type a new issue…</span>
            )}
          </div>
        </div>

        {/* AI triage — always rendered so the desktop stays at final size */}
        <div className={'desk-field desk-phase' + (phase >= 2 ? ' desk-phase-on' : '')}>
          <div className="desk-triage">
              <div className="desk-triage-head">
                <span className="m-summary-ai">
                  <svg width="9" height="9" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                    <path d="M10 3.2c.1-.27.49-.27.6 0l1.3 3.45a3 3 0 0 0 1.75 1.75l3.45 1.3c.27.1.27.49 0 .6l-3.45 1.3a3 3 0 0 0-1.75 1.75l-1.3 3.45a.32.32 0 0 1-.6 0l-1.3-3.45a3 3 0 0 0-1.75-1.75l-3.45-1.3a.32.32 0 0 1 0-.6l3.45-1.3a3 3 0 0 0 1.75-1.75l1.3-3.45Z" />
                  </svg>
                  AI triage
                </span>
                <span className="desk-mono">~110 min est.</span>
              </div>
              <div className="desk-triage-chips">
                <span className="desk-chip"><span className="desk-chip-dot" /> Electrical</span>
                <span className="desk-chip"><span className="desk-chip-dot" /> P2 priority</span>
                <span className="desk-chip"><span className="desk-chip-dot" /> Boardroom · Floor 4</span>
              </div>
            </div>
        </div>

        {/* Supplier comparison */}
        <div className={'desk-field desk-phase' + (phase >= 3 ? ' desk-phase-on' : '')}>
            <div className="desk-label">Supplier · select &amp; quote</div>
            <div className="desk-suppliers">
              <div className="desk-supplier desk-supplier-head">
                <span>Supplier</span>
                <span>Reliability</span>
                <span>Quote</span>
                <span />
              </div>
              {suppliers.map((s) => {
                const isSelected = phase >= 4 && s.selected;
                return (
                  <div
                    key={s.name}
                    className={'desk-supplier' + (isSelected ? ' desk-supplier-selected' : '')}
                  >
                    <div className="desk-supplier-name">{s.name}</div>
                    <div className="desk-supplier-rating">{s.rating}</div>
                    <div className="desk-supplier-cost">{s.cost}</div>
                    <div className="desk-supplier-action">
                      {isSelected ? (
                        <span className="desk-supplier-selected-pill">✓ Selected</span>
                      ) : 'Use'}
                    </div>
                  </div>
                );
              })}
            </div>
        </div>

        {/* Dispatch confirmation */}
        <div className={'desk-dispatch desk-phase' + (phase >= 5 ? ' desk-phase-on' : '')}>
            <div className="desk-dispatch-av">
              <div className="desk-dispatch-av-pulse">
                <span className="live-dot" />
              </div>
            </div>
            <div className="desk-dispatch-info">
              <div className="desk-dispatch-title">Roy on the way · ETA 14:31</div>
              <div className="desk-dispatch-sub">reeve · L2 Electrician · 8 min away</div>
            </div>
            <div className="desk-dispatch-num">14:31</div>
        </div>
      </div>
    </div>
  );
}

/* ── Comparison ─────────────────────────────────────────────────────── */
function Compare() {
  const Check = () => (
    <svg className="mark" width="14" height="14" viewBox="0 0 14 14">
      <path d="M3 7.2 5.8 10 11 4.2" stroke="var(--accent)" strokeWidth="1.6"
            fill="none" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
  const Dot = () => (
    <svg className="mark" width="14" height="14" viewBox="0 0 14 14">
      <circle cx="7" cy="7" r="1.5" fill="var(--ink-4)" />
    </svg>
  );
  return (
    <section className="section-pad" id="vs">
      <div className="wrap">
        <div className="section-split">
          <div>
            <h2 className="h-section">
              Everything you expect from CAFM, plus the team to make it happen — faster.
            </h2>
          </div>
          <p className="section-split-lede">
            Cut what you spend on FM coordination, third-party callouts, and software. Most of what you currently pay for the chain disappears.
          </p>
        </div>

        <div className="compare-with-demo">
         <div className="compare-tiles">
          <div className="compare-col legacy">
            <h3>Legacy CAFM &amp; logbooks</h3>
            <ul className="compare-list">
              <li><Dot /><span>Logs jobs</span></li>
              <li><Dot /><span>Software only</span></li>
              <li><Dot /><span>Supplier directory</span></li>
              <li><Dot /><span>Static monthly reports</span></li>
              <li><Dot /><span>Your team still chases</span></li>
              <li><Dot /><span>Tool-adoption risk</span></li>
            </ul>
          </div>
          <div className="compare-col reeve">
            <h3 style={{ color: 'var(--bg)' }}>
              <ReeveWordmark size={22} dark still />
            </h3>
            <ul className="compare-list">
              <li><Check /><span>Owns the route to resolution</span></li>
              <li><Check /><span>Software <em>plus</em> managed FM delivery</span></li>
              <li><Check /><span>Supplier onboarding, SLAs &amp; performance</span></li>
              <li><Check /><span>Live building insights &amp; recurring-fault actions</span></li>
              <li><Check /><span>reeve chases, escalates, evidences</span></li>
              <li><Check /><span>Service-led adoption — behind your brand</span></li>
            </ul>
          </div>
         </div>

         <div className="compare-demo">
          <DesktopWorkstation />
         </div>
        </div>
      </div>
    </section>
  );
}

/* ── Brand preservation ─────────────────────────────────────────────────── */
function Brand() {
  return (
    <section className="section-pad" id="brand">
      <div className="wrap">
        <div className="brand-wrap">
          <div>
            <ul className="brand-list">
              <li><span className="num">01</span> Preserve the client and occupier relationship</li>
              <li><span className="num">02</span> Cut operational drag on property managers</li>
              <li><span className="num">03</span> Standardise delivery across suppliers, specialists and own team</li>
              <li><span className="num">04</span> Cleaner evidence for service reviews</li>
              <li><span className="num">05</span> Commercial proof per building — revenue, margin, speed, service</li>
            </ul>
          </div>
          <div>
            <h2 className="h-section">
              A better, faster building experience — without replacing your brand.
            </h2>
            <p className="lede" style={{ marginTop: 22 }}>
              reeve works behind the scenes as your operating layer. Occupiers see a more responsive
              building team under <em className="accent-text">your</em> brand. Clients see clearer
              reporting. Your team gets fewer loose ends, fewer chases and a sharper view of what
              each building costs to run.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ── Proof / Rollout ─────────────────────────────────────────────────── */
function Proof() {
  const pps = [
    { l: 'Operations', n: 'Revenue per building', m: 'Service-line breakdown' },
    { l: 'Operations', n: 'Gross margin per building', m: 'Including supplier mgmt' },
    { l: 'Operations', n: 'Supplier-management revenue', m: 'Recurring, transparent' },
    { l: 'Service',    n: 'Resolution time',           m: 'Median &amp; tail by route' },
    { l: 'Service',    n: 'Operating hours per building', m: 'Insourced vs outsourced' },
    { l: 'Service',    n: 'Supplier performance',       m: 'SLA, breach, recurring' },
  ];
  return (
    <section className="section-pad" id="proof" style={{ background: 'var(--paper-2)', borderTop: '1px solid var(--rule)', borderBottom: '1px solid var(--rule)' }}>
      <div className="wrap">
        <div className="section-split">
          <div>
            <h2 className="h-section">
              Start with selected buildings. Scale what works.
            </h2>
          </div>
          <div />
        </div>

        <div className="proof-grid">
          <div className="proof-stack">
            <p className="lede">
              Agree the buildings, suppliers, routes and reporting rhythm. reeve mobilises,
              operates and reports — then you track whether the model improves speed, control,
              service quality and margin.
            </p>
            <div className="rollout-steps">
              <div className="step">
                <span className="step-n">01</span>
                <div>
                  <div className="step-t">Select buildings &amp; services</div>
                  <div className="step-d">Pick where you want reeve live first. Define services in scope.</div>
                </div>
              </div>
              <div className="step">
                <span className="step-n">02</span>
                <div>
                  <div className="step-t">Agree routes</div>
                  <div className="step-d">Which jobs go to your suppliers, which to specialists, which to reeve's team.</div>
                </div>
              </div>
              <div className="step">
                <span className="step-n">03</span>
                <div>
                  <div className="step-t">Onboard suppliers &amp; brand</div>
                  <div className="step-d">Compliance pack in, SLAs set, occupier-facing front door themed to you.</div>
                </div>
              </div>
              <div className="step">
                <span className="step-n">04</span>
                <div>
                  <div className="step-t">Operate, evidence, report</div>
                  <div className="step-d">reeve runs the layer. You review the operating picture each month.</div>
                </div>
              </div>
            </div>
          </div>

          <div>
            <div className="eyebrow" style={{ marginBottom: 18 }}>Commercial proof per building</div>
            <div className="proof-pp-grid">
              {pps.map((p, i) => (
                <div className="proof-pp" key={i}>
                  <span className="proof-pp-label">{p.l}</span>
                  <span className="proof-pp-name" dangerouslySetInnerHTML={{ __html: p.n }} />
                  <span className="proof-pp-meta" dangerouslySetInnerHTML={{ __html: p.m }} />
                </div>
              ))}
            </div>
            <div className="proof-callout">
              <div>
                <span className="proof-callout-eyebrow">Speed proof</span>
                <div className="proof-callout-stat">
                  <span className="proof-callout-big">2.2d</span>
                  <span className="proof-callout-vs">vs <strong>~19d</strong> industry avg.</span>
                </div>
              </div>
              <div className="proof-callout-bar">
                <div className="pcb-row"><span>Industry</span><div className="pcb-track"><div className="pcb-fill pcb-fill-ind" /></div><span className="pcb-v">~19d</span></div>
                <div className="pcb-row"><span>reeve</span><div className="pcb-track"><div className="pcb-fill pcb-fill-reeve" /></div><span className="pcb-v">2.2d</span></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ── Closing CTA ─────────────────────────────────────────────────────── */
function ClosingCTA() {
  return (
    <section id="walk">
      <div className="close-cta">
        <svg className="close-cta-bg" viewBox="0 0 1200 400" preserveAspectRatio="none" aria-hidden="true">
          <g stroke="rgba(255,255,255,0.05)" fill="none" strokeWidth="1">
            <path d="M0 200 Q 300 80 600 200 T 1200 200" />
            <path d="M0 240 Q 300 120 600 240 T 1200 240" />
            <path d="M0 280 Q 300 160 600 280 T 1200 280" />
          </g>
        </svg>
        <div className="close-cta-inner">
          <div className="close-cta-meta">
            <a
              href="https://calendar.app.google/be3ib85HS3rDzJtr8"
              target="_blank"
              rel="noopener noreferrer"
              className="btn btn-on-dark btn-primary"
              style={{ width: 'fit-content' }}
            >
              Book a reeve walkthrough <span className="arrow">→</span>
            </a>
            <div>
              <strong>45-minute session.</strong> We'll walk through the operating layer with
              your portfolio in mind — buildings, suppliers, routes, reporting.
            </div>
          </div>
          <div>
            <span className="eyebrow" style={{ color: 'var(--accent)' }}>
              One operating standard
            </span>
            <h2 className="h-section" style={{ marginTop: 20 }}>
              Give every building one operating standard — at speed.
            </h2>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ── Footer ─────────────────────────────────────────────────────── */
function Footer() {
  return (
    <footer className="foot">
      <div className="wrap">
        <div className="accreditations">
          <span className="accreditations-label">Accredited &amp; certified</span>
          <div className="accreditation-row">
            <img src="assets/img/iso27001.png" alt="ISO 27001 certified" />
            <svg
              width="36"
              height="36"
              viewBox="0 0 100 100"
              xmlns="http://www.w3.org/2000/svg"
              className="accreditation-bcorp"
              aria-label="Certified B Corporation"
            >
              <text x="50" y="14" textAnchor="middle" fontFamily="Inter Tight, ui-sans-serif, system-ui" fontSize="9" fontWeight="600" letterSpacing="0.5" fill="currentColor">
                CERTIFIED
              </text>
              <circle cx="50" cy="52" r="20" fill="none" stroke="currentColor" strokeWidth="2.6" />
              <text x="50" y="60" textAnchor="middle" fontFamily="Inter Tight, ui-sans-serif, system-ui" fontSize="26" fontWeight="700" fill="currentColor">
                B
              </text>
              <line x1="32" y1="80" x2="68" y2="80" stroke="currentColor" strokeWidth="1.4" />
              <text x="50" y="92" textAnchor="middle" fontFamily="Inter Tight, ui-sans-serif, system-ui" fontSize="9" fontWeight="600" letterSpacing="0.3" fill="currentColor">
                CORPORATION
              </text>
            </svg>
            <img src="assets/img/accreditations/iwfm.png" alt="IWFM member" />
          </div>
        </div>
        <div className="foot-grid">
          <div className="foot-col">
            <ReeveWordmark dark still />
            <p style={{ color: 'var(--ink-3)', fontSize: 13.5, marginTop: 12, maxWidth: 280 }}>
              The managed operating layer for commercial property teams. Software plus hands-on
              FM coordination — behind your brand.
            </p>
          </div>
          <div className="foot-col">
            <h4>Product</h4>
            <ul>
              <li><a href="#model">The reeve model</a></li>
              <li><a href="#product">Modules</a></li>
              <li><a href="#vs">vs CAFM</a></li>
              <li><a href="#proof">Rollout</a></li>
            </ul>
          </div>
          <div className="foot-col">
            <h4>Company</h4>
            <ul>
              <li><a href="#">About</a></li>
              <li><a href="#">Operations</a></li>
              <li><a href="#">Careers</a></li>
              <li><a href="#">Press</a></li>
            </ul>
          </div>
          <div className="foot-col">
            <h4>Talk</h4>
            <ul>
              <li><a href="https://calendar.app.google/be3ib85HS3rDzJtr8" target="_blank" rel="noopener noreferrer">Book a walkthrough</a></li>
              <li><a href="#">hello@reeve.build</a></li>
              <li><a href="#">London — 23 Curtain Road</a></li>
            </ul>
          </div>
        </div>
        <div className="foot-base">
          <span>© reeve Operations Ltd. 2026 · Registered in England</span>
          <span style={{ display: 'inline-flex', gap: 18 }}>
            <a href="#">Privacy</a><a href="#">Terms</a><a href="#">Security</a>
          </span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, {
  Nav, Hero, DispatchLog, Certifications, Trust, Problem, Routes, Services, Modules, Compare, Brand, Proof, ClosingCTA, Footer
});