// Branches hub page \u2014 all six UAE locations with filterable list.

function Branches({ navigate, openTour }) {
  const [city, setCity] = useState('all');
  const dubai = BRANCHES.filter(b => b.city === 'Dubai');
  return (
    <div data-screen-label="04 Branches hub">
      <section style={{ paddingTop: 56, paddingBottom: 32 }}>
        <div className="wrap">
          <SectionHead eyebrow="Branches"
                       title="Six UAE nurseries. Five in Dubai. One in Abu Dhabi."
                       lead="Each branch has its own personality \u2014 a children's kitchen here, a sustainability plaza there \u2014 but the same Norwegian curriculum and the same toll-free line." />
          <div style={{ marginTop: 32, display: 'flex', gap: 8 }}>
            <FilterChip active={city === 'all'} onClick={() => setCity('all')}>All UAE \u00b7 6</FilterChip>
            <FilterChip active={city === 'Dubai'} onClick={() => setCity('Dubai')}>Dubai \u00b7 5</FilterChip>
            <FilterChip active={city === 'Abu Dhabi'} onClick={() => setCity('Abu Dhabi')}>Abu Dhabi \u00b7 1</FilterChip>
          </div>
        </div>
      </section>

      <section style={{ paddingTop: 0 }}>
        <div className="wrap">
          {(city === 'all' || city === 'Dubai') && (
            <>
              <div className="eyebrow" style={{ marginBottom: 24 }}>Dubai \u2014 5 branches</div>
              <div className="grid grid-3">
                {dubai.map(b => (
                  <BranchCard key={b.id} b={b} navigate={navigate} openTour={openTour} />
                ))}
              </div>
            </>
          )}

          {(city === 'all' || city === 'Abu Dhabi') && (
            <div style={{ marginTop: 64 }}>
              <div className="eyebrow" style={{ marginBottom: 24 }}>Abu Dhabi \u2014 1 branch</div>
              <div style={{ background: 'var(--cream)', border: '1px solid var(--line)', borderRadius: 22, padding: '32px 36px', display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 32, alignItems: 'center' }}>
                <div>
                  <div className="chip"><span style={{ width: 6, height: 6, borderRadius: 3, background: 'var(--dibber-green-2)' }}></span> {AD_BRANCH.city}</div>
                  <h2 className="serif" style={{ marginTop: 12 }}>{AD_BRANCH.name}</h2>
                  <p style={{ marginTop: 12, color: 'var(--muted)', maxWidth: 500 }}>{AD_BRANCH.blurb}</p>
                  <div style={{ display: 'flex', gap: 10, marginTop: 20 }}>
                    <button className="btn btn-primary" onClick={() => openTour({ branch: 'khalifa-city-a' })}>Book a tour</button>
                    <a className="btn btn-ghost" href={'mailto:' + AD_BRANCH.email}>{AD_BRANCH.email}</a>
                  </div>
                </div>
                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
                  {AD_BRANCH.features.map(f => <span key={f} className="chip">{f}</span>)}
                </div>
              </div>
            </div>
          )}

          {/* Sharjah flag for client only */}
          <div style={{ marginTop: 48, padding: '20px 24px', background: '#FFF4DD', border: '1px dashed #D9A85F', borderRadius: 14, display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 16 }}>
            <div>
              <div className="mono" style={{ fontSize: 11, color: '#7A4A0E', letterSpacing: '0.14em', textTransform: 'uppercase' }}>Internal note \u2014 not published</div>
              <div style={{ fontSize: 14, color: '#5A3A0A', marginTop: 4 }}>
                A Sharjah (Al Wasit) branch appears in the official picker but its status is unconfirmed. Holding back from publication until verified with client.
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

function FilterChip({ active, children, onClick }) {
  return (
    <button onClick={onClick}
            style={{
              padding: '10px 18px', borderRadius: 999,
              background: active ? 'var(--dibber-green)' : 'var(--sand)',
              color: active ? 'var(--cream)' : 'var(--dibber-green)',
              fontWeight: 600, fontSize: 13,
              border: '1.5px solid ' + (active ? 'var(--dibber-green)' : 'var(--line)'),
            }}>
      {children}
    </button>
  );
}

function BranchCard({ b, navigate, openTour }) {
  return (
    <div style={{ background: 'var(--cream)', border: '1px solid var(--line)', borderRadius: 20, overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
      <button onClick={() => navigate({ name: 'branch', id: b.id })} style={{ display: 'block', height: 220, background: b.accent + '22', cursor: 'pointer', overflow: 'hidden' }}>
        <SafeImg src={b.photos?.[0]} alt={b.name} label={b.name} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
      </button>
      <div style={{ padding: '22px 24px', display: 'flex', flexDirection: 'column', gap: 12, flex: 1 }}>
        <div>
          <div className="mono" style={{ fontSize: 11, color: 'var(--muted)', letterSpacing: '0.14em', textTransform: 'uppercase' }}>{b.city}</div>
          <div className="serif" style={{ fontSize: 24, color: 'var(--dibber-green)', fontWeight: 600, marginTop: 4 }}>{b.name}</div>
          <div style={{ fontSize: 13, color: 'var(--muted)', marginTop: 4 }}>{b.area}</div>
        </div>
        <p style={{ fontSize: 14, color: 'var(--ink)', flex: 1 }}>{b.blurb}</p>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
          {b.features.slice(0, 3).map(f => <span key={f} className="chip">{f}</span>)}
        </div>
        <div style={{ display: 'flex', gap: 10, marginTop: 4 }}>
          <button className="btn btn-primary" style={{ flex: 1, padding: '11px 16px', fontSize: 14 }} onClick={() => openTour({ branch: b.id })}>Book tour</button>
          <button className="btn btn-ghost" style={{ padding: '11px 16px', fontSize: 14 }} onClick={() => navigate({ name: 'branch', id: b.id })}>Visit page</button>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Branches });