// Desktop pages — Gallery, About, Contact

// ===== GALLERY =====
function DesktopGallery({ t }) {
  const cats = ['All work', 'Laminate', 'LVT / Vinyl', 'Carpet', 'Floor prep'];
  const rooms = ['Kitchen', 'Living', 'Hallway', 'Bedroom', 'Stairs', 'Commercial'];
  const projects = [
    { h: 360, hue:'oak',    tone:'warm',  title:'Chiswick semi · Whole-house oak laminate',  meta:'128m² · 6 days', tag:'Laminate', room:'Living' },
    { h: 260, hue:'walnut', tone:'dusk',  title:'Sevenoaks kitchen · Karndean herringbone',  meta:'24m² · 3 days · LVT', tag:'LVT', room:'Kitchen' },
    { h: 300, hue:'cream',  tone:'cream', title:'Edinburgh townhouse · Wool stair runner',   meta:'Stairs + landing · 2 days', tag:'Carpet', room:'Stairs' },
    { h: 240, hue:'grey',   tone:'stone', title:'Bristol office · Commercial-grade LVT',     meta:'Before/after · 60m²', tag:'Commercial', room:'Commercial' },
    { h: 320, hue:'ash',    tone:'warm',  title:'Cotswolds farmhouse · Reclaimed-look LVT',  meta:'Subfloor screeded + fitted', tag:'LVT', room:'Living' },
    { h: 280, hue:'walnut', tone:'cool',  title:'Hampstead hallway · Engineered laminate',   meta:'18m² · 2 days', tag:'Laminate', room:'Hallway' },
    { h: 360, hue:'cream',  tone:'cream', title:'Brighton master bedroom · Plush wool',      meta:'Soft cosy underlay · 32m²', tag:'Carpet', room:'Bedroom' },
    { h: 240, hue:'oak',    tone:'warm',  title:'Manchester let-flat · Quick turnaround',    meta:'42m² in 2 days', tag:'Laminate', room:'Living' },
    { h: 300, hue:'walnut', tone:'dusk',  title:'Surrey new-build · LVT throughout',         meta:'Levelled + fitted · 110m²', tag:'LVT', room:'Kitchen' },
  ];

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

      {/* Hero */}
      <Section t={t} pad="56px 48px 32px">
        <Eyebrow t={t}>Gallery</Eyebrow>
        <div style={{ display:'grid', gridTemplateColumns:'1.4fr 1fr', gap: 48, alignItems:'flex-end' }}>
          <h1 style={{ fontFamily: t.hFont, fontSize: 72, lineHeight: 1, letterSpacing: -1, margin: 0, color: t.ink, fontWeight: 500, fontStyle: t.key==='botanical'?'italic':'normal' }}>
            Real homes,<br/>real floors, real prep.
          </h1>
          <p style={{ fontSize: 16, lineHeight: 1.55, color: t.body, margin: 0 }}>
            Every project here was prepped, supplied and installed by our own teams. Hover any tile for the before/after view of the subfloor.
          </p>
        </div>
      </Section>

      {/* Filters */}
      <Section t={t} pad="0 48px 32px">
        <div style={{ display:'flex', gap: 12, alignItems:'center', borderBottom:`1px solid ${t.line}`, paddingBottom: 18 }}>
          <span style={{ fontSize: 11, letterSpacing: 2, color: t.muted, textTransform:'uppercase', marginRight: 8 }}>Filter</span>
          <div style={{ display:'flex', gap: 8, flexWrap:'wrap' }}>
            {cats.map((c, i) => (
              <span key={c} style={{
                fontSize: 13, padding: '8px 14px', borderRadius: 999,
                background: i===0 ? t.primary : 'transparent',
                color: i===0 ? t.primaryInk : t.body,
                border: i===0 ? 'none' : `1px solid ${t.line}`,
                fontFamily: t.bFont, fontWeight: 500, cursor:'pointer',
              }}>{c}</span>
            ))}
          </div>
          <div style={{ width: 1, height: 22, background: t.line, margin: '0 8px' }}/>
          <div style={{ display:'flex', gap: 8, flexWrap:'wrap' }}>
            {rooms.map(r => (
              <span key={r} style={{
                fontSize: 13, padding: '8px 14px', borderRadius: 999,
                background: 'transparent', color: t.body,
                border: `1px solid ${t.line}`, fontFamily: t.bFont, fontWeight: 500, cursor:'pointer',
              }}>{r}</span>
            ))}
          </div>
        </div>
      </Section>

      {/* Masonry grid */}
      <Section t={t} pad="8px 48px 88px">
        <div style={{ columnCount: 3, columnGap: 18 }}>
          {projects.map((p, i) => (
            <article key={i} style={{
              breakInside:'avoid', marginBottom: 18, background: t.surface,
              borderRadius: t.radius, overflow:'hidden', border:`1px solid ${t.line}`,
              boxShadow: t.shadow,
            }}>
              <div style={{ height: p.h, position:'relative' }}>
                <RoomPlaceholder w={400} h={p.h} theme={t} tone={p.tone} label={`${p.tag.toUpperCase()} · ${p.room.toUpperCase()}`}/>
                <div style={{
                  position:'absolute', top: 12, left: 12,
                  background: t.bg, padding: '5px 10px', borderRadius: 999,
                  fontSize: 11, letterSpacing:.3, color: t.ink, fontFamily: t.bFont, fontWeight: 600,
                  border:`1px solid ${t.line}`,
                }}>{p.tag}</div>
                {i % 3 === 0 && (
                  <div style={{
                    position:'absolute', top: 12, right: 12,
                    background: t.primary, color: t.primaryInk, padding: '5px 10px', borderRadius: 999,
                    fontSize: 11, fontFamily: t.bFont, fontWeight: 600, letterSpacing:.2,
                  }}>Before / after</div>
                )}
              </div>
              <div style={{ padding: '16px 18px 18px' }}>
                <h3 style={{ fontFamily: t.hFont, fontSize: 18, margin: 0, color: t.ink, fontWeight: 500, lineHeight: 1.25 }}>{p.title}</h3>
                <div style={{ fontSize: 12, color: t.muted, marginTop: 6 }}>{p.meta}</div>
              </div>
            </article>
          ))}
        </div>
      </Section>

      {/* Project detail teaser */}
      <Section t={t} bg={t.surface} pad="72px 48px">
        <div style={{ display:'grid', gridTemplateColumns:'1fr 1.05fr', gap: 56, alignItems:'center' }}>
          <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap: 12 }}>
            <div style={{ borderRadius: t.radius, overflow:'hidden', height: 320, border:`1px solid ${t.line}`, position:'relative' }}>
              <RoomPlaceholder w={300} h={320} theme={t} tone="stone" label="BEFORE · DAMP CONCRETE"/>
              <span style={{ position:'absolute', top: 12, left: 12, background: t.ink, color: t.bg, padding:'4px 10px', borderRadius: 999, fontSize: 11, fontFamily: t.bFont, fontWeight: 600, letterSpacing:.3 }}>Before</span>
            </div>
            <div style={{ borderRadius: t.radius, overflow:'hidden', height: 320, border:`1px solid ${t.line}`, position:'relative' }}>
              <RoomPlaceholder w={300} h={320} theme={t} tone="warm" label="AFTER · LVT INSTALLED"/>
              <span style={{ position:'absolute', top: 12, left: 12, background: t.primary, color: t.primaryInk, padding:'4px 10px', borderRadius: 999, fontSize: 11, fontFamily: t.bFont, fontWeight: 600, letterSpacing:.3 }}>After</span>
            </div>
          </div>
          <div>
            <Eyebrow t={t}>Project detail · Sevenoaks kitchen</Eyebrow>
            <h2 style={{ fontFamily: t.hFont, fontSize: 44, lineHeight: 1.05, margin: 0, color: t.ink, letterSpacing:-.5, fontWeight: 500 }}>
              A damp concrete slab,<br/>made ready for stone-look LVT.
            </h2>
            <p style={{ fontSize: 15, lineHeight: 1.6, color: t.body, marginTop: 18, maxWidth: 480 }}>
              The original quarry tiles had to come up, the slab tested at 88% RH, and a moisture-blocking screed laid before we could even think about a new floor. Three days of prep, two days of fitting, one happy family.
            </p>
            <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap: 14, marginTop: 22 }}>
              {[['28m²','floor area'],['5 days','total'],['10 yr','warranty']].map(([a,b],i)=>(
                <div key={i} style={{ borderLeft:`2px solid ${t.primary}`, padding: '4px 0 4px 12px' }}>
                  <div style={{ fontFamily: t.hFont, fontSize: 24, color: t.ink, lineHeight:1, fontWeight: 500 }}>{a}</div>
                  <div style={{ fontSize: 11.5, color: t.muted, marginTop: 4, letterSpacing:.3 }}>{b}</div>
                </div>
              ))}
            </div>
            <button style={{...btnPrimary(t), marginTop: 24 }}>Read the case study →</button>
          </div>
        </div>
      </Section>

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

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

      <Section t={t} pad="64px 48px 32px">
        <Eyebrow t={t}>About</Eyebrow>
        <div style={{ display:'grid', gridTemplateColumns:'1.2fr 1fr', gap: 56, alignItems:'flex-end' }}>
          <h1 style={{ fontFamily: t.hFont, fontSize: 80, lineHeight: 1, letterSpacing: -1.4, margin: 0, color: t.ink, fontWeight: 500, fontStyle: t.key==='botanical'?'italic':'normal' }}>
            A trusted local craftsman — who happens to work nationwide.
          </h1>
          <p style={{ fontSize: 16, lineHeight: 1.6, color: t.body, margin: 0 }}>
            Fin's Flooring started twelve years ago with a van, a knee pad and a stubborn belief that prepping a subfloor properly is non-negotiable. We've grown into UK-wide install teams, but the standard hasn't moved.
          </p>
        </div>
      </Section>

      {/* Story image */}
      <Section t={t} pad="20px 48px 0">
        <div style={{ height: 480, borderRadius: t.radius, overflow:'hidden', border:`1px solid ${t.line}` }}>
          <RoomPlaceholder w={1184} h={480} theme={t} tone={t.key==='botanical'?'sage':'dusk'} label="WORKSHOP / WAREHOUSE — FIN ON-SITE"/>
        </div>
      </Section>

      {/* Story */}
      <Section t={t} pad="80px 48px">
        <div style={{ display:'grid', gridTemplateColumns:'1fr 1.6fr', gap: 56 }}>
          <div>
            <Eyebrow t={t}>Our story</Eyebrow>
            <SectionTitle t={t}>How Fin's Flooring started.</SectionTitle>
          </div>
          <div style={{ fontSize: 16, lineHeight: 1.75, color: t.body, columnCount: 2, columnGap: 32 }}>
            <p style={{ margin: '0 0 16px' }}>
              Fin trained as a fitter in 2009 under his uncle, a Yorkshire flooring contractor with very firm opinions about what "fitted properly" looks like. After ten years on residential jobs he kept seeing the same pattern: gorgeous floors laid over bad subfloors, failing within a year or two.
            </p>
            <p style={{ margin: '0 0 16px' }}>
              In 2014 he started Fin's Flooring with the rule that every quote would include the prep work — levelling, screeding, moisture testing, old floor removal — at no extra charge. Customers were sceptical until they saw the bill add up to less than two "supply only" quotes plus a separate prep cost.
            </p>
            <p style={{ margin: '0 0 16px' }}>
              Twelve years later we run regional teams across the whole UK. Same rule, same standard, same Fin who answers the phone when you call.
            </p>
            <p style={{ margin: 0, fontFamily: t.hFont, fontSize: 22, fontStyle: t.key==='modern'?'normal':'italic', color: t.ink }}>
              — Fin, founder
            </p>
          </div>
        </div>
      </Section>

      {/* Values */}
      <Section t={t} bg={t.surface} pad="88px 48px">
        <div style={{ textAlign:'center', marginBottom: 48 }}>
          <Eyebrow t={t}>What we stand for</Eyebrow>
          <SectionTitle t={t}>Four things we won't compromise on.</SectionTitle>
        </div>
        <div style={{ display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap: 18 }}>
          {[
            ['We prep properly',     'Subfloor levelled and tested on every job. Built into the quote, never extra.'],
            ['Our own teams',        'Employed fitters, not subcontractors. The same crew that quotes turns up to fit.'],
            ['No-pressure quotes',   'A clear written quote, no sales calls afterwards. We trust you to choose us.'],
            ['Nationwide, local care','UK-wide reach, regional managers — you get one phone number for the whole job.'],
          ].map(([k,v],i)=>(
            <div key={k} style={{
              background: t.bg, borderRadius: t.radius, padding: '28px 24px 30px',
              border: `1px solid ${t.line}`,
            }}>
              <div style={{ fontFamily: t.hFont, fontSize: 14, color: t.primary, letterSpacing:.3, marginBottom: 6 }}>0{i+1}</div>
              <h3 style={{ fontFamily: t.hFont, fontSize: 22, margin: 0, color: t.ink, fontWeight: 500, lineHeight: 1.2 }}>{k}</h3>
              <p style={{ fontSize: 13.5, lineHeight: 1.55, color: t.body, marginTop: 10 }}>{v}</p>
            </div>
          ))}
        </div>
      </Section>

      {/* Team */}
      <Section t={t} pad="88px 48px">
        <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-end', marginBottom: 36, gap: 24 }}>
          <div>
            <Eyebrow t={t}>The team</Eyebrow>
            <SectionTitle t={t}>Meet our installers.</SectionTitle>
          </div>
          <p style={{ maxWidth: 360, color: t.body, fontSize: 14.5, lineHeight: 1.55, margin: 0 }}>
            Every Fin's Flooring team is led by a long-tenured fitter. No agency labour, no day-rate crews you've never met.
          </p>
        </div>
        <div style={{ display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap: 18 }}>
          {[
            ['Fin Halloran','Founder · everywhere','dusk'],
            ['Sam Croft',   'Lead fitter · South','cream'],
            ['Jess Okafor', 'Lead fitter · Midlands','sage'],
            ['Dave Reilly', 'Lead fitter · North & Scotland','warm'],
          ].map(([n,r,tone]) => (
            <article key={n} style={{ background: t.surface, borderRadius: t.radius, overflow:'hidden', border:`1px solid ${t.line}` }}>
              <div style={{ height: 260 }}>
                <RoomPlaceholder w={290} h={260} theme={t} tone={tone} label="PORTRAIT · ON-SITE"/>
              </div>
              <div style={{ padding: '18px 20px 22px' }}>
                <h3 style={{ fontFamily: t.hFont, fontSize: 20, margin: 0, color: t.ink, fontWeight: 500 }}>{n}</h3>
                <div style={{ fontSize: 13, color: t.muted, marginTop: 4 }}>{r}</div>
              </div>
            </article>
          ))}
        </div>
      </Section>

      {/* Testimonial carousel */}
      <Section t={t} bg={t.ink} pad="88px 48px" style={{ color: t.bg }}>
        <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom: 36 }}>
          <Eyebrow t={t} color="rgba(255,255,255,.55)">In their words</Eyebrow>
          <div style={{ display:'flex', gap: 8 }}>
            <span style={{ width: 36, height: 36, borderRadius: '50%', border:'1px solid rgba(255,255,255,.3)', display:'grid', placeItems:'center', color: t.bg }}>←</span>
            <span style={{ width: 36, height: 36, borderRadius: '50%', border:'1px solid rgba(255,255,255,.3)', display:'grid', placeItems:'center', color: t.bg }}>→</span>
          </div>
        </div>
        <blockquote style={{
          fontFamily: t.hFont, fontSize: 44, lineHeight: 1.2, color: t.bg, margin: 0, maxWidth: 920,
          fontStyle: t.key==='botanical' ? 'italic' : 'normal', textWrap:'pretty', fontWeight: 500,
        }}>
          "We've used Fin's twice now — a kitchen, then the whole upstairs. They actually <em style={{ color: t.primary, fontStyle:'inherit' }}>prepped</em> the floor instead of dropping vinyl over a wonky subfloor like the last lot. Worth every penny."
        </blockquote>
        <div style={{ display:'flex', alignItems:'center', gap: 14, marginTop: 32, fontFamily: t.bFont }}>
          <div style={{ width: 48, height: 48, borderRadius:'50%', background:'rgba(255,255,255,.1)' }}/>
          <div>
            <div style={{ fontSize: 14, fontWeight: 600, color: t.bg }}>Anya Whitfield</div>
            <div style={{ fontSize: 12, color:'rgba(255,255,255,.6)' }}>Hertfordshire · Two projects</div>
          </div>
          <div style={{ marginLeft: 'auto', display:'flex', gap: 6 }}>
            {Array.from({length:5}).map((_,i)=>(
              <span key={i} style={{ width: 6, height: 6, borderRadius:'50%', background: i===0?t.primary:'rgba(255,255,255,.3)' }}/>
            ))}
          </div>
        </div>
      </Section>

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

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

      <Section t={t} pad="64px 48px 40px">
        <Eyebrow t={t}>Contact</Eyebrow>
        <h1 style={{ fontFamily: t.hFont, fontSize: 88, lineHeight: 1, letterSpacing: -1.4, margin: 0, color: t.ink, fontWeight: 500, fontStyle: t.key==='botanical'?'italic':'normal' }}>
          Pick up the phone.<br/>Fin's on the other end.
        </h1>
      </Section>

      {/* Big phone */}
      <Section t={t} pad="12px 48px 56px">
        <div style={{
          background: t.primary, color: t.primaryInk, borderRadius: t.radius,
          padding: '48px 56px', display:'grid', gridTemplateColumns:'1.4fr 1fr', gap: 36, alignItems:'center',
        }}>
          <div>
            <div style={{ fontFamily: t.bFont, fontSize: 12, letterSpacing: 2.4, textTransform:'uppercase', color:'rgba(255,255,255,.7)', marginBottom: 12, fontWeight: 600 }}>
              Mon – Sat · 7am to 7pm
            </div>
            <a style={{
              fontFamily: t.hFont, fontSize: 84, lineHeight: 1, color: t.primaryInk, textDecoration:'none', display:'block',
              letterSpacing: -2, fontWeight: 500,
            }}>0808 094 2210</a>
            <p style={{ fontSize: 15, color:'rgba(255,255,255,.85)', marginTop: 18, maxWidth: 480 }}>
              Free, no-pressure quote in plain English. Or send us a couple of photos by WhatsApp — we'll come back with a ballpark within a day.
            </p>
          </div>
          <div style={{ display:'flex', flexDirection:'column', gap: 10 }}>
            <a style={{
              background: t.primaryInk, color: t.primary, fontFamily: t.bFont, fontWeight: 600,
              padding: '16px 20px', borderRadius: t.radiusSm, textAlign:'center', textDecoration:'none', fontSize: 15,
            }}>WhatsApp Fin · 07700 900 211</a>
            <a style={{
              background:'transparent', color: t.primaryInk, fontFamily: t.bFont, fontWeight: 600,
              padding: '16px 20px', borderRadius: t.radiusSm, textAlign:'center', textDecoration:'none', fontSize: 15,
              border:'1px solid rgba(255,255,255,.4)',
            }}>hello@finsflooring.co.uk</a>
          </div>
        </div>
      </Section>

      {/* Form + Coverage */}
      <Section t={t} pad="0 48px 88px">
        <div style={{ display:'grid', gridTemplateColumns:'1.1fr 1fr', gap: 48 }}>
          <div style={{ background: t.surface, borderRadius: t.radius, padding: '36px 36px', border:`1px solid ${t.line}` }}>
            <Eyebrow t={t}>Request a callback</Eyebrow>
            <h2 style={{ fontFamily: t.hFont, fontSize: 32, margin: '0 0 4px', color: t.ink, fontWeight: 500, letterSpacing:-.3 }}>
              Or we'll call you.
            </h2>
            <p style={{ fontSize: 13.5, color: t.muted, marginBottom: 22 }}>Four fields, no spam, no follow-ups unless you want them.</p>

            <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap: 14 }}>
              {[['Your name','Helena Page'],['Phone','07700 900 123']].map(([l,p]) => (
                <Field key={l} t={t} label={l} placeholder={p}/>
              ))}
              <Field t={t} label="Postcode" placeholder="SE19 2QF"/>
              <Field t={t} label="Best time to call" placeholder="Weekday morning"/>
            </div>
            <div style={{ marginTop: 14 }}>
              <Field t={t} label="What do you need?" placeholder="Living room (~22m²) — old laminate to come up, new LVT down. Subfloor seems uneven."
                multiline/>
            </div>
            <div style={{ display:'flex', alignItems:'center', gap: 14, marginTop: 22 }}>
              <button style={{...btnPrimary(t), padding:'14px 24px' }}>Request callback →</button>
              <span style={{ fontSize: 12, color: t.muted }}>We'll be in touch within 1 working day.</span>
            </div>
          </div>

          <div>
            <Eyebrow t={t}>Where we work</Eyebrow>
            <h2 style={{ fontFamily: t.hFont, fontSize: 32, margin: '0 0 14px', color: t.ink, fontWeight: 500, letterSpacing:-.3 }}>
              The whole of the UK.
            </h2>
            <p style={{ fontSize: 14.5, color: t.body, lineHeight: 1.6 }}>
              We run regional teams across England, Wales and Scotland. Your local fitter is supported by Fin and the head office — one number for the whole job.
            </p>
            <UkMap t={t}/>
            <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap: 10, marginTop: 18 }}>
              {['North & Scotland · Dave','Midlands · Jess','South & London · Sam','South West & Wales · Aaron'].map(r => (
                <div key={r} style={{ fontSize: 13, color: t.body, display:'flex', gap: 10, alignItems:'center' }}>
                  <span style={{ width: 6, height: 6, borderRadius:'50%', background: t.primary }}/>
                  {r}
                </div>
              ))}
            </div>
          </div>
        </div>
      </Section>

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

function Field({ t, label, placeholder, multiline }) {
  return (
    <label style={{ display:'flex', flexDirection:'column', gap: 6 }}>
      <span style={{ fontSize: 11.5, letterSpacing: 1.4, textTransform:'uppercase', color: t.muted, fontFamily: t.bFont, fontWeight: 600 }}>{label}</span>
      <span style={{
        background: t.bg, border: `1px solid ${t.line}`, borderRadius: t.radiusSm,
        padding: multiline ? '12px 14px' : '12px 14px', fontFamily: t.bFont,
        fontSize: 14, color: t.muted, lineHeight: 1.5,
        minHeight: multiline ? 90 : 'auto',
      }}>{placeholder}</span>
    </label>
  );
}

// Stylised UK map blob (not a real outline — abstract coverage illustration)
function UkMap({ t }) {
  const pins = [
    { x: 52, y: 18, name:'Aberdeen' },
    { x: 48, y: 30, name:'Edinburgh' },
    { x: 50, y: 44, name:'Manchester' },
    { x: 38, y: 50, name:'Liverpool' },
    { x: 35, y: 64, name:'Cardiff' },
    { x: 56, y: 60, name:'Birmingham' },
    { x: 62, y: 75, name:'London' },
    { x: 42, y: 78, name:'Bristol' },
    { x: 70, y: 82, name:'Brighton' },
  ];
  return (
    <div style={{
      background: t.surface, border:`1px solid ${t.line}`, borderRadius: t.radius,
      marginTop: 18, padding: 18, aspectRatio: '4 / 5', position:'relative', overflow:'hidden',
    }}>
      <svg viewBox="0 0 100 130" style={{ width:'100%', height:'100%', display:'block' }}>
        {/* abstract UK silhouette */}
        <path d="M48 6 C58 6, 64 14, 60 24 C66 28, 70 36, 64 44 C70 52, 66 62, 58 64 C64 70, 60 80, 52 80
                  C58 88, 54 96, 64 100 C72 104, 68 112, 60 112 C52 112, 44 108, 40 100
                  C30 100, 26 90, 32 80 C26 74, 28 66, 36 62 C30 56, 30 48, 38 44 C32 38, 34 28, 42 24
                  C36 18, 40 10, 48 6Z"
              fill={t.bg} stroke={t.line} strokeWidth=".6"/>
        {pins.map(p => (
          <g key={p.name}>
            <circle cx={p.x} cy={p.y} r="1.6" fill={t.primary}/>
            <circle cx={p.x} cy={p.y} r="4" fill={t.primary} opacity=".18"/>
            <text x={p.x + 3} y={p.y + 1.4}
                  fontFamily="ui-monospace,Menlo,Consolas,monospace" fontSize="2.6" fill={t.body}>
              {p.name}
            </text>
          </g>
        ))}
      </svg>
    </div>
  );
}

Object.assign(window, { DesktopGallery, DesktopAbout, DesktopContact, Field, UkMap });