/* Bluehaus — Home + Projects + Case Study pages */
const { useState: useState1, useEffect: useEffect1, useMemo } = React;

// ====================== HOME ======================
function HomePage({ navigate }) {
  const data = window.BHG_DATA;
  const featured = data.projects.filter(p => p.featured);
  const heroProject = data.projects.find(p => p.slug === 'sushi-samba-riyadh');

  return (
    <div className="page">
      {/* HERO */}
      <section className="hero">
        <div className="hero-media">
          <img src={heroProject.hero} alt="" />
        </div>
        <div className="hero-inner">
          <div className="hero-top">
            <div className="hero-eyebrow">Bluehaus Group · Est. Dubai 2003</div>
            <div className="hero-meta-right">
              <div>Architecture / Interior / MEP</div>
              <div>Dubai · Abu Dhabi · Riyadh · Manila</div>
            </div>
          </div>
          <div className="hero-bottom">
            <h1>
              Inspired design.<br/>
              <span className="it">Forward-thinking</span> people.
            </h1>
            <div>
              <p>A multi-disciplinary architecture, interior design and MEP consultancy. Over 20 years building people-centric, resilient environments across the Middle East — now part of tp bennett.</p>
              <div className="hero-cta-row">
                <a href="#projects" onClick={(e) => { e.preventDefault(); navigate('projects'); }} className="btn btn-primary" style={{ background: 'var(--paper)', color: 'var(--ink)' }}>
                  See the work <span className="arr">→</span>
                </a>
                <a href="#contact" onClick={(e) => { e.preventDefault(); navigate('contact'); }} className="btn btn-ghost-dark">
                  Start a project
                </a>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* MARQUEE */}
      <Marquee items={[
        { text: '30M+ sq ft delivered' },
        { text: 'since 2003', it: true },
        { text: 'architecture' },
        { text: 'interior design', it: true },
        { text: 'MEP engineering' },
        { text: 'workplace · hospitality · retail · cinemas · healthcare · education', it: true },
        { text: 'now a tp bennett practice' },
      ]} />

      {/* STATS */}
      <section className="section-tight">
        <div className="container">
          <div className="stat-row">
            {window.BHG_DATA.stats.map((s, i) => (
              <div className="stat" key={i}>
                <div className="num">{s.num}</div>
                <div className="lab">{s.lab}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* FEATURED PROJECT 1 — du Telecom */}
      <section className="section">
        <div className="container">
          <SectionHead
            label="Featured · Workplace"
            title={<>Selected work, <span style={{ fontFamily: '"Newsreader", serif', fontStyle: 'italic', fontWeight: 300 }}>structured</span> as case studies.</>}
            action={
              <a href="#projects" onClick={(e) => { e.preventDefault(); navigate('projects'); }} className="link-arrow">All projects →</a>
            }
          />
          <FeatureRow project={data.projects.find(p => p.slug === 'du-telecom-hq')} reverse={false} navigate={navigate} />
          <div style={{ height: 96 }} />
          <FeatureRow project={data.projects.find(p => p.slug === 'huawei-riyadh')} reverse={true} navigate={navigate} />
        </div>
      </section>

      {/* SECTOR TILES */}
      <section className="section" style={{ background: 'var(--paper-soft)' }}>
        <div className="container">
          <SectionHead
            label="Sectors"
            title={<>Six sectors, <span style={{ fontFamily: '"Newsreader", serif', fontStyle: 'italic', fontWeight: 300 }}>one practice</span>.</>}
            action={<a href="#sectors" onClick={(e) => { e.preventDefault(); navigate('sectors'); }} className="link-arrow">All sectors →</a>}
          />
          <div className="sector-grid">
            {data.sectors.map((s, i) => (
              <div key={s.id} className="sector-tile"
                   onClick={() => navigate('projects?sector=' + s.id)}>
                <div className="num">0{i + 1} / 0{data.sectors.length}</div>
                <div>
                  <div className="name">{s.name}</div>
                </div>
                <div className="meta">{s.count} projects</div>
                <div className="arr">→</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* TP BENNETT STRIP */}
      <section className="tpb-strip">
        <div className="tpb-inner">
          <div>
            <div className="label">A new chapter — 2025</div>
            <div className="lock-mark" style={{ marginTop: 24 }}>
              Bluehaus <span className="sep">×</span> tp bennett
            </div>
          </div>
          <div>
            <h2>
              In May 2025, Bluehaus joined <span className="it">tp bennett</span>, a 100-year-old London practice of 400+ designers — extending our regional craft into a truly international platform.
            </h2>
            <p>Founder Ben Corrigan continues to lead the Middle East region from Dubai, with the combined firm now operating from Dubai, Abu Dhabi, Riyadh, Manila, London, Manchester, Leeds and New York. Same studio, same people — broader reach.</p>
          </div>
        </div>
      </section>

      {/* DIVISIONS */}
      <section className="section">
        <div className="container">
          <SectionHead
            label="Divisions"
            title="Three connected practices under one roof."
          />
          <div className="divisions">
            {data.divisions.map((d) => (
              <div key={d.n} className="div-card">
                <div className="num">{d.n}</div>
                <div className="name">
                  {d.name}
                  <span className="sub">{d.sub}</span>
                </div>
                <p>{d.blurb}</p>
                <div className="foot">
                  <a href="#services" onClick={(e) => { e.preventDefault(); navigate('services'); }} className="link-arrow">Read more →</a>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* FEATURED — SUSHI SAMBA + clients */}
      <section className="section" style={{ background: 'var(--paper-soft)' }}>
        <div className="container">
          <FeatureRow project={data.projects.find(p => p.slug === 'sushi-samba-riyadh')} reverse={false} navigate={navigate} />
        </div>
      </section>

      {/* CLIENT LOGOS — text-only treatment */}
      <section className="section-tight">
        <div className="container">
          <div className="label" style={{ marginBottom: 32 }}>Selected clients · 2003 — 2026</div>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: '14px 32px', alignItems: 'baseline' }}>
            {data.clientLogos.map((c, i) => (
              <span key={i} style={{
                fontFamily: 'var(--font-sans)', fontSize: 'clamp(20px, 2.2vw, 32px)',
                fontWeight: 400, letterSpacing: '-0.018em',
                color: i % 4 === 0 ? 'var(--blue)' : 'var(--ink)',
              }}>{c}{i < data.clientLogos.length - 1 ? <span style={{ color: 'var(--muted-soft)', margin: '0 0' }}> ·</span> : ''}</span>
            ))}
          </div>
        </div>
      </section>

      {/* AWARDS STRIP */}
      <section className="awards-strip">
        <div className="container">
          <SectionHead
            label="Recognition"
            title="Attributed awards."
            action={<a href="#awards" onClick={(e) => { e.preventDefault(); navigate('awards'); }} className="link-arrow">All awards →</a>}
          />
          <div className="awards-list">
            {data.awards.slice(0, 6).map((a, i) => (
              <div key={i} className="award-item">
                <div className="yr">{a.year}</div>
                <div className="name">{a.name}<span className="proj">{a.project}</span></div>
                <div className="issuer">{a.issuer}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA BAND */}
      <section className="section cinematic-band">
        <div className="container" style={{ textAlign: 'center' }}>
          <div className="label" style={{ display: 'block', marginBottom: 24 }}>Start a project</div>
          <div className="h-display" style={{ color: 'var(--paper)', maxWidth: '20ch', margin: '0 auto 32px' }}>
            Tell us about <span className="it">your brief</span>.
          </div>
          <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
            <a href="#contact" onClick={(e) => { e.preventDefault(); navigate('contact'); }} className="btn btn-primary" style={{ background: 'var(--paper)', color: 'var(--ink)' }}>
              Start a project <span className="arr">→</span>
            </a>
            <a href="tel:+97144520956" className="btn btn-ghost-dark">
              +971 (4) 452 0956
            </a>
          </div>
        </div>
      </section>
    </div>
  );
}

function FeatureRow({ project, reverse, navigate }) {
  if (!project) return null;
  return (
    <div className={'feature-row' + (reverse ? ' reverse' : '')}>
      {reverse ? (
        <>
          <div className="img-wrap">
            <img src={project.hero} alt={project.name} />
          </div>
          <FeatureCopy p={project} navigate={navigate} />
        </>
      ) : (
        <>
          <FeatureCopy p={project} navigate={navigate} />
          <div className="img-wrap">
            <img src={project.hero} alt={project.name} />
          </div>
        </>
      )}
    </div>
  );
}

function FeatureCopy({ p, navigate }) {
  return (
    <div className="copy">
      <div className="label">{p.sectorName}</div>
      <div className="h2" style={{ marginTop: 16 }}>{p.name}</div>
      <div className="lede" style={{ marginTop: 14 }}>{p.tagline}</div>
      <dl className="meta-grid">
        <div><dt>Location</dt><dd>{p.location}</dd></div>
        <div><dt>Year</dt><dd>{p.year}</dd></div>
        <div><dt>Scope</dt><dd>{p.scope}</dd></div>
        <div><dt>Area</dt><dd>{p.area}</dd></div>
      </dl>
      <a href={'#projects/' + p.slug}
         onClick={(e) => { e.preventDefault(); navigate('projects/' + p.slug); window.scrollTo(0, 0); }}
         className="link-arrow" style={{ marginTop: 32, display: 'inline-flex' }}>
        Read case study →
      </a>
    </div>
  );
}

// ====================== PROJECTS INDEX ======================
function ProjectsPage({ navigate, initialSector }) {
  const data = window.BHG_DATA;
  const [sector, setSector] = useState1(initialSector || 'all');
  const visible = sector === 'all' ? data.projects : data.projects.filter(p => p.sector === sector);

  // Mixed grid layout — sizing variants for editorial rhythm
  const variantFor = (idx) => {
    const m = idx % 6;
    if (m === 0) return 'wide';
    if (m === 3) return 'tall';
    return '';
  };
  const colSpanFor = (idx) => {
    const m = idx % 6;
    if (m === 0) return 'span 8';
    if (m === 1) return 'span 4';
    if (m === 2) return 'span 6';
    if (m === 3) return 'span 4';
    if (m === 4) return 'span 4';
    if (m === 5) return 'span 4';
    return 'span 4';
  };

  return (
    <div className="page">
      <section style={{ padding: 'clamp(48px, 6vw, 96px) 0 32px' }}>
        <div className="container">
          <div className="label">Portfolio</div>
          <h1 className="h1" style={{ marginTop: 16, maxWidth: '20ch' }}>
            Projects, structured. By sector, by location, by year.
          </h1>
          <div className="lede" style={{ marginTop: 20 }}>
            A working archive of named projects across the GCC and beyond. Filter by sector, or browse the full set.
          </div>
        </div>
      </section>

      <section style={{ padding: '0 0 clamp(48px, 6vw, 96px)' }}>
        <div className="container">
          <div className="filter-row">
            <button className={'filter-pill' + (sector === 'all' ? ' on' : '')} onClick={() => setSector('all')}>
              All <span className="count">{data.projects.length}</span>
            </button>
            {data.sectors.map(s => (
              <button key={s.id} className={'filter-pill' + (sector === s.id ? ' on' : '')} onClick={() => setSector(s.id)}>
                {s.short} <span className="count">{data.projects.filter(p => p.sector === s.id).length}</span>
              </button>
            ))}
          </div>
          <div className="proj-grid">
            {visible.map((p, i) => (
              <div key={p.slug} style={{ gridColumn: colSpanFor(i) }}>
                <ProjectCard project={p} variant={variantFor(i)} navigate={navigate} />
              </div>
            ))}
          </div>
          {visible.length === 0 && (
            <div className="lede" style={{ textAlign: 'center', padding: '48px 0' }}>
              No published projects in this sector yet — confirm with the studio.
            </div>
          )}
        </div>
      </section>
    </div>
  );
}

// ====================== CASE STUDY ======================
function CaseStudyPage({ slug, navigate }) {
  const data = window.BHG_DATA;
  const p = data.projects.find(x => x.slug === slug);
  const [lightbox, setLightbox] = useState1(null);

  if (!p) {
    return (
      <div className="page container" style={{ padding: '120px 0' }}>
        <div className="label">404</div>
        <h1 className="h1" style={{ marginTop: 16 }}>Project not found.</h1>
        <a href="#projects" onClick={(e) => { e.preventDefault(); navigate('projects'); }} className="link-arrow" style={{ marginTop: 24, display: 'inline-flex' }}>← Back to projects</a>
      </div>
    );
  }

  const idx = data.projects.indexOf(p);
  const next = data.projects[(idx + 1) % data.projects.length];

  return (
    <div className="page">
      {/* HERO */}
      <section className="case-hero">
        <img src={p.hero} alt={p.name} />
        <div className="case-hero-text">
          <div className="label">{p.sectorName} · {p.location}</div>
          <h1>{p.name}</h1>
        </div>
      </section>

      {/* META */}
      <section>
        <div className="container">
          <dl className="case-meta">
            <div><dt>Client</dt><dd>{p.client}</dd></div>
            <div><dt>Location</dt><dd>{p.location}</dd></div>
            <div><dt>Year</dt><dd>{p.year}</dd></div>
            <div><dt>Area</dt><dd>{p.area}</dd></div>
            <div><dt>Scope</dt><dd>{p.scope}</dd></div>
          </dl>
        </div>
      </section>

      {/* BODY */}
      <section>
        <div className="container">
          <div className="case-body">
            <div className="colA">
              <div className="label">Concept</div>
              <h2>{p.tagline}</h2>
            </div>
            <div className="colB">
              {p.narrative.map((para, i) => (
                <p key={i}>{para}</p>
              ))}
              <div className="label" style={{ marginTop: 32 }}>Photography</div>
              <p style={{ marginTop: 8, fontSize: 14, color: 'var(--muted)' }}>{p.photographer} — usage rights to be confirmed with the studio.</p>
            </div>
          </div>
        </div>
      </section>

      {/* GALLERY */}
      <section>
        <div className="container">
          <div className="case-gallery">
            {p.gallery.map((src, i) => (
              <div key={i} className={'img-' + ((i % 5) + 1)} onClick={() => setLightbox(src)} style={{ cursor: 'zoom-in' }}>
                <img src={src} alt={p.name + ' ' + (i + 1)} loading="lazy" />
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* NEXT */}
      <section className="next-case">
        <div className="next-case-inner">
          <div>
            <div className="label">Next project</div>
            <div className="h2" style={{ marginTop: 8 }}>{next.name}</div>
          </div>
          <a href={'#projects/' + next.slug} onClick={(e) => { e.preventDefault(); navigate('projects/' + next.slug); window.scrollTo(0,0); }} className="btn btn-primary">
            View case study <span className="arr">→</span>
          </a>
        </div>
      </section>

      {/* CTA */}
      <section className="section cinematic-band">
        <div className="container" style={{ textAlign: 'center' }}>
          <div className="label" style={{ display: 'block', marginBottom: 16 }}>{p.sectorName}</div>
          <div className="h2" style={{ color: 'var(--paper)', maxWidth: '24ch', margin: '0 auto 32px' }}>
            Working on something similar?
          </div>
          <a href="#contact" onClick={(e) => { e.preventDefault(); navigate('contact'); }} className="btn btn-primary" style={{ background: 'var(--paper)', color: 'var(--ink)' }}>
            Start a project <span className="arr">→</span>
          </a>
        </div>
      </section>

      {lightbox && <Lightbox src={lightbox} alt={p.name} onClose={() => setLightbox(null)} />}
    </div>
  );
}

Object.assign(window, { HomePage, ProjectsPage, CaseStudyPage });