// Desktop page mockups — parameterized by theme.
// All pages are 1280px wide × variable height. Same content across all variations.

// Decorative bits — variant-aware
function Decor({ t, kind = 'rule', style }) {
  if (kind === 'rule') return <div style={{ height: 1, background: t.line, ...style }}/>;
  if (kind === 'arch') {
    // small organic arch (Botanical)
    return <svg width="44" height="44" viewBox="0 0 44 44" style={style}>
      <path d="M2 42 C2 14, 42 14, 42 42" stroke={t.primary} strokeWidth="1.5" fill="none"/>
    </svg>;
  }
  if (kind === 'flourish') {
    return <svg width="80" height="14" viewBox="0 0 80 14" style={style}>
      <path d="M0 7 Q 20 0, 40 7 T 80 7" stroke={t.primary} strokeWidth="1" fill="none"/>
    </svg>;
  }
  return null;
}

// Variant-specific number marker style
function NumberMarker({ t, n }) {
  if (t.key === 'modern') {
    return <div style={{
      fontFamily: t.hFont, fontSize: 56, lineHeight: 1, color: t.primary,
      letterSpacing: -2, fontWeight: 400,
    }}>{String(n).padStart(2,'0')}</div>;
  }
  if (t.key === 'botanical') {
    return <div style={{
      width: 36, height: 36, borderRadius:'50%', border: `1px solid ${t.primary}`,
      display:'flex', alignItems:'center', justifyContent:'center',
      fontFamily: t.hFont, fontSize: 16, color: t.primary, fontStyle:'italic',
    }}>{n}</div>;
  }
  return <div style={{
    width: 36, height: 36, borderRadius: t.radiusSm, background: t.primary, color: t.primaryInk,
    display:'flex', alignItems:'center', justifyContent:'center',
    fontFamily: t.hFont, fontSize: 18, fontWeight: 600,
  }}>{n}</div>;
}

// ===== HOME =====
function DesktopHome({ t }) {
  return (
    <div style={{ background: t.bg, color: t.ink, fontFamily: t.bFont, width: '100%' }}>
      <Header t={t} active="Home"/>

      {/* HERO */}
      <Section t={t} pad="64px 48px 80px">
        <div style={{ display:'grid', gridTemplateColumns:'1.05fr 1.15fr', gap: 56, alignItems:'center' }}>
          <div>
            <Eyebrow t={t}>Nationwide · Supply · Prep · Install</Eyebrow>
            <h1 style={{
              fontFamily: t.hFont, fontSize: 88, lineHeight: .98, letterSpacing: -1.5,
              color: t.ink, margin: 0, fontWeight: 500, textWrap:'balance',
              fontStyle: t.key==='botanical'?'italic':'normal',
            }}>Floors that feel<br/>like home.</h1>
            <p style={{ fontSize: 18, lineHeight: 1.55, color: t.body, marginTop: 22, maxWidth: 470 }}>
              Laminate, LVT and carpet — measured, levelled, and fitted by our own teams. Fin handles the prep work most installers skip, so your floor lasts.
            </p>
            <div style={{ display:'flex', gap: 14, marginTop: 28, alignItems:'center' }}>
              <button style={{...btnPrimary(t), padding: '16px 26px', fontSize: 15 }}>
                Call 0808 094 2210
              </button>
              <a style={btnLink(t)}>See our work →</a>
            </div>
            <div style={{ display:'flex', gap: 26, marginTop: 36, flexWrap:'wrap' }}>
              {[
                ['12 yrs','fitting floors'],
                ['4.9★','from 380+ reviews'],
                ['UK-wide','own install teams'],
              ].map(([a,b],i)=>(
                <div key={i} style={{ display:'flex', flexDirection:'column' }}>
                  <span style={{ fontFamily: t.hFont, fontSize: 26, color: t.ink, lineHeight:1 }}>{a}</span>
                  <span style={{ fontSize: 12, color: t.muted, marginTop: 4, letterSpacing:.3 }}>{b}</span>
                </div>
              ))}
            </div>
          </div>
          <div style={{
            borderRadius: t.key==='botanical' ? '180px 180px 12px 12px' : t.radius,
            overflow:'hidden', height: 580, boxShadow: t.shadow, position:'relative',
            border: `1px solid ${t.line}`,
          }}>
            <RoomPlaceholder w={680} h={580} theme={t}
              tone={t.key==='cosy'?'warm':t.key==='modern'?'dusk':'sage'}
              label="LIFESTYLE · FINISHED LIVING ROOM · WARM LIGHT"/>
            <div style={{
              position:'absolute', bottom: 18, left: 18, background: t.bg,
              borderRadius: t.radiusSm, padding: '12px 16px', display:'flex', gap:12, alignItems:'center',
              boxShadow: t.shadow, border:`1px solid ${t.line}`,
            }}>
              <div style={{ width: 34, height: 34, borderRadius: t.radiusSm, background: t.surface2 }}/>
              <div>
                <div style={{ fontFamily: t.hFont, fontSize: 14, color: t.ink }}>Beckett oak · LVT</div>
                <div style={{ fontSize: 11, color: t.muted }}>Hampstead family home · 2026</div>
              </div>
            </div>
          </div>
        </div>
      </Section>

      {/* PRODUCT CATEGORIES */}
      <Section t={t} bg={t.surface} pad="80px 48px">
        <div style={{ display:'flex', alignItems:'flex-end', justifyContent:'space-between', marginBottom: 36, gap: 24 }}>
          <div>
            <Eyebrow t={t}>Three floor types</Eyebrow>
            <SectionTitle t={t}>What we lay.</SectionTitle>
          </div>
          <p style={{ maxWidth: 380, color: t.body, fontSize: 15, lineHeight: 1.5, margin: 0 }}>
            Honest advice on which floor suits your home, your subfloor, and the way you actually live.
          </p>
        </div>
        <div style={{ display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap: 22 }}>
          {[
            { name:'Laminate', hue:'oak',    blurb:'Warm woodgrain looks, hard-wearing, friendly on the budget.', from:'£28 / m²' },
            { name:'LVT / Vinyl', hue:'walnut', blurb:'Waterproof, quiet underfoot, perfect for kitchens and bathrooms.', from:'£42 / m²' },
            { name:'Carpet',   hue:'cream',  blurb:'Wool blends and cosy textures for bedrooms, stairs and snugs.', from:'£24 / m²' },
          ].map(c => (
            <article key={c.name} style={{
              background: t.bg, borderRadius: t.radius, overflow:'hidden',
              border:`1px solid ${t.line}`, boxShadow: t.shadow,
            }}>
              <div style={{ height: 220, position:'relative' }}>
                <FloorPlaceholder w={400} h={220} theme={t} hue={c.hue} label={`${c.name.toUpperCase()} · DETAIL`}/>
              </div>
              <div style={{ padding: '22px 24px 24px' }}>
                <div style={{ display:'flex', justifyContent:'space-between', alignItems:'baseline' }}>
                  <h3 style={{ fontFamily: t.hFont, fontSize: 26, margin: 0, color: t.ink, fontWeight: 500 }}>{c.name}</h3>
                  <span style={{ fontSize: 12, color: t.muted, fontFamily: t.bFont }}>from {c.from}</span>
                </div>
                <p style={{ fontSize: 14, lineHeight: 1.55, color: t.body, margin: '10px 0 16px' }}>{c.blurb}</p>
                <a style={btnLink(t)}>Explore {c.name.toLowerCase()} →</a>
              </div>
            </article>
          ))}
        </div>
      </Section>

      {/* PREP HIGHLIGHT BAND */}
      <Section t={t} bg={t.primary} pad="72px 48px" style={{ color: t.primaryInk }}>
        <div style={{ display:'grid', gridTemplateColumns:'1fr 1.1fr', gap: 56, alignItems:'center' }}>
          <div>
            <div style={{ fontFamily: t.bFont, fontSize: 11, letterSpacing: 2.4, textTransform:'uppercase', color:'rgba(255,255,255,.7)', marginBottom: 14, fontWeight: 600 }}>
              The bit other fitters skip
            </div>
            <h2 style={{ fontFamily: t.hFont, fontSize: 52, lineHeight: 1.05, margin: 0, color: t.primaryInk, fontWeight: 500, letterSpacing:-.4, fontStyle: t.key==='botanical'?'italic':'normal' }}>
              We prep the floor<br/>before we lay a thing.
            </h2>
            <p style={{ fontSize: 16, lineHeight: 1.55, color:'rgba(255,255,255,.85)', marginTop: 22, maxWidth: 460 }}>
              Subfloor levelling, screeding, moisture testing, ripping out the old floor — included in every quote. It's why our installs stay flat, quiet and warranty-safe for years.
            </p>
          </div>
          <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap: 14 }}>
            {[
              ['Subfloor levelling','Self-levelling compound to ±2mm tolerance over the room.'],
              ['Moisture testing','Hygrometer readings on every job — we won’t fit over damp.'],
              ['Old floor removal','Lift, bag and dispose of the old floor in one go.'],
              ['Screeding','Fresh latex / cement screed where the subfloor needs it.'],
            ].map(([k,v]) => (
              <div key={k} style={{
                background:'rgba(255,255,255,.08)', borderRadius: t.radiusSm,
                padding: '18px 18px', border:'1px solid rgba(255,255,255,.14)',
              }}>
                <div style={{ fontFamily: t.hFont, fontSize: 18, color: t.primaryInk, marginBottom: 6, fontWeight: 500 }}>{k}</div>
                <div style={{ fontSize: 13, lineHeight: 1.5, color:'rgba(255,255,255,.78)' }}>{v}</div>
              </div>
            ))}
          </div>
        </div>
      </Section>

      {/* HOW IT WORKS */}
      <Section t={t} pad="88px 48px">
        <div style={{ textAlign:'center', marginBottom: 48 }}>
          <Eyebrow t={t}>How it works</Eyebrow>
          <SectionTitle t={t}>Four steps, no surprises.</SectionTitle>
        </div>
        <div style={{ display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap: 22, position:'relative' }}>
          {[
            ['Free quote',     'Tell us the rooms, send a photo or two. We respond same day.'],
            ['We prep',        'Lift, level, screed, test — whatever your subfloor needs.'],
            ['Measure & supply','Final templating then we order materials direct.'],
            ['We install',     'Our own teams. No subcontractors. Tidy on the way out.'],
          ].map(([title, body], i) => (
            <div key={title} style={{
              background: t.surface, borderRadius: t.radius, padding: '24px 22px 26px',
              border: `1px solid ${t.line}`,
            }}>
              <NumberMarker t={t} n={i+1}/>
              <h4 style={{ fontFamily: t.hFont, fontSize: 22, color: t.ink, margin:'14px 0 8px', fontWeight: 500 }}>{title}</h4>
              <p style={{ fontSize: 13.5, lineHeight: 1.55, color: t.body, margin: 0 }}>{body}</p>
            </div>
          ))}
        </div>
      </Section>

      {/* GALLERY STRIP */}
      <Section t={t} bg={t.surface} pad="80px 48px">
        <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-end', marginBottom: 28 }}>
          <div>
            <Eyebrow t={t}>Recent work</Eyebrow>
            <SectionTitle t={t}>From our floor, to yours.</SectionTitle>
          </div>
          <a style={btnLink(t)}>See full gallery →</a>
        </div>
        <div style={{ display:'grid', gridTemplateColumns:'2fr 1fr 1fr 1.4fr', gridTemplateRows:'200px 200px', gap: 14 }}>
          <div style={{ gridRow:'span 2', borderRadius: t.radius, overflow:'hidden' }}>
            <RoomPlaceholder w={520} h={414} theme={t} tone="warm" label="KITCHEN · LVT · 28m²"/>
          </div>
          {[
            { hue:'oak', tone:'cream', l:'HALLWAY · OAK LAMINATE' },
            { hue:'walnut', tone:'dusk', l:'BEDROOM · WOOL CARPET' },
            { hue:'grey', tone:'stone', l:'OFFICE · LVT PLANK' },
            { hue:'ash', tone:'warm', l:'LIVING · HERRINGBONE' },
          ].map((g,i)=>(
            <div key={i} style={{ borderRadius: t.radius, overflow:'hidden',
              ...(i===3 ? { gridColumn:'span 1' } : {}) }}>
              <RoomPlaceholder w={300} h={200} theme={t} tone={g.tone} label={g.l}/>
            </div>
          ))}
          <div style={{ gridRow:'span 2', borderRadius: t.radius, overflow:'hidden' }}>
            <FloorPlaceholder w={360} h={414} theme={t} hue="walnut" label="WALNUT · DETAIL"/>
          </div>
        </div>
      </Section>

      {/* TESTIMONIALS */}
      <Section t={t} pad="88px 48px">
        <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap: 22 }}>
          {[
            { q:'Fin’s team levelled a subfloor that two other firms had quoted to “just lay over”. A year on, still flat as anything.', a:'Helena P.', l:'Bath · Living room · LVT' },
            { q:'They quoted, ripped the old vinyl, prepped, and laid the laminate in one trip. Friendly, tidy, and on the price.', a:'Marcus & Rose', l:'Manchester · Whole-house laminate' },
            { q:'Recommended to us by our interior designer — and now we recommend them. The carpet on the stairs is faultless.', a:'The Atkins',  l:'Surrey · Stairs & landing carpet' },
          ].map((c,i) => (
            <figure key={i} style={{
              background: t.surface, borderRadius: t.radius, padding: '28px 26px',
              border: `1px solid ${t.line}`, margin: 0,
            }}>
              <Stars t={t} color={t.primary}/>
              <blockquote style={{
                fontFamily: t.hFont, fontSize: 20, lineHeight: 1.35, color: t.ink, margin: '14px 0 22px',
                fontStyle: t.key==='botanical' ? 'italic' : 'normal', fontWeight: 500,
                textWrap:'pretty',
              }}>"{c.q}"</blockquote>
              <figcaption style={{ display:'flex', alignItems:'center', gap: 12, borderTop:`1px solid ${t.line}`, paddingTop: 14 }}>
                <div style={{ width: 38, height: 38, borderRadius:'50%', background: t.surface2 }}/>
                <div>
                  <div style={{ fontFamily: t.bFont, fontSize: 13, fontWeight: 600, color: t.ink }}>{c.a}</div>
                  <div style={{ fontSize: 11.5, color: t.muted }}>{c.l}</div>
                </div>
              </figcaption>
            </figure>
          ))}
        </div>
      </Section>

      {/* TRADE TEASER */}
      <Section t={t} bg={t.surface2} pad="60px 48px">
        <div style={{ display:'grid', gridTemplateColumns:'1.4fr 1fr 0.6fr', gap: 32, alignItems:'center' }}>
          <div>
            <Eyebrow t={t}>Trade · Developer · Commercial</Eyebrow>
            <h3 style={{ fontFamily: t.hFont, fontSize: 36, color: t.ink, margin: '6px 0 8px', fontWeight: 500, letterSpacing:-.3 }}>
              Volume jobs, single point of contact.
            </h3>
            <p style={{ fontSize: 14.5, color: t.body, lineHeight: 1.55, maxWidth: 520, margin:0 }}>
              Show homes, lets, offices, retail. Fin runs every commercial job himself — one estimate, one team, fixed dates.
            </p>
          </div>
          <div style={{ fontSize: 13, color: t.body, lineHeight: 1.6 }}>
            <div>· Bulk supply pricing</div>
            <div>· Out-of-hours installs</div>
            <div>· One invoice, one PM</div>
            <div>· Sample boxes for designers</div>
          </div>
          <a style={{...btnPrimary(t), textAlign:'center', textDecoration:'none', padding: '14px 18px' }}>Trade enquiries →</a>
        </div>
      </Section>

      {/* CONTACT CTA */}
      <Section t={t} bg={t.ink} pad="80px 48px" style={{ color: t.bg, textAlign:'center' }}>
        <Eyebrow t={t} color="rgba(255,255,255,.6)">Talk to Fin</Eyebrow>
        <h2 style={{ fontFamily: t.hFont, fontSize: 64, lineHeight: 1.0, color: t.bg, margin: '4px 0 18px', letterSpacing:-1, fontWeight: 500, fontStyle: t.key==='botanical' ? 'italic' : 'normal' }}>
          0808 094 2210
        </h2>
        <p style={{ fontSize: 16, color:'rgba(255,255,255,.75)', maxWidth: 520, margin: '0 auto 26px' }}>
          Free, no-pressure quote. Mon–Sat, 7am to 7pm. Or send us a couple of photos by WhatsApp.
        </p>
        <div style={{ display:'flex', gap: 12, justifyContent:'center' }}>
          <button style={{...btnPrimary(t), padding:'14px 24px' }}>Call now</button>
          <button style={{...btnGhost(t), color: t.bg, borderColor:'rgba(255,255,255,.3)' }}>WhatsApp Fin</button>
        </div>
      </Section>

      <Footer t={t}/>
    </div>
  );
}

// ===== SERVICES =====
function DesktopServices({ t }) {
  const products = [
    {
      name:'Laminate', hue:'oak',
      blurb:'A hard-wearing, warm woodgrain floor for living rooms, hallways and bedrooms — friendly on the budget and yours to walk on the next day.',
      bullets:['12mm AC5 commercial-grade boards','Quick-Step, Pergo & Egger ranges','Lifetime residential guarantee','Beading and threshold strips matched in'],
      from:'£28 / m² supplied & fitted',
    },
    {
      name:'LVT / Vinyl', hue:'walnut',
      blurb:'Waterproof, quiet underfoot, and forgiving of the messier rooms in the house. Looks like wood or stone, behaves like a kitchen floor should.',
      bullets:['Karndean, Amtico & Moduleo','Glue-down and click-fit options','Pet-friendly · scratch resistant','Recommended over underfloor heating'],
      from:'£42 / m² supplied & fitted',
    },
    {
      name:'Carpet', hue:'cream',
      blurb:'Wool blends, loops and twists, fitted on a proper underlay. Cosy bedrooms, plush stairs, and a finish that hides the seams.',
      bullets:['80/20 wool, polypropylene & nylon','Cormar, Brockway & Penthouse','Hessian or felt-backed underlay','Whip-and-bind for stair runners'],
      from:'£24 / m² supplied & fitted',
    },
  ];
  return (
    <div style={{ background: t.bg, color: t.ink, fontFamily: t.bFont, width: '100%' }}>
      <Header t={t} active="Services"/>

      {/* Hero strip */}
      <Section t={t} pad="64px 48px 56px">
        <div style={{ display:'grid', gridTemplateColumns:'1.1fr 1fr', gap: 56, alignItems:'flex-end' }}>
          <div>
            <Eyebrow t={t}>Services</Eyebrow>
            <h1 style={{ fontFamily: t.hFont, fontSize: 72, lineHeight: 1, letterSpacing: -1, margin: 0, color: t.ink, fontWeight: 500, fontStyle: t.key==='botanical'?'italic':'normal' }}>
              Three floors,<br/>one proper job.
            </h1>
          </div>
          <p style={{ fontSize: 16, lineHeight: 1.6, color: t.body, margin: 0, maxWidth: 460 }}>
            We supply, prep and install three families of floor — laminate, LVT and carpet — across the whole UK. Every quote includes the prep work most fitters charge extra for, or skip entirely.
          </p>
        </div>
      </Section>

      {/* Each product */}
      {products.map((p, i) => (
        <Section key={p.name} t={t} bg={i % 2 === 0 ? t.surface : t.bg} pad="72px 48px">
          <div style={{
            display:'grid',
            gridTemplateColumns: i % 2 === 0 ? '1.1fr 1fr' : '1fr 1.1fr',
            gap: 56, alignItems:'center',
          }}>
            <div style={{ order: i % 2 === 0 ? 1 : 2, borderRadius: t.radius, overflow:'hidden', height: 420, boxShadow: t.shadow, border:`1px solid ${t.line}` }}>
              <FloorPlaceholder w={560} h={420} theme={t} hue={p.hue} label={`${p.name.toUpperCase()} · LIFESTYLE`}/>
            </div>
            <div style={{ order: i % 2 === 0 ? 2 : 1 }}>
              <Eyebrow t={t}>0{i+1} · Floor type</Eyebrow>
              <h2 style={{ fontFamily: t.hFont, fontSize: 52, margin: 0, color: t.ink, letterSpacing:-.5, fontWeight: 500 }}>{p.name}</h2>
              <p style={{ fontSize: 16, lineHeight: 1.6, color: t.body, marginTop: 14, maxWidth: 460 }}>{p.blurb}</p>
              <ul style={{ listStyle:'none', padding: 0, margin: '20px 0 26px', display:'grid', gridTemplateColumns:'1fr 1fr', gap: 8 }}>
                {p.bullets.map(b => (
                  <li key={b} style={{ display:'flex', gap: 10, fontSize: 13.5, color: t.body }}>
                    <span style={{ color: t.primary }}>✦</span>{b}
                  </li>
                ))}
              </ul>
              <div style={{ display:'flex', alignItems:'center', gap: 18 }}>
                <button style={btnPrimary(t)}>Get a quote</button>
                <span style={{ fontSize: 12, color: t.muted }}>{p.from}</span>
              </div>
            </div>
          </div>
        </Section>
      ))}

      {/* FLOOR PREP DEDICATED */}
      <Section t={t} bg={t.primary} pad="88px 48px" style={{ color: t.primaryInk }}>
        <div style={{ display:'grid', gridTemplateColumns:'1fr 1.2fr', gap: 56 }}>
          <div>
            <div style={{ fontFamily: t.bFont, fontSize: 11, letterSpacing: 2.4, textTransform:'uppercase', color:'rgba(255,255,255,.7)', marginBottom: 14, fontWeight: 600 }}>
              Floor preparation
            </div>
            <h2 style={{ fontFamily: t.hFont, fontSize: 56, lineHeight: 1.04, margin: 0, color: t.primaryInk, letterSpacing:-.6, fontWeight: 500, fontStyle: t.key==='botanical'?'italic':'normal' }}>
              The bit that decides whether your floor lasts five years or twenty-five.
            </h2>
            <p style={{ fontSize: 15.5, color:'rgba(255,255,255,.85)', lineHeight: 1.6, marginTop: 22, maxWidth: 460 }}>
              Most installers quote on "supply and fit". We quote on prep, supply and fit — because a beautiful new floor laid over a tired subfloor will telegraph every bump and squeak within a year. Manufacturer warranties usually require it, too.
            </p>
          </div>
          <div style={{ display:'flex', flexDirection:'column', gap: 14 }}>
            {[
              ['Subfloor levelling','Self-levelling latex compound, poured and trowelled to within 2mm over the room. The flatter the base, the longer the floor.'],
              ['Screeding','Fresh cement screed where boards or concrete are too uneven for a levelling compound to solve on its own.'],
              ['Moisture testing','Hygrometer readings on every concrete subfloor. We won’t fit over damp — it voids most warranties and warps the boards.'],
              ['Old floor removal','We lift, bag and dispose of the existing floor and underlay so you don’t have to find a man with a van.'],
            ].map(([k,v],i) => (
              <div key={k} style={{
                display:'grid', gridTemplateColumns: '50px 1fr', gap: 14,
                background:'rgba(255,255,255,.07)', borderRadius: t.radiusSm,
                padding: '18px 20px', border:'1px solid rgba(255,255,255,.14)',
              }}>
                <div style={{ fontFamily: t.hFont, fontSize: 28, color: 'rgba(255,255,255,.55)' }}>{String(i+1).padStart(2,'0')}</div>
                <div>
                  <div style={{ fontFamily: t.hFont, fontSize: 19, color: t.primaryInk, marginBottom: 6, fontWeight: 500 }}>{k}</div>
                  <div style={{ fontSize: 13.5, lineHeight: 1.55, color:'rgba(255,255,255,.78)' }}>{v}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </Section>

      {/* WHAT'S INCLUDED */}
      <Section t={t} pad="88px 48px">
        <div style={{ textAlign:'center', marginBottom: 48 }}>
          <Eyebrow t={t}>What's included</Eyebrow>
          <SectionTitle t={t}>Prep, supply, install — one team.</SectionTitle>
        </div>
        <div style={{ display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap: 22 }}>
          {[
            { t:'Prep', body:'Lift old floor · level · moisture test · screed · skirt protect', items:['Old floor removal','Subfloor levelling','Hygrometer test','Skirt + door trim protection'] },
            { t:'Supply', body:'We order direct from the mills. No retail markup, no surprise stock issues.', items:['Materials in your name','Off-cuts & spares included','Underlay & accessories','Stored & delivered by us'] },
            { t:'Install', body:'Fitted by our own employed teams. We turn up when we say we will.', items:['Templated to the mm','Threshold strips fitted','Site swept & furniture moved','12-month workmanship warranty'] },
          ].map(s => (
            <div key={s.t} style={{
              background: t.surface, borderRadius: t.radius, padding: '28px 26px',
              border: `1px solid ${t.line}`,
            }}>
              <h3 style={{ fontFamily: t.hFont, fontSize: 28, margin: 0, color: t.ink, fontWeight: 500 }}>{s.t}</h3>
              <p style={{ fontSize: 13.5, lineHeight: 1.55, color: t.body, marginTop: 10 }}>{s.body}</p>
              <ul style={{ listStyle:'none', padding: 0, margin: '14px 0 0', display:'flex', flexDirection:'column', gap: 8, borderTop:`1px solid ${t.line}`, paddingTop: 14 }}>
                {s.items.map(i => (
                  <li key={i} style={{ fontSize: 13, color: t.body, display:'flex', gap: 10 }}>
                    <span style={{ color: t.primary }}>✓</span>{i}
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </Section>

      {/* FAQ */}
      <Section t={t} bg={t.surface} pad="88px 48px">
        <div style={{ display:'grid', gridTemplateColumns:'1fr 1.6fr', gap: 56 }}>
          <div>
            <Eyebrow t={t}>FAQ</Eyebrow>
            <SectionTitle t={t}>Honest answers to common questions.</SectionTitle>
            <p style={{ fontSize: 14.5, color: t.body, lineHeight: 1.6, marginTop: 16, maxWidth: 380 }}>
              Can't find what you're looking for? Call Fin on <strong>0808 094 2210</strong> — he picks up.
            </p>
          </div>
          <div style={{ display:'flex', flexDirection:'column' }}>
            {[
              ['What’s a typical lead time?','From quote to fitted floor, two to four weeks for residential rooms. Sooner if the material is in stock.'],
              ['Do you guarantee the work?','12-month workmanship warranty on every install. Manufacturer warranties — usually 10 to lifetime — sit on top of that.'],
              ['Can you fit over my existing floor?','Sometimes — but usually we’ll recommend lifting. Old floors hide damp, dips and squeaks that come back through.'],
              ['Do you do subfloor prep on every job?','Yes. It’s built into our quote, not bolted on. A floor laid badly will fail no matter how good the material is.'],
              ['What subfloors can you work over?','Concrete, screed, chipboard, ply, joists. We’ll specify what each room needs before quoting.'],
              ['Do you cover all of the UK?','Yes — we run regional teams across England, Wales and Scotland. One point of contact wherever you are.'],
            ].map(([q,a], i) => (
              <details key={i} open={i===0} style={{
                borderBottom:`1px solid ${t.line}`, padding: '20px 0', cursor:'pointer',
              }}>
                <summary style={{
                  fontFamily: t.hFont, fontSize: 20, color: t.ink, listStyle:'none',
                  display:'flex', justifyContent:'space-between', alignItems:'center', fontWeight: 500,
                }}>
                  <span>{q}</span>
                  <span style={{ color: t.primary, fontSize: 22 }}>+</span>
                </summary>
                <p style={{ fontSize: 14.5, color: t.body, lineHeight: 1.6, marginTop: 10, marginBottom: 0 }}>{a}</p>
              </details>
            ))}
          </div>
        </div>
      </Section>

      <Footer t={t}/>
    </div>
  );
}

Object.assign(window, { DesktopHome, DesktopServices, Decor, NumberMarker });