/* === ROAR pages === */

const { useState: useState_p, useMemo: useMemo_p, useEffect: useEffect_p } = React;

/* =========================
   HOME
   ========================= */
function HomePage({ setRoute, openEnquiry }) {
  const featured = ['ajman-rulers-court', 'ora-nursery', 'dmcc-hq-dubai', 'mezza-house', 'sjp-sarah-jessica-parker', 'al-barari-villa']
    .map(id => PROJECTS.find(p => p.id === id)).filter(Boolean);
  const hero = PROJECTS.find(p => p.id === 'ajman-rulers-court');

  // Sector tile counts
  const sectorCounts = useMemo_p(() => Object.fromEntries(
    SECTORS.map(s => [s.id, PROJECTS.filter(p => p.sector === s.id).length])
  ), []);

  return (
    <main>
      {/* ============ HERO ============ */}
      <section className="hero">
        <img className="hero-img" src={hero.img} alt="" />
        <div className="hero-shade" />
        <div className="hero-content">
          <div className="eyebrow" style={{ color: 'rgba(244,240,232,0.8)' }}>
            <span className="dot" style={{ background: 'var(--roar)' }}></span>
            Roar · Interior Design &amp; Architecture · Dubai · est. 2013
          </div>
          <h1 className="hero-display">
            Fifty&nbsp;percent <span style={{ color: 'var(--roar)' }}>wild.</span><br/>
            Fifty&nbsp;percent <span style={{ color: 'var(--roar)' }}>tame.</span>
          </h1>
        </div>
        <div className="hero-bottom">
          <p className="hero-quote">
            We are a Dubai studio of architects, designers and one resident psychologist —
            making rooms for governments, hospitality groups, schools, restaurants and the people
            who live in them.
          </p>
          <div className="hero-meta">
            Photographed →<br/>
            <span style={{ color: 'var(--paper)' }}>Ajman Ruler's Court</span><br/>
            Government, UAE
            <span className="confirm" style={{ marginLeft: 0, marginTop: 6, display: 'inline-block', color: 'rgba(244,240,232,0.55)', borderColor: 'rgba(244,240,232,0.2)' }}>
              Photo credit · client to confirm
            </span>
          </div>
          <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
            <button className="btn btn-roar" onClick={openEnquiry}>Start a project <span className="arr">→</span></button>
            <button className="btn btn-ghost" style={{ borderColor: 'var(--paper)', color: 'var(--paper)' }} onClick={() => setRoute({ page: 'projects' })}>
              See the work
            </button>
          </div>
        </div>
      </section>

      {/* ============ SECTOR STRIP ============ */}
      <div className="sector-strip">
        {SECTORS.map((s, i) => (
          <a key={s.id} className="sector-cell"
             onClick={() => setRoute({ page: 'projects', sector: s.id })}>
            <span className="sector-num">0{i + 1}</span>
            <span className="sector-name">{s.name}</span>
            <span className="sector-count">{sectorCounts[s.id]} projects ↗</span>
          </a>
        ))}
      </div>

      {/* ============ MANIFESTO BAND ============ */}
      <section className="section">
        <div className="container" style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 5fr) minmax(0, 7fr)', gap: 64, alignItems: 'start' }}>
          <div>
            <div className="eyebrow"><span className="dot"></span>The studio</div>
            <h2 className="h1" style={{ marginTop: 18 }}>
              The work is the brief.<br/>
              <span style={{ color: 'var(--muted)' }}>Everything else is</span><br/>
              <span className="serif" style={{ color: 'var(--roar)' }}>noise.</span>
            </h2>
          </div>
          <div style={{ paddingTop: 12 }}>
            <p className="lede">
              Roar is an award-winning interior design and architecture studio in Dubai,
              founded in 2013 by architect Pallavi Dean.
              We work across seven sectors — commercial, F&amp;B, hospitality, education, residential,
              retail and product — for clients ranging from federal governments to ten-table restaurants.
            </p>
            <p className="lede" style={{ marginTop: 18 }}>
              The "fifty&nbsp;/&nbsp;fifty" rule is literal: every project runs alongside a wellbeing
              psychologist who joins us on the brief. Half evidence, half instinct — the bit
              that makes a building <span className="serif" style={{ color: 'var(--roar)' }}>feel&nbsp;like&nbsp;something.</span>
            </p>
            <div style={{ display: 'flex', gap: 28, marginTop: 36, flexWrap: 'wrap' }}>
              <Stat n="350+" l="Projects delivered" caveat />
              <Stat n="~35" l="Designers in the Pack" caveat />
              <Stat n="7" l="Sectors of work" />
              <Stat n="2013" l="Founded in Dubai" />
            </div>
            <p className="mono" style={{ fontSize: 10, color: 'var(--muted)', letterSpacing: '0.12em', marginTop: 14 }}>
              * project / headcount figures from interviews — client to confirm at build
            </p>
          </div>
        </div>
      </section>

      {/* ============ FEATURED CASE STUDIES ============ */}
      <section className="section" style={{ background: 'var(--paper-2)', paddingTop: 120 }}>
        <SectionHeader
          eyebrow="Selected work"
          title={<>The portfolio<br/><span className="serif" style={{ color: 'var(--roar)' }}>is the pitch.</span></>}
          link="All 30+ projects"
          onLinkClick={() => setRoute({ page: 'projects' })}
        />

        {/* Big alternating feature blocks */}
        <div className="container" style={{ display: 'grid', gap: 96 }}>
          {featured.slice(0, 3).map((p, i) => (
            <div key={p.id} className={'feat ' + (i % 2 ? 'feat-alt' : '')}>
              <div className="feat-img" onClick={() => setRoute({ page: 'project', id: p.id })} style={{ cursor: 'pointer' }}>
                <img src={p.img} alt={p.name} />
              </div>
              <div className="feat-info">
                <div className="eyebrow" style={{ marginBottom: 12 }}>
                  <span className="dot"></span>
                  {SECTORS.find(s => s.id === p.sector)?.name} · {p.location}
                </div>
                <h3 className="h2">{p.name}</h3>
                <p className="lede" style={{ marginTop: 18, fontSize: 17 }}>{p.headline}</p>
                <a className="btn-link" style={{ marginTop: 22, display: 'inline-flex' }}
                   onClick={() => setRoute({ page: 'project', id: p.id })}>
                  Read the case study <span className="arr">→</span>
                </a>
              </div>
            </div>
          ))}
        </div>

        {/* Grid of more */}
        <div className="container" style={{ marginTop: 96, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 32 }}>
          {featured.slice(3).map(p => (
            <ProjectCard key={p.id} p={p} onClick={() => setRoute({ page: 'project', id: p.id })} />
          ))}
        </div>
      </section>

      {/* ============ AWARDS + PRESS ============ */}
      <section className="section band-dark">
        <SectionHeader
          eyebrow="Awards · Press · Recognition"
          title={<>Quietly,<br/><span className="serif" style={{ color: 'var(--roar)' }}>loudly</span> recognised.</>}
          dark
        />
        <div className="container" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80 }}>
          <div>
            {AWARDS.map((a, i) => (
              <div key={i} className="award-row" style={{ borderColor: 'rgba(244,240,232,0.15)' }}>
                <span className="award-year" style={{ color: 'var(--roar)' }}>{a.year}</span>
                <div>
                  <div className="award-name" style={{ color: 'var(--paper)' }}>{a.name}</div>
                  <div className="award-issuer" style={{ color: 'rgba(244,240,232,0.55)', marginTop: 4 }}>
                    {a.issuer} · attributed to {a.who}
                  </div>
                </div>
                <span className="mono" style={{ fontSize: 10, color: 'rgba(244,240,232,0.4)', letterSpacing: '0.14em' }}>
                  CONFIRMED ✓
                </span>
              </div>
            ))}
            <p className="mono" style={{ fontSize: 10, color: 'rgba(244,240,232,0.45)', marginTop: 18, letterSpacing: '0.1em' }}>
              ALL AWARDS ATTRIBUTED TO PALLAVI DEAN — CONFIRM EXACT NAMES/YEARS WITH CLIENT BEFORE LAUNCH.
            </p>
          </div>
          <div>
            <div className="eyebrow" style={{ color: 'rgba(244,240,232,0.55)' }}>
              <span className="dot"></span>Press features
            </div>
            <div style={{ marginTop: 22 }}>
              {PRESS.map((p, i) => (
                <div key={i} className="award-row" style={{ borderColor: 'rgba(244,240,232,0.15)', gridTemplateColumns: '1fr auto' }}>
                  <div>
                    <div className="award-name" style={{ color: 'var(--paper)' }}>{p.name}</div>
                    <div className="award-issuer" style={{ color: 'rgba(244,240,232,0.55)', marginTop: 4, fontStyle: p.style === 'i' ? 'italic' : 'normal' }}>
                      {p.detail}
                    </div>
                  </div>
                  <span className="mono" style={{ fontSize: 10, color: 'rgba(244,240,232,0.4)', letterSpacing: '0.14em' }}>→</span>
                </div>
              ))}
            </div>
            <div className="eyebrow" style={{ color: 'rgba(244,240,232,0.55)', marginTop: 48 }}>
              <span className="dot"></span>Recent talks
            </div>
            <div style={{ marginTop: 22, display: 'grid', gap: 12 }}>
              {SPEAKING.map((s, i) => (
                <div key={i} style={{ display: 'flex', justifyContent: 'space-between', borderBottom: '1px solid rgba(244,240,232,0.1)', paddingBottom: 10, fontSize: 14 }}>
                  <span className="mono" style={{ color: 'rgba(244,240,232,0.55)', fontSize: 11, letterSpacing: '0.12em' }}>{s.year}</span>
                  <span style={{ color: 'var(--paper)' }}>{s.event}</span>
                  <span style={{ color: 'rgba(244,240,232,0.55)' }}>{s.city}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* ============ FOUNDER TEASER ============ */}
      <section className="section">
        <div className="container" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'center' }}>
          <div>
            <div className="eyebrow"><span className="dot"></span>The Pack</div>
            <h2 className="h1" style={{ marginTop: 16 }}>
              Led by<br/>
              <span className="serif" style={{ color: 'var(--roar)' }}>Pallavi Dean.</span>
            </h2>
            <p className="lede" style={{ marginTop: 24 }}>
              Founder &amp; Creative Director. Architect by training; design-juror,
              Clerkenwell Design Week and Dezeen Awards speaker by reputation.
              Architectural Digest Middle East named her Designer of the Year.
            </p>
            <p className="lede" style={{ marginTop: 18 }}>
              Behind her: a studio of ~35 designers ("the Pack"), a resident wellbeing
              psychologist, and a quiet, careful insistence that the work outlasts the trend.
            </p>
            <a className="btn-link" style={{ marginTop: 28, display: 'inline-flex' }} onClick={() => setRoute({ page: 'studio' })}>
              Meet the studio <span className="arr">→</span>
            </a>
          </div>
          <div style={{ position: 'relative', aspectRatio: '4/5', overflow: 'hidden', background: 'var(--stone)' }}>
            {/* Founder portrait placeholder — client to supply */}
            <PortraitPlaceholder label="Pallavi Dean portrait\n— client to supply" />
          </div>
        </div>
      </section>

      {/* ============ CTA BAND ============ */}
      <section className="section band-roar" style={{ padding: '100px 0' }}>
        <div className="container" style={{ textAlign: 'center' }}>
          <div className="eyebrow" style={{ color: 'rgba(244,240,232,0.85)', justifyContent: 'center' }}>
            <span className="dot" style={{ background: 'var(--paper)' }}></span>Have a brief?
          </div>
          <h2 className="display" style={{ marginTop: 24, color: 'var(--paper)' }}>
            Let's <span className="serif" style={{ fontStyle: 'italic' }}>roar.</span>
          </h2>
          <p className="lede" style={{ color: 'rgba(244,240,232,0.85)', margin: '28px auto 36px', textAlign: 'center' }}>
            A first conversation is free. A first sketch usually follows within ten days.
          </p>
          <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
            <button className="btn btn-primary" style={{ background: 'var(--noir)' }} onClick={openEnquiry}>
              Start a project <span className="arr">→</span>
            </button>
            <a className="btn btn-ghost" style={{ borderColor: 'var(--paper)', color: 'var(--paper)' }} href="mailto:contact@designbyroar.com">
              Or email us
            </a>
          </div>
        </div>
      </section>
    </main>
  );
}

function Stat({ n, l, caveat }) {
  return (
    <div style={{ minWidth: 120 }}>
      <div className="serif" style={{ fontSize: 44, lineHeight: 1, color: 'var(--ink)' }}>
        {n}{caveat && <span style={{ color: 'var(--roar)', fontSize: 18 }}>*</span>}
      </div>
      <div className="mono" style={{ fontSize: 10, color: 'var(--muted)', letterSpacing: '0.14em', marginTop: 8 }}>
        {l.toUpperCase()}
      </div>
    </div>
  );
}

function PortraitPlaceholder({ label }) {
  return (
    <div style={{
      position: 'absolute', inset: 0,
      background: 'repeating-linear-gradient(135deg, var(--stone) 0 10px, var(--paper-2) 10px 20px)',
      display: 'grid', placeItems: 'center', color: 'var(--muted)',
      fontFamily: 'JetBrains Mono, monospace', fontSize: 11, letterSpacing: '0.12em',
      textTransform: 'uppercase', textAlign: 'center', whiteSpace: 'pre-line', padding: 24,
    }}>
      {label}
    </div>
  );
}

/* =========================
   PROJECTS (portfolio hub)
   ========================= */
function ProjectsPage({ setRoute, initialSector }) {
  const [active, setActive] = useState_p(initialSector || 'all');
  const filtered = active === 'all' ? PROJECTS : PROJECTS.filter(p => p.sector === active);

  useEffect_p(() => { if (initialSector) setActive(initialSector); }, [initialSector]);

  return (
    <main>
      <section style={{ padding: '80px 0 32px', borderBottom: '1px solid var(--line)' }}>
        <div className="container">
          <div className="eyebrow"><span className="dot"></span>Projects · 30 selected · 350+ delivered</div>
          <h1 className="display" style={{ marginTop: 24 }}>
            The <span className="serif" style={{ color: 'var(--roar)' }}>work.</span>
          </h1>
          <p className="lede" style={{ marginTop: 28, maxWidth: '56ch' }}>
            Filter by sector. Each tile is a real, completed project; click through for
            the brief, the concept, the material story and the outcome.
          </p>
        </div>
      </section>

      <section style={{ padding: '32px 0', background: 'var(--paper-2)', borderBottom: '1px solid var(--line)', position: 'sticky', top: 73, zIndex: 50, backdropFilter: 'blur(12px)' }}>
        <div className="container">
          <div className="filters">
            <button className={'pill ' + (active === 'all' ? 'on' : '')} onClick={() => setActive('all')}>
              All <span className="ct">{PROJECTS.length}</span>
            </button>
            {SECTORS.map(s => {
              const ct = PROJECTS.filter(p => p.sector === s.id).length;
              return (
                <button key={s.id}
                  className={'pill ' + (active === s.id ? 'on' : '')}
                  onClick={() => setActive(s.id)}>
                  {s.name} <span className="ct">{ct}</span>
                </button>
              );
            })}
          </div>
        </div>
      </section>

      <section className="section" style={{ paddingTop: 72 }}>
        <div className="container">
          <div className="grid" style={{ gridTemplateColumns: 'repeat(auto-fill, minmax(320px, 1fr))', gap: 40 }}>
            {filtered.map(p => (
              <ProjectCard key={p.id} p={p} onClick={() => setRoute({ page: 'project', id: p.id })} />
            ))}
          </div>
          {filtered.length === 0 && (
            <p className="lede" style={{ textAlign: 'center', color: 'var(--muted)' }}>
              No projects in this sector yet.
            </p>
          )}
        </div>
      </section>
    </main>
  );
}

/* =========================
   PROJECT DETAIL (case study)
   ========================= */
function ProjectDetailPage({ id, setRoute, openEnquiry }) {
  const p = PROJECTS.find(x => x.id === id) || PROJECTS[0];
  const sector = SECTORS.find(s => s.id === p.sector);
  // Pick 4 related projects in the same sector (excluding self)
  const related = PROJECTS.filter(x => x.sector === p.sector && x.id !== p.id).slice(0, 3);

  // Use other project images as the gallery (placeholder galleries — see brief)
  const galleryImages = PROJECTS
    .filter(x => x.sector === p.sector && x.id !== p.id)
    .slice(0, 4)
    .map(x => x.img);
  while (galleryImages.length < 4) galleryImages.push(p.img);

  useEffect_p(() => { window.scrollTo({ top: 0, behavior: 'instant' }); }, [id]);

  return (
    <main>
      <section className="cs-hero">
        <img src={p.img} alt={p.name} />
        <div className="cs-hero-content">
          <div className="container" style={{ padding: 0 }}>
            <div className="eyebrow" style={{ color: 'rgba(244,240,232,0.7)' }}>
              <span className="dot"></span>
              {sector?.name} · {p.location}
              {p.confidential && <span className="confirm" style={{ marginLeft: 12, color: 'rgba(244,240,232,0.7)', borderColor: 'rgba(244,240,232,0.3)' }}>NDA · client clearance</span>}
            </div>
            <h1 className="display" style={{ marginTop: 20, color: 'var(--paper)' }}>
              {p.name}
            </h1>
          </div>
        </div>
      </section>

      <section style={{ padding: '0 0' }}>
        <div className="container">
          <div className="cs-meta-grid">
            <div>
              <span className="lbl">Sector</span>
              <span className="val">{sector?.name}</span>
            </div>
            <div>
              <span className="lbl">Location</span>
              <span className="val">{p.location}</span>
            </div>
            <div>
              <span className="lbl">Year</span>
              <span className="val sm">— <span className="confirm">CTC</span></span>
            </div>
            <div>
              <span className="lbl">Scope</span>
              <span className="val sm">{p.scope}</span>
            </div>
          </div>

          <div style={{ padding: '64px 0 16px' }}>
            <p className="serif" style={{ fontSize: 'clamp(28px, 3.4vw, 48px)', lineHeight: 1.15, maxWidth: '22ch' }}>
              {p.headline}
            </p>
          </div>
        </div>
      </section>

      {/* === Chapters: brief / concept / materials / outcome === */}
      <section style={{ paddingBottom: 32 }}>
        <div className="container">
          <Chapter num="01" title="The brief" body={p.brief} />
          <Chapter num="02" title="The concept" body={p.concept} />

          {/* Inset image */}
          <div style={{ padding: '32px 0' }}>
            <img src={galleryImages[0]} alt="" style={{ width: '100%', aspectRatio: '16/9', objectFit: 'cover', borderRadius: 2 }} />
            <p className="mono" style={{ fontSize: 10, color: 'var(--muted)', marginTop: 10, letterSpacing: '0.12em', textAlign: 'right' }}>
              GALLERY 01 — PHOTOGRAPHER CREDIT TO CONFIRM
            </p>
          </div>

          <Chapter num="03" title="Materials &amp; process" body={p.materials} />

          {/* 2-up gallery */}
          <div style={{ padding: '32px 0', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
            <img src={galleryImages[1]} alt="" style={{ width: '100%', aspectRatio: '3/4', objectFit: 'cover', borderRadius: 2 }} />
            <img src={galleryImages[2]} alt="" style={{ width: '100%', aspectRatio: '3/4', objectFit: 'cover', borderRadius: 2 }} />
          </div>

          <Chapter num="04" title="The outcome" body={p.outcome} />
        </div>
      </section>

      {/* === Credits + CTA === */}
      <section className="band-dark section" style={{ padding: '80px 0' }}>
        <div className="container" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'start' }}>
          <div>
            <div className="eyebrow" style={{ color: 'rgba(244,240,232,0.55)' }}><span className="dot"></span>Credits</div>
            <div style={{ marginTop: 24, color: 'rgba(244,240,232,0.75)', fontSize: 14, lineHeight: 1.7 }}>
              <CreditLine k="Studio" v="Roar — Pallavi Dean &amp; the Pack" />
              <CreditLine k="Photography" v="Client to confirm rights" />
              <CreditLine k="Collaborators" v="Client to confirm" />
              <CreditLine k="Year" v="— (client to confirm)" />
            </div>
            <p className="mono" style={{ fontSize: 10, color: 'rgba(244,240,232,0.45)', marginTop: 24, letterSpacing: '0.1em' }}>
              ALL THIRD-PARTY PHOTOGRAPHY — PUBLICATION RIGHTS TO BE CONFIRMED BEFORE LAUNCH.
            </p>
          </div>
          <div>
            <h3 className="h2" style={{ color: 'var(--paper)' }}>
              Planning something<br/>in the same register?
            </h3>
            <p className="lede" style={{ color: 'rgba(244,240,232,0.7)', marginTop: 18 }}>
              Tell us about the brief — site, programme, ambition. We'll come back inside one working day.
            </p>
            <button className="btn btn-roar" style={{ marginTop: 28 }} onClick={openEnquiry}>
              Start a project <span className="arr">→</span>
            </button>
          </div>
        </div>
      </section>

      {/* === More in this sector === */}
      <section className="section">
        <SectionHeader eyebrow={`More in ${sector?.name}`} title={<>Sister<br/><span className="serif" style={{ color: 'var(--roar)' }}>projects.</span></>}
                       link={`All ${sector?.name} →`}
                       onLinkClick={() => setRoute({ page: 'projects', sector: p.sector })} />
        <div className="container" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 32 }}>
          {related.map(r => (
            <ProjectCard key={r.id} p={r} onClick={() => setRoute({ page: 'project', id: r.id })} />
          ))}
        </div>
      </section>
    </main>
  );
}

function Chapter({ num, title, body }) {
  return (
    <div className="cs-chapter">
      <div className="cs-chapter-label">
        <span className="num">CHAPTER {num}</span>
        <span className="name" dangerouslySetInnerHTML={{ __html: title }} />
      </div>
      <div className="cs-chapter-body">
        <p>{body}</p>
      </div>
    </div>
  );
}

function CreditLine({ k, v }) {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '160px 1fr', gap: 16, padding: '10px 0', borderBottom: '1px solid rgba(244,240,232,0.1)' }}>
      <span className="mono" style={{ fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'rgba(244,240,232,0.5)' }}>{k}</span>
      <span dangerouslySetInnerHTML={{ __html: v }} />
    </div>
  );
}

/* =========================
   SECTORS hub
   ========================= */
function SectorsPage({ setRoute }) {
  return (
    <main>
      <section style={{ padding: '80px 0 32px', borderBottom: '1px solid var(--line)' }}>
        <div className="container">
          <div className="eyebrow"><span className="dot"></span>Sectors · seven categories of work</div>
          <h1 className="display" style={{ marginTop: 24 }}>
            What we<br/><span className="serif" style={{ color: 'var(--roar)' }}>do.</span>
          </h1>
        </div>
      </section>
      <section className="section">
        <div className="container" style={{ display: 'grid', gap: 24 }}>
          {SECTORS.map((s, i) => {
            const samples = PROJECTS.filter(p => p.sector === s.id).slice(0, 4);
            return (
              <div key={s.id}
                   onClick={() => setRoute({ page: 'projects', sector: s.id })}
                   style={{
                     display: 'grid', gridTemplateColumns: '0.4fr 0.6fr 1.2fr', gap: 32, alignItems: 'center',
                     padding: '28px 0', borderTop: '1px solid var(--line)', cursor: 'pointer',
                   }}>
                <div>
                  <span className="mono" style={{ fontSize: 11, letterSpacing: '0.16em', color: 'var(--muted)' }}>
                    {String(i + 1).padStart(2, '0')}
                  </span>
                  <h2 className="h1" style={{ marginTop: 8, fontSize: 'clamp(36px, 5vw, 64px)' }}>{s.name}</h2>
                  <span className="mono" style={{ fontSize: 11, letterSpacing: '0.12em', color: 'var(--muted)' }}>{s.sub.toUpperCase()}</span>
                </div>
                <p style={{ fontSize: 15, color: 'var(--ink-2)', lineHeight: 1.55, maxWidth: '36ch' }}>
                  {SECTOR_BLURBS[s.id]}
                </p>
                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 8 }}>
                  {samples.map(p => (
                    <div key={p.id} style={{ aspectRatio: '1/1', overflow: 'hidden', borderRadius: 2, background: 'var(--stone)' }}>
                      <img src={p.img} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
                    </div>
                  ))}
                </div>
              </div>
            );
          })}
        </div>
      </section>
    </main>
  );
}

const SECTOR_BLURBS = {
  commercial: "Workplaces and government interiors for global consultancies, law firms, regulators and federal bodies — designed around how people actually work, with a wellbeing psychologist on the brief.",
  fnb: "Restaurants and cafés that read on the plate, on the wall and on Instagram — from QSR rollouts to Levantine fine-dining flagships.",
  hospitality: "Hotels, clubs and wellness flagships that prefer atmosphere to spectacle. Repeat work for IHG-managed properties and regional clubs.",
  education: "Schools, nurseries and university innovation hubs designed at child-height — used by the Ministry of Education as a reference for early-years policy.",
  residential: "Private villas and developer show-units across the UAE, Kuwait and India — the same calm, layered detailing the studio is known for, at domestic scale.",
  retail: "Brand flagships and multibrand stores for retail clients from Mumbai to Manhattan — including the regional flagship for SJP by Sarah Jessica Parker.",
  product: "Furniture and lighting collaborations with Artemide, Stellar Works, Preciosa and AHEC — the studio's research becoming things you can buy.",
};

/* =========================
   STUDIO
   ========================= */
function StudioPage({ setRoute, openEnquiry }) {
  return (
    <main>
      <section style={{ padding: '80px 0 64px' }}>
        <div className="container">
          <div className="eyebrow"><span className="dot"></span>Studio · founded 2013 · Al Serkal Avenue, Dubai</div>
          <h1 className="display" style={{ marginTop: 24 }}>
            The <span className="serif" style={{ color: 'var(--roar)' }}>Pack.</span>
          </h1>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, marginTop: 56 }}>
            <p className="lede">
              Roar is the studio of architect <strong>Pallavi Dean</strong> — Founder &amp; Creative
              Director. We were founded in 2013 as Pallavi Dean Interiors, and rebranded
              to Roar in September 2018. Same studio. Same people. New name.
            </p>
            <p className="lede">
              We work from a warehouse in Al&nbsp;Serkal Avenue, Dubai's design district, with around
              thirty-five designers — what we call <em>the Pack</em>. One of us is a
              psychologist; one of us is a materials librarian; the rest of us are
              architects and interior designers.
            </p>
          </div>
        </div>
      </section>

      <section style={{ padding: '0 0 80px' }}>
        <img src="media/project-roar-studio.webp" alt="Roar Studio, Al Serkal Avenue"
             style={{ width: '100%', aspectRatio: '21/9', objectFit: 'cover' }} />
        <p className="mono" style={{ fontSize: 10, color: 'var(--muted)', letterSpacing: '0.12em', marginTop: 10, textAlign: 'right', paddingRight: 'var(--gutter)' }}>
          ROAR STUDIO, AL SERKAL AVENUE — PHOTOGRAPHER CREDIT TO CONFIRM
        </p>
      </section>

      {/* The 50/50 philosophy */}
      <section className="section" style={{ background: 'var(--paper-2)' }}>
        <div className="container" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'center' }}>
          <div>
            <div className="eyebrow"><span className="dot"></span>The 50/50 philosophy</div>
            <h2 className="h1" style={{ marginTop: 18 }}>
              Fifty&nbsp;<span className="serif" style={{ color: 'var(--roar)' }}>wild,</span><br/>
              fifty&nbsp;<span className="serif" style={{ color: 'var(--ochre)' }}>tame.</span>
            </h2>
          </div>
          <div>
            <p className="lede">
              The "tame" half is the evidence — a wellbeing psychologist on every office
              project, post-occupancy studies on every workplace, materials sourced from
              suppliers we can name.
            </p>
            <p className="lede" style={{ marginTop: 18 }}>
              The "wild" half is everything else — the bit that's a hunch, a sketch on
              a napkin, the courage to paint a whole restaurant dusty rose.
            </p>
            <p className="lede" style={{ marginTop: 18 }}>
              Both halves are non-negotiable.
            </p>
          </div>
        </div>
      </section>

      {/* The Pack — team grid (portraits TBC) */}
      <section className="section">
        <SectionHeader eyebrow="The Pack" title={<>People in the<br/><span className="serif" style={{ color: 'var(--roar)' }}>building.</span></>} />
        <div className="container" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 32 }}>
          {PACK.map((m, i) => (
            <div key={i}>
              <div style={{ aspectRatio: '3/4', overflow: 'hidden', background: 'var(--stone)', position: 'relative', borderRadius: 2 }}>
                <PortraitPlaceholder label={`${m.name}\n${m.role}`.toUpperCase()} />
              </div>
              <div style={{ marginTop: 14 }}>
                <div className="serif" style={{ fontSize: 22 }}>{m.name}</div>
                <div className="mono" style={{ fontSize: 10, color: 'var(--muted)', letterSpacing: '0.14em', textTransform: 'uppercase', marginTop: 4 }}>
                  {m.role}
                </div>
              </div>
            </div>
          ))}
        </div>
        <p className="mono" style={{ fontSize: 10, color: 'var(--muted)', letterSpacing: '0.12em', marginTop: 24, textAlign: 'center' }}>
          PORTRAITS &amp; FULL TEAM ROSTER — CLIENT TO SUPPLY.
        </p>
      </section>

      {/* History */}
      <section className="section band-dark">
        <SectionHeader eyebrow="History" title={<>Twelve years,<br/><span className="serif" style={{ color: 'var(--roar)' }}>one studio.</span></>} dark />
        <div className="container">
          {HISTORY.map((h, i) => (
            <div key={i} style={{
              display: 'grid', gridTemplateColumns: '120px 1fr 2fr', gap: 32, alignItems: 'baseline',
              padding: '22px 0', borderTop: '1px solid rgba(244,240,232,0.15)',
            }}>
              <span className="mono" style={{ fontSize: 12, color: 'var(--roar)', letterSpacing: '0.1em' }}>{h.year}</span>
              <span className="serif" style={{ fontSize: 26, color: 'var(--paper)' }}>{h.title}</span>
              <span style={{ color: 'rgba(244,240,232,0.65)', fontSize: 15, lineHeight: 1.6 }}>{h.body}</span>
            </div>
          ))}
        </div>
      </section>

      <section className="section band-roar">
        <div className="container" style={{ textAlign: 'center' }}>
          <h2 className="h1" style={{ color: 'var(--paper)' }}>
            Tell us about the<br/>
            <span className="serif">brief.</span>
          </h2>
          <button className="btn btn-primary" style={{ background: 'var(--noir)', marginTop: 32 }} onClick={openEnquiry}>
            Start a project <span className="arr">→</span>
          </button>
        </div>
      </section>
    </main>
  );
}

const PACK = [
  { name: 'Pallavi Dean',  role: 'Founder & Creative Director' },
  { name: 'Senior Designer 01', role: 'Associate — Workplace' },
  { name: 'Senior Designer 02', role: 'Associate — Hospitality' },
  { name: 'Senior Designer 03', role: 'Associate — Residential' },
  { name: 'Resident Psychologist', role: 'Wellbeing & Workplace' },
  { name: 'Materials Lead', role: 'Library & Sourcing' },
  { name: 'Project Director', role: 'Delivery' },
  { name: '+ the rest of the Pack', role: '~28 designers, regional' },
];

const HISTORY = [
  { year: '2013', title: 'Pallavi Dean Interiors founded', body: "Architect Pallavi Dean opens her own studio in Dubai after working with HOK, Aedas and Pringle Brandon — early commissions in workplace and residential." },
  { year: '2016', title: 'First federal commission', body: 'A federal government interior brings the studio into civic work — the category that now anchors a third of the portfolio.' },
  { year: '2018', title: 'Rebrand to "Roar"', body: 'The studio rebrands from Pallavi Dean Interiors to Roar — same entity, sharper voice, the lion and "the Pack" as motifs.' },
  { year: '2019–22', title: 'Awards run', body: 'FRAME Global Emerging Designer of the Year (2019), AD ME Designer of the Year (2020), CID Interior Designer of the Year (2020 & 2022), Interior Design "Best of Year" (2021).' },
  { year: '2024', title: 'Ajman Ruler\'s Court delivered', body: 'A landmark government interior that becomes the studio\'s most-published project — featured in Dezeen, The National and Work Design Magazine.' },
  { year: 'Today', title: 'Seven sectors, one Pack', body: "~35 designers across commercial, F&B, hospitality, education, residential, retail and product. Speaking at Clerkenwell Design Week 2026." },
];

/* =========================
   AWARDS
   ========================= */
function AwardsPage({ setRoute }) {
  return (
    <main>
      <section style={{ padding: '80px 0 32px' }}>
        <div className="container">
          <div className="eyebrow"><span className="dot"></span>Awards · Press · Recognition</div>
          <h1 className="display" style={{ marginTop: 24 }}>
            The <span className="serif" style={{ color: 'var(--roar)' }}>receipts.</span>
          </h1>
          <p className="lede" style={{ marginTop: 28, maxWidth: '60ch' }}>
            We don't lead with awards, but they're a fair signal of where the work is judged
            against. Everything below is attributed exactly to its issuer and year.
          </p>
        </div>
      </section>

      <section className="section">
        <div className="container" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'start' }}>
          <div>
            <h3 className="h3">Awards <span className="confirm">All to Pallavi Dean — verify exact crediting</span></h3>
            <div style={{ marginTop: 24 }}>
              {AWARDS.map((a, i) => (
                <div key={i} className="award-row">
                  <span className="award-year">{a.year}</span>
                  <div>
                    <div className="award-name">{a.name}</div>
                    <div className="award-issuer">{a.issuer}</div>
                  </div>
                  <span className="mono" style={{ fontSize: 10, color: 'var(--muted)', letterSpacing: '0.14em' }}>
                    CONFIRMED ✓
                  </span>
                </div>
              ))}
            </div>

            <div style={{ marginTop: 56, padding: 28, background: 'var(--paper-2)', borderLeft: '3px solid var(--roar)' }}>
              <div className="eyebrow"><span className="dot"></span>Award attribution under review</div>
              <p className="serif" style={{ fontSize: 22, marginTop: 14, lineHeight: 1.3 }}>
                Ajman Ruler's Court — 2024 award attribution
              </p>
              <p style={{ fontSize: 14, color: 'var(--ink-2)', marginTop: 12, lineHeight: 1.6 }}>
                Some 2024 coverage attributes an "Interior Design — Office" win on the
                Ajman Ruler's Court project to Roar; the official CID Awards 2024 MENA list
                records the win under another contracted studio. <strong>We present the project,
                but won't claim a specific award until the issuer's record is reconciled
                with the client.</strong>
              </p>
            </div>
          </div>

          <div>
            <h3 className="h3">Press</h3>
            <div style={{ marginTop: 24 }}>
              {PRESS.map((p, i) => (
                <div key={i} className="award-row" style={{ gridTemplateColumns: '120px 1fr auto' }}>
                  <span className="mono" style={{ fontSize: 12, letterSpacing: '0.1em', color: 'var(--muted)' }}>
                    {p.style === 'b' ? p.name.toUpperCase().slice(0, 8) : 'FEATURE'}
                  </span>
                  <div>
                    <div className="award-name">{p.name}</div>
                    <div className="award-issuer" style={{ fontStyle: p.style === 'i' ? 'italic' : 'normal' }}>
                      {p.detail}
                    </div>
                  </div>
                  <span className="mono" style={{ fontSize: 10, color: 'var(--muted)', letterSpacing: '0.14em' }}>→</span>
                </div>
              ))}
            </div>

            <h3 className="h3" style={{ marginTop: 56 }}>Speaking &amp; juries</h3>
            <div style={{ marginTop: 24 }}>
              {SPEAKING.map((s, i) => (
                <div key={i} className="award-row" style={{ gridTemplateColumns: '80px 1fr auto' }}>
                  <span className="award-year">{s.year}</span>
                  <div>
                    <div className="award-name">{s.event}</div>
                    <div className="award-issuer">{s.city}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

/* =========================
   CONTACT
   ========================= */
function ContactPage({ openEnquiry }) {
  const [sent, setSent] = useState_p(false);
  const [data, setData] = useState_p({ name: '', email: '', sector: '', message: '' });
  const submit = (e) => { e.preventDefault(); setSent(true); };
  return (
    <main>
      <section style={{ padding: '80px 0 0' }}>
        <div className="container">
          <div className="eyebrow"><span className="dot"></span>Meet the Pack</div>
          <h1 className="display" style={{ marginTop: 24 }}>
            Let's <span className="serif" style={{ color: 'var(--roar)' }}>talk.</span>
          </h1>
        </div>
      </section>

      <section className="section">
        <div className="container" style={{ display: 'grid', gridTemplateColumns: '1.2fr 0.8fr', gap: 80, alignItems: 'start' }}>
          {/* Form */}
          <div>
            <h2 className="h2">Start a project</h2>
            <p className="lede" style={{ marginTop: 14, maxWidth: '52ch' }}>
              A short form to get the conversation moving. We'll reply from
              <a href="mailto:contact@designbyroar.com" style={{ borderBottom: '1px solid var(--ink)' }}> contact@designbyroar.com</a>
              {' '}within one working day.
            </p>

            {!sent ? (
              <form className="form" style={{ marginTop: 36 }} onSubmit={submit}>
                <div className="form-row">
                  <div className="field">
                    <label>Your name</label>
                    <input required value={data.name} onChange={e => setData({...data, name: e.target.value})} />
                  </div>
                  <div className="field">
                    <label>Email</label>
                    <input required type="email" value={data.email} onChange={e => setData({...data, email: e.target.value})} />
                  </div>
                </div>
                <div className="field">
                  <label>Sector</label>
                  <div className="choice-group">
                    {SECTORS.map(s => (
                      <button type="button" key={s.id}
                        className={'choice ' + (data.sector === s.id ? 'on' : '')}
                        onClick={() => setData({...data, sector: s.id})}>{s.name}</button>
                    ))}
                  </div>
                </div>
                <div className="field">
                  <label>Tell us about the project</label>
                  <textarea required value={data.message} onChange={e => setData({...data, message: e.target.value})}
                    placeholder="Site, programme, ambition, timeline — anything that's useful." />
                </div>
                <div className="row" style={{ justifyContent: 'space-between', marginTop: 8 }}>
                  <p className="mono" style={{ fontSize: 10, color: 'var(--muted)', letterSpacing: '0.12em', alignSelf: 'center' }}>
                    OR USE THE GUIDED 3-STEP →
                  </p>
                  <div style={{ display: 'flex', gap: 12 }}>
                    <button type="button" className="btn btn-ghost btn-sm" onClick={openEnquiry}>Guided</button>
                    <button type="submit" className="btn btn-roar">Send <span className="arr">→</span></button>
                  </div>
                </div>
              </form>
            ) : (
              <div className="fade-in" style={{ marginTop: 36, padding: 36, background: 'var(--paper-2)', borderLeft: '3px solid var(--roar)' }}>
                <div className="eyebrow"><span className="dot"></span>Brief received</div>
                <p className="serif" style={{ fontSize: 32, marginTop: 14 }}>
                  Thank you, {data.name || 'friend'}.
                </p>
                <p style={{ marginTop: 14, color: 'var(--ink-2)' }}>
                  We'll come back within one working day from <strong>contact@designbyroar.com</strong>.
                </p>
              </div>
            )}
          </div>

          {/* Contact info */}
          <aside>
            <div className="hairline" style={{ paddingTop: 20 }}>
              <div className="eyebrow"><span className="dot"></span>Email</div>
              <p style={{ marginTop: 8, fontSize: 18 }}>
                <a href="mailto:contact@designbyroar.com" style={{ borderBottom: '1px solid var(--ink)' }}>
                  contact@designbyroar.com
                </a>
              </p>
            </div>
            <div className="hairline" style={{ paddingTop: 20, marginTop: 28 }}>
              <div className="eyebrow"><span className="dot"></span>Studio</div>
              <p style={{ marginTop: 8, lineHeight: 1.6 }}>
                Warehouse 44, Al Serkal Avenue,<br/>
                Al Quoz, Dubai, United Arab Emirates
              </p>
            </div>
            <div className="hairline" style={{ paddingTop: 20, marginTop: 28 }}>
              <div className="eyebrow"><span className="dot"></span>Phone / WhatsApp</div>
              <p style={{ marginTop: 8, color: 'var(--muted)', fontSize: 14 }}>
                <em>Client to confirm — currently hidden on the live site.</em>
                <br/>
                <span className="confirm">CTC</span> Not yet wired.
              </p>
            </div>
            <div className="hairline" style={{ paddingTop: 20, marginTop: 28 }}>
              <div className="eyebrow"><span className="dot"></span>Hours</div>
              <p style={{ marginTop: 8, color: 'var(--muted)', fontSize: 14 }}>
                <em>Client to confirm.</em>
              </p>
            </div>
            <div style={{ marginTop: 36, padding: 24, background: 'var(--paper-2)' }}>
              <div className="eyebrow"><span className="dot"></span>For press</div>
              <p style={{ marginTop: 10, fontSize: 14, lineHeight: 1.6 }}>
                Press, awards juries, speaking enquiries —
                please contact <a href="mailto:contact@designbyroar.com" style={{ borderBottom: '1px solid var(--ink)' }}>press@designbyroar.com</a> (CTC).
              </p>
            </div>
          </aside>
        </div>
      </section>

      {/* Map */}
      <section style={{ padding: '0 0 80px' }}>
        <div className="container">
          <div className="eyebrow" style={{ marginBottom: 18 }}><span className="dot"></span>Find us · 25.1421709, 55.2255639 <span className="confirm">CTC</span></div>
          <div style={{ position: 'relative', aspectRatio: '21/9', borderRadius: 2, overflow: 'hidden', background: 'var(--paper-2)' }}>
            {/* Map placeholder — lazy iframe at build per CLAUDE-DESIGN §6 */}
            <MapPlaceholder />
          </div>
        </div>
      </section>
    </main>
  );
}

function MapPlaceholder() {
  return (
    <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(135deg, #ECE5D4, #D5CCB9)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
      <svg width="100%" height="100%" viewBox="0 0 1200 500" preserveAspectRatio="xMidYMid slice" style={{ position: 'absolute', inset: 0 }}>
        {/* Stylized streetmap */}
        <g stroke="#C4B998" strokeWidth="1" fill="none" opacity="0.7">
          {Array.from({ length: 14 }).map((_, i) => (
            <line key={'h' + i} x1="0" x2="1200" y1={i * 38 + 6} y2={i * 38 + 6} />
          ))}
          {Array.from({ length: 22 }).map((_, i) => (
            <line key={'v' + i} x1={i * 60 + 8} x2={i * 60 + 8} y1="0" y2="500" />
          ))}
        </g>
        <g stroke="#BFA978" strokeWidth="3" fill="none">
          <path d="M0 240 Q 300 220, 600 250 T 1200 230" />
          <path d="M580 0 Q 600 250, 580 500" />
        </g>
        {/* Pin */}
        <g transform="translate(600,250)">
          <circle r="56" fill="rgba(199,71,42,0.18)" />
          <circle r="28" fill="rgba(199,71,42,0.35)" />
          <circle r="9" fill="#C7472A" />
          <line x1="0" y1="9" x2="0" y2="40" stroke="#C7472A" strokeWidth="2" />
        </g>
        <g transform="translate(620,260)" fontFamily="JetBrains Mono, monospace" fontSize="11" fill="#15130F" letterSpacing="1.5">
          <text>WAREHOUSE 44</text>
          <text y="16">AL SERKAL AVENUE</text>
        </g>
      </svg>
    </div>
  );
}

Object.assign(window, { HomePage, ProjectsPage, ProjectDetailPage, SectorsPage, StudioPage, AwardsPage, ContactPage });