// SENSI — inner pages, modals, footer, main app

const { useState: useStateApp, useEffect: useEffectApp, useRef: useRefApp } = React;

// ====== FOOTER ======
function Footer({ setPage, openConsult }) {
  return (
    <footer className="ftr" data-screen-label="09 Footer">
      <div className="container">
        <div className="ftr-grid">
          <div className="brand-block">
            <img src="media/logo-sensi-white.svg" className="logo-foot" alt="SENSI" />
            <p>Emotional Surfaces. A Dubai (d3) curator of premium Italian tiles, surfaces, luxury bathrooms and tops — paired with SENSI Studio for integrated interior design. Established 2010.</p>
            <div style={{marginTop:24, padding:'18px 0', borderTop:'1px solid var(--line-dim)'}}>
              <div style={{fontSize:10.5, letterSpacing:'0.22em', textTransform:'uppercase', color:'var(--bronze)', marginBottom:6}}>200+ projects · brand's own claim</div>
              <div style={{fontSize:13.5}}>15+ years of premium specification across the GCC.</div>
            </div>
          </div>
          <div>
            <h5>Materials</h5>
            <ul>
              <li><a href="#" onClick={(e) => { e.preventDefault(); setPage('materials'); }}>Tiles</a></li>
              <li><a href="#" onClick={(e) => { e.preventDefault(); setPage('materials'); }}>Surfaces</a></li>
              <li><a href="#" onClick={(e) => { e.preventDefault(); setPage('materials'); }}>Bathroom</a></li>
              <li><a href="#" onClick={(e) => { e.preventDefault(); setPage('materials'); }}>Tops</a></li>
              <li><a href="#" onClick={(e) => { e.preventDefault(); setPage('materials'); }}>Mosaics</a></li>
              <li><a href="#" onClick={(e) => { e.preventDefault(); setPage('materials'); }}>Wood</a></li>
            </ul>
          </div>
          <div>
            <h5>Studio</h5>
            <ul>
              <li><a href="#" onClick={(e) => { e.preventDefault(); setPage('studio'); }}>5-stage process</a></li>
              <li><a href="#" onClick={(e) => { e.preventDefault(); setPage('studio'); }}>Residential</a></li>
              <li><a href="#" onClick={(e) => { e.preventDefault(); setPage('studio'); }}>Commercial</a></li>
              <li><a href="#" onClick={openConsult}>Book consultation</a></li>
              <li><a href="mailto:studio@sensi.ae">studio@sensi.ae</a></li>
              <li>+971 52 126 4659</li>
            </ul>
          </div>
          <div>
            <h5>Company</h5>
            <ul>
              <li><a href="#" onClick={(e) => { e.preventDefault(); setPage('about'); }}>About</a></li>
              <li><a href="#" onClick={(e) => { e.preventDefault(); setPage('about'); }}>SENSI Green</a></li>
              <li><a href="#" onClick={(e) => { e.preventDefault(); setPage('projects'); }}>Projects</a></li>
              <li><a href="#" onClick={(e) => { e.preventDefault(); setPage('brands'); }}>Brands</a></li>
              <li><a href="#" onClick={(e) => { e.preventDefault(); setPage('showroom'); }}>Showroom</a></li>
            </ul>
          </div>
          <div>
            <h5>Connect</h5>
            <ul>
              <li><a href="#">Instagram</a></li>
              <li><a href="#">LinkedIn</a></li>
              <li><a href="#">Facebook</a></li>
              <li><a href="#">X / Twitter</a></li>
            </ul>
            <div style={{marginTop:24, fontSize:11.5, letterSpacing:'0.06em', color:'#7d7466', lineHeight:1.6}}>
              Building 4, Office 101A<br/>
              Dubai Design District (d3)<br/>
              Mon–Fri · 08:00–18:00
            </div>
          </div>
        </div>
        <div className="ftr-bottom">
          <div>© 2026 SENSI Trading L.L.C. All rights reserved.</div>
          <div className="row" style={{gap:24}}>
            <a href="#">Privacy</a>
            <a href="#">Terms</a>
            <a href="#">EN · AR · RU · ZH</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

// ====== HOME ======
function HomePage({ setPage, openProject, openConsult, locale }) {
  const { Hero, Origin, DualVP, MaterialsTeaser, ProjectsTeaser, BrandStrip, StudioBlock, ShowroomBlock } = window.SENSI_PAGES_1;
  return (
    <div className="page-enter">
      <Hero openConsult={openConsult} locale={locale} />
      <Origin locale={locale} />
      <DualVP setPage={setPage} />
      <MaterialsTeaser setPage={setPage} />
      <ProjectsTeaser openProject={openProject} setPage={setPage} />
      <BrandStrip setPage={setPage} />
      <StudioBlock openConsult={openConsult} setPage={setPage} />
      <ShowroomBlock openConsult={openConsult} />
    </div>
  );
}

// ====== PAGE HEAD ======
function PageHead({ eyebrow, title, lede }) {
  return (
    <section style={{paddingTop:160, paddingBottom:64, background:'var(--ivory)'}}>
      <div className="container">
        <div className="eyebrow" style={{color:'var(--bronze)', marginBottom:24}}>
          <span style={{display:'inline-flex', alignItems:'center', gap:12}}>
            <span style={{width:32, height:1, background:'var(--bronze)'}} /> {eyebrow}
          </span>
        </div>
        <h1 className="display" style={{fontSize:'clamp(56px, 8vw, 132px)', margin:0, maxWidth:'18ch'}}>{title}</h1>
        {lede && <p className="body-lg" style={{marginTop:32, maxWidth:'58ch', fontSize:19}}>{lede}</p>}
      </div>
    </section>
  );
}

// ====== MATERIALS PAGE ======
function MaterialsPage({ openConsult }) {
  const cats = window.SENSI_DATA.MATERIAL_CATEGORIES;
  return (
    <div className="page-enter" data-screen-label="Materials page">
      <PageHead eyebrow="Materials · 6 categories"
                title={<>Surfaces designed<br/>to be <em style={{color:'var(--bronze)'}}>felt</em>, not just seen.</>}
                lede="Italian tiles, large-format surfaces, bespoke tops, luxury bathroom fittings, hand-laid mosaics and wood — six categories, 40+ houses, specified for the GCC's most demanding projects." />
      <section className="sect" style={{paddingTop:0, background:'var(--ivory)'}}>
        <div className="container">
          <div className="mat-grid">
            {cats.map((c, i) => {
              const sizeClass = c.size === 'tall' ? 'mat-tall' : c.size === 'wide' ? 'mat-wide' : 'mat-med';
              return (
                <a key={c.key} className={`mat-card ${sizeClass}`}>
                  <div className="img"><img src={c.img} alt={c.name} /></div>
                  <span className="num-pin">0{i+1}</span>
                  <div className="lbl">
                    <div>
                      <div className="lbl-name">{c.name}</div>
                      <div className="lbl-meta" style={{marginTop:6, opacity:0.7}}>{c.meta}</div>
                    </div>
                    <span style={{fontSize:18}}>→</span>
                  </div>
                </a>
              );
            })}
          </div>

          <div style={{marginTop:96, display:'grid', gridTemplateColumns:'1fr 1fr', gap:64}}>
            <div>
              <div className="eyebrow" style={{color:'var(--bronze)'}}>By the bench</div>
              <h3 className="display" style={{fontSize:48, lineHeight:1, margin:'16px 0 24px'}}>Specification is not a catalogue.</h3>
              <p className="body-lg">Tile is a sample, a finish, a slip rating, a tolerance, a delivery window, and a maintenance regime. We work with the houses on the spec to make sure the finish you see at the bench is the finish you receive on site. No surprises.</p>
              <div style={{marginTop:32}}>
                <button className="btn btn-solid" onClick={openConsult}>Request samples <span className="arr">→</span></button>
              </div>
            </div>
            <img src="media/studio-material-selection.webp" alt="" style={{width:'100%', aspectRatio:'4/3', objectFit:'cover'}} />
          </div>
        </div>
      </section>
    </div>
  );
}

// ====== BRANDS PAGE ======
function BrandsPage() {
  const [filter, setFilter] = useStateApp('All');
  const brands = window.SENSI_DATA.BRANDS;
  const cats = window.SENSI_DATA.MATERIAL_CATS_FILTER;
  const visible = filter === 'All' ? brands : brands.filter(b => b.category.includes(filter));

  return (
    <div className="page-enter" data-screen-label="Brands page">
      <PageHead eyebrow="The Brand Library · 40+ houses"
                title={<>European design houses,<br/>curated for the region.</>}
                lede="Filter the roster by category. Click any house for its aesthetic, signature collections and applications. Brand logos and imagery used by permission of the respective owners." />

      <section className="sect" style={{paddingTop:32, background:'var(--ivory)'}}>
        <div className="container">
          <div className="chips">
            {cats.map(c => (
              <button key={c} className={`chip ${filter === c ? 'on' : ''}`} onClick={() => setFilter(c)}>{c}</button>
            ))}
          </div>

          <div className="brand-lib">
            {visible.map(b => (
              <div key={b.name} className="brand-tile">
                <span className="bcat">{b.category}</span>
                {b.svg ? <img src={b.svg} alt={b.name} className="blogo" /> : <div className="word-logo">{b.name.toUpperCase()}</div>}
                <span className="bname">{b.note}</span>
              </div>
            ))}
          </div>

          <div style={{marginTop:80, padding:48, background:'var(--paper)', textAlign:'center'}}>
            <div className="eyebrow" style={{color:'var(--bronze)', marginBottom:14}}>Trade enquiries</div>
            <h3 className="display" style={{fontSize:36, margin:0, lineHeight:1.05}}>Designers, architects, fit-out — we work to your spec.</h3>
            <p className="body-lg" style={{marginTop:18, maxWidth:'58ch', marginLeft:'auto', marginRight:'auto'}}>Brand library access, trade pricing, sample dispatch and project-level logistics.</p>
            <div className="row" style={{justifyContent:'center', marginTop:28}}>
              <a href="mailto:info@sensi.ae" className="btn btn-solid">Open a trade account <span className="arr">→</span></a>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

// ====== PROJECTS PAGE ======
function ProjectsPage({ openProject }) {
  const [sector, setSector] = useStateApp('All');
  const projects = window.SENSI_DATA.PROJECTS;
  const sectors = window.SENSI_DATA.PROJECT_SECTORS;
  const visible = sector === 'All' ? projects : projects.filter(p => p.sector === sector);

  return (
    <div className="page-enter" data-screen-label="Projects page">
      <PageHead eyebrow="Projects · 37 named, more under permission"
                title={<>Where the surfaces<br/><em style={{color:'var(--bronze)'}}>live</em>.</>}
                lede="Each case study reads space → materials → outcome. Project names appear here only with SENSI's confirmed role and the client's permission." />

      <section className="sect" style={{paddingTop:32, background:'var(--ivory)'}}>
        <div className="container">
          <div className="chips">
            {sectors.map(s => (
              <button key={s} className={`chip ${sector === s ? 'on' : ''}`} onClick={() => setSector(s)}>{s}</button>
            ))}
          </div>

          <div className="proj-grid">
            {visible.map((p, idx) => {
              // alternate sizing for visual rhythm
              const cls = idx % 5 === 0 ? 'proj-feat' :
                          idx % 5 === 1 ? 'proj-side' :
                          idx % 5 === 2 ? 'proj-half' :
                          idx % 5 === 3 ? 'proj-half' : 'proj-third';
              // for simplicity use proj-half for the grid
              return (
                <div key={p.slug} className="proj-card proj-half" onClick={() => openProject(p)}>
                  <div className="img"><img src={p.cover} alt={p.name} /></div>
                  <div className="proj-meta">
                    <div>
                      <div className="proj-name">{p.name}</div>
                      <div className="proj-sub">{p.location} · {p.year}</div>
                    </div>
                    <div className="proj-tag">{p.sector}</div>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </section>
    </div>
  );
}

// ====== STUDIO PAGE ======
function StudioPage({ openConsult }) {
  const steps = window.SENSI_DATA.STUDIO_STEPS;
  const studio = window.SENSI_DATA.PROJECTS.filter(p => p.sector === 'Residential — Studio');
  return (
    <div className="page-enter" data-screen-label="Studio page">
      <PageHead eyebrow="SENSI Studio · interior design"
                title={<>An evolution of<br/>space &amp; <em style={{color:'var(--bronze)'}}>material</em>.</>}
                lede="A full-service interior design practice for residential and commercial spaces. Concept, layout, visualization, construction drawings and material specification — handled as one engagement, by one team." />

      <section className="sect" style={{paddingTop:32, background:'var(--ivory)'}}>
        <div className="container">
          <div className="steps">
            {steps.map(s => (
              <div key={s.n} className="step">
                <div className="n">{s.n}</div>
                <h4>{s.title}</h4>
                <p>{s.body}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section style={{background:'var(--noir)', padding:'96px 0'}}>
        <div className="container">
          <div className="sh">
            <div>
              <div className="sh-eyebrow eyebrow" style={{color:'var(--bronze)'}}><span className="rule-bronze"></span>Studio portfolio</div>
              <h2 className="sh-title" style={{color:'var(--ivory)'}}>Residences,<br/>recently delivered.</h2>
            </div>
            <p className="sh-lede" style={{color:'#bdb6a7'}}>Studio engagements — full interior architecture, from concept through specification. The portfolio shown is currently residential; the service is offered for residential and commercial.</p>
          </div>

          <div className="proj-grid">
            {studio.map(p => (
              <div key={p.slug} className="proj-card proj-half">
                <div className="img"><img src={p.cover} alt={p.name} /></div>
                <div className="proj-meta">
                  <div>
                    <div className="proj-name" style={{color:'var(--ivory)'}}>{p.name}</div>
                    <div className="proj-sub">{p.location} · {p.year}</div>
                  </div>
                  <div className="proj-tag">Studio</div>
                </div>
              </div>
            ))}
          </div>

          <div style={{marginTop:80, padding:48, background:'var(--noir-soft)', border:'1px solid var(--line-dim)', display:'grid', gridTemplateColumns:'1fr 1fr', gap:48, alignItems:'center'}}>
            <div>
              <div className="eyebrow" style={{color:'var(--bronze)', marginBottom:12}}>Direct line</div>
              <h3 className="display" style={{color:'var(--ivory)', fontSize:42, margin:0}}>Talk to the Studio.</h3>
              <p style={{color:'#bdb6a7', marginTop:18, maxWidth:'46ch'}}>The Studio answers its own line — leadership-led, project-by-project.</p>
            </div>
            <div>
              <div style={{fontFamily:'var(--serif)', fontSize:40, color:'var(--ivory)', lineHeight:1.1}}>+971 52 126 4659</div>
              <div style={{color:'#bdb6a7', marginTop:6}}>studio@sensi.ae · Mon–Fri 09:00–18:00</div>
              <div style={{marginTop:24}}>
                <button className="btn btn-solid" onClick={openConsult}>Book consultation <span className="arr">→</span></button>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

// ====== SHOWROOM PAGE ======
function ShowroomPage({ openConsult }) {
  const { ShowroomBlock } = window.SENSI_PAGES_1;
  return (
    <div className="page-enter" data-screen-label="Showroom page">
      <PageHead eyebrow="The Showroom · d3"
                title={<>Surfaces, in <em style={{color:'var(--bronze)'}}>person</em>.</>}
                lede="The showroom at Dubai Design District. Building 4, Office 101A. Monday to Friday, 08:00–18:00. Book a slot or walk in — the bench is best when there's time." />

      <ShowroomBlock openConsult={openConsult} />

      <section className="sect" style={{background:'var(--ivory)'}}>
        <div className="container">
          <div className="spec-strip" style={{borderTop:'1px solid var(--line)', color:'var(--ink)'}}>
            <div style={{borderRight:'1px solid var(--line)'}}>
              <dt className="eyebrow" style={{color:'var(--bronze)'}}>Established</dt>
              <dd className="display" style={{fontSize:36}}>2010</dd>
            </div>
            <div style={{borderRight:'1px solid var(--line)'}}>
              <dt className="eyebrow" style={{color:'var(--bronze)'}}>Houses represented</dt>
              <dd className="display" style={{fontSize:36}}>40+</dd>
            </div>
            <div style={{borderRight:'1px solid var(--line)'}}>
              <dt className="eyebrow" style={{color:'var(--bronze)'}}>Named projects</dt>
              <dd className="display" style={{fontSize:36}}>37</dd>
            </div>
            <div>
              <dt className="eyebrow" style={{color:'var(--bronze)'}}>Studio process</dt>
              <dd className="display" style={{fontSize:36}}>5 stages</dd>
            </div>
          </div>
        </div>
      </section>

      {/* Map placeholder */}
      <section style={{padding:'0 0 96px', background:'var(--ivory)'}}>
        <div className="container">
          <div style={{aspectRatio:'21/9', background:'var(--stone)', position:'relative', overflow:'hidden', display:'flex', alignItems:'center', justifyContent:'center'}}>
            <div style={{position:'absolute', inset:0, backgroundImage:'repeating-linear-gradient(45deg, rgba(160,123,76,0.06) 0, rgba(160,123,76,0.06) 1px, transparent 1px, transparent 18px), repeating-linear-gradient(-45deg, rgba(21,19,15,0.06) 0, rgba(21,19,15,0.06) 1px, transparent 1px, transparent 18px)'}}/>
            <div style={{position:'relative', textAlign:'center'}}>
              <div className="eyebrow" style={{color:'var(--bronze)', marginBottom:14}}>Map</div>
              <div className="display" style={{fontSize:32, lineHeight:1}}>25.1886938° N · 55.2970005° E</div>
              <div style={{marginTop:8, color:'var(--muted)', fontSize:13}}>Building 4, Office 101A — Dubai Design District</div>
            </div>
            <div style={{position:'absolute', top:'40%', left:'50%', width:14, height:14, borderRadius:'50%', background:'var(--bronze)', boxShadow:'0 0 0 6px rgba(160,123,76,0.2), 0 0 0 14px rgba(160,123,76,0.1)'}}/>
          </div>
        </div>
      </section>
    </div>
  );
}

// ====== ABOUT PAGE ======
function AboutPage() {
  return (
    <div className="page-enter" data-screen-label="About page">
      <PageHead eyebrow="About · Since 2010"
                title={<>A house of senses,<br/>in Dubai's design district.</>}
                lede="SENSI Trading L.L.C — established in 2010 by Sara Ghorashi as a curator of premium European surfaces, evolved into SENSI &amp; SENSI Studio. The name is Italian for the senses: each detail designed to be felt, not just seen." />

      <section className="sect" style={{paddingTop:32, background:'var(--ivory)'}}>
        <div className="container">
          <div className="about-grid">
            <img src="media/about-managing-director.webp" alt="Sara Ghorashi, Managing Director" />
            <div>
              <div className="eyebrow" style={{color:'var(--bronze)'}}>The Managing Director</div>
              <h3 className="display" style={{fontSize:48, lineHeight:1.05, margin:'16px 0 24px'}}>Sara Ghorashi</h3>
              <p className="body-lg">A practice founded on the conviction that surfaces are emotional — that material, finish and tactile quality shape how a space is lived, not just how it looks.</p>
              <p className="body-lg" style={{marginTop:18}}>SENSI's library of European houses, its bench-led approach, and the integrated Studio practice are direct expressions of that conviction — fifteen years on, with portfolio across the GCC's landmark builds.</p>
              <div className="spec-strip" style={{marginTop:32, gridTemplateColumns:'repeat(3, 1fr)', border:'1px solid var(--line)'}}>
                <div style={{padding:'24px 24px', borderRight:'1px solid var(--line)'}}><dt className="eyebrow" style={{color:'var(--bronze)'}}>Founded</dt><dd className="display" style={{fontSize:28}}>2010</dd></div>
                <div style={{padding:'24px 24px', borderRight:'1px solid var(--line)'}}><dt className="eyebrow" style={{color:'var(--bronze)'}}>DDW</dt><dd className="display" style={{fontSize:28}}>2019 · 2021</dd></div>
                <div style={{padding:'24px 24px'}}><dt className="eyebrow" style={{color:'var(--bronze)'}}>Claimed</dt><dd className="display" style={{fontSize:28}}>200+ projects</dd></div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="sect" style={{background:'var(--paper)'}}>
        <div className="container">
          <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:64, alignItems:'center'}}>
            <div>
              <div className="eyebrow" style={{color:'var(--bronze)'}}>SENSI Green</div>
              <h3 className="display" style={{fontSize:56, margin:'16px 0 24px', lineHeight:1}}>Environmentally <em style={{color:'var(--bronze)'}}>conscious</em>, from mining to installation.</h3>
              <p className="body-lg">A material curation theme — tiles, quartz and terrazzo specified to be environmentally responsible from extraction through fabrication, and water-efficient sanitaryware throughout. Specific certifications confirmed per project on request.</p>
              <ul style={{listStyle:'none', padding:0, margin:'32px 0 0', display:'flex', flexDirection:'column', gap:14, fontSize:15, color:'#4a4338'}}>
                <li>· Recomposed quartz from post-industrial stone</li>
                <li>· Low-water-footprint sanitaryware</li>
                <li>· European-fabrication preferred — short freight</li>
                <li>· Long-lifecycle, refinishable finishes</li>
              </ul>
            </div>
            <img src="media/brand-sensi-green.webp" alt="SENSI Green" style={{width:'100%', aspectRatio:'4/5', objectFit:'cover', background:'var(--ivory)'}} />
          </div>
        </div>
      </section>
    </div>
  );
}

// ====== PROJECT MODAL ======
function ProjectModal({ project, onClose }) {
  useEffectApp(() => {
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    if (project) {
      document.body.style.overflow = 'hidden';
      window.addEventListener('keydown', onKey);
    }
    return () => {
      document.body.style.overflow = '';
      window.removeEventListener('keydown', onKey);
    };
  }, [project]);

  return (
    <div className={`modal-back ${project ? 'open' : ''}`} onClick={onClose}>
      {project && (
        <div className="modal" onClick={(e) => e.stopPropagation()}>
          <button className="close" onClick={onClose} aria-label="Close">✕</button>
          <div className="modal-hero">
            <img src={project.cover} alt={project.name} />
          </div>
          <div className="modal-body">
            <div className="eyebrow" style={{color:'var(--bronze)'}}>{project.sector}</div>
            <h2 className="display" style={{fontSize:'clamp(40px, 5vw, 76px)', margin:'12px 0 0', lineHeight:0.95}}>{project.name}</h2>
            <div style={{marginTop:14, color:'var(--muted)', fontSize:14, letterSpacing:'0.1em'}}>{project.location} · {project.year}</div>

            <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:48, marginTop:48}}>
              <div>
                <div className="eyebrow" style={{color:'var(--bronze)', marginBottom:14}}>The Space</div>
                <p className="body-lg" style={{fontSize:16}}>{project.narrative}</p>
              </div>
              <div>
                <div className="eyebrow" style={{color:'var(--bronze)', marginBottom:14}}>The Outcome</div>
                <p className="body-lg" style={{fontSize:16}}>{project.outcome}</p>
              </div>
            </div>

            <dl className="modal-meta">
              <div>
                <dt>Sector</dt>
                <dd>{project.sector}</dd>
              </div>
              <div>
                <dt>Location</dt>
                <dd>{project.location}</dd>
              </div>
              <div>
                <dt>Scope</dt>
                <dd>{project.scope}</dd>
              </div>
              <div>
                <dt>Year</dt>
                <dd>{project.year}</dd>
              </div>
            </dl>

            <div style={{marginTop:48}}>
              <div className="eyebrow" style={{color:'var(--bronze)', marginBottom:14}}>Materials specified</div>
              <div style={{display:'flex', gap:8, flexWrap:'wrap'}}>
                {project.materials.map(m => (
                  <span key={m} style={{padding:'8px 16px', border:'1px solid var(--line)', fontSize:12, letterSpacing:'0.08em', fontFamily:'var(--serif)', fontStyle:'italic'}}>{m}</span>
                ))}
              </div>
            </div>

            {project.gallery.length > 0 && (
              <div className="modal-gallery">
                {project.gallery.map(g => (
                  <img key={g} src={g} alt="" />
                ))}
              </div>
            )}

            <div style={{marginTop:64, padding:36, background:'var(--noir)', color:'var(--ivory)', textAlign:'center'}}>
              <h3 className="display" style={{fontSize:36, margin:0, lineHeight:1.05}}>Start a similar project.</h3>
              <p style={{color:'#bdb6a7', marginTop:14, fontSize:15}}>Book a consultation with SENSI Studio or visit the showroom.</p>
              <div className="row" style={{justifyContent:'center', marginTop:24, gap:16}}>
                <button className="btn btn-solid">Book consultation <span className="arr">→</span></button>
                <button className="btn" style={{color:'var(--ivory)', borderColor:'rgba(247,243,236,0.4)'}}>Visit showroom</button>
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

// ====== CONSULTATION DRAWER ======
function ConsultDrawer({ open, onClose, onSubmit }) {
  const [type, setType] = useStateApp('studio');
  const [name, setName] = useStateApp('');
  const [email, setEmail] = useStateApp('');
  const [phone, setPhone] = useStateApp('');
  const [interest, setInterest] = useStateApp('');
  const [msg, setMsg] = useStateApp('');

  useEffectApp(() => {
    if (open) document.body.style.overflow = 'hidden';
    else document.body.style.overflow = '';
    return () => { document.body.style.overflow = ''; };
  }, [open]);

  const submit = (e) => {
    e.preventDefault();
    onSubmit({ type, name, email, phone, interest, msg });
    setName(''); setEmail(''); setPhone(''); setInterest(''); setMsg('');
  };

  return (
    <React.Fragment>
      <div className={`drawer-back ${open ? 'open' : ''}`} onClick={onClose}></div>
      <aside className={`drawer ${open ? 'open' : ''}`}>
        <button className="close" onClick={onClose}>Close ✕</button>
        <div className="eyebrow" style={{color:'var(--bronze)', marginBottom:12, marginTop:24}}>Begin the conversation</div>
        <h3>Book a consultation.</h3>
        <p style={{color:'var(--muted)', fontSize:14, marginTop:8, marginBottom:32}}>We answer enquiries within 24 hours on business days.</p>

        <form onSubmit={submit}>
          <div className="seg">
            <button type="button" className={type === 'studio' ? 'on' : ''} onClick={() => setType('studio')}>Studio consultation</button>
            <button type="button" className={type === 'showroom' ? 'on' : ''} onClick={() => setType('showroom')}>Showroom visit</button>
          </div>
          <div className="seg" style={{marginTop:-8}}>
            <button type="button" className={type === 'trade' ? 'on' : ''} onClick={() => setType('trade')}>Trade enquiry</button>
            <button type="button" className={type === 'sample' ? 'on' : ''} onClick={() => setType('sample')}>Request samples</button>
          </div>

          <div className="field">
            <label>Name</label>
            <input value={name} onChange={(e) => setName(e.target.value)} required />
          </div>
          <div className="field">
            <label>Email</label>
            <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} required />
          </div>
          <div className="field">
            <label>Phone (with country code)</label>
            <input value={phone} onChange={(e) => setPhone(e.target.value)} />
          </div>
          <div className="field">
            <label>I'm interested in</label>
            <select value={interest} onChange={(e) => setInterest(e.target.value)}>
              <option value="">Select…</option>
              <option>Studio interior design — residential</option>
              <option>Studio interior design — commercial</option>
              <option>Tiles &amp; surfaces specification</option>
              <option>Bathroom &amp; fittings</option>
              <option>Bespoke tops / joinery</option>
              <option>Other</option>
            </select>
          </div>
          <div className="field">
            <label>Tell us about the project</label>
            <textarea rows="4" value={msg} onChange={(e) => setMsg(e.target.value)} />
          </div>

          <button type="submit" className="btn btn-solid" style={{width:'100%', justifyContent:'center', marginTop:16}}>
            Send enquiry <span className="arr">→</span>
          </button>

          <p style={{fontSize:11, color:'var(--muted)', marginTop:24, lineHeight:1.6, letterSpacing:'0.04em'}}>
            By submitting you agree to be contacted by SENSI about your enquiry. We don't share your details. Studio direct line: +971 52 126 4659 · studio@sensi.ae.
          </p>
        </form>
      </aside>
    </React.Fragment>
  );
}

window.SENSI_PAGES_2 = { Footer, HomePage, MaterialsPage, BrandsPage, ProjectsPage, StudioPage, ShowroomPage, AboutPage, ProjectModal, ConsultDrawer };