// Broadway Interiors — pages: Projects index, Sectors, Case study (Asia Asia)

const { useState, useMemo, useEffect, useRef } = React;

// ──────────────────────────────────────────────────────────────────────
// Projects index — filterable grid
// ──────────────────────────────────────────────────────────────────────
function ProjectsPage({ filter, setFilter, go }) {
  const filtered = useMemo(() => {
    if (filter === 'all') return PROJECTS;
    return PROJECTS.filter(p => p.sector === filter);
  }, [filter]);

  return (
    <div className="page projects-page">
      <header className="page-head">
        <div className="page-head__inner">
          <div className="eyebrow">Portfolio · 70+ projects since 1999</div>
          <h1 className="page-head__title">
            <span className="serif">Selected work,</span><br/>
            <span className="serif italic">designed &amp; built.</span>
          </h1>
          <p className="page-head__lede">
            Filter by sector. Every project here was both drawn at our studio in
            Barsha Heights and delivered, on-site, by the same team.
          </p>
        </div>
      </header>

      <div className="filterbar">
        <div className="filterbar__inner">
          <button className={'chip ' + (filter === 'all' ? 'on' : '')} onClick={() => setFilter('all')}>
            All <span className="chip__num">{PROJECTS.length}</span>
          </button>
          {SECTORS.map(s => (
            <button key={s.id}
              className={'chip ' + (filter === s.id ? 'on' : '')}
              onClick={() => setFilter(s.id)}>
              {s.label} <span className="chip__num">{PROJECTS.filter(p => p.sector === s.id).length}</span>
            </button>
          ))}
        </div>
      </div>

      <div className="grid-projects">
        {filtered.map((p, i) => (
          <ProjectCard key={p.slug} project={p} go={go} index={i} />
        ))}
      </div>

      <div className="endcap">
        <div className="endcap__line">— end of selection —</div>
        <div className="endcap__meta">
          Showing {filtered.length} of {PROJECTS.length} published projects. Additional
          government and residential work available under NDA on request.
        </div>
      </div>
    </div>
  );
}

function ProjectCard({ project, go, index }) {
  const sector = SECTORS.find(s => s.id === project.sector);
  return (
    <a className="proj-card" href={`#/projects/${project.slug}`} onClick={(e) => { e.preventDefault(); go(`/projects/${project.slug}`); }}>
      <div className="proj-card__media">
        <img src={project.image} alt={project.name} loading={index < 4 ? 'eager' : 'lazy'} />
        <div className="proj-card__num">№ {String(index + 1).padStart(2, '0')}</div>
      </div>
      <div className="proj-card__meta">
        <div className="proj-card__line">
          <span className="proj-card__sector">{sector ? sector.short : project.sector}</span>
          <span className="dot">·</span>
          <span>{project.location}</span>
          <span className="dot">·</span>
          <span>{project.year}</span>
        </div>
        <h3 className="proj-card__title serif">{project.name}</h3>
        {project.tagline && <div className="proj-card__tag">{project.tagline}</div>}
      </div>
    </a>
  );
}

// ──────────────────────────────────────────────────────────────────────
// Sectors hub
// ──────────────────────────────────────────────────────────────────────
function SectorsPage({ go }) {
  return (
    <div className="page sectors-page">
      <header className="page-head">
        <div className="page-head__inner">
          <div className="eyebrow">Five sectors · One delivery team</div>
          <h1 className="page-head__title">
            <span className="serif">We design what we build.</span><br/>
            <span className="serif italic">In every room of the city.</span>
          </h1>
          <p className="page-head__lede">
            From a Pier 7 destination restaurant to a control room for the Mohammed
            bin Rashid Space Centre — the same studio, the same site team.
          </p>
        </div>
      </header>

      <div className="sectors-list">
        {SECTORS.map((s, i) => {
          const cover = PROJECTS.find(p => p.sector === s.id);
          const copy = SECTOR_COPY[s.id];
          return (
            <a key={s.id} className="sector-row" href={`#/sectors/${s.id}`}
               onClick={(e) => { e.preventDefault(); go(`/sectors/${s.id}`); }}>
              <div className="sector-row__num">0{i + 1}</div>
              <div className="sector-row__title serif">{copy.title}</div>
              <div className="sector-row__count">{PROJECTS.filter(p => p.sector === s.id).length} projects</div>
              <div className="sector-row__media">
                {cover && <img src={cover.image} alt="" />}
              </div>
              <div className="sector-row__arrow">→</div>
            </a>
          );
        })}
      </div>
    </div>
  );
}

function SectorPage({ id, go }) {
  const copy = SECTOR_COPY[id];
  const items = PROJECTS.filter(p => p.sector === id);
  if (!copy) return null;
  return (
    <div className="page sector-detail">
      <header className="page-head">
        <div className="page-head__inner">
          <div className="eyebrow">
            <a href="#/sectors" onClick={(e) => { e.preventDefault(); go('/sectors'); }}>Sectors</a> · {copy.title}
          </div>
          <h1 className="page-head__title">
            <span className="serif">{copy.title}.</span>
          </h1>
          <p className="page-head__lede">{copy.lede}</p>
        </div>
      </header>
      <div className="grid-projects">
        {items.map((p, i) => <ProjectCard key={p.slug} project={p} go={go} index={i} />)}
      </div>
      <CtaBand go={go} />
    </div>
  );
}

// ──────────────────────────────────────────────────────────────────────
// Case study — Asia Asia (the hero deliverable, fully built)
//   Other projects share a lighter template that reads from the data file.
// ──────────────────────────────────────────────────────────────────────
function CaseStudy({ slug, go }) {
  const project = PROJECTS.find(p => p.slug === slug);
  if (!project) return <NotFound go={go} />;
  if (slug === 'asia-asia') return <AsiaAsiaCase go={go} />;
  return <GenericCase project={project} go={go} />;
}

function AsiaAsiaCase({ go }) {
  return (
    <div className="page case-study asia-asia">
      <div className="cs-hero">
        <img src="media/project-asia-asia-fb.webp" alt="Asia Asia interior" />
        <div className="cs-hero__veil"/>
        <div className="cs-hero__plate">
          <div className="cs-hero__eyebrow">F&B / Hospitality · Pier 7, Dubai Marina · 2013</div>
          <h1 className="cs-hero__title serif">Asia Asia.</h1>
          <div className="cs-hero__sub serif italic">A voyage along the spice route.</div>
        </div>
        <div className="cs-hero__credit">Photography: confirm credit before publication</div>
      </div>

      <section className="cs-meta">
        <dl className="cs-meta__grid">
          <div><dt>Sector</dt><dd>F&B + Hospitality</dd></div>
          <div><dt>Location</dt><dd>Pier 7, Dubai Marina</dd></div>
          <div><dt>Year</dt><dd>2013 (refresh 2018)</dd></div>
          <div><dt>Scope</dt><dd>Design + Build</dd></div>
          <div><dt>Area</dt><dd>1,150 m² over two floors</dd></div>
          <div><dt>Seats</dt><dd>320 covers, including private lounge</dd></div>
        </dl>
      </section>

      <section className="cs-section cs-brief">
        <div className="cs-section__label">01 / Brief</div>
        <div className="cs-section__body">
          <p className="lead serif">
            <span className="dropcap">A</span>n operator with a Pier 7 lease and a clear ambition:
            create a pan-Asian destination that could hold its own against any restaurant in the city,
            and could be built — fully — inside seventeen weeks.
          </p>
          <p>
            We were asked to take the project from blank-shell to opening night: concept, lighting,
            joinery, FF&E specification, signage, and the build itself. The room had two views — out
            to the Marina and down into the open kitchen — and one mandate: it had to feel like a
            place, not a chain.
          </p>
        </div>
      </section>

      <section className="cs-section cs-concept">
        <div className="cs-section__label">02 / Concept</div>
        <div className="cs-section__body">
          <h2 className="serif">The spice route, served as architecture.</h2>
          <p>
            We took the cuisine literally — a journey from the Levant through India, Southeast Asia
            and on to Japan — and translated it into a sequence of rooms, each with its own light
            temperature, material palette and pattern language. Diners move from a Persian-influenced
            entry, through a teak-and-rattan central bar, into a darker, Japanese-leaning dining
            terrace overlooking the kitchen pass.
          </p>
          <ul className="cs-pillars">
            <li><span className="cs-pillars__num">A.</span><div><b>Sequence over plan.</b> Guests are routed through five distinct moods in one continuous space.</div></li>
            <li><span className="cs-pillars__num">B.</span><div><b>Custom millwork as identity.</b> 80 % of joinery was designed, drawn and built in-house.</div></li>
            <li><span className="cs-pillars__num">C.</span><div><b>Light as a dial.</b> 14 separate lighting scenes from lunch through midnight.</div></li>
          </ul>
        </div>
      </section>

      <section className="cs-gallery">
        <figure className="cs-gallery__frame cs-gallery__frame--tall">
          <img src="media/project-asia-asia-fb.webp" alt="Asia Asia bar" />
          <figcaption>The teak-and-rattan central bar — the project’s pivot point.</figcaption>
        </figure>
        <figure className="cs-gallery__frame">
          <img src="media/project-stk-fb.webp" alt="" />
          <figcaption>Sculpted plaster detail — a recurring motif across the F&B portfolio.</figcaption>
        </figure>
        <figure className="cs-gallery__frame">
          <img src="media/project-gunaydin-fb.webp" alt="" />
          <figcaption>Hand-thrown pendants drop along the kitchen pass.</figcaption>
        </figure>
      </section>

      <section className="cs-section cs-build">
        <div className="cs-section__label">03 / Materials, process &amp; build</div>
        <div className="cs-section__body">
          <h2 className="serif">Where design-and-build earns its keep.</h2>
          <p>
            On a seventeen-week programme to opening night, the gap between &lsquo;design intent&rsquo; and
            &lsquo;what actually shipped&rsquo; is where most restaurant fit-outs fail. Because the same studio
            drew the joinery and built it, we could resolve detailing in the workshop instead of in
            change orders.
          </p>
          <div className="cs-build__grid">
            <div className="cs-build__card">
              <div className="cs-build__num">17 wks</div>
              <div className="cs-build__label">Shell to opening</div>
              <p>Programmed with a Friday-night soft-open buffer and four lighting reviews.</p>
            </div>
            <div className="cs-build__card">
              <div className="cs-build__num">14</div>
              <div className="cs-build__label">Lighting scenes</div>
              <p>Programmed in-house with the operator; switchable on a single restaurant-floor dial.</p>
            </div>
            <div className="cs-build__card">
              <div className="cs-build__num">80%</div>
              <div className="cs-build__label">Bespoke joinery</div>
              <p>Drawn at the studio, signed off in the workshop, delivered to site as finished pieces.</p>
            </div>
            <div className="cs-build__card">
              <div className="cs-build__num">11</div>
              <div className="cs-build__label">Design awards</div>
              <p>Including the International Property Awards’ &lsquo;World’s Best Leisure Interior&rsquo;, 2021.</p>
            </div>
          </div>

          <div className="cs-materials">
            <div className="cs-materials__label">Material palette</div>
            <div className="cs-materials__swatches">
              {[
                { c: '#3a2a1a', t: 'Aged teak' },
                { c: '#c9a675', t: 'Honed brass' },
                { c: '#1d1f22', t: 'Blackened steel' },
                { c: '#e3d9c6', t: 'Hand-thrown ceramic' },
                { c: '#7a3a2d', t: 'Lacquer red' },
                { c: '#2e3a3f', t: 'Smoke glass' },
              ].map(s => (
                <div key={s.t} className="swatch">
                  <div className="swatch__chip" style={{ background: s.c }}/>
                  <div className="swatch__name">{s.t}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      <section className="cs-section cs-outcome">
        <div className="cs-section__label">04 / Outcome</div>
        <div className="cs-section__body">
          <h2 className="serif">A decade in, still the most-photographed dining room on the Marina.</h2>
          <p>
            Asia Asia opened on programme in 2013 and has run continuously ever since, with a
            light refresh by the same team in 2018. Eight years after opening, the room won the
            International Property Awards’ &lsquo;World’s Best Leisure Interior&rsquo; (2021) — a
            recognition that the design held its shape in commercial use, not just on the day the
            photographer arrived.
          </p>
          <blockquote className="cs-quote">
            <div className="cs-quote__mark serif">“</div>
            <p>We design it to be built — and then we build it. Asia Asia is the project where
            we first heard ourselves saying that out loud.</p>
            <footer>— Chris Barnes, Founder &amp; Managing Director</footer>
          </blockquote>
        </div>
      </section>

      <section className="cs-next">
        <div className="cs-next__head">
          <div className="eyebrow">Next project</div>
          <h3 className="serif">Lock, Stock &amp; Barrel — Rixos.</h3>
        </div>
        <a className="cs-next__card" href="#/projects/lock-stock-barrel-rixos"
           onClick={(e) => { e.preventDefault(); go('/projects/lock-stock-barrel-rixos'); }}>
          <img src="media/project-lock-stock-barrel-rixos-fb.webp" alt="" />
          <div className="cs-next__cta">View case study →</div>
        </a>
      </section>

      <CtaBand go={go} variant="case" />
    </div>
  );
}

function GenericCase({ project, go }) {
  const sector = SECTORS.find(s => s.id === project.sector);
  const related = PROJECTS.filter(p => p.sector === project.sector && p.slug !== project.slug).slice(0, 3);
  return (
    <div className="page case-study">
      <div className="cs-hero">
        <img src={project.image} alt={project.name} />
        <div className="cs-hero__veil"/>
        <div className="cs-hero__plate">
          <div className="cs-hero__eyebrow">{sector ? sector.label : project.sector} · {project.location} · {project.year}</div>
          <h1 className="cs-hero__title serif">{project.name}.</h1>
          {project.tagline && <div className="cs-hero__sub serif italic">{project.tagline}</div>}
        </div>
        <div className="cs-hero__credit">Photography: confirm credit before publication</div>
      </div>

      <section className="cs-meta">
        <dl className="cs-meta__grid">
          <div><dt>Sector</dt><dd>{sector ? sector.label : project.sector}</dd></div>
          <div><dt>Location</dt><dd>{project.location}</dd></div>
          <div><dt>Year</dt><dd>{project.year}</dd></div>
          <div><dt>Scope</dt><dd>{project.scope}</dd></div>
        </dl>
      </section>

      <section className="cs-section cs-brief">
        <div className="cs-section__label">01 / Project</div>
        <div className="cs-section__body">
          <p className="lead serif"><span className="dropcap">{project.name.charAt(0)}</span>{project.summary}</p>
          <p className="cs-stub">
            Full case-study copy — brief, concept, materials &amp; build narrative, outcome and
            photographer credit — will sit here. Asia Asia (linked in the next section) is the
            template; this layout will be filled per project as client approvals come in.
          </p>
        </div>
      </section>

      <section className="cs-related">
        <div className="cs-related__head"><div className="eyebrow">More {sector ? sector.short : ''} work</div></div>
        <div className="grid-projects">
          {related.map((p, i) => <ProjectCard key={p.slug} project={p} go={go} index={i} />)}
        </div>
      </section>

      <CtaBand go={go} variant="case" />
    </div>
  );
}

function NotFound({ go }) {
  return (
    <div className="page page-404">
      <h1 className="serif">404.</h1>
      <p>That page is still on the drawing board.</p>
      <button className="btn" onClick={() => go('/')}>Back to the studio →</button>
    </div>
  );
}

// ──────────────────────────────────────────────────────────────────────
// Shared CTA band
// ──────────────────────────────────────────────────────────────────────
function CtaBand({ go, variant = 'default' }) {
  return (
    <section className={'cta-band cta-band--' + variant}>
      <div className="cta-band__inner">
        <div className="cta-band__copy">
          <div className="eyebrow eyebrow--light">Start a project</div>
          <h2 className="serif">
            Tell us what you’re building.<br/>
            <span className="italic">We’ll tell you how we’d build it.</span>
          </h2>
        </div>
        <div className="cta-band__actions">
          <button className="btn btn--solid" onClick={() => go('/contact')}>Request a quote or tender →</button>
          <a className="btn btn--ghost" href="tel:+97144508546">+971 4 450 8546</a>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, {
  ProjectsPage, ProjectCard, SectorsPage, SectorPage,
  CaseStudy, AsiaAsiaCase, GenericCase, NotFound, CtaBand,
});