// Pages — routable sections

function PageBase({ title, kicker, children }) {
  return (
    <main style={{ minHeight: '60vh', paddingTop: 80, paddingBottom: 120 }}>
      <div style={{ maxWidth: 1320, margin: '0 auto', padding: '0 clamp(20px, 4vw, 32px)' }}>
        {kicker && (
          <div style={{
            fontFamily: 'ui-monospace, monospace',
            fontSize: 11, color: '#2ECC71', letterSpacing: '0.18em',
            textTransform: 'uppercase', marginBottom: 14,
          }}>{kicker}</div>
        )}
        <h1 style={{
          fontFamily: '"Sora", system-ui, sans-serif',
          fontSize: 'clamp(32px, 5vw, 56px)',
          fontWeight: 700, color: '#fff',
          margin: '0 0 52px', lineHeight: 1.1,
        }}>{title}</h1>
        {children}
      </div>
    </main>
  );
}

function ComingSoonStub({ title, kicker }) {
  return (
    <PageBase title={title} kicker={kicker}>
      <div style={{
        display: 'inline-flex', alignItems: 'center', gap: 10,
        color: 'rgba(255,255,255,0.35)',
        fontFamily: 'ui-monospace, monospace',
        fontSize: 12, letterSpacing: '0.1em',
        border: '1px solid rgba(255,255,255,0.08)',
        padding: '12px 20px', borderRadius: 8,
      }}>
        <span style={{
          width: 7, height: 7, borderRadius: '50%',
          background: 'rgba(46,204,113,0.45)',
          boxShadow: '0 0 8px rgba(46,204,113,0.3)',
        }} />
        Sección en construcción
      </div>
    </PageBase>
  );
}

const _card = {
  background: 'rgba(255,255,255,0.03)',
  border: '1px solid rgba(255,255,255,0.08)',
  borderRadius: 16, padding: '28px 24px',
};
const _cardLabel = {
  fontFamily: 'ui-monospace, monospace', fontSize: 11,
  color: '#2ECC71', letterSpacing: '0.14em',
  textTransform: 'uppercase', marginBottom: 10,
};
const _cardVal = {
  fontFamily: '"Sora", sans-serif', fontSize: 19,
  fontWeight: 600, color: '#fff', margin: '0 0 6px',
};

function UbicacionPage() {
  return (
    <PageBase title="Encuéntranos" kicker="— Ubicación y contacto">
      <div style={{
        marginBottom: 56, borderRadius: 16, overflow: 'hidden',
        border: '1px solid rgba(255,255,255,0.08)',
      }}>
        <iframe
          src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3323.921626505577!2d-70.598961!3d-33.5813841!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x9662d7800d2842fb%3A0x77a454bcc226cfb!2sGrow%20shop%20satindica!5e0!3m2!1ses-419!2scl!4v1778517480039!5m2!1ses-419!2scl"
          width="100%" height="420"
          style={{ border: 0, display: 'block' }}
          allowFullScreen
          loading="lazy"
          referrerPolicy="no-referrer-when-downgrade"
        />
      </div>

      <div style={{
        display: 'grid',
        gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))',
        gap: 20,
      }}>
        <div style={_card}>
          <div style={{ fontSize: 26, marginBottom: 14 }}>📍</div>
          <div style={_cardLabel}>Dirección</div>
          <p style={_cardVal}>Av. Gabriela Pte. 1425, local 2</p>
          <p style={{ margin: 0, fontFamily: 'Inter, sans-serif', fontSize: 14, color: 'rgba(255,255,255,0.5)' }}>
            Puente Alto, Región Metropolitana
          </p>
        </div>

        <a
          href="https://wa.me/56953316688"
          target="_blank" rel="noopener noreferrer"
          style={{ ..._card, textDecoration: 'none', display: 'block', cursor: 'pointer' }}
        >
          <div style={{ fontSize: 26, marginBottom: 14 }}>💬</div>
          <div style={_cardLabel}>WhatsApp / Teléfono</div>
          <p style={_cardVal}>+56 9 5331 6688</p>
          <p style={{ margin: 0, fontFamily: 'Inter, sans-serif', fontSize: 13, color: '#2ECC71' }}>
            Escribir por WhatsApp →
          </p>
        </a>

        <a
          href="https://instagram.com/growshopsatindica"
          target="_blank" rel="noopener noreferrer"
          style={{ ..._card, textDecoration: 'none', display: 'block', cursor: 'pointer' }}
        >
          <div style={{ fontSize: 26, marginBottom: 14 }}>📸</div>
          <div style={_cardLabel}>Instagram</div>
          <p style={_cardVal}>@growshopsatindica</p>
          <p style={{ margin: 0, fontFamily: 'Inter, sans-serif', fontSize: 13, color: '#2ECC71' }}>
            Ver perfil →
          </p>
        </a>
      </div>
    </PageBase>
  );
}

Object.assign(window, { UbicacionPage, ComingSoonStub });