// SENSI — page sections
const { useState, useEffect, useRef } = React;

// ====== NAV ======
function TopBar({ page, setPage, locale, setLocale, openConsult, onDark }) {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const nav = [
    { k:'materials', t:'Materials' },
    { k:'brands', t:'Brands' },
    { k:'studio', t:'SENSI Studio' },
    { k:'projects', t:'Projects' },
    { k:'showroom', t:'Showroom' },
    { k:'about', t:'About' },
  ];

  return (
    <React.Fragment>
      <nav className={`topbar ${scrolled ? 'scrolled' : ''} ${onDark && !scrolled ? 'on-dark' : ''}`}>
        <div className="container nav-row">
          <a href="#" onClick={(e) => { e.preventDefault(); setPage('home'); window.scrollTo({top:0, behavior:'smooth'}); }} style={{display:'flex', alignItems:'center', gap:14}}>
            <img src="media/logo-sensi-white.svg" className="logo-img" alt="SENSI" />
            <span style={{fontSize:9, letterSpacing:'0.28em', textTransform:'uppercase', opacity:0.6, paddingLeft:14, borderLeft:'1px solid currentColor'}}>Emotional&nbsp;Surfaces</span>
          </a>
          <div className="nav-links">
            {nav.map(n => (
              <a key={n.k} className={`nav-link ${page === n.k ? 'active' : ''}`} href="#"
                 onClick={(e) => { e.preventDefault(); setPage(n.k); window.scrollTo({top:0}); }}>
                {n.t}
              </a>
            ))}
          </div>
          <div className="row" style={{gap:18}}>
            <Locale locale={locale} setLocale={setLocale} />
            <button className="btn btn-solid" onClick={openConsult}>
              {locale === 'ar' ? 'احجز استشارة' : 'Book Consultation'}
              <span className="arr">→</span>
            </button>
            <button className="menu-btn">Menu</button>
          </div>
        </div>
      </nav>
    </React.Fragment>
  );
}

function Locale({ locale, setLocale }) {
  const locs = ['EN', 'AR', 'RU', 'ZH'];
  return (
    <div className="locale">
      {locs.map(l => (
        <button key={l} className={locale.toUpperCase() === l ? 'on' : ''} onClick={() => setLocale(l.toLowerCase())}>
          <span>{l}</span>
        </button>
      ))}
    </div>
  );
}

// ====== HERO ======
function Hero({ openConsult, locale }) {
  const c = window.SENSI_DATA.COPY[locale] || window.SENSI_DATA.COPY.en;
  return (
    <section className="hero" data-screen-label="01 Hero — Emotional Surfaces">
      <div className="hero-media">
        <img src="media/project-royal-atlantis-cover.webp" alt="" />
      </div>
      <div className="hero-content">
        <div className="hero-stack">
          <div>
            <div className="eyebrow" style={{color:'var(--bronze-glow)', marginBottom:32}}>
              <span style={{display:'inline-flex', alignItems:'center', gap:12}}>
                <span style={{width:32, height:1, background:'var(--bronze)'}} />
                Dubai · Design District · Since 2010
              </span>
            </div>
            <h1 className="hero-title">{c.heroTitle}</h1>
          </div>
          <div className="hero-meta">
            <p className="body-lg">{c.heroLede}</p>
            <div className="row" style={{gap:16, marginTop:8}}>
              <button className="btn btn-solid" onClick={openConsult}>
                {c.bookCta}<span className="arr">→</span>
              </button>
              <button className="btn" style={{color:'var(--ivory)', borderColor:'rgba(247,243,236,0.4)'}} onClick={() => document.getElementById('materials-anchor')?.scrollIntoView({behavior:'smooth', block:'start'})}>
                Explore Materials
              </button>
            </div>
          </div>
        </div>
      </div>
      <div className="hero-marquee">
        <span><span className="dot"></span>40+ European houses</span>
        <span><span className="dot"></span>37 named projects</span>
        <span><span className="dot"></span>5-stage Studio process</span>
        <span style={{marginLeft:'auto'}}>Scroll &nbsp;↓</span>
      </div>
    </section>
  );
}

// ====== ORIGIN ======
function Origin({ locale }) {
  const c = window.SENSI_DATA.COPY[locale] || window.SENSI_DATA.COPY.en;
  return (
    <section className="origin" data-screen-label="02 Origin">
      <div className="container">
        <p className="q">"{c.originQuote}"</p>
        <p className="sig">— Sara Ghorashi, Managing Director · SENSI Trading L.L.C</p>
      </div>
    </section>
  );
}

// ====== DUAL VALUE PROP ======
function DualVP({ setPage }) {
  return (
    <section style={{background:'var(--ivory)'}} data-screen-label="03 Dual value prop">
      <div className="container">
        <div className="dual">
          <div>
            <div className="num">01 — Materials</div>
            <h3>A curated house of<br/>premium surfaces.</h3>
            <p>Tiles, surfaces, mosaics, luxury bathrooms, tops and wood — 40+ European and international houses, specified for landmark Dubai projects since 2010. Selected, not just stocked.</p>
            <div style={{marginTop:36}}>
              <button className="btn-ghost btn" onClick={() => setPage('materials')}>
                Explore the catalogue <span className="arr">→</span>
              </button>
            </div>
          </div>
          <div>
            <div className="num">02 — SENSI Studio</div>
            <h3>Integrated interior<br/>design service.</h3>
            <p>A five-stage process from design consultation through specification — for residential and commercial spaces. Surfaces, light, layout and substance, handled as one engagement.</p>
            <div style={{marginTop:36}}>
              <button className="btn-ghost btn" onClick={() => setPage('studio')}>
                Inside SENSI Studio <span className="arr">→</span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ====== MATERIALS GRID ======
function MaterialsTeaser({ setPage }) {
  const cats = window.SENSI_DATA.MATERIAL_CATEGORIES;
  return (
    <section className="sect" style={{background:'var(--ivory)'}} data-screen-label="04 Materials" id="materials-anchor">
      <div className="container">
        <div className="sh">
          <div>
            <div className="sh-eyebrow eyebrow"><span className="rule-bronze"></span>Materials</div>
            <h2 className="sh-title">Surfaces,<br/>by category.</h2>
          </div>
          <p className="sh-lede">Six categories cover what we curate — Italian porcelain and ceramics, large-format surfaces, luxury bathroom fittings, bespoke tops, hand-laid mosaics and wood flooring. Specified for residential and commercial scale.</p>
        </div>

        <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}`} onClick={() => setPage('materials')}>
                <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>
    </section>
  );
}

// ====== PROJECTS TEASER ======
function ProjectsTeaser({ openProject, setPage }) {
  const p = window.SENSI_DATA.PROJECTS;
  const feat = p[0]; // Museum of the Future
  const side1 = p[1];
  const side2 = p[2];
  const row2 = [p[3], p[6], p[10]];

  return (
    <section className="sect noir" data-screen-label="05 Projects">
      <div className="container">
        <div className="sh">
          <div>
            <div className="sh-eyebrow eyebrow"><span className="rule-bronze"></span>Projects</div>
            <h2 className="sh-title" style={{color:'var(--ivory)'}}>Where the<br/>surfaces live.</h2>
          </div>
          <p className="sh-lede" style={{color:'#bdb6a7'}}>Thirty-seven named projects across hospitality, residential, civic and retail — from the Museum of the Future to Atlantis The Royal. Each case study reads space → materials used → outcome.</p>
        </div>

        <div className="proj-grid">
          <div className="proj-card proj-feat" onClick={() => openProject(feat)}>
            <div className="img"><img src={feat.cover} alt={feat.name} /></div>
            <div className="proj-meta">
              <div>
                <div className="proj-name" style={{color:'var(--ivory)'}}>{feat.name}</div>
                <div className="proj-sub">{feat.location} · {feat.year}</div>
              </div>
              <div className="proj-tag">{feat.sector}</div>
            </div>
          </div>
          <div className="proj-side">
            {[side1, side2].map(pr => (
              <div key={pr.slug} className="proj-card" onClick={() => openProject(pr)}>
                <div className="img"><img src={pr.cover} alt={pr.name} /></div>
                <div className="proj-meta">
                  <div>
                    <div className="proj-name" style={{color:'var(--ivory)', fontSize:22}}>{pr.name}</div>
                    <div className="proj-sub">{pr.location} · {pr.year}</div>
                  </div>
                  <div className="proj-tag">{pr.sector}</div>
                </div>
              </div>
            ))}
          </div>
        </div>

        <div className="proj-grid" style={{marginTop:24}}>
          {row2.map(pr => (
            <div key={pr.slug} className="proj-card proj-third" onClick={() => openProject(pr)}>
              <div className="img"><img src={pr.cover} alt={pr.name} /></div>
              <div className="proj-meta">
                <div>
                  <div className="proj-name" style={{color:'var(--ivory)', fontSize:20}}>{pr.name}</div>
                  <div className="proj-sub">{pr.location} · {pr.year}</div>
                </div>
                <div className="proj-tag">{pr.sector}</div>
              </div>
            </div>
          ))}
        </div>

        <div className="row" style={{justifyContent:'center', marginTop:64}}>
          <button className="btn" style={{color:'var(--ivory)', borderColor:'rgba(247,243,236,0.4)'}} onClick={() => setPage('projects')}>
            All 37 projects <span className="arr">→</span>
          </button>
        </div>
      </div>
    </section>
  );
}

// ====== BRAND STRIP ======
function BrandStrip({ setPage }) {
  const brands = window.SENSI_DATA.BRANDS.filter(b => b.svg).slice(0, 7);
  return (
    <section style={{background:'var(--noir)', padding:'0 0 96px'}} data-screen-label="06 Brand library strip">
      <div className="container" style={{paddingBottom:48}}>
        <div className="sh" style={{marginBottom:32}}>
          <div>
            <div className="sh-eyebrow eyebrow" style={{color:'var(--bronze)'}}>
              <span className="rule-bronze"></span>The Brand Library
            </div>
            <h2 className="sh-title" style={{color:'var(--ivory)'}}>40+ houses we represent.</h2>
          </div>
          <p className="sh-lede" style={{color:'#bdb6a7'}}>European and international design houses — Italian porcelain, Milanese bath culture, Swiss ceramics. A navigable library, by category, with the aesthetics and applications of each.</p>
        </div>
      </div>
      <div className="brand-strip">
        {brands.map(b => (
          <div key={b.name} className="bl" title={b.name} onClick={() => setPage('brands')}>
            <img src={b.svg} alt={b.name} />
          </div>
        ))}
      </div>
      <div className="container" style={{display:'flex', justifyContent:'center', paddingTop:48}}>
        <button className="btn-ghost btn" style={{color:'var(--ivory)'}} onClick={() => setPage('brands')}>
          Open the brand library <span className="arr">→</span>
        </button>
      </div>
    </section>
  );
}

// ====== STUDIO ======
function StudioBlock({ openConsult, setPage }) {
  const steps = window.SENSI_DATA.STUDIO_STEPS;
  return (
    <section className="sect" style={{background:'var(--ivory)'}} data-screen-label="07 Studio">
      <div className="container">
        <div className="sh">
          <div>
            <div className="sh-eyebrow eyebrow"><span className="rule-bronze"></span>SENSI Studio</div>
            <h2 className="sh-title">Design rooted in substance.<br/><em style={{fontStyle:'italic', color:'var(--bronze)'}}>Spaces defined by soul.</em></h2>
          </div>
          <p className="sh-lede">An integrated interior design service for residential and commercial spaces. A five-stage engagement — consultation through specification — built on the conviction that surfaces are the substance of a room, not its finish.</p>
        </div>

        <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 style={{marginTop:64, display:'grid', gridTemplateColumns:'1fr 1fr', gap:32, alignItems:'center'}}>
          <img src="media/studio-design-process.webp" alt="" style={{width:'100%', aspectRatio:'4/3', objectFit:'cover'}} />
          <div>
            <p className="body-lg" style={{margin:'0 0 24px'}}>
              "Timeless beauty, intelligent functionality, storytelling through design. Every detail intentional, every material chosen with purpose."
            </p>
            <div className="row" style={{gap:16, flexWrap:'wrap'}}>
              <button className="btn btn-solid" onClick={openConsult}>Book a Studio Consultation <span className="arr">→</span></button>
              <button className="btn-ghost btn" onClick={() => setPage('studio')}>Studio portfolio <span className="arr">→</span></button>
            </div>
            <div style={{marginTop:32, padding:24, background:'var(--paper)', borderLeft:'2px solid var(--bronze)'}}>
              <div className="eyebrow" style={{color:'var(--bronze)', marginBottom:8}}>SENSI Studio · Direct</div>
              <div style={{fontFamily:'var(--serif)', fontSize:22, lineHeight:1.2}}>+971 52 126 4659</div>
              <div style={{fontSize:13, color:'var(--muted)', marginTop:4}}>studio@sensi.ae · Mon–Fri 09:00–18:00</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ====== SHOWROOM ======
function ShowroomBlock({ openConsult }) {
  return (
    <section style={{background:'var(--ivory)'}} data-screen-label="08 Showroom">
      <div className="showroom">
        <div className="img">
          <img src="media/studio-material-selection.webp" alt="SENSI showroom" />
        </div>
        <div className="info">
          <div>
            <div className="eyebrow" style={{color:'var(--bronze)', marginBottom:16}}>The Showroom</div>
            <h3 className="display" style={{fontSize:'clamp(36px, 4.5vw, 64px)', margin:0, lineHeight:0.95}}>
              Visit the boutique<br/>showroom at d3.
            </h3>
            <p className="body-lg" style={{marginTop:24}}>
              Surfaces in person — the only way to choose them. Specify on the bench with the team, or let SENSI Studio drive the engagement.
            </p>
          </div>
          <dl className="info-rows">
            <div>
              <dt>Address</dt>
              <dd>Building 4, Office 101A<br/>Dubai Design District (d3)</dd>
            </div>
            <div>
              <dt>Hours</dt>
              <dd>Monday – Friday<br/>08:00 – 18:00</dd>
            </div>
            <div>
              <dt>Telephone</dt>
              <dd><a href="tel:+97144474634">+971 4 447 4634</a></dd>
            </div>
            <div>
              <dt>Email</dt>
              <dd style={{fontSize:18}}><a href="mailto:info@sensi.ae">info@sensi.ae</a></dd>
            </div>
          </dl>
          <div className="row" style={{gap:16, flexWrap:'wrap'}}>
            <button className="btn btn-solid" onClick={openConsult}>Book a showroom visit <span className="arr">→</span></button>
            <button className="btn" style={{color:'var(--ivory)', borderColor:'rgba(247,243,236,0.4)'}}>
              Map → 25.18°N, 55.30°E
            </button>
          </div>
        </div>
      </div>
    </section>
  );
}

window.SENSI_PAGES_1 = { TopBar, Hero, Origin, DualVP, MaterialsTeaser, ProjectsTeaser, BrandStrip, StudioBlock, ShowroomBlock };