// Per-branch landing page \u2014 the core deliverable, data-driven from BRANCHES.

function BranchPage({ id, navigate, openTour }) {
  const b = BRANCHES.find(x => x.id === id) || BRANCHES[0];
  const [gIdx, setGIdx] = useState(0);
  useEffect(() => { setGIdx(0); window.scrollTo(0, 0); }, [id]);

  const photos = b.photos || [];
  const cur = photos[gIdx] || photos[0];

  return (
    <div data-screen-label={`05 Branch \u2014 ${b.name}`}>
      {/* Breadcrumb */}
      <div className="wrap" style={{ paddingTop: 24, fontSize: 13, color: 'var(--muted)' }}>
        <button onClick={() => navigate({ name: 'home' })} style={{ color: 'var(--muted)' }}>Home</button>
        <span style={{ margin: '0 8px' }}>/</span>
        <button onClick={() => navigate({ name: 'branches' })} style={{ color: 'var(--muted)' }}>Branches</button>
        <span style={{ margin: '0 8px' }}>/</span>
        <span style={{ color: 'var(--dibber-green)' }}>{b.name}</span>
      </div>

      {/* Hero */}
      <section style={{ paddingTop: 40, paddingBottom: 56 }}>
        <div className="wrap">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 56, alignItems: 'center' }}>
            <div>
              <div className="chip"><span style={{ width: 6, height: 6, borderRadius: 3, background: b.accent }}></span> {b.city}</div>
              <h1 className="serif" style={{ marginTop: 18 }}>
                Dibber Nursery<br/>
                <em style={{ fontStyle: 'italic', color: 'var(--dibber-green-2)' }}>{b.name}</em>
              </h1>
              <p className="lead" style={{ marginTop: 18, maxWidth: 520 }}>{b.blurb}</p>
              <div style={{ display: 'flex', gap: 12, marginTop: 28, flexWrap: 'wrap' }}>
                <button className="btn btn-primary" onClick={() => openTour({ branch: b.id })}>Book a tour at {b.name}</button>
                <a className="btn btn-ghost" href={`https://wa.link/95m057`} target="_blank" rel="noopener">WhatsApp this branch</a>
              </div>
              <div style={{ marginTop: 28, display: 'flex', gap: 24, flexWrap: 'wrap' }}>
                <div>
                  <div className="mono" style={{ fontSize: 11, color: 'var(--muted)', letterSpacing: '0.14em', textTransform: 'uppercase' }}>Branch manager</div>
                  <div className="serif" style={{ fontSize: 17, color: 'var(--dibber-green)', fontWeight: 600, marginTop: 4 }}>{b.manager}</div>
                </div>
                <div>
                  <div className="mono" style={{ fontSize: 11, color: 'var(--muted)', letterSpacing: '0.14em', textTransform: 'uppercase' }}>Branch email</div>
                  <a href={'mailto:' + b.email} className="serif" style={{ fontSize: 17, color: 'var(--dibber-green)', fontWeight: 600, display: 'block', marginTop: 4 }}>{b.email}</a>
                </div>
              </div>
            </div>
            {/* Main image */}
            <div>
              <div style={{ borderRadius: 24, overflow: 'hidden', position: 'relative' }}>
                <SafeImg src={cur} alt={`${b.name} interior`} label={`${b.name} interior`}
                         style={{ width: '100%', height: 480, objectFit: 'cover', display: 'block', transition: 'opacity .2s' }} />
                <div style={{ position: 'absolute', bottom: 14, left: 14, padding: '6px 12px', borderRadius: 999, background: 'rgba(251,248,240,0.9)', color: 'var(--dibber-green)', fontSize: 12, fontFamily: 'var(--mono)', letterSpacing: '0.12em', textTransform: 'uppercase' }}>
                  Photo {gIdx + 1} / {photos.length}
                </div>
              </div>
              {photos.length > 1 && (
                <div style={{ display: 'flex', gap: 10, marginTop: 14, overflowX: 'auto' }}>
                  {photos.map((p, i) => (
                    <button key={p} onClick={() => setGIdx(i)} style={{ flex: '0 0 96px', height: 72, borderRadius: 12, overflow: 'hidden', border: gIdx === i ? '2px solid var(--dibber-green)' : '2px solid transparent', cursor: 'pointer' }}>
                      <SafeImg src={p} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
                    </button>
                  ))}
                </div>
              )}
            </div>
          </div>
        </div>
      </section>

      {/* Quick facts strip */}
      <section style={{ padding: 0 }}>
        <div className="wrap">
          <div style={{ background: 'var(--cream)', border: '1px solid var(--line)', borderRadius: 20, padding: '24px 28px', display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 28 }}>
            {[
              ['Hours',      'Mon\u2013Fri, 7:30 \u2013 18:00'],
              ['Ages',       '45 days \u2013 6 years'],
              ['Classrooms', String(b.classrooms)],
              ['Regulator',  b.city === 'Dubai' ? 'KHDA-licensed ECC' : 'ADEK-regulated'],
              ['Curriculum', 'Norwegian Rammeplan'],
            ].map(([k, v]) => (
              <div key={k}>
                <div className="mono" style={{ fontSize: 10, color: 'var(--muted)', letterSpacing: '0.14em', textTransform: 'uppercase' }}>{k}</div>
                <div className="serif" style={{ fontSize: 17, color: 'var(--dibber-green)', fontWeight: 600, marginTop: 4 }}>{v}</div>
              </div>
            ))}
          </div>
        </div>
        <style>{`@media (max-width: 900px){.wrap > div[style*="grid-template-columns: repeat(5"] { grid-template-columns: repeat(2, 1fr) !important; }}`}</style>
      </section>

      {/* About + facilities */}
      <section>
        <div className="wrap">
          <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 56, alignItems: 'flex-start' }}>
            <div>
              <div className="eyebrow">About this branch</div>
              <h2 className="serif" style={{ marginTop: 14 }}>What a day at {b.name.split('(')[0].trim()} looks like.</h2>
              <p className="lead" style={{ marginTop: 18 }}>
                The day opens with a calm welcome and Heart Culture circle. Morning explorations run through the seven characters \u2014 numbers
                with Counting Connie, language with Rhyming Roger, nature with Woody Woo. Lunch is taught (not just served). Afternoons settle
                into rest, story, and free play.
              </p>
              <p style={{ marginTop: 14, color: 'var(--muted)' }}>
                Educators meet the KHDA requirements; ratios and named staff lists are shared with families on tour. We won&rsquo;t print specifics we can&rsquo;t verify per branch.
              </p>

              <div className="mt-8">
                <div className="eyebrow">Facilities</div>
                <div className="grid grid-2 mt-4" style={{ gap: 12 }}>
                  {b.features.map(f => (
                    <div key={f} style={{ padding: '14px 16px', background: 'var(--sand)', borderRadius: 12, display: 'flex', alignItems: 'center', gap: 12 }}>
                      <span style={{ width: 8, height: 8, borderRadius: 4, background: b.accent }}></span>
                      <span style={{ fontSize: 14 }}>{f}</span>
                    </div>
                  ))}
                </div>
              </div>

              {b.flag && (
                <div style={{ marginTop: 24, padding: '14px 16px', background: '#FFF4DD', border: '1px dashed #D9A85F', borderRadius: 12, fontSize: 13, color: '#7A4A0E', fontFamily: 'var(--mono)' }}>
                  Note (internal): {b.flag}
                </div>
              )}
            </div>

            {/* Address + map placeholder */}
            <div style={{ position: 'sticky', top: 100 }}>
              <div style={{ background: 'var(--cream)', border: '1px solid var(--line)', borderRadius: 20, overflow: 'hidden' }}>
                <div style={{ height: 280, background: 'var(--sprout-soft)', position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'center', overflow: 'hidden' }}>
                  {/* Stylised map */}
                  <MapStylised accent={b.accent} />
                  <div style={{ position: 'absolute', bottom: 12, left: 12 }} className="flag">Map coords \u2014 client to confirm</div>
                </div>
                <div style={{ padding: '22px 24px' }}>
                  <div className="eyebrow">Where to find us</div>
                  <div className="serif" style={{ fontSize: 19, color: 'var(--dibber-green)', fontWeight: 600, marginTop: 8 }}>{b.addressFull}</div>
                  <div style={{ marginTop: 16, display: 'flex', flexDirection: 'column', gap: 8, fontSize: 14 }}>
                    <a href="tel:800342237" style={{ color: 'var(--dibber-green-2)', fontWeight: 600 }}>\u260f 800-DIBBER (800 342237)</a>
                    <a href={'mailto:' + b.email} style={{ color: 'var(--dibber-green-2)', fontWeight: 600 }}>\u2709 {b.email}</a>
                  </div>
                  <div style={{ display: 'flex', gap: 10, marginTop: 20 }}>
                    <button className="btn btn-primary" style={{ flex: 1 }} onClick={() => openTour({ branch: b.id })}>Book a tour</button>
                  </div>
                </div>
              </div>

              <div style={{ marginTop: 20, padding: '20px 22px', background: 'var(--sprout-soft)', border: '1px solid var(--sprout)', borderRadius: 18 }}>
                <div className="eyebrow">Trust note</div>
                <div className="serif" style={{ fontSize: 17, color: 'var(--dibber-green)', fontWeight: 600, marginTop: 8 }}>{b.badge}</div>
                <p style={{ fontSize: 13, color: 'var(--muted)', marginTop: 8 }}>
                  KHDA registers Early Childhood Centres but does not star-grade nurseries. We never publish unverified ratings.
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Other branches */}
      <section className="section-sand">
        <div className="wrap">
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', flexWrap: 'wrap', gap: 24, marginBottom: 32 }}>
            <SectionHead eyebrow="Other Dubai branches" title="Not the right area? Try another." />
            <button className="btn btn-ghost" onClick={() => navigate({ name: 'branches' })}>See all branches</button>
          </div>
          <div className="grid grid-4">
            {BRANCHES.filter(x => x.id !== b.id).slice(0, 4).map(other => (
              <button key={other.id} onClick={() => navigate({ name: 'branch', id: other.id })} style={{ textAlign: 'left', borderRadius: 16, overflow: 'hidden', background: 'var(--cream)', border: '1px solid var(--line)' }}>
                <div style={{ height: 140, overflow: 'hidden' }}>
                  <SafeImg src={other.photos?.[0]} alt="" label={other.name} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
                </div>
                <div style={{ padding: 16 }}>
                  <div className="serif" style={{ fontSize: 17, color: 'var(--dibber-green)', fontWeight: 600 }}>{other.name}</div>
                  <div style={{ fontSize: 12, color: 'var(--muted)', marginTop: 2 }}>{other.area}</div>
                </div>
              </button>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

// A stylised map graphic \u2014 used because real coords aren't verified.
function MapStylised({ accent = '#7FB069' }) {
  return (
    <svg viewBox="0 0 400 280" width="100%" height="100%" style={{ display: 'block' }}>
      <defs>
        <pattern id="dots" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
          <circle cx="2" cy="2" r="1" fill="#13452A" opacity="0.08" />
        </pattern>
      </defs>
      <rect width="400" height="280" fill="#E5F2D4"/>
      <rect width="400" height="280" fill="url(#dots)"/>
      {/* Roads */}
      <path d="M -10 90 C 80 70, 200 130, 410 110" stroke="#FBF8F0" strokeWidth="22" fill="none" opacity="0.7"/>
      <path d="M -10 90 C 80 70, 200 130, 410 110" stroke="#1F6B3B" strokeWidth="1.5" fill="none" strokeDasharray="6 6" opacity="0.4"/>
      <path d="M 220 -10 C 230 80, 180 160, 250 290" stroke="#FBF8F0" strokeWidth="18" fill="none" opacity="0.6"/>
      <path d="M 220 -10 C 230 80, 180 160, 250 290" stroke="#1F6B3B" strokeWidth="1.5" fill="none" strokeDasharray="6 6" opacity="0.4"/>
      {/* Parks */}
      <ellipse cx="80" cy="220" rx="80" ry="50" fill="#A9C97A" opacity="0.55"/>
      <ellipse cx="350" cy="50" rx="50" ry="35" fill="#A9C97A" opacity="0.4"/>
      {/* Pin */}
      <g transform="translate(200,140)">
        <circle r="30" fill={accent} opacity="0.25"/>
        <circle r="14" fill="#13452A"/>
        <circle r="6" fill="#FBF8F0"/>
      </g>
    </svg>
  );
}

Object.assign(window, { BranchPage });