/* Location.jsx — real Google Maps embed (no API key needed) + address info card.
   "길찾기 (카카오맵)" 버튼은 카카오맵 검색 URL로 새 창 오픈.
   Rationale: spec §5.2. */

/* SRIKI 분당센터 — 경기 성남시 분당구 성남대로 393 B동 2층 215호 */
const LOC_QUERY = encodeURIComponent('경기 성남시 분당구 성남대로 393');
const MAP_EMBED_SRC =
  `https://maps.google.com/maps?q=${LOC_QUERY}&hl=ko&t=&z=17&ie=UTF8&iwloc=B&output=embed`;
const KAKAO_SEARCH_URL =
  `https://map.kakao.com/?q=${LOC_QUERY}`;

const Location = () => {
  const t = window.useT();
  const { lang } = React.useContext(window.LangContext);
  const isKo = lang === 'ko';
  return (
    <section id="location" className="section">
      <div className="section-inner">
        <div className="label-ko" style={{ marginBottom: 16 }}>{t('loc.eyebrow')}</div>
        <h2 style={{
          fontFamily: 'var(--font-sans)', fontFeatureSettings: '"ss01"',
          fontSize: 'clamp(15px, 4.6vw, 38px)', fontWeight: 700, letterSpacing: '-0.4px',
          color: '#0B1727', margin: 0, lineHeight: 1.22,
          whiteSpace: 'nowrap',
        }}>{t('loc.h2')}</h2>

        <div className="loc-row" style={{
          marginTop: 32,
          display: 'grid', gridTemplateColumns: '1.5fr 1fr',
          gap: 24, alignItems: 'stretch',
        }}>
          {/* Real Google Maps embed — no API key needed.
              Production swap to Kakao Maps JS SDK when API key is provisioned. */}
          <div className="card" style={{
            padding: 0, overflow: 'hidden',
            minHeight: 360, position: 'relative',
            lineHeight: 0,
          }}>
            <iframe
              title={isKo ? 'SRIKI 분당센터 위치' : 'SRIKI Bundang center · map'}
              src={MAP_EMBED_SRC}
              loading="lazy"
              referrerPolicy="no-referrer-when-downgrade"
              style={{
                display: 'block',
                width: '100%', height: '100%',
                minHeight: 360, border: 0,
              }}
            />
            {/* Floating label overlay */}
            <div style={{
              position: 'absolute', top: 14, left: 14,
              padding: '8px 14px',
              background: '#fff', border: '1px solid #E2E8F0', borderRadius: 8,
              fontFamily: 'var(--font-sans)', fontFeatureSettings: '"ss01"',
              fontSize: 13, fontWeight: 700, color: '#0B1727', whiteSpace: 'nowrap',
              boxShadow: '0 4px 12px rgba(15,23,42,0.10)',
              pointerEvents: 'none',
            }}>{isKo ? 'SRIKI 분당센터' : 'SRIKI Bundang center'}</div>
          </div>

          {/* Info */}
          <div className="card" style={{ padding: 26, display: 'flex', flexDirection: 'column' }}>
            <Row icon="pin"     label={t('loc.addr.l')}   value={t('loc.addr.v')} />
            <Row icon="subway"  label={t('loc.subway.l')} value={t('loc.subway.v')} />
            <Row icon="parking" label={t('loc.park.l')}   value={t('loc.park.v')} last />
            <div style={{ marginTop: 'auto', paddingTop: 22 }}>
              <a href={KAKAO_SEARCH_URL} target="_blank" rel="noopener noreferrer"
                 style={{ textDecoration: 'none' }}>
                <Button variant="primary" size="md">{t('loc.map')} →</Button>
              </a>
            </div>
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 820px) {
          .loc-row { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
};

const Row = ({ icon, label, value, last }) => {
  const ICONS = {
    pin:     <><path d="M12 2c3.9 0 7 3.1 7 7 0 5.2-7 13-7 13S5 14.2 5 9c0-3.9 3.1-7 7-7z"/><circle cx="12" cy="9" r="2.5"/></>,
    subway:  <><rect x="5" y="3" width="14" height="14" rx="3"/><line x1="9" y1="21" x2="7" y2="17"/><line x1="15" y1="21" x2="17" y2="17"/><line x1="5" y1="10" x2="19" y2="10"/></>,
    parking: <><rect x="3" y="3" width="18" height="18" rx="3"/><path d="M9 17V7h4a3 3 0 0 1 0 6H9"/></>,
  };
  return (
    <div style={{
      padding: '16px 0',
      borderBottom: last ? '0' : '1px solid #EEF2F7',
      display: 'flex', alignItems: 'flex-start', gap: 14,
    }}>
      <span style={{
        width: 34, height: 34, borderRadius: 9,
        background: 'rgba(109,40,217,0.10)', color: '#6D28D9',
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
        flexShrink: 0, marginTop: 2,
      }}>
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none"
          stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
          {ICONS[icon]}
        </svg>
      </span>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{
          fontFamily: 'var(--font-mono)', fontSize: 10, fontWeight: 700,
          color: '#94A3B8', textTransform: 'uppercase', letterSpacing: '0.08em',
          marginBottom: 6,
        }}>{label}</div>
        <div style={{
          fontSize: 14.5, fontWeight: 500,
          color: '#0B1727', lineHeight: 1.55,
        }}>{value}</div>
      </div>
    </div>
  );
};

window.Location = Location;