// Pavilion Landscapes — Page Wireframes (with real copy)

// ─── HOME — full-bleed project slider ─────────────────────
const HOME_SLIDES = [
  ['uploads/DFP-20190621-094432.jpg', 'UCC Wildflower Meadow', 'Planting of wildflower meadow and maintenance of grounds at University College Cork'],
  ['uploads/DFP-20210720-103320.jpg', 'Roadside Pollinator Planting', 'Pollinator-rich perennial planting along a public approach road and underpass'],
  ['uploads/DFP-20220315-115849.jpg', 'Adare Manor Estate', 'Craning and establishing semi-mature specimen trees within a historic estate landscape'],
  ['uploads/DFP-20230620-084529.jpg', 'Multi-Stem Specimen Courtyard', 'Multi-stem specimen trees and perennial underplanting to a corporate courtyard'],
  ['uploads/DFP-20170724-132328.jpg', 'Sheltered Courtyard Garden', 'Structural evergreen planting and lavender bowls in a sheltered courtyard setting'],
  ['uploads/DFP-20180531-110111.jpg', 'Campus Grounds Maintenance', 'Year-round maintenance of hedging, lawns and beds across a third-level campus'],
];

function HomePage({ m, onNav }) {
  const [i, setI] = React.useState(0);
  const [tick, setTick] = React.useState(0);
  React.useEffect(() => {
    const t = setTimeout(() => setI(n => (n + 1) % HOME_SLIDES.length), 6200);
    return () => clearTimeout(t);
  }, [i, tick]);
  const pad = m ? 24 : 72;
  return (
    <div style={{ position: 'relative', width: '100%', height: '100%', minHeight: m ? 560 : 480, overflow: 'hidden', background: '#1a1a1a' }}>
      {HOME_SLIDES.map(([src, name, desc], n) => (
        <div key={src} className={n === i ? 'pav-wipe' : undefined} style={{ position: 'absolute', inset: 0, opacity: n === i ? 1 : 0, zIndex: n === i ? 2 : 1, transition: 'opacity 1.6s ease-in-out', pointerEvents: n === i ? 'auto' : 'none' }}>
          <img src={src} alt={name} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
          <Scrim band="20%" sides="top" />
          <Scrim band={m ? '56%' : '44%'} sides="bottom" />
          <div style={{ position: 'absolute', zIndex: 2, left: pad, right: pad, bottom: m ? 76 : 56, display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 32 }}>
            <div style={{ maxWidth: m ? '100%' : 720 }}>
              {m ? <H1m style={{ color: '#fff', marginBottom: 10 }}>{name}</H1m>
                 : <H1 style={{ color: '#fff', marginBottom: 14, fontSize: 54 }}>{name}</H1>}
              <Body small={m} style={{ color: 'rgba(255,255,255,0.9)', maxWidth: 460 }}>{desc}</Body>
            </div>
          </div>
        </div>
      ))}
      {/* Position indicator */}
      <div style={{ position: 'absolute', right: pad, bottom: m ? 36 : 60, display: 'flex', alignItems: 'center', gap: 8, zIndex: 5 }}>
        {HOME_SLIDES.map((s, n) => (
          <div key={n} onClick={() => { setI(n); setTick(t => t + 1); }} style={{ width: n === i ? 34 : 22, height: 2, background: n === i ? '#fff' : 'rgba(255,255,255,0.45)', cursor: 'pointer', transition: 'width .3s ease, background .3s ease' }} />
        ))}
      </div>
    </div>
  );
}

// ─── SERVICES HUB ──────────────────────────────────────────
const SVC_HERO   = 'uploads/Services_Hero_DFP-20170801-151332.jpg';
const SVC_INSTALL = 'uploads/Installation_DFP-20230620-084452.jpg';
const SVC_MAINT   = 'uploads/Maintenance_DFP-20170801-145041.jpg';
const SVC_LIVING  = 'uploads/Living%20Landscapes%20Programme_DFP-20190621-094838-Edit.jpg';

function ServicesPage({ m, onNav }) {
  const p = m ? 20 : 72;
  const gut = m ? 20 : 72;
  return (
    <div style={{ background: '#fff' }}>
      {/* Hero */}
      <div style={{ position: 'relative' }}>
        <CropImg src={SVC_HERO} alt="Commercial campus landscape" height={m ? '33vh' : 620} pos={m ? 'center center' : 'center calc(50% - 50px)'} />
        <div style={{ position: 'absolute', inset: 0, zIndex: 1, pointerEvents: 'none', opacity: 0.5 }}>
          {m ? <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, height: '62%', background: 'linear-gradient(0deg,#000000,#00000000)' }} />
             : <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: '35%', background: 'linear-gradient(180deg,#000000,#00000000)' }} />}
        </div>
        <div style={{ position: 'absolute', inset: 0, top: m ? 0 : -250, zIndex: 100, pointerEvents: 'none', display: 'flex', flexDirection: 'column', justifyContent: m ? 'flex-end' : 'center', padding: m ? '0 20px 26px' : '0 72px', textShadow: '0px 4px 15px #0000007F' }}>
          <Lbl style={{ color: '#fff', marginBottom: m ? 9 : 18, fontSize: m ? 9.5 : 11 }}>Commercial Landscaping Services</Lbl>
          {m ? <H1m style={{ color: '#fff', fontSize: 24 }}>Comprehensive Landscape Management for the Enterprise</H1m>
             : <H1 style={{ color: '#fff', fontSize: 62 }}>Comprehensive Landscape<br/>Management for Enterprise</H1>}
          <Body small style={{ color: 'rgba(255,255,255,0.92)', fontSize: m ? 11.5 : 13, maxWidth: m ? '100%' : 420, marginTop: m ? 10 : 26 }}>From initial construction to long-term asset management and environmental enhancement, we provide end-to-end solutions tailored for high-compliance corporate environments.</Body>
        </div>
      </div>

      {/* Our Services */}
      <div style={{ padding: `${m ? 48 : 96}px ${gut}px ${m ? 44 : 80}px` }}>
        <div style={{ maxWidth: 1180, margin: '0 auto' }}>
          {m ? <H2m style={{ color: LEAF, marginBottom: 26 }}>Our Services</H2m>
             : <H2 style={{ color: LEAF, fontSize: 52, marginBottom: 40 }}>Our Services</H2>}
          <div style={{ display: 'grid', gridTemplateColumns: m ? '1fr' : '1fr 1fr', gap: m ? 40 : 32 }}>
            {[
              [SVC_INSTALL, 'Landscape Installation & Construction', 'Executing complex hard and soft landscaping with precision, scale, and uncompromising safety. We partner with principal contractors and architects to deliver seamless project handovers on major commercial, industrial, and civic developments.', 'install'],
              [SVC_MAINT, 'Corporate Grounds Maintenance', 'Proactive, compliance-driven asset management designed to protect your environment and safeguard your corporate reputation. Year-round, discreet maintenance tailored to the rigorous demands of live pharmaceutical, manufacturing, and technology campuses.', 'maintain'],
            ].map(([src, title, desc, key]) => (
              <div key={key} style={{ display: 'flex', flexDirection: 'column' }}>
                <CropImg src={src} alt={title} height={m ? 220 : 290} style={{ marginBottom: m ? 20 : 26 }} />
                {m ? <H2m style={{ color: LEAF, marginBottom: 12 }}>{title}</H2m>
                   : <H2 style={{ color: LEAF, fontSize: 32, marginBottom: 16 }}>{title}</H2>}
                <Body small style={{ marginBottom: m ? 22 : 30, flex: 1 }}>{desc}</Body>
                <div><Btn variant="link" onClick={() => onNav && onNav(key)}>Learn More</Btn></div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Living Landscapes Programme — panel over full-width image (stacked on mobile) */}
      <div style={{ position: m ? 'static' : 'relative', padding: m ? `0 ${gut}px` : 0 }}>
        <CropImg src={SVC_LIVING} alt="Living Landscapes Programme" height={m ? 220 : 660} />
        <div style={{ position: m ? 'static' : 'absolute', left: 0, right: 0, bottom: 0, padding: m ? 0 : `0 ${gut}px` }}>
          <div style={{ maxWidth: 1180, margin: '0 auto' }}>
            <div style={{ background: '#fff', padding: m ? '20px 0 0' : '38px 44px 0', maxWidth: m ? '100%' : 770, position: 'static', top: -52 }}>
              {m ? <H2m style={{ color: LEAF, marginBottom: 12 }}>Living Landscapes Programme</H2m>
                 : <H2 style={{ color: LEAF, fontSize: 34, marginBottom: 18 }}>Living Landscapes Programme</H2>}
              <Body small style={{ marginBottom: m ? 22 : 28 }}>Strategic biodiversity solutions that transition traditional corporate grounds into thriving, self-sustaining ecosystems. This data-driven programme delivers measurable ESG wins, supports sustainability reporting, and optimizes long-term operational costs.</Body>
              <div style={{ paddingBottom: 2 }}><Btn variant="link" onClick={() => onNav && onNav('living')}>Discover the Living Landscapes Programme</Btn></div>
            </div>
          </div>
        </div>
      </div>

      {/* CTA band */}
      <div style={{ padding: `${m ? 44 : 80}px ${gut}px ${m ? 48 : 88}px` }}>
        <div style={{ maxWidth: 1180, margin: '0 auto' }}>
          <HR style={{ marginBottom: m ? 36 : 64 }} />
          <div style={{ textAlign: 'center' }}>
            {m ? <H2m style={{ color: LEAF, marginBottom: 14 }}>Ready to Elevate Your Corporate Landscape?</H2m>
               : <H2 style={{ color: LEAF, fontSize: 36, marginBottom: 18 }}>Ready to Elevate Your Corporate Landscape?</H2>}
            <Body style={{ marginBottom: m ? 26 : 34 }}>Connect with our leadership team to discuss your site requirements and ISO compliance needs.</Body>
            <div style={{ display: 'flex', justifyContent: 'center' }}>
              <Btn variant="link" onClick={() => onNav && onNav('contact')}>Request a Strategic Consultation</Btn>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// ─── INSTALLATION ──────────────────────────────────────────
function InstallationPage({ m, onNav }) {
  const p = m ? 20 : 72;
  return (
    <div>
      <ImgBox height={m ? 280 : 480} label="Installation site — hero image" overlay={
        <div style={{ height: '100%', background: 'rgba(0,0,0,0.46)', display: 'flex', flexDirection: 'column', justifyContent: 'flex-end', padding: m ? '28px 20px' : '72px 72px' }}>
          <Lbl style={{ color: 'rgba(255,255,255,0.55)', marginBottom: 10 }}>Landscape Installation & Construction</Lbl>
          {m ? <H1m style={{ color: '#fff' }}>Precision Construction for Complex Environments</H1m>
             : <H1 style={{ color: '#fff' }}>Precision Construction for<br/>Complex Environments</H1>}
          <Body style={{ color: 'rgba(255,255,255,0.7)', maxWidth: 540, marginTop: 10 }}>Delivering large-scale hard and soft landscaping projects with rigorous project management and uncompromising adherence to site safety protocols.</Body>
          <div style={{ marginTop: 20 }}><Btn variant="white" small>View Installation Projects</Btn></div>
        </div>
      } />

      {/* Core Message */}
      <div style={{ background: '#fff', padding: `${m ? 40 : 64}px ${p}px` }}>
        <div style={{ display: 'grid', gridTemplateColumns: m ? '1fr' : '1fr 1fr', gap: m ? 28 : 72, alignItems: 'start' }}>
          <div>
            <Lbl style={{ color: ACCENT, marginBottom: 10 }}>Our Approach</Lbl>
            {m ? <H2m style={{ marginBottom: 14 }}>Built to Perform.<br/>Engineered to Last.</H2m>
               : <H2 style={{ marginBottom: 16 }}>Built to Perform.<br/>Engineered to Last.</H2>}
            <Body style={{ marginBottom: 14 }}>Commercial landscape installation demands exactitude, seamless coordination, and robust supply chain logistics. At Pavilion Landscapes, our approach is defined by rigorous project management and strict adherence to ISO 9001 Quality Management systems.</Body>
            <Body muted style={{ marginBottom: 14 }}>Our dedicated foremen and in-house technical teams partner directly with principal contractors, landscape architects, and facilities directors to execute complex civic, industrial, and commercial masterplans. From deep excavations, advanced water feature installations, and critical hardscaping, to the sourcing and planting of 50-foot mature specimen trees via our pan-European nursery network, we possess the scale and capability to handle the extraordinary.</Body>
            <Body muted>We prioritize clear communication, daily site reporting, and flawless safety protocols, ensuring that your project is delivered on time, on budget, and with zero disruption to parallel site operations.</Body>
          </div>
          <ImgBox height={m ? 220 : 420} label="Installation — detail photography" />
        </div>
      </div>

      {/* Capabilities */}
      <div style={{ padding: `${m ? 40 : 64}px ${p}px` }}>
        <SHead label="Capabilities" title="Installation Services" m={m} />
        <div style={{ display: 'grid', gridTemplateColumns: m ? '1fr' : 'repeat(3,1fr)', gap: 18 }}>
          {[['Hard Landscaping','Paving, retaining walls, drainage and civil infrastructure works.'],['Soft Landscaping','Planting, seeding, turfing and mature specimen tree placement.'],['Pan-European Nursery Network','Sourcing and installing specimen trees up to 50ft from across Europe.'],['Project Management','Dedicated foremen and daily site reporting on every project.'],['Water Features','Advanced water feature design, installation and commissioning.'],['Safety Compliance','ISO 9001 certified processes — zero disruption to parallel operations.']].map(([t, d]) => (
            <WCard key={t}>
              <div style={{ width: 36, height: 36, background: G2, border: `1px solid ${G3}`, marginBottom: 12 }} />
              <H3m style={{ marginBottom: 7 }}>{t}</H3m>
              <Body small muted>{d}</Body>
            </WCard>
          ))}
        </div>
      </div>

      {/* Process */}
      <div style={{ background: '#fff', padding: `${m ? 40 : 64}px ${p}px` }}>
        <SHead label="How We Work" title="Our Process" m={m} />
        <ProcessFlow steps={[['Brief','Site survey and client needs assessment.'],['Design','Concept and detailed design development.'],['Programme','Works programme and logistics planning.'],['Installation','Phased delivery by specialist teams.'],['Handover','Snagging, handover and aftercare.']]} m={m} />
      </div>

      {/* Gallery */}
      <div style={{ padding: `${m ? 40 : 64}px ${p}px` }}>
        <SHead label="Portfolio" title="Installation Projects" m={m} />
        <div style={{ display: 'grid', gridTemplateColumns: m ? 'repeat(2,1fr)' : 'repeat(4,1fr)', gap: 10 }}>
          {['Adare Manor','Dairygold Production Facility','Little Island Greenway','Penrose Wharf'].map(l => <ImgBox key={l} height={m ? 110 : 200} label={l} />)}
        </div>
        <div style={{ marginTop: 8 }}><Annot>CMS: gallery — linked to Projects collection (Commercial filter)</Annot></div>
      </div>

      {/* Pathways */}
      <div style={{ background: G2, padding: `${m ? 32 : 48}px ${p}px` }}>
        <Lbl style={{ color: ACCENT, marginBottom: 16 }}>Related Services</Lbl>
        <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
          <Btn variant="outline" onClick={() => onNav && onNav('maintain')}>Explore Maintenance Solutions</Btn>
          <Btn variant="outline" onClick={() => onNav && onNav('living')}>Explore the Living Landscapes Programme</Btn>
        </div>
      </div>
    </div>
  );
}

// ─── MAINTENANCE ───────────────────────────────────────────
function MaintenancePage({ m, onNav }) {
  const p = m ? 20 : 72;
  return (
    <div>
      <ImgBox height={m ? 280 : 480} label="Maintenance team on campus — hero image" overlay={
        <div style={{ height: '100%', background: 'rgba(0,0,0,0.46)', display: 'flex', flexDirection: 'column', justifyContent: 'flex-end', padding: m ? '28px 20px' : '72px 72px' }}>
          <Lbl style={{ color: 'rgba(255,255,255,0.55)', marginBottom: 10 }}>Corporate Grounds Maintenance</Lbl>
          {m ? <H1m style={{ color: '#fff' }}>Protecting Your Environment. Safeguarding Your Reputation.</H1m>
             : <H1 style={{ color: '#fff' }}>Protecting Your Environment.<br/>Safeguarding Your Reputation.</H1>}
          <Body style={{ color: 'rgba(255,255,255,0.7)', maxWidth: 540, marginTop: 10 }}>Proactive, compliance-driven grounds maintenance for multi-national campuses and large-scale commercial estates.</Body>
          <div style={{ marginTop: 20 }}><Btn variant="white" small>View Maintenance Portfolio</Btn></div>
        </div>
      } />

      {/* Core Message */}
      <div style={{ background: '#fff', padding: `${m ? 40 : 64}px ${p}px` }}>
        <div style={{ display: 'grid', gridTemplateColumns: m ? '1fr' : '1fr 1fr', gap: m ? 28 : 72, alignItems: 'start' }}>
          <div>
            <Lbl style={{ color: ACCENT, marginBottom: 10 }}>Our Approach</Lbl>
            {m ? <H2m style={{ marginBottom: 14 }}>Operational Excellence in Asset Management</H2m>
               : <H2 style={{ marginBottom: 16 }}>Operational Excellence in<br/>Asset Management</H2>}
            <Body style={{ marginBottom: 14 }}>The presentation of your facility is the first physical touchpoint for your stakeholders, investors, and employees. It is a direct reflection of your corporate standards. Our maintenance divisions operate under stringent ISO 45001 (Occupational Health & Safety) and ISO 14001 (Environmental Management) standards, making us the trusted choice for live, high-security pharmaceutical, educational, and manufacturing sites across Ireland.</Body>
            <Body muted style={{ marginBottom: 14 }}>A dedicated, fully trained team is assigned to your site to ensure absolute consistency, continuity of service, and deep familiarity with your specific operational protocols. We work discreetly to minimize disturbance to your daily operations, executing tailored, year-round management plans.</Body>
            <Body muted>We don't just maintain your grounds; we actively manage risks, ensure unwavering environmental compliance, and preserve the long-term capital value of your physical assets.</Body>
          </div>
          <ImgBox height={m ? 220 : 420} label="Maintenance — campus photography" />
        </div>
      </div>

      {/* Services */}
      <div style={{ padding: `${m ? 40 : 64}px ${p}px` }}>
        <SHead label="Service Detail" title="Maintenance Services" m={m} />
        <div style={{ display: 'grid', gridTemplateColumns: m ? '1fr' : 'repeat(3,1fr)', gap: 18 }}>
          {[['Grounds Upkeep','Regular mowing, edging and year-round grounds management.'],['Seasonal Planting','Spring/summer/autumn/winter bedding programmes.'],['Arboricultural Care','Specialised tree surgery, pruning and risk assessments.'],['Invasive Species Control','Organic management of invasive plant species.'],['Fine Turf Management','Expert care for high-specification lawn and turf areas.'],['ISO-Compliant Reporting','Monthly condition reports aligned to your compliance protocols.']].map(([t, d]) => (
            <WCard key={t}>
              <div style={{ width: 36, height: 36, background: G2, border: `1px solid ${G3}`, marginBottom: 12 }} />
              <H3m style={{ marginBottom: 7 }}>{t}</H3m>
              <Body small muted>{d}</Body>
            </WCard>
          ))}
        </div>
      </div>

      {/* Process */}
      <div style={{ background: '#fff', padding: `${m ? 40 : 64}px ${p}px` }}>
        <SHead label="How We Work" title="Our Process" m={m} />
        <ProcessFlow steps={[['Audit','Site condition and baseline assessment.'],['Specification','Maintenance spec and frequency schedule.'],['Programme','Seasonal planning and resourcing.'],['Delivery','Planned and reactive maintenance visits.'],['Review','Quarterly review and programme adjustment.']]} m={m} />
      </div>

      {/* Clients */}
      <div style={{ padding: `${m ? 40 : 64}px ${p}px` }}>
        <SHead label="Active Contracts" title="Maintenance Portfolio" m={m} />
        <div style={{ display: 'grid', gridTemplateColumns: m ? 'repeat(2,1fr)' : 'repeat(4,1fr)', gap: 10 }}>
          {['UCC Grounds','MTU Cork','Dairygold Mallow','Penrose Wharf'].map(l => <ImgBox key={l} height={m ? 110 : 200} label={l} />)}
        </div>
        <div style={{ marginTop: 8 }}><Annot>CMS: gallery — linked to Projects collection (Maintenance filter)</Annot></div>
      </div>

      {/* Pathways */}
      <div style={{ background: G2, padding: `${m ? 32 : 48}px ${p}px` }}>
        <Lbl style={{ color: ACCENT, marginBottom: 16 }}>Related Services</Lbl>
        <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
          <Btn variant="outline">Explore Installation Services</Btn>
          <Btn variant="outline">Discover the Living Landscapes Programme</Btn>
        </div>
      </div>
    </div>
  );
}

// ─── LIVING LANDSCAPES ─────────────────────────────────────
const LLP_HERO   = 'uploads/Hero_LLP_DFP-20170726-142034.jpg';
const LLP_INTRO  = 'uploads/DG_Carpark_DFP-20190731-075350.jpg';
const LLP_STORY  = 'uploads/CCC_CarPark_DFP-20160718-124434.jpg';
const LLP_IMPACT = 'uploads/MIT_Campus_2_DFP-20180531-110016.jpg';

const LLP_DELIVERS = [
  ['uploads/ElmTree_Ext_1_DFP-20170724-150742.jpg', 'Ecological Audit', 'Comprehensive topographical and ecological assessment to identify rewilding zones and opportunities.'],
  ['uploads/UCC_Wildflowers-Yellow_DFP-20190621-093725.jpg', 'Native Flora Introduction', 'Strategic introduction of native plant species and pollinator corridors to improve biodiversity indexes.'],
  ['uploads/Adare_Top-Down_DFP-20220304-141529.jpg', 'Sustainable Water Management', 'Implementation of sustainable drainage and water management systems to reduce resource consumption.'],
  ['uploads/Midleton_Bulbs_DFP-20240422-203652.jpg', 'ESG Data & Reporting', 'Tangible biodiversity data for annual sustainability reports — measurable, documented, certified.'],
  ['uploads/MIT_Campus_1_DFP-20180531-113714.jpg', 'Carbon Footprint Reduction', 'Reduced reliance on mechanical mowing, chemical interventions, and heavy water usage.'],
  ['uploads/CCC_Ext_1_DFP-20160718-120844.jpg', 'Long Term Cost Savings', 'Ecological transition that dramatically reduces ongoing operational and maintenance expenditure.'],
];

// Horizontal accordion variant of the six-panel "delivers" section.
function DeliversAccordion({ m }) {
  const [hi, setHi] = React.useState(m ? 0 : -1);
  // Panels reflow under a stationary cursor while expanding, which re-fires mouseenter on
  // whichever panel slides beneath it. Lock hover changes for the transition, then resolve
  // the active panel from real pointer movement instead of enter events.
  const rowRef = React.useRef(null);
  const lock = React.useRef(0);
  const pick = (i) => { if (Date.now() < lock.current) return; if (i !== hi) { lock.current = Date.now() + 430; setHi(i); } };
  const onMove = (e) => {
    if (Date.now() < lock.current) return;
    const kids = rowRef.current ? Array.from(rowRef.current.children) : [];
    const n = kids.findIndex(k => { const r = k.getBoundingClientRect(); return e.clientX >= r.left && e.clientX <= r.right; });
    if (n >= 0) pick(n);
  };
  if (m) {
    return (
      <div style={{ display: 'flex', flexDirection: 'column', gap: 3, background: '#fff' }}>
        {LLP_DELIVERS.map(([src, title, desc], i) => (
          <div key={title} onClick={() => setHi(h => h === i ? -1 : i)} style={{ position: 'relative', overflow: 'hidden', height: hi === i ? 250 : 96, transition: 'height .5s ease-in' }}>
            <img src={src} alt={title} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
            <div className="pav-acc-scrim" style={{ opacity: hi === i ? 1 : 0 }} />
            <div className="pav-acc-txt" style={{ opacity: hi === i ? 1 : 0, padding: '0 18px 18px' }}>
              <H3m style={{ color: '#fff', fontSize: 22, marginBottom: 7 }}>{title}</H3m>
              <Body style={{ color: 'rgba(255,255,255,0.9)', fontSize: 13, fontWeight: 300 }}>{desc}</Body>
            </div>
          </div>
        ))}
      </div>
    );
  }
  return (
    <div className="pav-acc" ref={rowRef} onMouseMove={onMove} onMouseLeave={() => { lock.current = 0; setHi(-1); }}>
      {LLP_DELIVERS.map(([src, title, desc], i) => (
        <div key={title} className="pav-acc-p" onMouseEnter={() => pick(i)} style={{ flexGrow: hi === i ? 0 : 1, flexBasis: hi === i ? 'calc(60vh * 16 / 9)' : 0 }}>
          <img src={src} alt={title} />
          <div className="pav-acc-scrim" style={{ opacity: hi === i ? 1 : 0 }} />
          <div className="pav-acc-txt" style={{ opacity: hi === i ? 1 : 0 }}>
            <H3 style={{ color: '#fff', fontWeight: 400, fontSize: 32, marginBottom: 11 }}>{title}</H3>
            <Body style={{ color: 'rgba(255,255,255,0.9)', fontSize: 17.5, fontWeight: 300, maxWidth: 560 }}>{desc}</Body>
          </div>
        </div>
      ))}
    </div>
  );
}

function LivingLandscapesPage({ m, onNav }) {
  const [deliversVariant, setDeliversVariant] = React.useState(() => localStorage.getItem('wf_llp_delivers') || 'grid');
  React.useEffect(() => { localStorage.setItem('wf_llp_delivers', deliversVariant); }, [deliversVariant]);
  const gut = m ? 20 : 72;
  const wrap = { maxWidth: 1180, margin: '0 auto' };
  return (
    <div style={{ background: '#fff' }}>
      {/* Hero */}
      <div style={{ position: 'relative' }}>
        <CropImg src={LLP_HERO} alt="Pollinator planting on a corporate approach road" height={m ? '33vh' : 560} pos={m ? 'center center' : 'center calc(50% - 110px)'} />
        <div style={{ position: 'absolute', inset: 0, zIndex: 1, pointerEvents: 'none', opacity: 0.5 }}>
          {m ? <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, height: '62%', background: 'linear-gradient(0deg, rgba(0,0,0,1), rgba(0,0,0,0))' }} />
             : <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: '35%', background: 'linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0))' }} />}
        </div>
        <div style={{ position: 'absolute', inset: 0, top: m ? 0 : -250, zIndex: 100, pointerEvents: 'none', display: 'flex', flexDirection: 'column', justifyContent: m ? 'flex-end' : 'center', padding: m ? `0 ${gut}px 26px` : `0 ${gut}px`, textShadow: '0px 4px 15px #0000007F' }}>
          <Lbl style={{ color: '#fff', marginBottom: m ? 9 : 18, fontSize: m ? 9.5 : 11 }}>The Living Landscapes Programme</Lbl>
          {m ? <H1m style={{ color: '#fff', fontSize: 24 }}>Strategic biodiversity for forward-thinking enterprise</H1m>
             : <H1 style={{ color: '#fff', fontSize: 58 }}>Strategic biodiversity for<br/>forward-thinking enterprise</H1>}
        </div>
      </div>

      {/* Stat row — desktop only */}
      <div style={{ padding: `0 ${gut}px`, display: m ? 'none' : 'block' }}>
        <StatRow m={m} items={[
          ['Triple ISO', 'Certified Operations'],
          ['3 Generations', 'Of Expertise Since 1933'],
          ['Design-to-Maintain', 'Full Lifecycle Service'],
        ]} />
      </div>

      {/* Programme intro */}
      <div style={{ padding: `${m ? 44 : 84}px ${gut}px ${m ? 44 : 72}px` }}>
        <div style={wrap}>
          {m ? <H2m style={{ color: LEAF, marginBottom: 14 }}>The Living Landscapes Programme</H2m>
             : <H2 style={{ color: LEAF, fontSize: 48, marginBottom: 20 }}>The Living Landscapes Programme</H2>}
          <Body style={{ maxWidth: 520, marginBottom: m ? 30 : 52 }}>A strategic approach to biodiversity that delivers real environmental benefits, supports your sustainability reports, and lowers long-term maintenance costs.</Body>

          <div style={{ display: 'grid', gridTemplateColumns: m ? '1fr' : '1fr 1.15fr', gap: m ? 26 : 46, alignItems: 'start' }}>
            <CropImg src={LLP_INTRO} alt="Pollinator planting beside a corporate car park" height={m ? 240 : 340} />
            <div>
              <Body small style={{ marginBottom: 14 }}>Modern corporations are evaluated not just by their financial performance, but by their active commitment to environmental stewardship. The Living Landscapes Programme is our proprietary, consultative solution designed to transition traditional, high-maintenance corporate grounds into thriving, bio-diverse, and self-sustaining ecosystems.</Body>
              <Body small style={{ marginBottom: 14 }}>Through comprehensive topographical and ecological audits, we identify strategic zones on your campus suitable for rewilding. By introducing native flora, establishing pollinator corridors, and implementing sustainable water management systems, we dramatically improve local biodiversity indexes—providing you with tangible data for your annual sustainability reports.</Body>
              <Body small style={{ marginBottom: m ? 22 : 26 }}>The result is a dual victory: a significantly reduced carbon footprint and substantial, long-term operational cost savings for your facilities management budget.</Body>
              <Btn variant="link" onClick={() => onNav && onNav('contact')}>Request a strategic consultation</Btn>
            </div>
          </div>
        </div>
      </div>

      {/* What it delivers */}
      <div style={{ padding: `0 ${gut}px ${m ? 32 : 48}px` }}>
        <div style={wrap}>
          {m ? <H2m style={{ color: LEAF, marginBottom: 14 }}>What the Living Landscapes Programme delivers</H2m>
             : <H2 style={{ color: LEAF, fontSize: 32, marginBottom: 18 }}>What the Living Landscapes Programme delivers</H2>}
          <Body small style={{ marginBottom: 12 }}>The Living Landscapes Programme represents a comprehensive and strategic framework designed to enhance biodiversity in a meaningful and measurable way. By integrating ecological principles into landscape management, this programme not only delivers tangible environmental benefits such as improved habitat quality and increased species diversity but also strengthens your organization's sustainability reporting by providing verifiable outcomes.</Body>
          <Body small>Additionally, it contributes to reducing long-term maintenance expenses through the promotion of resilient ecosystems that require less intervention and resource input over time, ultimately supporting both ecological health and economic efficiency in a sustainable manner.</Body>
        </div>
      </div>

      {/* Delivers — two layout options, toggled for client comparison */}
      <div style={{ padding: `0 ${gut}px ${m ? 12 : 14}px`, display: 'flex', justifyContent: 'flex-end', alignItems: 'center', gap: 14 }}>
        <Lbl style={{ fontSize: 10, color: G4 }}>Layout option</Lbl>
        {[['grid', 'Grid'], ['accordion', 'Accordion']].map(([k, label]) => (
          <div key={k} onClick={() => setDeliversVariant(k)} style={{
            fontFamily: SANS, fontSize: 11, letterSpacing: '0.08em', textTransform: 'uppercase', cursor: 'pointer',
            color: deliversVariant === k ? LEAF : G4,
            borderBottom: `1px solid ${deliversVariant === k ? LEAF : 'transparent'}`, paddingBottom: 2,
          }}>{label}</div>
        ))}
      </div>
      {deliversVariant === 'grid' ? (
        <div style={{ display: 'grid', gridTemplateColumns: m ? '1fr' : 'repeat(3, 1fr)', gap: m ? 3 : 4, background: '#fff' }}>
          {LLP_DELIVERS.map(([src, title, desc]) => (
            <ImageOverlayCard key={title} src={src} title={title} desc={desc} height={m ? 240 : 320} m={m} />
          ))}
        </div>
      ) : (
        <DeliversAccordion m={m} />
      )}

      {/* Testimonial */}
      <div style={{ padding: `${m ? 44 : 80}px ${gut}px ${m ? 44 : 76}px` }}>
        <div style={wrap}>
          {m ? <H2m style={{ color: LEAF, marginBottom: 22 }}>What our clients say</H2m>
             : <H2 style={{ color: LEAF, fontSize: 30, marginBottom: 30 }}>What our clients say</H2>}
          <TestimonialBlock m={m} name="Jim Woulfe" role="CEO, Dairygold" quote={[
            'Participating in the Living Landscapes Programme has been transformative for our organization. Not only have we seen tangible improvements in biodiversity around our sites, but it has also significantly enhanced our sustainability reporting.',
            "Plus, we've seen a reduction in long-term maintenance costs, making this strategic approach truly beneficial.",
          ]} />
        </div>
      </div>

      {/* Teaser — Our Story (text left, image right) */}
      <div style={{ display: 'grid', gridTemplateColumns: m ? '1fr' : '1fr 1.25fr', alignItems: 'center' }}>
        <div style={{ padding: m ? `36px ${gut}px 32px` : '0 64px 0 72px', order: m ? 2 : 1 }}>
          <Lbl style={{ marginBottom: m ? 12 : 16 }}>Our Story</Lbl>
          {m ? <H2m style={{ color: LEAF, marginBottom: 14 }}>A Legacy of Scale. A Future of Innovation.</H2m>
             : <H2 style={{ color: LEAF, fontSize: 30, marginBottom: 20 }}>A Legacy of Scale.<br/>A Future of Innovation.</H2>}
          <Body small style={{ marginBottom: m ? 22 : 30, maxWidth: 400 }}>Since 1933, Pavilion Landscapes has evolved across three generations. What began as a family enterprise has grown into Ireland's premier corporate landscaping partner, trusted to manage the complex, large-scale environments of multi-national industry leaders.</Body>
          <Btn variant="link" onClick={() => onNav && onNav('story')}>Read our story</Btn>
        </div>
        <div style={{ order: m ? 1 : 2 }}>
          <CropImg src={LLP_STORY} alt="Timber screen with pollinator planting" height={m ? 250 : 470} />
        </div>
      </div>

      {/* Teaser — Our Impact (image left, text right) */}
      <div style={{ display: 'grid', gridTemplateColumns: m ? '1fr' : '1.25fr 1fr', alignItems: 'center' }}>
        <div>
          <CropImg src={LLP_IMPACT} alt="Maintained hedging on a corporate campus" height={m ? 250 : 470} />
        </div>
        <div style={{ padding: m ? `36px ${gut}px 40px` : '0 72px 0 64px' }}>
          <Lbl style={{ marginBottom: m ? 12 : 16 }}>Our Impact</Lbl>
          {m ? <H2m style={{ color: LEAF, marginBottom: 14 }}>Measurable Outcomes. Certified Excellence.</H2m>
             : <H2 style={{ color: LEAF, fontSize: 30, marginBottom: 20 }}>Measurable Outcomes.<br/>Certified Excellence.</H2>}
          <Body small style={{ marginBottom: m ? 22 : 30, maxWidth: 400 }}>We align our landscape strategies with your corporate goals. From achieving stringent ESG targets through biodiversity, to maintaining flawless safety records on high-security campuses, our impact is documented, certified, and proven.</Body>
          <Btn variant="link" onClick={() => onNav && onNav('impact')}>View accreditations & Outcomes</Btn>
        </div>
      </div>

      {/* CTA band */}
      <div style={{ padding: `${m ? 48 : 92}px ${gut}px ${m ? 48 : 88}px` }}>
        <div style={wrap}>
          <HR style={{ marginBottom: m ? 36 : 64 }} />
          <div style={{ textAlign: 'center' }}>
            {m ? <H2m style={{ color: LEAF, marginBottom: 14 }}>Ready to Elevate Your Corporate Landscape?</H2m>
               : <H2 style={{ color: LEAF, fontSize: 36, marginBottom: 18 }}>Ready to Elevate Your Corporate Landscape?</H2>}
            <Body style={{ marginBottom: m ? 26 : 34 }}>Connect with our leadership team to discuss your site requirements and ISO compliance needs.</Body>
            <div style={{ display: 'flex', justifyContent: 'center' }}>
              <Btn variant="link" onClick={() => onNav && onNav('contact')}>Request a Strategic Consultation</Btn>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// ─── PROJECTS (LISTING + FILTER) ───────────────────────────
const ALL_PROJECTS = {
  commercial: [
    ['Dairygold Roundabout, Mallow','Following a corporate rebranding, Dairygold commissioned a redesign of the main entrance roundabout. Organic invasive species management, 3D Buxus lettering, and bio-diverse planting with zero chemical edge controls.'],
    ['Dairygold Mallow Production Facility','Comprehensive landscaping for a newly renovated production plant — strict hygiene and safety protocols on a live, high-volume food manufacturing site.'],
    ['Dairygold Carpark','Precision hardscaping and strategic soft landscaping for a high-traffic industrial carpark — durable materials, clear sightlines, low-maintenance planting.'],
    ['Adare Manor — Specimen Tree Planting','300+ mature specimen trees (up to 50ft, 9 tonnes) sourced and planted from across Europe in preparation for the 2027 Ryder Cup. Overnight road closures, 50-tonne cranes.'],
    ['Elm Tree Restaurant, Glounthaune','High-end New England-style design — bespoke white brickwork, underground service relocation, pleached evergreen oaks, and tightly clipped yew hedging.'],
    ['Carrigaline Lions Youth Centre','\'Pavilion in the Park\' — civic planting scheme featuring Dicksonia antarctica (Tree Ferns) and bio-diverse Verbena.'],
    ['Ballygarvan Bus Stop','Civic improvement project — durable, low-maintenance planting enhancing public space within council safety and visibility regulations.'],
    ['Shanbally','Large-scale commercial installation — heavy machinery coordination, strict timeline adherence alongside parallel construction phases.'],
    ['Bishop Lucy Park, Cork City','Civic landscaping balancing public accessibility with resilient planting in a high-footfall urban environment.'],
    ['Midleton CCC','Comprehensive hard and soft landscaping for a commercial facility — welcoming, professional exterior aligned to corporate identity.'],
    ['Penrose Wharf','Urban commercial landscaping — structured greenery and premium hardscaping in a dense Cork business district.'],
    ['Little Island–Dunkettle Greenway','Major infrastructural landscaping for active travel — native planting, soil stabilization, and ecological integration.'],
    ['Convent Garden, Kinsale','Sensitive commercial execution integrating modern amenities with historical surroundings via mature planting.'],
  ],
  residential: [
    ['Rectory, Blackrock','Premium residential execution — mature privacy screening, elegant hardscaping, and structured planting to complement the property\'s architecture.'],
    ['Rockville, Blackrock','Sophisticated soft and hard landscaping — advanced material palettes and bespoke planting for seamless indoor-outdoor living.'],
    ['Silver Apple, Crosshaven','Elevated coastal property facing the Atlantic — maritime-appropriate planting (Agapanthus, Crocosmia, Olive trees), terraced retaining walls and harbour views.'],
    ['POM Garden','Comprehensive garden transformation — lifting and transplanting existing mature trees, contemporary architectural lighting and hardscaping.'],
  ],
  maintenance: [
    ['UCC Grounds','Maintaining the historic University College Cork campus — preserving heritage trees and ancient planting while serving thousands of daily users.'],
    ['MTU Cork','Year-round grounds maintenance for a sprawling educational and technological campus — proactive asset management and rapid environmental response.'],
    ['Dairygold Mallow','Highly regulated continuous maintenance for an active food production facility — strict HSE and hygiene parameters, zero operational disruption.'],
    ['Penrose Wharf','High-end urban corporate maintenance ensuring premium hardscaping and structured planting remain flawless for multi-national tenants.'],
  ],
};

function ProjectsPage({ m, onNav }) {
  const p = m ? 20 : 72;
  const [filter, setFilter] = React.useState('all');
  const projects = filter === 'all' ? [...ALL_PROJECTS.commercial, ...ALL_PROJECTS.maintenance, ...ALL_PROJECTS.residential] : ALL_PROJECTS[filter];

  return (
    <div>
      <ImgBox height={m ? 280 : 460} label="Projects — portfolio hero image" overlay={
        <div style={{ height: '100%', background: 'rgba(0,0,0,0.46)', display: 'flex', flexDirection: 'column', justifyContent: 'flex-end', padding: m ? '28px 20px' : '72px 72px' }}>
          <Lbl style={{ color: 'rgba(255,255,255,0.55)', marginBottom: 10 }}>Commercial Landscaping Portfolio</Lbl>
          {m ? <H1m style={{ color: '#fff' }}>Demonstrable Scale and Capability</H1m>
             : <H1 style={{ color: '#fff' }}>Demonstrable Scale and Capability</H1>}
          <Body style={{ color: 'rgba(255,255,255,0.7)', maxWidth: 600, marginTop: 10 }}>A curated selection of our work across commercial installations, complex residential developments, and high-security corporate maintenance contracts.</Body>

        </div>
      } />

      {/* Intro */}
      <div style={{ background: '#fff', padding: `${m ? 32 : 48}px ${p}px` }}>
        <Body style={{ maxWidth: 860 }}>Our portfolio stands as a testament to our capacity, scale, and unwavering commitment to quality. Operating exclusively within high-compliance environments, we navigate the complex requirements of pharmaceutical campuses, manufacturing facilities, and large-scale civic developments. Our approach integrates rigorous ISO-certified project management with exceptional horticultural craftsmanship, ensuring that every project is delivered safely, sustainably, and to the highest architectural specifications.</Body>
      </div>

      {/* Filter tabs */}
      <div style={{ padding: `0 ${p}px`, borderBottom: `1px solid ${G2}`, background: '#fff' }}>
        <div style={{ display: 'flex', gap: 0, justifyContent: 'flex-end' }}>
          {[['all','All Projects'],['commercial','Commercial'],['maintenance','Maintenance'],['residential','Residential']].map(([key, label]) => (
            <div key={key} onClick={() => setFilter(key)} style={{
              padding: m ? '12px 14px' : '16px 28px',
              fontFamily: "'Host Grotesk', sans-serif",
              fontSize: m ? 12 : 14, fontWeight: 600,
              color: filter === key ? ACCENT : G5,
              borderBottom: filter === key ? `3px solid ${ACCENT}` : '3px solid transparent',
              cursor: 'pointer', whiteSpace: 'nowrap'
            }}>{label} {key !== 'all' && <span style={{ fontSize: 10, opacity: 0.5 }}>({ALL_PROJECTS[key].length})</span>}</div>
          ))}
        </div>
        <Annot style={{ marginBottom: 8 }}>Filter: dynamic — switches project grid below</Annot>
      </div>

      {/* Project grid */}
      <div style={{ padding: `${m ? 32 : 52}px ${p}px` }}>
        <div style={{ display: 'grid', gridTemplateColumns: m ? '1fr' : 'repeat(3,1fr)', gap: m ? 16 : 24 }}>
          {projects.map(([title, desc, cat], i) => (
            <WCard key={i} style={{ padding: 0, overflow: 'hidden', cursor: 'pointer' }}>
              <ImgBox height={m ? 160 : 210} label={`${title} — photo`} />
              <div style={{ padding: m ? 14 : 20 }}>
                <Lbl style={{ color: ACCENT, marginBottom: 5, textTransform: 'capitalize' }}>{cat}</Lbl>
                <H3m style={{ marginBottom: 8 }}>{title}</H3m>
                <Body small muted>{desc}</Body>
              </div>
            </WCard>
          ))}
        </div>
        <div style={{ marginTop: 10 }}><Annot>CMS: projects collection — filterable by sector tag. Click card → Project Template page.</Annot></div>
      </div>
    </div>
  );
}


// Masonry gallery — natural-ratio cells, hover zoom, full-screen lightbox.
// Optional `photos`: array of image srcs (frames follow each image's own orientation).
if (!document.getElementById('pav-gal')) {
  const gs = document.createElement('style');
  gs.id = 'pav-gal';
  gs.textContent = `
.pav-gcell{overflow:hidden;cursor:zoom-in;background:#eceee9}
.pav-gcell img{display:block;width:100%;height:auto;object-position:center center;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.pav-gcell:hover img{transform:scale(1.045)}
.pav-acc{display:flex;width:100%;height:60vh;max-height:60vh;gap:4px;background:#fff;overflow:hidden}
.pav-acc-p{position:relative;overflow:hidden;min-width:0;flex-grow:1;flex-shrink:1;flex-basis:0;transition:flex-basis .4s ease-in-out,flex-grow .4s ease-in-out}
.pav-acc-p img{position:absolute;top:0;left:50%;transform:translateX(-50%);width:calc(60vh * 16 / 9);height:100%;object-fit:cover;display:block}
.pav-acc-txt{position:absolute;left:0;right:0;bottom:0;padding:0 40px 56px 64px;z-index:2;opacity:0;transition:opacity .4s ease-in-out;text-shadow:0 4px 15px rgba(0,0,0,.5)}
.pav-acc-scrim{position:absolute;left:0;right:0;bottom:0;height:60%;z-index:1;background:linear-gradient(0deg,rgba(0,0,0,.85),rgba(0,0,0,0));opacity:0;transition:opacity .4s ease-in-out;pointer-events:none}
.pav-relcard{cursor:pointer}
.pav-relimg{overflow:hidden}
.pav-relimg img{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.pav-relcard:hover .pav-relimg img{transform:scale(1.045)}
.pav-reledge{position:absolute;left:0;bottom:0;background:${LEAF};z-index:2;transition:height .45s cubic-bezier(.2,.7,.2,1),width .45s cubic-bezier(.2,.7,.2,1)}
.pav-reledge-v{width:1px;height:50%}
.pav-reledge-h{height:1px;width:50%}
.pav-relcard:hover .pav-reledge-v{height:100%}
.pav-relcard:hover .pav-reledge-h{width:100%}
.pav-lb{position:fixed;inset:0;z-index:9998;background:rgba(10,12,8,0.9);display:flex;align-items:center;justify-content:center;animation:pavLbIn .2s ease-out both}
@keyframes pavLbIn{from{opacity:0}to{opacity:1}}
.pav-lb img{max-width:75vw;max-height:75vh;width:auto;height:auto;object-fit:contain;display:block;box-shadow:0 24px 70px rgba(0,0,0,.5)}
.pav-lbbtn{position:absolute;background:none;border:none;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:.75;transition:opacity .15s}
.pav-lbbtn:hover{opacity:1}
`;
  document.head.appendChild(gs);
}

function GalleryLightbox({ items, index, onClose, onStep }) {
  React.useEffect(() => {
    const onKey = (e) => {
      if (e.key === 'Escape') onClose();
      if (e.key === 'ArrowRight') onStep(1);
      if (e.key === 'ArrowLeft') onStep(-1);
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [onClose, onStep]);
  const chev = (dir) => (
    <svg width="17" height="30" viewBox="0 0 17 30"><path d={dir < 0 ? 'M13 2 L3 15 L13 28' : 'M4 2 L14 15 L4 28'} fill="none" stroke="currentColor" strokeWidth="1.6" /></svg>
  );
  return (
    <div className="pav-lb" onClick={onClose}>
      <img src={items[index]} alt="" onClick={(e) => e.stopPropagation()} />
      <button className="pav-lbbtn" style={{ top: 22, right: 24, width: 44, height: 44 }} onClick={(e) => { e.stopPropagation(); onClose(); }} aria-label="Close">
        <svg width="22" height="22" viewBox="0 0 22 22"><line x1="3" y1="3" x2="19" y2="19" stroke="currentColor" strokeWidth="1.6" /><line x1="19" y1="3" x2="3" y2="19" stroke="currentColor" strokeWidth="1.6" /></svg>
      </button>
      <button className="pav-lbbtn" style={{ left: 20, width: 52, height: 72 }} onClick={(e) => { e.stopPropagation(); onStep(-1); }} aria-label="Previous">{chev(-1)}</button>
      <button className="pav-lbbtn" style={{ right: 20, width: 52, height: 72 }} onClick={(e) => { e.stopPropagation(); onStep(1); }} aria-label="Next">{chev(1)}</button>
      <div style={{ position: 'absolute', bottom: 26, fontFamily: SANS, fontSize: 12, color: 'rgba(255,255,255,0.7)', letterSpacing: '0.08em' }}>
        {String(index + 1).padStart(2, '0')} / {String(items.length).padStart(2, '0')}
      </div>
    </div>
  );
}

function MasonryGallery({ m, photos }) {
  const [open, setOpen] = React.useState(-1);
  const step = React.useCallback((d) => {
    setOpen(i => (i + d + photos.length) % photos.length);
  }, [photos]);

  // Placeholder mode — untouched wireframe behaviour for pages without photos yet.
  if (!photos) {
    const images = [
      ['Project view 1', 'landscape'], ['Project view 2', 'portrait'], ['Project view 3', 'landscape'],
      ['Project view 4', 'portrait'], ['Project view 5', 'landscape'], ['Project view 6', 'portrait'],
      ['Project view 7', 'landscape'], ['Project view 8', 'portrait'], ['Project view 9', 'landscape'],
    ];
    return (
      <div style={{ columns: m ? 2 : 3, columnGap: m ? 8 : 12 }}>
        {images.map(([label, ratio], i) => (
          <div key={i} style={{ breakInside: 'avoid', marginBottom: m ? 8 : 12 }}>
            <ImgBox height={ratio === 'portrait' ? (m ? 220 : 340) : (m ? 140 : 210)} label={label} width="100%" />
          </div>
        ))}
      </div>
    );
  }

  return (
    <React.Fragment>
      <div style={{ columns: m ? 2 : 4, columnGap: m ? 8 : 12 }}>
        {photos.map((src, i) => (
          <div key={src} className="pav-gcell" onClick={() => setOpen(i)} style={{ breakInside: 'avoid', marginBottom: m ? 8 : 12 }}>
            <img src={src} alt="" />
          </div>
        ))}
      </div>
      {open >= 0 && <GalleryLightbox items={photos} index={open} onClose={() => setOpen(-1)} onStep={step} />}
    </React.Fragment>
  );
}

// ─── PROJECT — ADARE MANOR (CMS template, live example) ────
const PT_HERO = 'uploads/Hero_DFP-20220315-115849.jpg';
const PT_GALLERY = [
  'uploads/MasonryGallery_DFP-20220222-104238.jpg',
  'uploads/MasonryGallery_DFP-20220304-141529.jpg',
  'uploads/MasonryGallery_DFP-20220315-121146.jpg',
  'uploads/MasonryGallery_DFP-20220222-104637.jpg',
  'uploads/MasonryGallery_DFP-20220304-120352.jpg',
  'uploads/MasonryGallery_DFP-20220222-105126.jpg',
  'uploads/MasonryGallery_DFP-20220315-113326.jpg',
  'uploads/MasonryGallery_DFP-20220304-104122.jpg',
  'uploads/MasonryGallery_DFP-20220315-120534.jpg',
  'uploads/MasonryGallery_DFP-20220222-115241.jpg',
  'uploads/MasonryGallery_DFP-20220315-120346.jpg',
  'uploads/MasonryGallery_DFP-20220304-104437.jpg',
  'uploads/MasonryGallery_DFP-20220304-122858-2.jpg',
  'uploads/MasonryGallery_DFP-20220304-115500.jpg',
  'uploads/MasonryGallery_DFP-20220304-121809.jpg',
  'uploads/MasonryGallery_DFP-20220304-120016.jpg',
  'uploads/MasonryGallery_DFP-20220315-115849.jpg',
];
const PT_RELATED = [
  ['uploads/DG_Carpark_DFP-20190731-075350.jpg', 'Dairygold Production Facility'],
  ['uploads/LittleIsland_DFP-20240624-135214.jpg', 'Little Island–Dunkettle Greenway'],
  ['uploads/ElmTree_Ext_1_DFP-20170724-150742.jpg', 'Elm Tree Restaurant, Glounthaune'],
];
const PT_META = [
  ['Client', 'Adare Manor'],
  ['Location', 'Co. Limerick'],
  ['Service', 'Installation'],
  ['Scope', 'Over 300 Specimen trees'],
];

function ProjectTemplatePage({ m, onNav }) {
  const p = m ? 20 : 72;
  const wrap = { maxWidth: 1180, margin: '0 auto' };
  return (
    <div style={{ background: '#fff' }}>
      {/* Hero */}
      <div style={{ position: 'relative' }}>
        <CropImg src={PT_HERO} alt="Adare Manor — specimen tree planting" height={m ? '33vh' : 620} pos={m ? 'center center' : 'center calc(50% - 110px)'} />
        <Scrim band={m ? '68%' : '42%'} opacity={m ? 0.78 : 0.6} sides="bottom" />
        <div style={{ position: 'absolute', left: 0, right: 0, bottom: 0, zIndex: 2, padding: m ? '0 20px 30px' : '0 72px 58px', textShadow: '0px 4px 15px #0000007F' }}>
          <Breadcrumb items={['Portfolio', 'Commercial', 'Installation']} light center style={{ marginBottom: m ? 9 : 18, fontSize: m ? 10.5 : 13 }} />
          {m ? <H1m style={{ color: '#fff', textAlign: 'center', fontSize: 24 }}>Adare Manor — Specimen Tree Planting</H1m>
             : <H1 style={{ color: '#fff', fontSize: 60, textAlign: 'center' }}>Adare Manor — Specimen Tree Planting</H1>}
        </div>
      </div>

      {/* Meta row — desktop only */}
      <div style={{ padding: `0 ${p}px`, display: m ? 'none' : 'block' }}>
        <div style={{ ...wrap, display: 'grid', gridTemplateColumns: m ? 'repeat(2,1fr)' : 'repeat(4,1fr)' }}>
          {PT_META.map(([label, val], i) => (
            <div key={label} style={{
              padding: m ? '16px 0 16px 16px' : '22px 0 22px 26px',
              borderLeft: `1px solid ${G3}`,
              borderTop: m && i > 1 ? `1px solid ${G3}` : 'none',
            }}>
              <Lbl style={{ marginBottom: 6, fontSize: 10 }}>{label}</Lbl>
              <div style={{ fontFamily: SERIF, fontWeight: 400, fontSize: m ? 17 : 19, color: SLATE, lineHeight: 1.3 }}>{val}</div>
            </div>
          ))}
        </div>
      </div>

      {/* Brief + Solution */}
      <div style={{ padding: `${m ? 44 : 90}px ${p}px ${m ? 40 : 80}px` }}>
        <div style={{ ...wrap, display: 'grid', gridTemplateColumns: m ? '1fr' : '1fr 1fr', gap: m ? 34 : 90 }}>
          <div>
            {m ? <H2m style={{ color: LEAF, marginBottom: 14 }}>The Brief</H2m>
               : <H2 style={{ color: LEAF, fontSize: 34, marginBottom: 20 }}>The Brief</H2>}
            <Body small style={{ marginBottom: 14 }}>In preparation for the 2027 Ryder Cup, Adare Manor commissioned Pavilion Landscapes to source and plant over 300 mature specimen trees across the estate grounds — a project of extraordinary logistical and horticultural scale.</Body>
            <Body small>Trees ranged up to 50 feet tall and 9 tonnes in weight, requiring careful selection from specialist nurseries across Europe and transport under strict phytosanitary regulations.</Body>
          </div>
          <div>
            {m ? <H2m style={{ color: LEAF, marginBottom: 14 }}>Our Solution</H2m>
               : <H2 style={{ color: LEAF, fontSize: 34, marginBottom: 20 }}>Our Solution</H2>}
            <Body small style={{ marginBottom: 14 }}>Pavilion Landscapes coordinated overnight road closures and deployed 50-tonne cranes to safely transport and position specimen trees across the estate. Our pan-European nursery network enabled us to source trees precisely matched to the estate's architectural and ecological brief.</Body>
            <Body small>Every installation was executed to strict timeline and safety protocols, with zero disruption to the estate's ongoing operations and guest experience.</Body>
          </div>
        </div>
      </div>

      {/* Gallery */}
      <div style={{ padding: `0 ${p}px ${m ? 48 : 90}px` }}>
        <div style={wrap}>
          {m ? <H2m style={{ color: LEAF, marginBottom: 22, textAlign: 'center' }}>Project Gallery</H2m>
             : <H2 style={{ color: LEAF, fontSize: 40, marginBottom: 38, textAlign: 'center' }}>Project Gallery</H2>}
          <MasonryGallery m={m} photos={PT_GALLERY} />
        </div>
      </div>

      {/* Related Projects */}
      <div style={{ padding: `0 ${p}px ${m ? 48 : 90}px` }}>
        <div style={wrap}>
          {m ? <H2m style={{ color: LEAF, marginBottom: 22, textAlign: 'center' }}>Related Projects</H2m>
             : <H2 style={{ color: LEAF, fontSize: 40, marginBottom: 38, textAlign: 'center' }}>Related Projects</H2>}
          <div style={{ display: 'grid', gridTemplateColumns: m ? '1fr' : 'repeat(3,1fr)', gap: m ? 28 : 32 }}>
            {PT_RELATED.map(([src, title]) => (
              <div key={title} className="pav-relcard">
                <div style={{ position: 'relative' }}>
                  <div className="pav-relimg"><CropImg src={src} alt={title} height={m ? 200 : 250} /></div>
                  <div className="pav-reledge pav-reledge-v" />
                  <div className="pav-reledge pav-reledge-h" />
                </div>
                <div style={{ borderLeft: `1px solid ${LEAF}`, padding: m ? '18px 0 8px 18px' : '24px 0 10px 24px' }}>
                  <Lbl style={{ marginBottom: 10 }}>Commercial</Lbl>
                  <div style={{ minHeight: m ? 48 : 56 }}><Btn variant="link" small>{title}</Btn></div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* CTA band */}
      <div style={{ padding: `0 ${p}px ${m ? 48 : 88}px` }}>
        <div style={wrap}>
          <HR style={{ marginBottom: m ? 36 : 64 }} />
          <div style={{ textAlign: 'center' }}>
            {m ? <H2m style={{ color: LEAF, marginBottom: 14 }}>Ready to Elevate Your Corporate Landscape?</H2m>
               : <H2 style={{ color: LEAF, fontSize: 36, marginBottom: 18 }}>Ready to Elevate Your Corporate Landscape?</H2>}
            <Body style={{ marginBottom: m ? 26 : 34 }}>Connect with our leadership team to discuss your site requirements and ISO compliance needs.</Body>
            <div style={{ display: 'flex', justifyContent: 'center' }}>
              <Btn variant="link" onClick={() => onNav && onNav('contact')}>Request a Strategic Consultation</Btn>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// ─── OUR STORY ─────────────────────────────────────────────
function OurStoryPage({ m, onNav }) {
  const p = m ? 20 : 72;
  const team = [
    ['Charlie O\'Leary','Company Founder & Project Lead','A 3rd generation horticulturist, Charlie established The Pavilion in 2001, diversifying a family tradition into one of Ireland\'s leading commercial landscaping contractors.'],
    ['Jack Hedigan','Landscaping Foreman','Almost two decades of high-specification landscaping experience. A Kildalton Horticultural College graduate who honed his skills in The Hamptons, New York.'],
    ['Rachel Cassidy','Maintenance Team Manager & Plants Specialist','Diploma in Horticulture from GMIT. Oversees comprehensive maintenance programmes with expertise in naturalistic, bio-diverse planting.'],
    ['Danny Doody','Maintenance Specialist','The very first team member to join in 2001. Leads maintenance of key high-compliance corporate clients. Travels annually to European garden shows.'],
    ['Bernard Hanley','Quantity Surveyor (MRICS MSCSI MCInstCES)','30+ years across commercial, residential, public and private sectors. Expert cost consultancy ensuring every project is delivered on budget.'],
    ['Jayne Harris','Client Relations & Strategic Partnerships','The vital bridge between operational teams and corporate clients — specialising in procurement alignment and facilities management liaison.'],
  ];

  return (
    <div>
      <ImgBox height={m ? 280 : 440} label="Our Story — leadership team photography" overlay={
        <div style={{ height: '100%', background: 'rgba(0,0,0,0.44)', display: 'flex', flexDirection: 'column', justifyContent: 'flex-end', padding: m ? '28px 20px' : '72px 72px' }}>
          <Lbl style={{ color: 'rgba(255,255,255,0.55)', marginBottom: 10 }}>Three Generations of Landscaping Excellence</Lbl>
          {m ? <H1m style={{ color: '#fff' }}>Three Generations of Scale and Reliability</H1m>
             : <H1 style={{ color: '#fff' }}>Three Generations of<br/>Scale and Reliability</H1>}
          <Body style={{ color: 'rgba(255,255,255,0.7)', maxWidth: 580, marginTop: 10 }}>From our roots in 1933 to becoming Ireland's only Triple ISO-accredited landscaping firm, our history is defined by a commitment to evolution, quality, and long-term partnership.</Body>
          <div style={{ marginTop: 20 }}><Btn variant="white" small>Meet the Leadership Team</Btn></div>
        </div>
      } />

      {/* Ethos & History */}
      <div style={{ background: '#fff', padding: `${m ? 40 : 64}px ${p}px` }}>
        <div style={{ display: 'grid', gridTemplateColumns: m ? '1fr' : '1fr 1fr', gap: m ? 28 : 72, alignItems: 'start' }}>
          <div>
            <Lbl style={{ color: ACCENT, marginBottom: 10 }}>Ethos & Company History</Lbl>
            {m ? <H2m style={{ marginBottom: 14 }}>A Legacy Built on Trust and Transformation</H2m>
               : <H2 style={{ marginBottom: 16 }}>A Legacy Built on Trust<br/>and Transformation</H2>}
            <Body style={{ marginBottom: 14 }}>Pavilion Landscapes was founded on a simple principle: doing the job right, the first time. Over the course of 90 years, that family ethos has scaled alongside the Irish economy.</Body>
            <Body muted style={{ marginBottom: 14 }}>Today, under our third generation of leadership, we have transitioned from a traditional contracting firm into a strategic corporate partner. We understand the language of procurement, the absolute necessity of site safety, and the emerging demands of corporate sustainability.</Body>
            <Body muted>Our heritage gives us the stability to execute massive projects; our modern operational framework gives us the agility to meet the stringent demands of global brands.</Body>
          </div>
          <ImgBox height={m ? 220 : 400} label="Company history / founder photography" />
        </div>
      </div>

      {/* Milestones */}
      <div style={{ padding: `${m ? 40 : 64}px ${p}px` }}>
        <SHead label="Our Journey" title="Key Milestones" m={m} />
        <div style={{ display: 'grid', gridTemplateColumns: m ? '1fr' : 'repeat(4,1fr)', border: `1px solid ${G3}` }}>
          {[['1933','Family landscape tradition established across three generations'],['2001','The Pavilion formally founded by Charlie O\'Leary'],['2012','Triple ISO certification achieved (9001 · 14001 · 45001)'],['2024','Living Landscapes Programme launched — ESG-focused biodiversity service']].map(([year, desc], i) => (
            <div key={i} style={{ padding: m ? 20 : 28, borderRight: !m && i<3 ? `1px solid ${G3}` : 'none', borderBottom: m && i<3 ? `1px solid ${G3}` : 'none' }}>
              <div style={{ fontFamily: "'Unna', serif", fontWeight: 700, fontSize: m ? 24 : 32, color: ACCENT, marginBottom: 8 }}>{year}</div>
              <Body small muted>{desc}</Body>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 8 }}><Annot>CMS: milestone timeline — editable entries</Annot></div>
      </div>

      {/* Team Bio Cards */}
      <div style={{ background: '#fff', padding: `${m ? 40 : 64}px ${p}px` }}>
        <SHead label="The Leadership Team" title="The Experts Behind the Execution" m={m} />
        <Body style={{ maxWidth: 720, marginBottom: 36 }}>Our leadership team combines decades of horticultural expertise with robust corporate project management and health & safety compliance.</Body>
        <div style={{ display: 'grid', gridTemplateColumns: m ? 'repeat(2,1fr)' : 'repeat(3,1fr)', gap: m ? 14 : 24 }}>
          {team.map(([name, role, bio], i) => (
            <WCard key={i} style={{ padding: 0, overflow: 'hidden' }}>
              <ImgBox height={m ? 120 : 200} label={`${name} — headshot`} />
              <div style={{ padding: m ? 14 : 22 }}>
                <div style={{ fontFamily: "'Unna', serif", fontWeight: 700, fontSize: m ? 15 : 18, color: G6, marginBottom: 3 }}>{name}</div>
                <Lbl style={{ color: ACCENT, marginBottom: m ? 4 : 10 }}>{role}</Lbl>
                {!m && <Body small muted>{bio}</Body>}
                {m && <Body small muted style={{ fontSize: 10 }}>{role}</Body>}
                <div style={{ marginTop: 8 }}><Annot>CMS: name, role, bio, headshot</Annot></div>
              </div>
            </WCard>
          ))}
        </div>
        <div style={{ marginTop: 8 }}><Annot>Note from client: Jayne to confirm final leadership team list</Annot></div>
      </div>
    </div>
  );
}

// ─── OUR IMPACT ────────────────────────────────────────────
function OurImpactPage({ m, onNav }) {
  const p = m ? 20 : 72;
  return (
    <div>
      <ImgBox height={m ? 260 : 420} label="Our Impact — certified operations photography" overlay={
        <div style={{ height: '100%', background: 'rgba(0,0,0,0.46)', display: 'flex', flexDirection: 'column', justifyContent: 'flex-end', padding: m ? '28px 20px' : '72px 72px' }}>
          <Lbl style={{ color: 'rgba(255,255,255,0.55)', marginBottom: 10 }}>Accreditations, ESG Outcomes & Testimonials</Lbl>
          {m ? <H1m style={{ color: '#fff' }}>Verified Standards. Proven Results.</H1m>
             : <H1 style={{ color: '#fff' }}>Verified Standards.<br/>Proven Results.</H1>}
          <Body style={{ color: 'rgba(255,255,255,0.7)', maxWidth: 580, marginTop: 10 }}>We don't just promise excellence; we prove it. Explore our certifications, ESG outcomes, and the enduring partnerships we've built with Ireland's top-tier organisations.</Body>

        </div>
      } />

      {/* Intro */}
      <div style={{ background: '#fff', padding: `${m ? 32 : 52}px ${p}px` }}>
        <Body style={{ maxWidth: 860 }}>At Pavilion Landscapes, we understand that for our multi-national and corporate partners, 'good enough' is not an option. Our operations are entirely data-driven, compliance-focused, and results-oriented. We measure our impact not just in the aesthetic quality of the environments we engineer, but in our flawless safety records, our adherence to rigorous international standards, and the tangible environmental improvements we deliver for our clients. Partnering with us means securing guaranteed compliance and measurable value.</Body>
      </div>

      {/* ISO Accreditations */}
      <div style={{ padding: `${m ? 40 : 64}px ${p}px` }}>
        <SHead label="Accreditations" title="Ireland's Only Triple ISO Accredited Landscaping Partner" m={m} />
        <Body style={{ maxWidth: 800, marginBottom: 32 }}>We operate at the highest level of corporate compliance. Our integrated management systems ensure risk is mitigated, the environment is protected, and quality is guaranteed on every site.</Body>
        <div style={{ display: 'grid', gridTemplateColumns: m ? '1fr' : 'repeat(3,1fr)', gap: 22 }}>
          {[
            ['ISO 9001','Quality Management','Ensuring consistent, premium delivery. Our QMS governs every operational process — from procurement to handover — guaranteeing repeatable, high-standard outcomes on every site.'],
            ['ISO 14001','Environmental Management','Pioneering sustainable practices. Our EMS ensures every site operation meets the highest environmental standards, supporting our clients\' own sustainability commitments and ESG reporting.'],
            ['ISO 45001','Occupational Health & Safety','Zero-compromise safety culture on live corporate sites. Our OHSMS is the backbone of our operations on active pharmaceutical, manufacturing, and high-security campuses.'],
          ].map(([iso, title, desc]) => (
            <WCard key={iso}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 16, marginBottom: 16 }}>
                <div style={{ width: 72, height: 72, background: G1, border: `2px solid ${G3}`, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', flexShrink: 0, gap: 6 }}>
                  <div style={{ width: 32, height: 32, borderRadius: '50%', border: `2px solid ${ACCENT}` }} />
                  <span style={{ fontFamily: 'monospace', fontSize: 9, color: G4 }}>{iso}</span>
                </div>
                <div>
                  <H3m style={{ marginBottom: 3 }}>{title}</H3m>
                  <Lbl style={{ color: ACCENT }}>{iso} Certified</Lbl>
                </div>
              </div>
              <Body small muted>{desc}</Body>
              <div style={{ marginTop: 12 }}><Annot>CMS: certification body, cert number, year, download link</Annot></div>
            </WCard>
          ))}
        </div>
      </div>

      {/* ESG Outcomes & Awards */}
      <div style={{ background: '#fff', padding: `${m ? 40 : 64}px ${p}px` }}>
        <div style={{ display: 'grid', gridTemplateColumns: m ? '1fr' : '1fr 1fr', gap: m ? 28 : 64 }}>
          <div>
            <Lbl style={{ color: ACCENT, marginBottom: 10 }}>ESG Outcomes</Lbl>
            {m ? <H2m style={{ marginBottom: 14 }}>Delivering on ESG and Operational Goals</H2m>
               : <H2 style={{ marginBottom: 16 }}>Delivering on ESG and Operational Goals</H2>}
            <Body style={{ marginBottom: 20 }}>Through our Living Landscapes Programme and rigorous site management, we have helped multinational clients reduce grounds maintenance carbon footprints by up to 30% and vastly improve local biodiversity indexes, winning numerous industry awards—including the ALCI National Award—for excellence in commercial landscaping.</Body>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2,1fr)', gap: 0, border: `1px solid ${G2}`, marginBottom: 8 }}>
              {[['30%','Carbon reduction via Living Landscapes'],['ALCI','National Award — Commercial Excellence'],['Biodiversity +','Measurable index improvements'],['100%','On-time project delivery record']].map(([n,l],i) => (
                <div key={i} style={{ padding: '18px 14px', textAlign: 'center', borderRight: i%2===0 ? `1px solid ${G2}` : 'none', borderBottom: i<2 ? `1px solid ${G2}` : 'none' }}>
                  <div style={{ fontFamily: "'Unna', serif", fontWeight: 700, fontSize: m ? 18 : 22, color: ACCENT, marginBottom: 4 }}>{n}</div>
                  <Body small muted>{l}</Body>
                </div>
              ))}
            </div>
            <Annot>CMS: editable outcome stats</Annot>
            <div style={{ marginTop: 16 }}><Btn variant="outline">Discover our Living Landscapes Programme</Btn></div>
          </div>
          <div>
            <Lbl style={{ color: ACCENT, marginBottom: 10 }}>Awards & Accreditations</Lbl>
            {m ? <H2m style={{ marginBottom: 16 }}>Industry Recognition</H2m>
               : <H2 style={{ marginBottom: 20 }}>Industry Recognition</H2>}
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2,1fr)', gap: 14 }}>
              {['ALCI National Award','Award 2 [CMS]','Award 3 [CMS]','Award 4 [CMS]'].map((award, i) => (
                <WCard key={i} style={{ textAlign: 'center', padding: 14 }}>
                  <ImgBox height={64} label={`${award} — logo`} style={{ marginBottom: 10 }} />
                  <Body small style={{ fontWeight: 600, color: G6 }}>{award}</Body>
                  <Body small muted>Category · Year</Body>
                </WCard>
              ))}
            </div>
            <div style={{ marginTop: 8 }}><Annot>CMS: award logo, name, category, year</Annot></div>
          </div>
        </div>
      </div>

      {/* Testimonials */}
      <div style={{ padding: `${m ? 40 : 64}px ${p}px` }}>
        <SHead label="Trusted by Procurement and Facilities Leaders" title="What Our Clients Say" center m={m} />
        <div style={{ display: 'grid', gridTemplateColumns: m ? '1fr' : 'repeat(2,1fr)', gap: 22 }}>
          {[1,2,3,4,5,6].slice(0, m ? 2 : 4).map(i => (
            <WCard key={i} style={{ borderLeft: `4px solid ${ACCENT}` }}>
              <Body style={{ fontStyle: 'italic', color: G5, marginBottom: 16 }}>"Testimonial quote from Facilities Manager, Operations Director, or Sustainability Officer — focusing on reliability, safety compliance, and scale. [CMS rich text]"</Body>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                <div style={{ width: 40, height: 40, borderRadius: '50%', background: G2, border: `1px solid ${G3}`, flexShrink: 0 }} />
                <div>
                  <Body small style={{ fontWeight: 600, color: G6 }}>Name, Title [CMS]</Body>
                  <Body small muted>Organisation [CMS]</Body>
                </div>
              </div>
              <div style={{ marginTop: 10 }}><Annot>CMS: quote, name, role, photo, org</Annot></div>
            </WCard>
          ))}
        </div>
        {!m && <div style={{ marginTop: 10 }}><Annot>Note: 6 testimonials total — Jayne to gather quotes from Facilities Managers and Ops Directors</Annot></div>}
      </div>
    </div>
  );
}

// ─── CONTACT ───────────────────────────────────────────────
function ContactPage({ m, onNav }) {
  const p = m ? 20 : 72;
  const inp = { height: 44, background: G1, border: `1px solid ${G3}`, width: '100%' };
  return (
    <div>
      <div style={{ background: G2, padding: `${m ? 44 : 72}px ${p}px`, borderBottom: `1px solid ${G3}` }}>
        <Lbl style={{ color: ACCENT, marginBottom: 10 }}>Partner with Ireland's Premier Landscape Experts</Lbl>
        {m ? <H1m>Contact Us</H1m> : <H1>Contact Us</H1>}
        <Body style={{ marginTop: 12, maxWidth: 580 }}>Ready to elevate your corporate environment, achieve your ESG goals, or secure a reliable maintenance partner? Connect with our leadership team today.</Body>
      </div>

      <div style={{ background: '#fff', padding: `${m ? 40 : 64}px ${p}px` }}>
        <div style={{ display: 'grid', gridTemplateColumns: m ? '1fr' : '1.5fr 1fr', gap: m ? 36 : 72 }}>
          {/* Form */}
          <div>
            {m ? <H2m style={{ marginBottom: 8 }}>Request a Strategic Consultation</H2m>
               : <H2 style={{ marginBottom: 10 }}>Request a Strategic Consultation</H2>}
            <Body muted style={{ marginBottom: 24 }}>Fill out the form below to discuss your site's specific requirements, request our ISO documentation, or arrange a site visit with our corporate assessment team.</Body>
            <div style={{ display: 'grid', gridTemplateColumns: m ? '1fr' : '1fr 1fr', gap: 14, marginBottom: 14 }}>
              {['Name','Company'].map(f => (
                <div key={f}><Lbl style={{ marginBottom: 5 }}>{f}</Lbl><div style={inp} /></div>
              ))}
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: m ? '1fr' : '1fr 1fr', gap: 14, marginBottom: 14 }}>
              {['Corporate Email','Phone'].map(f => (
                <div key={f}><Lbl style={{ marginBottom: 5 }}>{f}</Lbl><div style={inp} /></div>
              ))}
            </div>
            <div style={{ marginBottom: 14 }}>
              <Lbl style={{ marginBottom: 5 }}>Area of Interest</Lbl>
              <div style={{ ...inp, display: 'flex', alignItems: 'center', paddingLeft: 12 }}>
                <Body small muted>Installation / Maintenance / Living Landscapes / General Enquiry ▾</Body>
              </div>
            </div>
            <div style={{ marginBottom: 24 }}>
              <Lbl style={{ marginBottom: 5 }}>Message</Lbl>
              <div style={{ height: 130, background: G1, border: `1px solid ${G3}` }} />
            </div>
            <Btn full>Submit Enquiry</Btn>
            <div style={{ marginTop: 10 }}><Annot>Form: CRM integration + email notification to leadership team</Annot></div>
          </div>

          {/* Contact info */}
          <div>
            {m ? <H2m style={{ marginBottom: 20 }}>Our Details</H2m>
               : <H2 style={{ marginBottom: 24 }}>Our Details</H2>}
            <WCard style={{ marginBottom: 14 }}>
              <Lbl style={{ marginBottom: 7 }}>Address</Lbl>
              <Body>Pavilion Landscapes Ltd<br/>Ballygarvan, Co. Cork<br/>Ireland</Body>
            </WCard>
            <WCard style={{ marginBottom: 14 }}>
              <Lbl style={{ marginBottom: 7 }}>Contact</Lbl>
              <Body>info@pavilionlandscapes.ie<br/>+353 21 XXX XXXX</Body>
            </WCard>
            <WCard style={{ marginBottom: 14 }}>
              <Lbl style={{ marginBottom: 7 }}>Office Hours</Lbl>
              <Body>Mon–Fri: 8:00am – 5:30pm<br/>Sat: 9:00am – 1:00pm</Body>
            </WCard>
            <ImgBox height={m ? 160 : 220} label="Google Maps — Ballygarvan, Co. Cork HQ" />
            <div style={{ marginTop: 6 }}><Annot>Embedded Google Map or static map image</Annot></div>
          </div>
        </div>
      </div>

      {/* Full-width image */}
      <ImgBox height={m ? 180 : 300} label="Full width image of recent project" />
    </div>
  );
}

Object.assign(window, {
  HomePage, ServicesPage, InstallationPage, MaintenancePage,
  LivingLandscapesPage, ProjectsPage, ProjectTemplatePage,
  OurStoryPage, OurImpactPage, ContactPage
});
