/* Bluehaus — Sectors, Services, About, Awards, Contact pages */
const { useState: useState2 } = React;

// ====================== SECTORS ======================
function SectorsPage({ navigate }) {
  const data = window.BHG_DATA;
  return (
    <div className="page">
      <section style={{ padding: 'clamp(48px, 6vw, 96px) 0 32px' }}>
        <div className="container">
          <div className="label">Sectors</div>
          <h1 className="h1" style={{ marginTop: 16, maxWidth: '22ch' }}>
            Designed across six sectors — from quiet workplaces to loud restaurants.
          </h1>
          <div className="lede" style={{ marginTop: 20 }}>
            Each sector has its own logic. We work from a shared set of principles — people-first, resilient, delivery-led — and adapt them to the building.
          </div>
        </div>
      </section>

      <section style={{ padding: '0 0 clamp(64px, 7vw, 120px)' }}>
        <div className="container">
          {data.sectors.map((s, i) => {
            const projs = data.projects.filter(p => p.sector === s.id);
            const reverse = i % 2 === 1;
            return (
              <div key={s.id} style={{
                display: 'grid',
                gridTemplateColumns: reverse ? '7fr 5fr' : '5fr 7fr',
                gap: 'clamp(32px, 5vw, 80px)',
                alignItems: 'center',
                padding: 'clamp(40px, 5vw, 72px) 0',
                borderTop: '1px solid var(--line)'
              }}>
                {reverse ? (
                  <>
                    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 12 }}>
                      {projs.slice(0, 2).map(pr => (
                        <a key={pr.slug} href={'#projects/' + pr.slug}
                           onClick={(e) => { e.preventDefault(); navigate('projects/' + pr.slug); window.scrollTo(0,0); }}
                           className="proj-card">
                          <div className="ph" style={{ aspectRatio: '3 / 4' }}>
                            <img src={pr.hero} alt={pr.name} loading="lazy" />
                          </div>
                          <div className="meta-row"><div className="name" style={{ fontSize: 15 }}>{pr.name}</div></div>
                        </a>
                      ))}
                    </div>
                    <SectorBlock s={s} count={projs.length} idx={i} navigate={navigate} />
                  </>
                ) : (
                  <>
                    <SectorBlock s={s} count={projs.length} idx={i} navigate={navigate} />
                    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 12 }}>
                      {projs.slice(0, 2).map(pr => (
                        <a key={pr.slug} href={'#projects/' + pr.slug}
                           onClick={(e) => { e.preventDefault(); navigate('projects/' + pr.slug); window.scrollTo(0,0); }}
                           className="proj-card">
                          <div className="ph" style={{ aspectRatio: '3 / 4' }}>
                            <img src={pr.hero} alt={pr.name} loading="lazy" />
                          </div>
                          <div className="meta-row"><div className="name" style={{ fontSize: 15 }}>{pr.name}</div></div>
                        </a>
                      ))}
                    </div>
                  </>
                )}
              </div>
            );
          })}
        </div>
      </section>
    </div>
  );
}

function SectorBlock({ s, count, idx, navigate }) {
  return (
    <div>
      <div className="label" style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
        <span style={{ fontFamily: 'var(--font-mono)', color: 'var(--muted)' }}>0{idx + 1}</span>
        <span style={{ width: 32, height: 1, background: 'var(--line)' }} />
        <span>{count} projects</span>
      </div>
      <div className="h2" style={{ marginTop: 14, maxWidth: '16ch' }}>{s.name}</div>
      <p style={{ marginTop: 18, color: 'var(--muted)', fontSize: 17, maxWidth: '46ch', lineHeight: 1.5, fontWeight: 300 }}>
        {s.desc}
      </p>
      <a href={'#projects?sector=' + s.id}
         onClick={(e) => { e.preventDefault(); navigate('projects?sector=' + s.id); }}
         className="link-arrow" style={{ marginTop: 28, display: 'inline-flex' }}>
        See {s.short.toLowerCase()} work →
      </a>
    </div>
  );
}

// ====================== SERVICES ======================
function ServicesPage({ navigate }) {
  const data = window.BHG_DATA;
  return (
    <div className="page">
      <section style={{ padding: 'clamp(48px, 6vw, 96px) 0 32px' }}>
        <div className="container">
          <div className="label">Services · Divisions</div>
          <h1 className="h1" style={{ marginTop: 16, maxWidth: '22ch' }}>
            Three connected practices. One delivery model.
          </h1>
          <div className="lede" style={{ marginTop: 20 }}>
            Architecture, interior design and MEP engineering, sized and staffed to run as a single project — or to be appointed independently.
          </div>
        </div>
      </section>

      <section style={{ paddingBottom: 'clamp(64px, 7vw, 120px)' }}>
        <div className="container">
          {data.divisions.map((d, i) => (
            <div key={d.n} style={{
              display: 'grid',
              gridTemplateColumns: '1fr 2fr',
              gap: 'clamp(32px, 5vw, 80px)',
              padding: 'clamp(40px, 5vw, 72px) 0',
              borderTop: '1px solid var(--line)'
            }} className="services-row">
              <div>
                <div className="label">Division {d.n}</div>
                <div className="h1" style={{ marginTop: 18, fontSize: 'clamp(36px, 4vw, 56px)' }}>{d.name}</div>
                <div className="label" style={{ marginTop: 14, color: 'var(--muted)' }}>{d.sub}</div>
              </div>
              <div>
                <p style={{ fontSize: 19, lineHeight: 1.5, fontWeight: 300, color: 'var(--ink-soft)', maxWidth: '58ch' }}>
                  {d.blurb}
                </p>
                <div style={{ marginTop: 32, paddingTop: 24, borderTop: '1px solid var(--line)' }}>
                  <div className="label" style={{ marginBottom: 16 }}>What that looks like in practice</div>
                  <ul style={{ listStyle: 'none', display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '10px 24px', fontSize: 15, color: 'var(--ink-soft)' }}>
                    {servicesBullets(d.name).map((b, j) => (
                      <li key={j} style={{ display: 'flex', gap: 12 }}>
                        <span style={{ fontFamily: 'var(--font-mono)', color: 'var(--muted)' }}>0{j + 1}</span>
                        <span>{b}</span>
                      </li>
                    ))}
                  </ul>
                </div>
                <a href="#projects" onClick={(e) => { e.preventDefault(); navigate('projects'); }} className="link-arrow" style={{ marginTop: 32, display: 'inline-flex' }}>
                  See projects →
                </a>
              </div>
            </div>
          ))}
        </div>
      </section>

      <section className="section cinematic-band">
        <div className="container" style={{ textAlign: 'center' }}>
          <div className="label" style={{ display: 'block', marginBottom: 24, color: 'rgba(255,255,255,0.6)' }}>Independent MEP appointments</div>
          <h2 className="h2" style={{ color: 'var(--paper)', maxWidth: '28ch', margin: '0 auto 32px' }}>
            Bluehaus Engineering takes independent MEP commissions — not only Bluehaus-designed buildings.
          </h2>
          <a href="#contact" onClick={(e) => { e.preventDefault(); navigate('contact'); }} className="btn btn-primary" style={{ background: 'var(--paper)', color: 'var(--ink)' }}>
            Brief our MEP team <span className="arr">→</span>
          </a>
        </div>
      </section>
    </div>
  );
}

function servicesBullets(name) {
  if (name === 'Architecture') return [
    'Concept design',
    'Schematic + DD',
    'Tender packages',
    'Construction administration',
    'Master-planning support',
    'In-house BIM / VR / AR',
  ];
  if (name === 'Interior Design') return [
    'Concept design',
    'FF&E specification',
    'Material libraries',
    'Lighting design',
    'Wayfinding integration',
    'Procurement coordination',
  ];
  return [
    'Mechanical systems',
    'Electrical systems',
    'Public health / plumbing',
    'Energy modelling',
    'LEED / WELL / Estidama',
    'Independent commissions',
  ];
}

// ====================== ABOUT ======================
function AboutPage({ navigate }) {
  const data = window.BHG_DATA;
  return (
    <div className="page">
      <section className="about-hero">
        <div className="container">
          <div className="label">Studio · Since 2003</div>
          <h1 style={{ marginTop: 28 }}>
            A regional studio with <span className="it">international</span> reach.
          </h1>
          <div className="lede">
            Founded in Dubai by Ben Corrigan in 2003, Bluehaus has spent over twenty years shaping the way the Middle East works, eats, shops and unwinds. In May 2025 we joined tp bennett, a 100-year-old London practice of 400+ designers — the studio you know, with a much bigger toolkit.
          </div>
        </div>
      </section>

      <section style={{ padding: '0 0 clamp(48px, 6vw, 80px)' }}>
        <div className="container">
          <div className="stat-row" style={{ borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}>
            {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>

      <section className="section-tight">
        <div className="container">
          <div className="about-cols">
            <div>
              <div className="label">Purpose</div>
              <h2 className="h2" style={{ marginTop: 18 }}>
                "To create inspirational, <span style={{ fontFamily: '"Newsreader", serif', fontStyle: 'italic', fontWeight: 300 }}>people-centric</span> and resilient environments people love — through memorable journeys."
              </h2>
            </div>
            <div>
              <div className="label">Values</div>
              <p style={{ marginTop: 18, fontSize: 18, lineHeight: 1.55, fontWeight: 300, color: 'var(--ink-soft)' }}>
                A deep respect and understanding of the importance of people, culture and relationships, and a focus on consistent people-first customer service, continuous improvement and innovation.
              </p>
              <p style={{ marginTop: 14, fontSize: 15, color: 'var(--muted)' }}>
                Founder Ben Corrigan describes his leadership model as <em>servant leader</em> — a stance the rest of the studio has taken on.
              </p>
            </div>
          </div>
        </div>
      </section>

      <section className="section-tight" style={{ background: 'var(--paper-soft)' }}>
        <div className="container">
          <SectionHead label="The tp bennett story" title={<>15 years of collaboration, <span style={{ fontFamily: '"Newsreader", serif', fontStyle: 'italic', fontWeight: 300 }}>made formal</span>.</>} />
          <div className="about-cols">
            <div>
              <p style={{ fontSize: 17, lineHeight: 1.55, fontWeight: 300, color: 'var(--ink-soft)' }}>
                On 22 May 2025, Bluehaus Group announced its merger with tp bennett, a London-headquartered architecture and interior design practice founded in 1921. The two firms had collaborated on regional and international projects for 15+ years before the deal.
              </p>
              <p style={{ fontSize: 17, lineHeight: 1.55, fontWeight: 300, color: 'var(--ink-soft)', marginTop: 16 }}>
                Founder & Managing Director Ben Corrigan joins the tp bennett board and continues to lead the Middle East region. The day-to-day studio in Dubai is unchanged — same people, same standards, with a deeper bench behind it.
              </p>
            </div>
            <div style={{ aspectRatio: '4 / 3', overflow: 'hidden' }}>
              <img src="media/news-tp-bennett-merger.webp" alt="tp bennett merger" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
            </div>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <SectionHead label="Leadership" title="The people behind the studio." />
          <div className="team-grid">
            {data.team.map(t => (
              <div key={t.name} className="team-card">
                <div className="portrait">
                  <div className="initials">{t.name.split(' ').map(n => n[0]).slice(0, 2).join('')}</div>
                </div>
                <div className="name">{t.name}</div>
                <div className="role">{t.role}</div>
              </div>
            ))}
          </div>
          <p style={{ marginTop: 32, fontSize: 13, color: 'var(--muted)', fontStyle: 'italic' }}>
            Post-merger portrait photography to follow.
          </p>
        </div>
      </section>
    </div>
  );
}

// ====================== AWARDS ======================
function AwardsPage({ navigate }) {
  const data = window.BHG_DATA;
  return (
    <div className="page">
      <section style={{ padding: 'clamp(48px, 6vw, 96px) 0 32px' }}>
        <div className="container">
          <div className="label">Awards & Recognition</div>
          <h1 className="h1" style={{ marginTop: 16, maxWidth: '22ch' }}>
            Attributed awards — by year, by issuer, by project.
          </h1>
          <div className="lede" style={{ marginTop: 20, maxWidth: '52ch' }}>
            We list every award against the project that earned it. No vague counts, no unattributed plaques.
          </div>
        </div>
      </section>

      <section style={{ paddingBottom: 'clamp(64px, 7vw, 120px)' }}>
        <div className="container">
          <div style={{ borderTop: '1px solid var(--line)' }}>
            {data.awards.map((a, i) => (
              <div key={i} style={{
                display: 'grid',
                gridTemplateColumns: '96px 1.4fr 1fr 0.8fr',
                gap: 24,
                padding: '28px 0',
                borderBottom: '1px solid var(--line)',
                alignItems: 'baseline',
              }} className="award-row-detail">
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 13, color: 'var(--muted)', letterSpacing: '0.08em' }}>{a.year}</div>
                <div style={{ fontFamily: 'var(--font-sans)', fontWeight: 500, fontSize: 19, letterSpacing: '-0.012em' }}>{a.name}</div>
                <div style={{ color: 'var(--muted)', fontSize: 15 }}>{a.project}</div>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.15em', textTransform: 'uppercase', color: 'var(--muted)', textAlign: 'right' }}>{a.issuer}</div>
              </div>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

// ====================== CONTACT ======================
function ContactPage({ navigate }) {
  const data = window.BHG_DATA;
  const [sent, setSent] = useState2(false);
  const [form, setForm] = useState2({
    name: '', email: '', company: '', phone: '',
    sector: 'workplace', type: 'new-build', location: '', message: ''
  });

  const submit = (e) => {
    e.preventDefault();
    setSent(true);
  };

  return (
    <div className="page">
      <section style={{ padding: 'clamp(48px, 6vw, 96px) 0 32px' }}>
        <div className="container">
          <div className="label">Contact · Start a project</div>
          <h1 className="h1" style={{ marginTop: 16, maxWidth: '22ch' }}>
            Tell us about your project.
          </h1>
          <div className="lede" style={{ marginTop: 20 }}>
            The Dubai studio routes every new-project enquiry within one working day. For non-project queries — careers, press, partnerships — use the same form and add a note.
          </div>
        </div>
      </section>

      <section style={{ paddingBottom: 'clamp(64px, 7vw, 120px)' }}>
        <div className="container">
          <div className="contact-grid">
            <div>
              {!sent ? (
                <form className="form" onSubmit={submit}>
                  <div className="form-row">
                    <div className="field">
                      <label>Your name</label>
                      <input required value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} placeholder="Jane Doe" />
                    </div>
                    <div className="field">
                      <label>Email</label>
                      <input required type="email" value={form.email} onChange={(e) => setForm({ ...form, email: e.target.value })} placeholder="jane@company.com" />
                    </div>
                  </div>
                  <div className="form-row">
                    <div className="field">
                      <label>Company</label>
                      <input value={form.company} onChange={(e) => setForm({ ...form, company: e.target.value })} placeholder="Company Ltd" />
                    </div>
                    <div className="field">
                      <label>Phone (optional)</label>
                      <input value={form.phone} onChange={(e) => setForm({ ...form, phone: e.target.value })} placeholder="+971 ..." />
                    </div>
                  </div>
                  <div className="form-row">
                    <div className="field">
                      <label>Sector</label>
                      <select value={form.sector} onChange={(e) => setForm({ ...form, sector: e.target.value })}>
                        {data.sectors.map(s => <option key={s.id} value={s.id}>{s.name}</option>)}
                        <option value="other">Other / not sure</option>
                      </select>
                    </div>
                    <div className="field">
                      <label>Project type</label>
                      <select value={form.type} onChange={(e) => setForm({ ...form, type: e.target.value })}>
                        <option value="new-build">New build</option>
                        <option value="fit-out">Fit-out</option>
                        <option value="refurbishment">Refurbishment</option>
                        <option value="mep">MEP only</option>
                        <option value="advisory">Advisory / feasibility</option>
                      </select>
                    </div>
                  </div>
                  <div className="field">
                    <label>Project location</label>
                    <input value={form.location} onChange={(e) => setForm({ ...form, location: e.target.value })} placeholder="Dubai, UAE" />
                  </div>
                  <div className="field">
                    <label>Tell us about the brief</label>
                    <textarea value={form.message} onChange={(e) => setForm({ ...form, message: e.target.value })} placeholder="Programme, scale, timing — whatever you've got." />
                  </div>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 16, marginTop: 16 }}>
                    <button type="submit" className="btn btn-blue">Send enquiry <span className="arr">→</span></button>
                    <div className="label">Or email <a href="mailto:info@bluehausgroup.com" style={{ textDecoration: 'underline' }}>info@bluehausgroup.com</a></div>
                  </div>
                </form>
              ) : (
                <div style={{ padding: '48px 32px', background: 'var(--paper-soft)', border: '1px solid var(--line)' }}>
                  <div className="label">Received</div>
                  <h2 className="h2" style={{ marginTop: 16 }}>Thanks, {form.name.split(' ')[0] || 'we have your enquiry'}.</h2>
                  <p style={{ marginTop: 16, color: 'var(--muted)', fontSize: 16, lineHeight: 1.55 }}>
                    A member of the Dubai studio will be in touch within one working day. In the meantime, we've sent a copy of your enquiry to {form.email || 'your inbox'} — and you're welcome to call the studio directly on <a href="tel:+97144520956" style={{ color: 'var(--ink)', textDecoration: 'underline' }}>+971 (4) 452 0956</a>.
                  </p>
                  <button className="btn btn-ghost" style={{ marginTop: 24 }} onClick={() => { setSent(false); setForm({ name: '', email: '', company: '', phone: '', sector: 'workplace', type: 'new-build', location: '', message: '' }); }}>
                    Send another enquiry
                  </button>
                </div>
              )}
            </div>

            <div>
              <div className="label">Offices</div>
              <div style={{ marginTop: 24 }}>
                {data.offices.map(o => (
                  <div key={o.city} className="office-card">
                    <div className="city">{o.city} <span className="tag">{o.tag}</span></div>
                    <div className="addr" style={{ whiteSpace: 'pre-line' }}>{o.addr}</div>
                    <div className="contact-line">
                      {o.phone !== 'On request' && o.phone !== 'Via tp bennett'
                        ? <a href={'tel:' + o.phone.replace(/\s/g, '')} style={{ borderBottom: '1px solid currentColor' }}>{o.phone}</a>
                        : <span style={{ color: 'var(--muted)' }}>{o.phone}</span>}
                      {'  ·  '}
                      <a href={'mailto:' + o.email} style={{ borderBottom: '1px solid currentColor' }}>{o.email}</a>
                    </div>
                  </div>
                ))}
              </div>

              <div style={{ marginTop: 48, padding: 28, border: '1px solid var(--line)', background: 'var(--paper-soft)' }}>
                <div className="label">Practice Profile</div>
                <h3 className="h3" style={{ marginTop: 12 }}>Download our Practice Profile (PDF, 18 MB).</h3>
                <p style={{ marginTop: 12, fontSize: 14, color: 'var(--muted)' }}>
                  A complete portfolio of recent work — workplace, hospitality, retail, healthcare and entertainment.
                </p>
                <button className="btn btn-ghost" style={{ marginTop: 18 }}>Download PDF <span className="arr">↓</span></button>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { SectorsPage, ServicesPage, AboutPage, AwardsPage, ContactPage });
