/* eslint-disable */
/* cityform — Home (v1 layout · v3 brand)
   Density and rhythm from v1; palette, type, and sticker from v3. */

function HomePage({ go, t }) {
  const featured = window.CATALOG.filter(c => c.featured && c.accent).slice(0, 4);
  const newIn = window.CATALOG.filter(c => !c.featured).slice(0, 4);
  const heroCity = window.CATALOG[0]; // Sheffield · Vermilion · Park Hill

  return (
    <div>
      {/* ── HERO ─────────────────────────────────────── */}
      <section style={{ background:'var(--mist)', position:'relative', overflow:'hidden' }}>
        <div className="container" style={{ paddingTop:88, paddingBottom:104, display:'grid', gridTemplateColumns:'1.05fr 1fr', gap:80, alignItems:'center' }}>
          {/* Left: copy */}
          <div>
            <div className="label" style={{ marginBottom:28 }}>
              Made to order · Sheffield · est. 2024
            </div>
            <h1 className="h1" style={{ fontSize:'clamp(64px, 7.5vw, 116px)', margin:0, marginBottom:32 }}>
              A square kilometre<br/>of where you<br/>live, scaled to nine.
            </h1>
            <p className="body" style={{ fontSize:19, lineHeight:1.55, color:'var(--stone)', maxWidth:520, marginBottom:40 }}>
              cityform makes architecturally considered miniature models of British cities. Twelve in the collection. Anywhere else by commission, on the same system.
            </p>
            <div style={{ display:'flex', gap:12, alignItems:'center' }}>
              <button className="btn btn-primary" onClick={() => go('atelier')}>
                Commission a city &nbsp;{Icon.arrow}
              </button>
              <button className="btn btn-ghost" onClick={() => go('atlas')}>
                Browse the collection
              </button>
            </div>
            <div style={{ marginTop:56, display:'flex', gap:48 }}>
              <div>
                <div style={{ fontSize:30, fontWeight:600, letterSpacing:'-0.01em', fontVariantNumeric:'tabular-nums' }}>12</div>
                <div className="label" style={{ marginTop:6 }}>Cities</div>
              </div>
              <div>
                <div style={{ fontSize:30, fontWeight:600, letterSpacing:'-0.01em' }}>9 × 9 cm</div>
                <div className="label" style={{ marginTop:6 }}>Format</div>
              </div>
              <div>
                <div style={{ fontSize:30, fontWeight:600, letterSpacing:'-0.01em', fontVariantNumeric:'tabular-nums' }}>1 : 11000</div>
                <div className="label" style={{ marginTop:6 }}>Scale</div>
              </div>
            </div>
          </div>

          {/* Right: hero product photo with floating callouts */}
          <div style={{ position:'relative' }}>
            <div style={{ aspectRatio:'4 / 5', background:'#0F1216', overflow:'hidden' }}>
              <img src="assets/products/whitby_hero.jpg" alt={heroCity.name}
                style={{
                  width:'100%', height:'100%', objectFit:'cover',
                  filter: 'grayscale(0.6) contrast(1.05) brightness(0.94)',
                }}/>
            </div>
            {/* Top-right callout: city + coords */}
            <div style={{
              position:'absolute', top:-12, right:-16, background:'var(--bone)',
              border:'1px solid var(--ink)', padding:'12px 16px',
              minWidth:200,
            }}>
              <div className="label" style={{ fontSize:9 }}>FEATURED</div>
              <div className="h2" style={{ fontSize:20, fontWeight:600, marginTop:4, letterSpacing:'-0.005em' }}>{heroCity.name}</div>
              <div className="caption" style={{ fontSize:10, marginTop:6 }}>{heroCity.coords.lat.toFixed(4)}° {heroCity.coords.ns} · {Math.abs(heroCity.coords.lng).toFixed(4)}° {heroCity.coords.ew}</div>
            </div>
            {/* Bottom-left callout: dimensions */}
            <div style={{
              position:'absolute', bottom:-22, left:-22, background:'var(--mist)',
              border:'1px solid var(--ink)', padding:'10px 14px',
              display:'flex', alignItems:'center', gap:14,
            }}>
              <span className="label" style={{ fontSize:9 }}>FORMAT</span>
              <span style={{ width:1, height:14, background:'var(--ink)', opacity:0.4 }}/>
              <span style={{ fontSize:12, fontVariantNumeric:'tabular-nums' }}>9.0 × 9.0 × 1.6 cm</span>
              <span style={{ width:1, height:14, background:'var(--ink)', opacity:0.4 }}/>
              <span style={{ fontSize:12, fontWeight:600 }}>£95</span>
            </div>
            {/* Bottom-right: City Mark sticker overlay */}
            <div style={{
              position:'absolute', bottom:32, right:-30,
              filter:'drop-shadow(0 14px 28px rgba(0,0,0,0.25))',
            }}>
              <CitySticker city={heroCity} size={180}/>
            </div>
          </div>
        </div>

        {/* Marquee strip */}
        <div style={{ borderTop:'1px solid var(--line)', borderBottom:'1px solid var(--line)', background:'var(--bone)', overflow:'hidden' }}>
          <div style={{
            display:'flex', gap:48, padding:'14px 32px', whiteSpace:'nowrap',
            color:'var(--ink-soft)', fontSize:11, letterSpacing:'0.22em', fontWeight:500,
          }}>
            {['EA LIDAR · 1 M RESOLUTION', 'OPENSTREETMAP FOOTPRINTS', 'PETG · MIST · BAMBU LAB X1',
              'MADE IN SHEFFIELD', 'CITYFORM.CO · ETSY/CITYFORM', 'FREE UK SHIPPING OVER £75',
              'EA LIDAR · 1 M RESOLUTION', 'OPENSTREETMAP FOOTPRINTS'].map((s, i) => (
              <span key={i}>{s} &nbsp;·</span>
            ))}
          </div>
        </div>
      </section>

      {/* ── PROCESS — 4 steps ────────────────────────── */}
      <section style={{ background:'var(--bone)' }}>
        <div className="container" style={{ paddingTop:96, paddingBottom:96 }}>
          <div style={{ display:'flex', justifyContent:'space-between', alignItems:'baseline', marginBottom:56 }}>
            <div>
              <div className="label">The process</div>
              <h2 className="h1" style={{ fontSize:56, marginTop:14 }}>Four steps, one square.</h2>
            </div>
            <div style={{ maxWidth:380, color:'var(--stone)', fontSize:15, lineHeight:1.55 }}>
              From any postcode in the UK to a finished print on your shelf in about a week.
            </div>
          </div>
          <div style={{ display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:24 }}>
            {[
              { n:'01', t:'Search', d:'Type a postcode, town, or landmark. We snap a 1 km × 1 km bounding box around it.' },
              { n:'02', t:'Adjust', d:'Drag the box, rotate to align with a coastline or river grid. Pick a vertical exaggeration for flat cities.' },
              { n:'03', t:'Generate', d:'We fetch EA LIDAR + OpenStreetMap, build a watertight mesh with measured roof surfaces and water cutouts.' },
              { n:'04', t:'Print & finish', d:'Printed on a Bambu Lab X1 in PETG Mist. Sticker applied to the lid. Shipped in a kraft mailer.' },
            ].map(step => (
              <div key={step.n} style={{ borderTop:'2px solid var(--ink)', paddingTop:20 }}>
                <div style={{ fontSize:11, color:'var(--stone)', letterSpacing:'0.22em', fontWeight:500 }}>{step.n}</div>
                <h3 className="h3" style={{ fontSize:24, marginTop:14, marginBottom:12, fontWeight:600 }}>{step.t}</h3>
                <p className="body" style={{ fontSize:14, color:'var(--stone)', margin:0 }}>{step.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── FEATURED FROM THE COLLECTION ─────────────── */}
      <section style={{ background:'var(--mist)' }}>
        <div className="container" style={{ paddingTop:96, paddingBottom:32 }}>
          <div style={{ display:'flex', justifyContent:'space-between', alignItems:'baseline', marginBottom:36 }}>
            <div>
              <div className="label">From the collection</div>
              <h2 className="h1" style={{ fontSize:56, marginTop:14 }}>Six cities, six signatures.</h2>
            </div>
            <button className="btn-link" onClick={() => go('atlas')}>See all twelve →</button>
          </div>
          <div style={{ display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:24 }}>
            {featured.map(item => (
              <ProductCard key={item.id} item={item} onClick={() => go('product', item.id)}/>
            ))}
          </div>
        </div>
      </section>

      {/* ── COMMISSION (Make Yours) PREVIEW ──────────── */}
      <section style={{ background:'var(--bone)', borderTop:'1px solid var(--line)', marginTop:96 }}>
        <div className="container" style={{ paddingTop:96, paddingBottom:96 }}>
          <div style={{ display:'grid', gridTemplateColumns:'1fr 1.2fr', gap:64, alignItems:'center' }}>
            <div>
              <div className="label">Commission</div>
              <h2 className="h1" style={{ fontSize:64, marginTop:14, marginBottom:24 }}>Your place,<br/>your square kilometre.</h2>
              <p className="body" style={{ fontSize:17, lineHeight:1.55, color:'var(--stone)', maxWidth:480 }}>
                The childhood street. The summit you've climbed twenty times. The hospital where they were born. Anywhere on the map, on the same system as the twelve.
              </p>
              <div className="stack" style={{ marginTop:32, '--gap':'14px' }}>
                {[
                  ['Free preview',   'See your area in plan view before you buy.'],
                  ['Same system',    '9 × 9 cm, 1:11000, PETG Mist, sticker on the lid.'],
                  ['Choose a signature', 'Pick from the six accents to mark your commission.'],
                ].map(([title, d]) => (
                  <div key={title} style={{ display:'flex', gap:14, alignItems:'flex-start' }}>
                    <span style={{ marginTop:4, color:'var(--ink)' }}>{Icon.check}</span>
                    <div>
                      <div style={{ fontWeight:600, fontSize:15 }}>{title}</div>
                      <div className="body" style={{ fontSize:14, color:'var(--stone)' }}>{d}</div>
                    </div>
                  </div>
                ))}
              </div>
              <button className="btn btn-primary" style={{ marginTop:40 }} onClick={() => go('atelier')}>
                Start with a postcode &nbsp;{Icon.arrow}
              </button>
            </div>
            <div style={{ position:'relative', border:'1px solid var(--ink)', height:520 }}>
              <StyledMap seed="sheffield-preview" bbox={{ x:30, y:30, w:38, h:38, r:0 }}/>
              <div style={{ position:'absolute', top:18, left:18, right:18, display:'flex', alignItems:'center', gap:10,
                padding:'12px 16px', background:'var(--bone)', border:'1px solid var(--ink)' }}>
                {Icon.search}
                <span style={{ fontSize:14, fontWeight:500 }}>S1 2HE — Sheffield City Hall</span>
                <span style={{ marginLeft:'auto' }} className="caption">53.3811° N · 1.4701° W</span>
              </div>
              <div style={{ position:'absolute', bottom:18, left:18, right:18, padding:'12px 16px',
                background:'var(--bone)', border:'1px solid var(--ink)',
                display:'flex', alignItems:'center', justifyContent:'space-between' }}>
                <div>
                  <div className="label" style={{ fontSize:9 }}>PREVIEW AREA</div>
                  <div style={{ fontSize:14, fontWeight:600, marginTop:4, letterSpacing:'-0.005em' }}>Sheffield City Centre · 1.00 × 1.00 km</div>
                </div>
                <button className="btn btn-primary" style={{ height:36, padding:'0 14px', fontSize:11 }} onClick={() => go('atelier')}>
                  Open picker &nbsp;{Icon.arrow}
                </button>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ── FROM THE ARCHIVE (new in) ─────────────────── */}
      <section style={{ background:'var(--mist)' }}>
        <div className="container" style={{ paddingTop:96, paddingBottom:96 }}>
          <div style={{ display:'flex', justifyContent:'space-between', alignItems:'baseline', marginBottom:36 }}>
            <div>
              <div className="label">From the studio archive</div>
              <h2 className="h1" style={{ fontSize:56, marginTop:14 }}>Recent commissions.</h2>
            </div>
            <button className="btn-link" onClick={() => go('atlas')}>See the archive →</button>
          </div>
          <div style={{ display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:24 }}>
            {newIn.map(item => (
              <ProductCard key={item.id} item={item} onClick={() => go('product', item.id)}/>
            ))}
          </div>
        </div>
      </section>

      {/* ── PRESS / TESTIMONIALS ──────────────────────── */}
      <section style={{ background:'var(--bone)', borderTop:'1px solid var(--line)' }}>
        <div className="container" style={{ paddingTop:96, paddingBottom:96 }}>
          <div className="label" style={{ textAlign:'center', marginBottom:32 }}>What people say</div>
          <div style={{ display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:48 }}>
            {[
              { q: '"The detail is unreasonable. You can find your own front door."',
                a: 'Iona Galloway · Architect, Glasgow' },
              { q: '"Mine is a square kilometre of Hampstead Heath. It looks like a fossil."',
                a: 'Dev Patel · London' },
              { q: '"Felt like opening an Ordnance Survey map and finding it was 3D."',
                a: 'The Geographer Quarterly · Spring 2026' },
            ].map((p, i) => (
              <div key={i}>
                <p className="h2" style={{ fontSize:22, lineHeight:1.45, fontWeight:500, letterSpacing:'-0.005em' }}>{p.q}</p>
                <div className="label" style={{ marginTop:20, fontSize:10 }}>{p.a}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

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

function Footer({ go }) {
  return (
    <footer style={{ background:'var(--ink)', color:'var(--mist)' }}>
      <div className="container" style={{ paddingTop:72, paddingBottom:32 }}>
        <div style={{ display:'grid', gridTemplateColumns:'2fr 1fr 1fr 1fr', gap:48 }}>
          <div>
            <Wordmark size={36} surface="reverse"/>
            <p style={{ marginTop:18, maxWidth:340, fontSize:13, lineHeight:1.6, color:'rgba(225,229,224,0.7)' }}>
              Architecturally considered miniature models of British cities. Made in Sheffield from open survey data.
            </p>
            <div style={{ marginTop:24, fontSize:11, letterSpacing:'0.22em', fontWeight:500, color:'rgba(225,229,224,0.55)' }}>
              CITYFORM.CO &nbsp;·&nbsp; ETSY/CITYFORM
            </div>
          </div>
          {[
            { h: 'Shop',       items: ['The collection','Now shipping','In development','Stickers & cards','Gift cards'] },
            { h: 'Commission', items: ['Postcode picker','Specification','Lead times','Sample request'] },
            { h: 'Studio',     items: ['Process','Data sources','Press','Contact'] },
          ].map(col => (
            <div key={col.h}>
              <div style={{ fontSize:9, letterSpacing:'0.22em', fontWeight:500, color:'rgba(225,229,224,0.55)', marginBottom:18 }}>{col.h.toUpperCase()}</div>
              <ul style={{ listStyle:'none', padding:0, margin:0 }}>
                {col.items.map(it => (
                  <li key={it} style={{ marginBottom:10, fontSize:13, color:'rgba(225,229,224,0.85)' }}>{it}</li>
                ))}
              </ul>
            </div>
          ))}
        </div>
        <div style={{ marginTop:64, paddingTop:24, borderTop:'1px solid rgba(225,229,224,0.15)',
          display:'flex', justifyContent:'space-between', fontSize:11, color:'rgba(225,229,224,0.55)', letterSpacing:'0.06em' }}>
          <span>© 2026 Cityform Ltd · Sheffield, UK · Co. 13422118</span>
          <span>Contains EA LIDAR (OGL v3) · © OpenStreetMap (ODbL)</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { HomePage, Footer });