// Mobile page mockups — 375px wide, parameterized by theme.

function MobileShell({ t, active, children }) {
  return (
    <div style={{ background: t.bg, color: t.ink, fontFamily: t.bFont, width: '100%', minHeight:'100vh', display:'flex', flexDirection:'column' }}>
      <MobileHeader t={t} active={active}/>
      <div style={{ flex: 1 }}>{children}</div>
      <Footer t={t} mobile/>
      <MobileBottomBar t={t}/>
    </div>
  );
}

function MEyebrow({ t, children, color }) {
  return <div style={{ fontSize: 10, letterSpacing: 2, textTransform:'uppercase', color: color||t.primary, fontWeight: 600, marginBottom: 8 }}>{children}</div>;
}
function MTitle({ t, children, size=30, color }) {
  return <h2 style={{ fontFamily: t.hFont, fontSize: size, lineHeight: 1.08, margin: 0, color: color||t.ink, fontWeight: 500, letterSpacing:-.3, textWrap:'pretty', fontStyle: t.key==='botanical'?'italic':'normal' }}>{children}</h2>;
}

// ===== HOME =====
function MobileHome({ t }) {
  return (
    <MobileShell t={t} active="Home">
      {/* Hero */}
      <section style={{ padding: '24px 18px 28px' }}>
        <MEyebrow t={t}>UK · Supply · Prep · Install</MEyebrow>
        <h1 style={{ fontFamily: t.hFont, fontSize: 46, lineHeight: 1, letterSpacing:-1, margin: 0, color: t.ink, fontWeight: 500, fontStyle: t.key==='botanical'?'italic':'normal' }}>
          Floors that feel like home.
        </h1>
        <p style={{ fontSize: 14.5, lineHeight: 1.55, color: t.body, marginTop: 14 }}>
          Laminate, LVT and carpet — supplied, prepped and fitted by our own teams. We do the prep most fitters skip.
        </p>
        <div style={{ marginTop: 16, height: 220, borderRadius: t.radius, overflow:'hidden', border:`1px solid ${t.line}` }}>
          <RoomPlaceholder w={340} h={220} theme={t} tone={t.key==='cosy'?'warm':t.key==='modern'?'dusk':'sage'} label="HERO · FINISHED LIVING ROOM"/>
        </div>
        <button style={{...btnPrimary(t), width:'100%', marginTop: 14, padding:'14px 16px', fontSize:14.5 }}>Call 0808 094 2210</button>
        <a style={{...btnLink(t), display:'inline-block', marginTop: 12 }}>See our work →</a>
      </section>

      {/* Categories */}
      <section style={{ padding: '28px 18px', background: t.surface }}>
        <MEyebrow t={t}>Three floor types</MEyebrow>
        <MTitle t={t}>What we lay.</MTitle>
        <div style={{ marginTop: 18, display:'flex', flexDirection:'column', gap: 12 }}>
          {[
            { name:'Laminate', hue:'oak',    blurb:'Warm woodgrain, hard-wearing, friendly on the budget.' },
            { name:'LVT / Vinyl', hue:'walnut', blurb:'Waterproof, quiet, perfect for kitchens.' },
            { name:'Carpet',   hue:'cream',  blurb:'Wool blends for bedrooms, stairs and snugs.' },
          ].map(c => (
            <article key={c.name} style={{
              display:'grid', gridTemplateColumns:'110px 1fr', gap: 14,
              background: t.bg, borderRadius: t.radius, overflow:'hidden',
              border: `1px solid ${t.line}`,
            }}>
              <div style={{ height: 110 }}>
                <FloorPlaceholder w={110} h={110} theme={t} hue={c.hue}/>
              </div>
              <div style={{ padding: '14px 14px 14px 0' }}>
                <h3 style={{ fontFamily: t.hFont, fontSize: 19, margin: 0, color: t.ink, fontWeight: 500 }}>{c.name}</h3>
                <p style={{ fontSize: 12.5, color: t.body, margin: '4px 0 6px', lineHeight: 1.45 }}>{c.blurb}</p>
                <a style={{...btnLink(t), fontSize: 12 }}>Explore →</a>
              </div>
            </article>
          ))}
        </div>
      </section>

      {/* Prep band */}
      <section style={{ padding: '28px 18px', background: t.primary, color: t.primaryInk }}>
        <div style={{ fontFamily: t.bFont, fontSize: 10, letterSpacing: 2, textTransform:'uppercase', color:'rgba(255,255,255,.7)', marginBottom: 8, fontWeight: 600 }}>
          The bit other fitters skip
        </div>
        <h2 style={{ fontFamily: t.hFont, fontSize: 32, lineHeight: 1.08, margin: 0, color: t.primaryInk, fontWeight: 500, letterSpacing:-.4, fontStyle: t.key==='botanical'?'italic':'normal' }}>
          We prep the floor before we lay a thing.
        </h2>
        <p style={{ fontSize: 13.5, color:'rgba(255,255,255,.85)', marginTop: 12, lineHeight: 1.55 }}>
          Subfloor levelling, screeding, moisture testing, ripping out the old floor — included in every quote.
        </p>
        <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap: 8, marginTop: 16 }}>
          {['Levelling','Moisture test','Old removal','Screeding'].map(k => (
            <div key={k} style={{ background:'rgba(255,255,255,.1)', borderRadius: t.radiusSm, padding: '10px 12px', fontSize: 12.5, color: t.primaryInk, fontFamily: t.bFont, border:'1px solid rgba(255,255,255,.14)' }}>{k}</div>
          ))}
        </div>
      </section>

      {/* How it works */}
      <section style={{ padding: '32px 18px' }}>
        <MEyebrow t={t}>How it works</MEyebrow>
        <MTitle t={t}>Four steps, no surprises.</MTitle>
        <div style={{ marginTop: 18, display:'flex', flexDirection:'column', gap: 10 }}>
          {[
            ['Free quote','Same-day response.'],
            ['We prep','Level, screed, test.'],
            ['Measure & supply','Direct from the mill.'],
            ['We install','Our own teams.'],
          ].map(([k,v],i) => (
            <div key={k} style={{
              display:'grid', gridTemplateColumns:'44px 1fr', gap: 14, alignItems:'center',
              background: t.surface, padding: '14px 14px', borderRadius: t.radiusSm, border:`1px solid ${t.line}`,
            }}>
              <NumberMarker t={t} n={i+1}/>
              <div>
                <div style={{ fontFamily: t.hFont, fontSize: 17, color: t.ink, fontWeight: 500 }}>{k}</div>
                <div style={{ fontSize: 12.5, color: t.body }}>{v}</div>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* Gallery strip */}
      <section style={{ padding: '12px 0 28px' }}>
        <div style={{ padding: '0 18px 14px', display:'flex', justifyContent:'space-between', alignItems:'flex-end' }}>
          <MTitle t={t} size={26}>Recent work.</MTitle>
          <a style={{...btnLink(t), fontSize: 12 }}>All →</a>
        </div>
        <div style={{ display:'flex', overflowX:'auto', gap: 10, padding: '0 18px' }}>
          {[['oak','warm','KITCHEN'],['walnut','dusk','BEDROOM'],['cream','cream','STAIRS'],['grey','stone','HALLWAY']].map(([hue,tone,l],i) => (
            <div key={i} style={{ flex:'0 0 220px', height: 170, borderRadius: t.radius, overflow:'hidden', border:`1px solid ${t.line}` }}>
              <RoomPlaceholder w={220} h={170} theme={t} tone={tone} label={l}/>
            </div>
          ))}
        </div>
      </section>

      {/* Testimonials */}
      <section style={{ padding: '20px 18px 32px', background: t.surface }}>
        <MEyebrow t={t}>Loved by</MEyebrow>
        <div style={{ display:'flex', flexDirection:'column', gap: 12 }}>
          {[
            ['“Fin’s team levelled a subfloor two other firms quoted to lay over. A year on, still flat.”','Helena P. · Bath'],
            ['"Quoted, ripped, prepped and laid in one trip. Friendly, tidy, on the price."','Marcus & Rose · Manchester'],
          ].map(([q,a],i) => (
            <figure key={i} style={{ background: t.bg, borderRadius: t.radius, padding: 18, border: `1px solid ${t.line}`, margin: 0 }}>
              <Stars t={t} color={t.primary}/>
              <blockquote style={{ fontFamily: t.hFont, fontSize: 16, lineHeight: 1.4, color: t.ink, margin: '8px 0 14px', fontStyle: t.key==='botanical'?'italic':'normal', fontWeight: 500 }}>{q}</blockquote>
              <figcaption style={{ fontSize: 12, color: t.muted, fontWeight: 600 }}>{a}</figcaption>
            </figure>
          ))}
        </div>
      </section>

      {/* Trade */}
      <section style={{ padding: '24px 18px', background: t.surface2 }}>
        <MEyebrow t={t}>Trade · Developer · Commercial</MEyebrow>
        <h3 style={{ fontFamily: t.hFont, fontSize: 22, margin: 0, color: t.ink, fontWeight: 500, letterSpacing:-.2 }}>Volume jobs, single point of contact.</h3>
        <p style={{ fontSize: 13, color: t.body, marginTop: 10 }}>Bulk supply, out-of-hours installs, one invoice. Run by Fin.</p>
        <a style={{...btnLink(t), display:'inline-block', marginTop: 10, fontSize: 12.5 }}>Trade enquiries →</a>
      </section>

      {/* Contact CTA */}
      <section style={{ padding: '32px 18px', background: t.ink, color: t.bg, textAlign:'center' }}>
        <MEyebrow t={t} color="rgba(255,255,255,.6)">Talk to Fin</MEyebrow>
        <div style={{ fontFamily: t.hFont, fontSize: 36, color: t.bg, letterSpacing:-.6, lineHeight: 1, fontStyle: t.key==='botanical'?'italic':'normal' }}>0808 094 2210</div>
        <p style={{ fontSize: 13, color:'rgba(255,255,255,.7)', margin:'12px 0 18px' }}>Mon–Sat, 7am–7pm.</p>
        <button style={{...btnPrimary(t), width:'100%' }}>Call now</button>
      </section>
    </MobileShell>
  );
}

// ===== SERVICES =====
function MobileServices({ t }) {
  const products = [
    { name:'Laminate', hue:'oak',    blurb:'Warm woodgrain looks. AC5 commercial-grade boards from Quick-Step, Pergo & Egger.', from:'£28 / m²' },
    { name:'LVT / Vinyl', hue:'walnut', blurb:'Waterproof and quiet. Karndean, Amtico & Moduleo. Pet- and underfloor-heating safe.', from:'£42 / m²' },
    { name:'Carpet',   hue:'cream',  blurb:'Wool blends and twists on a proper underlay. Cormar, Brockway, Penthouse.', from:'£24 / m²' },
  ];
  return (
    <MobileShell t={t} active="Services">
      <section style={{ padding:'24px 18px 20px' }}>
        <MEyebrow t={t}>Services</MEyebrow>
        <h1 style={{ fontFamily: t.hFont, fontSize: 42, lineHeight: 1, letterSpacing:-1, margin:0, color: t.ink, fontWeight: 500, fontStyle: t.key==='botanical'?'italic':'normal' }}>
          Three floors,<br/>one proper job.
        </h1>
        <p style={{ fontSize: 14, color: t.body, lineHeight: 1.55, marginTop: 12 }}>
          We supply, prep and install across the UK. Every quote includes the prep work most fitters charge extra for.
        </p>
      </section>

      {products.map((p, i) => (
        <section key={p.name} style={{ padding:'24px 18px', background: i%2===0 ? t.surface : t.bg }}>
          <div style={{ height: 180, borderRadius: t.radius, overflow:'hidden', border:`1px solid ${t.line}`, marginBottom: 16 }}>
            <FloorPlaceholder w={340} h={180} theme={t} hue={p.hue} label={p.name.toUpperCase()}/>
          </div>
          <MEyebrow t={t}>0{i+1} · Floor type</MEyebrow>
          <h2 style={{ fontFamily: t.hFont, fontSize: 32, margin: 0, color: t.ink, fontWeight: 500, letterSpacing:-.3 }}>{p.name}</h2>
          <p style={{ fontSize: 14, color: t.body, lineHeight: 1.55, marginTop: 10 }}>{p.blurb}</p>
          <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginTop: 14 }}>
            <button style={btnPrimary(t)}>Get a quote</button>
            <span style={{ fontSize: 11.5, color: t.muted }}>from {p.from}</span>
          </div>
        </section>
      ))}

      {/* Floor prep */}
      <section style={{ padding:'28px 18px', background: t.primary, color: t.primaryInk }}>
        <div style={{ fontSize: 10, letterSpacing: 2, textTransform:'uppercase', color:'rgba(255,255,255,.7)', marginBottom: 8, fontWeight: 600 }}>Floor preparation</div>
        <h2 style={{ fontFamily: t.hFont, fontSize: 30, lineHeight: 1.08, margin: 0, color: t.primaryInk, fontWeight: 500, letterSpacing:-.3, fontStyle: t.key==='botanical'?'italic':'normal' }}>
          The bit that decides whether your floor lasts 5 years or 25.
        </h2>
        <div style={{ display:'flex', flexDirection:'column', gap: 8, marginTop: 16 }}>
          {[
            ['Subfloor levelling','Latex compound, trowelled to ±2mm.'],
            ['Screeding','Cement screed where the subfloor needs it.'],
            ['Moisture testing','Hygrometer on every concrete slab.'],
            ['Old floor removal','Lifted, bagged, gone.'],
          ].map(([k,v],i)=>(
            <div key={k} style={{ display:'grid', gridTemplateColumns:'40px 1fr', gap: 10, background:'rgba(255,255,255,.08)', padding: '12px 14px', borderRadius: t.radiusSm, border:'1px solid rgba(255,255,255,.14)' }}>
              <div style={{ fontFamily: t.hFont, fontSize: 22, color:'rgba(255,255,255,.55)' }}>{String(i+1).padStart(2,'0')}</div>
              <div>
                <div style={{ fontFamily: t.hFont, fontSize: 15, color: t.primaryInk, fontWeight: 500 }}>{k}</div>
                <div style={{ fontSize: 12, color:'rgba(255,255,255,.78)' }}>{v}</div>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* What's included */}
      <section style={{ padding:'28px 18px' }}>
        <MEyebrow t={t}>What's included</MEyebrow>
        <MTitle t={t}>Prep, supply, install — one team.</MTitle>
        <div style={{ marginTop: 16, display:'flex', flexDirection:'column', gap: 10 }}>
          {[['Prep','Lift · level · test · screed'],['Supply','Direct from the mill, in your name'],['Install','Our employed teams · 12-mo warranty']].map(([k,v]) => (
            <div key={k} style={{ background: t.surface, borderRadius: t.radius, padding: '16px 16px', border:`1px solid ${t.line}` }}>
              <div style={{ fontFamily: t.hFont, fontSize: 20, color: t.ink, fontWeight: 500 }}>{k}</div>
              <div style={{ fontSize: 13, color: t.body, marginTop: 6 }}>{v}</div>
            </div>
          ))}
        </div>
      </section>

      {/* FAQ */}
      <section style={{ padding:'8px 18px 28px' }}>
        <MEyebrow t={t}>FAQ</MEyebrow>
        <MTitle t={t}>Honest answers.</MTitle>
        <div style={{ marginTop: 14 }}>
          {[
            ['Typical lead time?','2–4 weeks from quote to fit.'],
            ['Do you guarantee the work?','12-month workmanship + manufacturer warranty.'],
            ['Fit over existing floor?','Sometimes. Usually we lift — old floors hide problems.'],
            ['Do you cover all of the UK?','Yes — regional teams across the country.'],
          ].map(([q,a], i) => (
            <details key={i} open={i===0} style={{ borderBottom:`1px solid ${t.line}`, padding:'14px 0' }}>
              <summary style={{ fontFamily: t.hFont, fontSize: 16, color: t.ink, listStyle:'none', display:'flex', justifyContent:'space-between', fontWeight: 500 }}>
                <span>{q}</span><span style={{ color: t.primary }}>+</span>
              </summary>
              <p style={{ fontSize: 13, color: t.body, lineHeight:1.55, marginTop: 8, marginBottom: 0 }}>{a}</p>
            </details>
          ))}
        </div>
      </section>
    </MobileShell>
  );
}

// ===== GALLERY =====
function MobileGallery({ t }) {
  return (
    <MobileShell t={t} active="Gallery">
      <section style={{ padding:'24px 18px 16px' }}>
        <MEyebrow t={t}>Gallery</MEyebrow>
        <h1 style={{ fontFamily: t.hFont, fontSize: 42, lineHeight: 1, letterSpacing:-1, margin:0, color: t.ink, fontWeight: 500, fontStyle: t.key==='botanical'?'italic':'normal' }}>
          Real homes,<br/>real prep.
        </h1>
        <p style={{ fontSize: 14, color: t.body, lineHeight: 1.55, marginTop: 12 }}>
          Filter by floor type or room. Tap any tile for before/after of the subfloor.
        </p>
      </section>

      <section style={{ padding:'0 18px 16px' }}>
        <div style={{ display:'flex', gap: 6, overflowX:'auto', paddingBottom: 6 }}>
          {['All work','Laminate','LVT','Carpet','Prep'].map((c,i) => (
            <span key={c} style={{
              fontSize: 12, padding:'8px 14px', borderRadius: 999, whiteSpace:'nowrap',
              background: i===0 ? t.primary : 'transparent',
              color: i===0 ? t.primaryInk : t.body,
              border: i===0 ? 'none' : `1px solid ${t.line}`,
              fontWeight: 500, fontFamily: t.bFont,
            }}>{c}</span>
          ))}
        </div>
      </section>

      <section style={{ padding:'4px 18px 24px' }}>
        <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap: 10 }}>
          {[
            { h: 210, hue:'oak',    tone:'warm',  t1:'Chiswick semi', t2:'Oak laminate · 128m²' },
            { h: 150, hue:'walnut', tone:'dusk',  t1:'Sevenoaks',     t2:'Herringbone LVT' },
            { h: 160, hue:'cream',  tone:'cream', t1:'Edinburgh',     t2:'Stair runner' },
            { h: 200, hue:'grey',   tone:'stone', t1:'Bristol office',t2:'Commercial LVT' },
            { h: 180, hue:'ash',    tone:'warm',  t1:'Cotswolds',     t2:'Reclaimed-look LVT' },
            { h: 160, hue:'walnut', tone:'cool',  t1:'Hampstead',     t2:'Hallway laminate' },
          ].map((p,i)=>(
            <article key={i} style={{ background: t.surface, borderRadius: t.radius, overflow:'hidden', border:`1px solid ${t.line}` }}>
              <div style={{ height: p.h, position:'relative' }}>
                <RoomPlaceholder w={170} h={p.h} theme={t} tone={p.tone} label=""/>
                {i % 3 === 0 && (
                  <div style={{ position:'absolute', top: 8, left: 8, background: t.primary, color: t.primaryInk, padding:'3px 8px', borderRadius: 999, fontSize: 10, fontWeight: 600 }}>Before / after</div>
                )}
              </div>
              <div style={{ padding:'10px 12px 12px' }}>
                <div style={{ fontFamily: t.hFont, fontSize: 14, color: t.ink, fontWeight: 500, lineHeight: 1.2 }}>{p.t1}</div>
                <div style={{ fontSize: 11, color: t.muted, marginTop: 2 }}>{p.t2}</div>
              </div>
            </article>
          ))}
        </div>
      </section>

      <section style={{ padding:'24px 18px', background: t.surface }}>
        <MEyebrow t={t}>Project detail</MEyebrow>
        <MTitle t={t} size={24}>Sevenoaks kitchen — damp slab to LVT.</MTitle>
        <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap: 8, marginTop: 14 }}>
          <div style={{ height: 130, borderRadius: t.radiusSm, overflow:'hidden', position:'relative' }}>
            <RoomPlaceholder w={160} h={130} theme={t} tone="stone"/>
            <span style={{ position:'absolute', top: 8, left: 8, background: t.ink, color: t.bg, padding:'2px 8px', borderRadius: 999, fontSize: 10, fontWeight: 600 }}>Before</span>
          </div>
          <div style={{ height: 130, borderRadius: t.radiusSm, overflow:'hidden', position:'relative' }}>
            <RoomPlaceholder w={160} h={130} theme={t} tone="warm"/>
            <span style={{ position:'absolute', top: 8, left: 8, background: t.primary, color: t.primaryInk, padding:'2px 8px', borderRadius: 999, fontSize: 10, fontWeight: 600 }}>After</span>
          </div>
        </div>
        <p style={{ fontSize: 13, color: t.body, lineHeight: 1.55, marginTop: 12 }}>
          Tiles up, slab tested at 88% RH, moisture-blocking screed laid before fitting stone-look LVT. Five days end-to-end.
        </p>
      </section>
    </MobileShell>
  );
}

// ===== ABOUT =====
function MobileAbout({ t }) {
  return (
    <MobileShell t={t} active="About">
      <section style={{ padding:'24px 18px 16px' }}>
        <MEyebrow t={t}>About</MEyebrow>
        <h1 style={{ fontFamily: t.hFont, fontSize: 40, lineHeight: 1, letterSpacing:-.8, margin: 0, color: t.ink, fontWeight: 500, fontStyle: t.key==='botanical'?'italic':'normal' }}>
          A local craftsman, working nationwide.
        </h1>
        <p style={{ fontSize: 14, color: t.body, lineHeight: 1.55, marginTop: 12 }}>
          Fin's Flooring started twelve years ago with a van, a knee pad and a stubborn belief about prep.
        </p>
      </section>

      <section style={{ padding:'0 18px 24px' }}>
        <div style={{ height: 220, borderRadius: t.radius, overflow:'hidden', border:`1px solid ${t.line}` }}>
          <RoomPlaceholder w={340} h={220} theme={t} tone={t.key==='botanical'?'sage':'dusk'} label="FIN ON-SITE"/>
        </div>
      </section>

      <section style={{ padding:'8px 18px 28px' }}>
        <MEyebrow t={t}>Our story</MEyebrow>
        <p style={{ fontSize: 14.5, color: t.body, lineHeight: 1.7 }}>
          Fin trained as a fitter in 2009 under his uncle, a Yorkshire contractor with firm opinions about doing it properly. After ten years on residential jobs he kept seeing the same pattern: gorgeous floors over bad subfloors, failing in a year.
        </p>
        <p style={{ fontSize: 14.5, color: t.body, lineHeight: 1.7, marginTop: 12 }}>
          In 2014 he started Fin's Flooring with one rule: prep is included on every quote. Twelve years later we run UK-wide teams. Same rule, same Fin who answers the phone.
        </p>
      </section>

      <section style={{ padding:'28px 18px', background: t.surface }}>
        <MEyebrow t={t}>What we stand for</MEyebrow>
        <MTitle t={t}>Four things we won't compromise on.</MTitle>
        <div style={{ marginTop: 16, display:'flex', flexDirection:'column', gap: 10 }}>
          {[
            ['We prep properly','Built into the quote, never extra.'],
            ['Our own teams','Employed fitters — same crew that quotes fits.'],
            ['No-pressure quotes','A clear written quote, no sales calls.'],
            ['Local care, nationwide','Regional managers, one phone number.'],
          ].map(([k,v],i)=>(
            <div key={k} style={{ background: t.bg, borderRadius: t.radius, padding:'14px 16px', border:`1px solid ${t.line}` }}>
              <div style={{ fontFamily: t.hFont, fontSize: 12, color: t.primary }}>0{i+1}</div>
              <div style={{ fontFamily: t.hFont, fontSize: 18, color: t.ink, fontWeight: 500, marginTop: 2 }}>{k}</div>
              <div style={{ fontSize: 12.5, color: t.body, marginTop: 4 }}>{v}</div>
            </div>
          ))}
        </div>
      </section>

      <section style={{ padding:'28px 18px' }}>
        <MEyebrow t={t}>The team</MEyebrow>
        <MTitle t={t}>Meet our installers.</MTitle>
        <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap: 10, marginTop: 16 }}>
          {[
            ['Fin Halloran','Founder','dusk'],
            ['Sam Croft','Lead · South','cream'],
            ['Jess Okafor','Lead · Midlands','sage'],
            ['Dave Reilly','Lead · North','warm'],
          ].map(([n,r,tone]) => (
            <div key={n} style={{ background: t.surface, borderRadius: t.radius, overflow:'hidden', border:`1px solid ${t.line}` }}>
              <div style={{ height: 140 }}>
                <RoomPlaceholder w={170} h={140} theme={t} tone={tone}/>
              </div>
              <div style={{ padding:'10px 12px 14px' }}>
                <div style={{ fontFamily: t.hFont, fontSize: 15, color: t.ink, fontWeight: 500 }}>{n}</div>
                <div style={{ fontSize: 11, color: t.muted, marginTop: 2 }}>{r}</div>
              </div>
            </div>
          ))}
        </div>
      </section>

      <section style={{ padding:'28px 18px', background: t.ink, color: t.bg }}>
        <MEyebrow t={t} color="rgba(255,255,255,.55)">In their words</MEyebrow>
        <blockquote style={{ fontFamily: t.hFont, fontSize: 22, lineHeight: 1.3, color: t.bg, margin: 0, fontWeight: 500, fontStyle: t.key==='botanical'?'italic':'normal' }}>
          "We've used Fin's twice. They <em style={{ color: t.primary, fontStyle:'inherit' }}>prepped</em> the floor instead of dropping vinyl over a wonky subfloor. Worth every penny."
        </blockquote>
        <div style={{ fontSize: 12, color:'rgba(255,255,255,.6)', marginTop: 14 }}>
          Anya Whitfield · Hertfordshire
        </div>
      </section>
    </MobileShell>
  );
}

// ===== CONTACT =====
function MobileContact({ t }) {
  return (
    <MobileShell t={t} active="Contact">
      <section style={{ padding:'24px 18px 12px' }}>
        <MEyebrow t={t}>Contact</MEyebrow>
        <h1 style={{ fontFamily: t.hFont, fontSize: 44, lineHeight: 1, letterSpacing:-1, margin: 0, color: t.ink, fontWeight: 500, fontStyle: t.key==='botanical'?'italic':'normal' }}>
          Pick up the phone. Fin's on the other end.
        </h1>
      </section>

      <section style={{ padding:'12px 18px 24px' }}>
        <div style={{ background: t.primary, color: t.primaryInk, borderRadius: t.radius, padding: '24px 22px' }}>
          <div style={{ fontSize: 10, letterSpacing: 2, textTransform:'uppercase', color:'rgba(255,255,255,.7)', fontWeight: 600, marginBottom: 8 }}>Mon – Sat · 7am to 7pm</div>
          <div style={{ fontFamily: t.hFont, fontSize: 40, lineHeight: 1, color: t.primaryInk, letterSpacing:-1.2, fontWeight: 500, fontStyle: t.key==='botanical'?'italic':'normal' }}>0808 094 2210</div>
          <p style={{ fontSize: 13, color:'rgba(255,255,255,.85)', marginTop: 14, lineHeight: 1.55 }}>
            Free, no-pressure quote. Or send photos by WhatsApp — we'll come back with a ballpark within a day.
          </p>
          <div style={{ display:'flex', flexDirection:'column', gap: 8, marginTop: 16 }}>
            <a style={{ background: t.primaryInk, color: t.primary, fontFamily: t.bFont, fontWeight: 600, padding:'12px 16px', borderRadius: t.radiusSm, textAlign:'center', fontSize: 13.5 }}>WhatsApp · 07700 900 211</a>
            <a style={{ color: t.primaryInk, fontFamily: t.bFont, fontWeight: 600, padding:'12px 16px', borderRadius: t.radiusSm, textAlign:'center', fontSize: 13.5, border:'1px solid rgba(255,255,255,.4)' }}>hello@finsflooring.co.uk</a>
          </div>
        </div>
      </section>

      <section style={{ padding:'8px 18px 28px' }}>
        <div style={{ background: t.surface, borderRadius: t.radius, padding:'22px 20px', border:`1px solid ${t.line}` }}>
          <MEyebrow t={t}>Request a callback</MEyebrow>
          <h2 style={{ fontFamily: t.hFont, fontSize: 24, margin: 0, color: t.ink, fontWeight: 500, letterSpacing:-.2 }}>Or we'll call you.</h2>
          <p style={{ fontSize: 12.5, color: t.muted, marginTop: 4, marginBottom: 16 }}>Four fields, no spam.</p>
          <div style={{ display:'flex', flexDirection:'column', gap: 12 }}>
            <Field t={t} label="Your name" placeholder="Helena Page"/>
            <Field t={t} label="Phone" placeholder="07700 900 123"/>
            <Field t={t} label="Postcode" placeholder="SE19 2QF"/>
            <Field t={t} label="What do you need?" placeholder="Living room ~22m², old laminate to come up, new LVT down." multiline/>
          </div>
          <button style={{...btnPrimary(t), width:'100%', marginTop: 16 }}>Request callback →</button>
        </div>
      </section>

      <section style={{ padding:'8px 18px 32px' }}>
        <MEyebrow t={t}>Where we work</MEyebrow>
        <MTitle t={t} size={26}>The whole of the UK.</MTitle>
        <p style={{ fontSize: 13.5, color: t.body, lineHeight: 1.55, marginTop: 10 }}>
          Regional teams across England, Wales and Scotland. One phone number for the whole job.
        </p>
        <UkMap t={t}/>
      </section>
    </MobileShell>
  );
}

Object.assign(window, { MobileHome, MobileServices, MobileGallery, MobileAbout, MobileContact });