/* Find Us page — branch switcher with map highlight */

const BRANCHES = [
  {
    key: 'bukit-jelutong', label: 'Bukit Jelutong', color: 'orange',
    address: 'Jalan Indah, Bukit Jelutong, 40150 Shah Alam, Selangor',
    hours: 'Mon – Thu · 7:00am – 6:30pm\nFriday · 7:00am – 6:00pm',
    instagram: '@mahirdhuha.bj',
    fb: 'https://www.facebook.com/MDBukitJelutong/',
    coord: { x: 28, y: 52 },
    lead: 'Our flagship branch — leafy, green and right in the heart of Bukit Jelutong.',
    landmarks: ['Walking distance from Bukit Jelutong Mosque', '5 min from Aeon Bukit Raja', 'Spacious outdoor playground'],
  },
  {
    key: 'kota-damansara', label: 'Kota Damansara', color: 'sky',
    address: 'Seksyen 19, Kota Damansara, 47810 Petaling Jaya, Selangor',
    hours: 'Mon – Thu · 7:00am – 6:30pm\nFriday · 7:00am – 6:00pm',
    instagram: '@mahirdhuha.kd · @mahirdhuha19',
    fb: 'https://www.facebook.com/',
    coord: { x: 42, y: 38 },
    lead: 'A bright, modern campus serving Kota Damansara families since 2018.',
    landmarks: ['Near Sunway Giza Mall', 'Easy access from NKVE & LDP', 'Indoor & outdoor learning zones'],
  },
  {
    key: 'cyberjaya', label: 'Cyberjaya', color: 'mint',
    address: 'Cyberjaya, 63000 Cyberjaya, Selangor',
    hours: 'Mon – Thu · 7:00am – 6:30pm\nFriday · 7:00am – 6:00pm',
    instagram: '@mahirdhuha.cj',
    fb: 'https://www.facebook.com/',
    coord: { x: 56, y: 78 },
    lead: 'Our newest home — purpose-built for the families of Cyberjaya & Putrajaya.',
    landmarks: ['Close to Cyberjaya MRT', '10 min from Putrajaya Mosque', 'Brand new facilities'],
  },
];

function FindHero() {
  return (
    <section style={{ position: 'relative', overflow: 'hidden', paddingTop: 60, paddingBottom: 0, background: 'linear-gradient(180deg, #FFD9B8 0%, #FFE7C8 100%)' }}>
      <Cloud size={130} style={{ top: '15%', left: '6%' }} />
      <Cloud size={90} style={{ top: '30%', right: '12%' }} />
      <Star size={28} color="var(--yellow)" style={{ top: '20%', right: '30%' }} />
      <Planet style={{ bottom: '10%', left: '6%' }} color="var(--rose)" />

      <div className="container" style={{ position: 'relative', zIndex: 2, padding: '80px 32px 100px', textAlign: 'center' }}>
        <span className="section-eyebrow"><span className="dot-marker" /> Find Us</span>
        <h1 style={{ fontSize: 'clamp(44px, 6vw, 80px)', fontWeight: 600, lineHeight: 1, letterSpacing: '-0.02em' }}>
          Three campuses, <span style={{ color: 'var(--orange)' }}>one</span> family
        </h1>
        <p className="section-lead" style={{ margin: '24px auto 0' }}>
          Visit us, take a tour, and meet the team. We'd love to show you around.
        </p>
      </div>
      <div style={{ position: 'relative', height: 80, marginTop: -20 }}>
        <svg viewBox="0 0 1440 100" preserveAspectRatio="none" style={{ width: '100%', height: '100%' }}>
          <path d="M0,100 L0,60 Q60,30 140,55 Q200,15 280,45 Q360,10 440,40 Q520,5 600,35 Q680,0 760,30 Q840,5 920,35 Q1000,15 1080,40 Q1160,10 1240,45 Q1320,20 1400,50 Q1440,55 1440,100 Z" fill="#FFF8EE" />
        </svg>
      </div>
    </section>
  );
}

function StylizedMap({ active, setActive }) {
  return (
    <div style={{ position: 'relative', borderRadius: 32, overflow: 'hidden', height: '100%', minHeight: 540, background: 'linear-gradient(180deg, #DCF2F8 0%, #E8F5C4 100%)', boxShadow: 'var(--shadow-md)' }}>
      <svg viewBox="0 0 100 100" preserveAspectRatio="none" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
        {/* Stylized Klang Valley map */}
        <defs>
          <pattern id="grid" width="6" height="6" patternUnits="userSpaceOnUse">
            <path d="M 6 0 L 0 0 0 6" fill="none" stroke="rgba(42,42,42,0.04)" strokeWidth="0.3" />
          </pattern>
        </defs>
        <rect width="100" height="100" fill="url(#grid)" />

        {/* Roads */}
        <path d="M0 50 Q 30 45 50 50 T 100 55" stroke="#fff" strokeWidth="1.5" fill="none" opacity="0.8" />
        <path d="M0 30 Q 40 35 60 28 T 100 25" stroke="#fff" strokeWidth="1.2" fill="none" opacity="0.6" />
        <path d="M20 0 Q 25 40 30 70 T 35 100" stroke="#fff" strokeWidth="1.2" fill="none" opacity="0.6" />
        <path d="M50 0 Q 55 30 50 60 T 55 100" stroke="#fff" strokeWidth="1.2" fill="none" opacity="0.6" />
        <path d="M80 0 Q 75 30 78 60 T 75 100" stroke="#fff" strokeWidth="1.2" fill="none" opacity="0.6" />

        {/* Green parks */}
        <ellipse cx="20" cy="20" rx="10" ry="6" fill="#C8EB6A" opacity="0.5" />
        <ellipse cx="70" cy="65" rx="12" ry="8" fill="#C8EB6A" opacity="0.5" />
        <ellipse cx="45" cy="80" rx="8" ry="5" fill="#C8EB6A" opacity="0.5" />

        {/* Water */}
        <path d="M70 5 Q 78 10 76 18 Q 90 18 88 30 Q 100 32 100 0 L 70 0 Z" fill="#A8DEEC" opacity="0.6" />
      </svg>

      {/* Region labels */}
      <span style={{ position: 'absolute', top: '28%', left: '14%', fontSize: 11, color: 'var(--charcoal-soft)', fontWeight: 600, letterSpacing: '0.1em' }}>SHAH ALAM</span>
      <span style={{ position: 'absolute', top: '14%', left: '50%', fontSize: 11, color: 'var(--charcoal-soft)', fontWeight: 600, letterSpacing: '0.1em' }}>PETALING JAYA</span>
      <span style={{ position: 'absolute', top: '70%', left: '40%', fontSize: 11, color: 'var(--charcoal-soft)', fontWeight: 600, letterSpacing: '0.1em' }}>PUTRAJAYA</span>
      <span style={{ position: 'absolute', bottom: '14%', right: '20%', fontSize: 9, color: 'var(--charcoal-soft)', fontWeight: 600, letterSpacing: '0.1em' }}>KLIA →</span>

      {/* Pins */}
      {BRANCHES.map(b => {
        const isActive = active === b.key;
        const palette = b.color === 'orange' ? '#FF6A1A' : b.color === 'sky' ? '#7AC8DC' : '#A8D14E';
        return (
          <button key={b.key} onClick={() => setActive(b.key)}
            style={{
              position: 'absolute',
              left: `${b.coord.x}%`,
              top: `${b.coord.y}%`,
              transform: 'translate(-50%, -100%)',
              padding: 0,
              background: 'transparent',
              cursor: 'pointer',
              zIndex: isActive ? 3 : 2,
              transition: 'transform 0.25s',
            }}
            onMouseEnter={(e) => e.currentTarget.style.transform = 'translate(-50%, -100%) scale(1.1)'}
            onMouseLeave={(e) => e.currentTarget.style.transform = 'translate(-50%, -100%) scale(1)'}>
            {isActive && (
              <span style={{ position: 'absolute', left: '50%', top: '50%', transform: 'translate(-50%, -50%)', width: 80, height: 80, borderRadius: '50%', background: palette, opacity: 0.2, animation: 'ping 1.6s ease-out infinite' }} />
            )}
            <div style={{
              padding: '8px 14px',
              background: isActive ? palette : '#fff',
              color: isActive ? '#fff' : 'var(--charcoal)',
              borderRadius: 999,
              fontSize: 13,
              fontWeight: 700,
              boxShadow: isActive ? '0 8px 22px rgba(0,0,0,0.20)' : 'var(--shadow-sm)',
              whiteSpace: 'nowrap',
              border: isActive ? 'none' : `2px solid ${palette}`,
            }}>📍 {b.label}</div>
            <svg width="16" height="12" style={{ display: 'block', margin: '0 auto', marginTop: -2 }}>
              <polygon points="8,12 0,0 16,0" fill={isActive ? palette : '#fff'} stroke={palette} strokeWidth="1.5" />
            </svg>
          </button>
        );
      })}

      {/* Compass */}
      <div style={{ position: 'absolute', top: 16, right: 16, width: 50, height: 50, borderRadius: '50%', background: '#fff', boxShadow: 'var(--shadow-sm)', display: 'grid', placeItems: 'center', fontFamily: 'Fredoka', fontWeight: 700 }}>
        <div style={{ textAlign: 'center', fontSize: 10, lineHeight: 1.1 }}>
          <div style={{ color: 'var(--orange)' }}>N</div>
          <div style={{ fontSize: 16 }}>✦</div>
        </div>
      </div>

      <style>{`@keyframes ping { 0% { transform: translate(-50%, -50%) scale(0.6); opacity: 0.6; } 100% { transform: translate(-50%, -50%) scale(2); opacity: 0; } }`}</style>
    </div>
  );
}

function BranchInfo({ b, onEnroll }) {
  const palette = b.color === 'orange' ? '#FF6A1A' : b.color === 'sky' ? '#7AC8DC' : '#A8D14E';
  return (
    <div className="pop-in" key={b.key} style={{ background: '#fff', borderRadius: 32, padding: 32, boxShadow: 'var(--shadow-md)', height: '100%', display: 'flex', flexDirection: 'column' }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 18 }}>
        <Pill color={b.color === 'orange' ? 'orange' : b.color}>📍 Branch</Pill>
        <span className="handwritten" style={{ fontSize: 22, color: palette, transform: 'rotate(-3deg)' }}>Open for tours!</span>
      </div>
      <h2 style={{ fontFamily: 'Fredoka', fontSize: 36, marginBottom: 8 }}>{b.label}</h2>
      <p style={{ fontSize: 16, color: 'var(--charcoal-soft)', marginBottom: 24, lineHeight: 1.5 }}>{b.lead}</p>

      <InfoRow icon="📍" label="Address" value={b.address} />
      <InfoRow icon="🕘" label="Operating hours" value={b.hours} />
      <InfoRow icon="📞" label="Phone & WhatsApp" value={PHONE} />
      <InfoRow icon="📷" label="Instagram" value={b.instagram} />

      <div style={{ marginTop: 24, padding: 20, borderRadius: 18, background: 'var(--cream)' }}>
        <div style={{ fontSize: 12, fontWeight: 700, color: 'var(--charcoal-soft)', letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: 10 }}>Nearby</div>
        <ul style={{ margin: 0, padding: 0, listStyle: 'none' }}>
          {b.landmarks.map((l, i) => (
            <li key={i} style={{ fontSize: 14, padding: '6px 0', display: 'flex', alignItems: 'center', gap: 10 }}>
              <span style={{ color: palette }}>✦</span> {l}
            </li>
          ))}
        </ul>
      </div>

      <div style={{ display: 'flex', gap: 10, marginTop: 24, flexWrap: 'wrap' }}>
        <button className="btn btn-primary" onClick={onEnroll} style={{ flex: 1, justifyContent: 'center' }}>Book a tour →</button>
        <a href={WA_LINK} target="_blank" rel="noreferrer" className="btn btn-whatsapp" style={{ flex: 1, justifyContent: 'center' }}>WhatsApp</a>
      </div>
    </div>
  );
}

function InfoRow({ icon, label, value }) {
  return (
    <div style={{ display: 'flex', gap: 14, alignItems: 'flex-start', padding: '10px 0', borderTop: '1px dashed rgba(42,42,42,0.08)' }}>
      <div style={{ width: 36, height: 36, borderRadius: 12, background: 'var(--cream)', display: 'grid', placeItems: 'center', fontSize: 18, flex: '0 0 auto' }}>{icon}</div>
      <div style={{ flex: 1 }}>
        <div style={{ fontSize: 11, color: 'var(--charcoal-soft)', fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase' }}>{label}</div>
        <div style={{ fontSize: 14, color: 'var(--charcoal)', whiteSpace: 'pre-line', fontWeight: 500 }}>{value}</div>
      </div>
    </div>
  );
}

function FindUsApp() {
  // read ?b= query string for deep linking
  const initial = (() => {
    const m = (typeof window !== 'undefined') && window.location.search.match(/b=([^&]+)/);
    return m && BRANCHES.find(b => b.key === m[1]) ? m[1] : 'bukit-jelutong';
  })();
  const [active, setActive] = useState(initial);
  const [enrollOpen, setEnrollOpen] = useState(false);
  const branch = BRANCHES.find(b => b.key === active);

  return (
    <div className="page" data-screen-label="Find Us">
      <Header active="find" onEnroll={() => setEnrollOpen(true)} />
      <FindHero />

      <section style={{ padding: '40px 0 60px' }}>
        <div className="container">
          <div style={{ display: 'flex', gap: 8, justifyContent: 'center', flexWrap: 'wrap', marginBottom: 32 }}>
            {BRANCHES.map(b => (
              <button key={b.key} onClick={() => setActive(b.key)}
                style={{
                  padding: '14px 22px',
                  borderRadius: 999,
                  background: active === b.key ? 'var(--charcoal)' : '#fff',
                  color: active === b.key ? '#fff' : 'var(--charcoal)',
                  fontWeight: 700,
                  fontSize: 14,
                  boxShadow: active === b.key ? 'var(--shadow-md)' : 'var(--shadow-sm)',
                  display: 'flex',
                  alignItems: 'center',
                  gap: 8,
                }}>
                <span style={{ width: 10, height: 10, borderRadius: '50%', background: b.color === 'orange' ? '#FF6A1A' : b.color === 'sky' ? '#7AC8DC' : '#A8D14E' }} />
                {b.label}
              </button>
            ))}
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24, alignItems: 'stretch' }}>
            <StylizedMap active={active} setActive={setActive} />
            <BranchInfo b={branch} onEnroll={() => setEnrollOpen(true)} />
          </div>
        </div>
      </section>

      <section style={{ padding: '20px 0 80px' }}>
        <div className="container">
          <div style={{ background: 'var(--charcoal)', borderRadius: 32, padding: '50px 40px', color: '#fff', display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 30, alignItems: 'center' }}>
            <div>
              <h3 style={{ color: '#fff', fontSize: 28, marginBottom: 8 }}>Can't decide which branch?</h3>
              <p style={{ color: 'rgba(255,255,255,0.8)', fontSize: 16 }}>Send us a quick message — we'll help you pick the closest, recommend a tour time, and answer any questions.</p>
            </div>
            <div style={{ display: 'flex', gap: 10, justifyContent: 'flex-end', flexWrap: 'wrap' }}>
              <a href={`tel:${PHONE_TEL}`} className="btn btn-primary">📞 {PHONE}</a>
              <a href={WA_LINK} target="_blank" rel="noreferrer" className="btn btn-whatsapp">WhatsApp</a>
            </div>
          </div>
        </div>
      </section>

      <Footer />
      <FloatingCTAs />
      <EnrollmentModal open={enrollOpen} onClose={() => setEnrollOpen(false)} />
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<FindUsApp />);