function InfoRow({ label, value, href, align = 'baseline' }) {
  const [hov, setHov] = React.useState(false);
  const valueStyle = {
    fontFamily: 'var(--font-primary)', fontSize: '15px', fontWeight: 400,
    color: href && hov ? 'var(--color-terracota)' : 'var(--color-text)', lineHeight: 1.55,
    textDecoration: 'none', transition: 'color 150ms ease',
  };
  return (
    <div style={{ display: 'flex', gap: '32px', alignItems: align, padding: '16px 0', borderBottom: '1px solid var(--color-border)' }}>
      <span style={{
        fontFamily: 'var(--font-primary)', fontSize: '10px', fontWeight: 600,
        letterSpacing: '0.16em', textTransform: 'uppercase',
        color: 'var(--color-text-muted)', width: '76px', flexShrink: 0,
      }}>{label}</span>
      {href
        ? <a href={href} target={href.startsWith('http') ? '_blank' : undefined} rel="noreferrer" onMouseEnter={() => setHov(true)} onMouseLeave={() => setHov(false)} style={valueStyle}>{value}</a>
        : <span style={valueStyle}>{value}</span>}
    </div>
  );
}

function Contact() {
  const { Button } = window;

  return (
    <section id="contacto" style={{ background: 'var(--color-perla)', padding: '100px 0' }}>
      <div className="calmaeta-container" style={{ maxWidth: '1100px', margin: '0 auto' }}>
        <div className="calmaeta-contact-grid">

          {/* Left */}
          <div>
            <div style={{
              fontFamily: 'var(--font-primary)', fontSize: '11px', fontWeight: 600,
              letterSpacing: '0.22em', textTransform: 'uppercase',
              color: 'var(--color-terracota)', marginBottom: '12px',
            }}>Contacto</div>
            <h2 style={{
              fontFamily: 'var(--font-primary)', fontSize: 'clamp(32px, 6vw, 48px)', fontWeight: 300,
              letterSpacing: '-0.02em', lineHeight: 1.15,
              color: 'var(--color-negro)', margin: '0 0 48px 0',
            }}>Encuéntranos.</h2>

            <div style={{ display: 'flex', flexDirection: 'column', gap: '0' }}>
              <InfoRow label="Dirección" align="center" value="Av. l'Horta, 27, 46210 Picanya, Valencia" href="https://www.google.com/maps/dir/?api=1&destination=Av.+l%27Horta+27%2C+46210+Picanya%2C+Valencia%2C+Spain" />
              <InfoRow
                label="Horario"
                value={<React.Fragment>
                  Lun · Cerrado<br />
                  Mar–Vie · 8:30–13:30, 16:00–20:00<br />
                  Sáb · 9:00–13:30, 17:00–20:00<br />
                  Dom · 9:00–14:00
                </React.Fragment>}
              />
              <InfoRow label="WhatsApp" align="center" value="+34 662 33 21 20" href="https://wa.me/34662332120" />
              <InfoRow label="Instagram" align="center" value="@calmaeta.coffee" href="https://www.instagram.com/calmaeta.coffee" />
            </div>
          </div>

          {/* Right: quick-action card */}
          <div style={{
            background: 'var(--color-bg-card)', borderRadius: 'var(--radius-lg)',
            padding: '40px', boxShadow: 'var(--shadow-sm)',
            display: 'flex', flexDirection: 'column', gap: '14px',
          }}>
            <div style={{
              fontFamily: 'var(--font-primary)', fontSize: '11px', fontWeight: 600,
              letterSpacing: '0.2em', textTransform: 'uppercase',
              color: 'var(--color-text-muted)', marginBottom: '6px',
            }}>Visítanos</div>
            <Button variant="primary" fullWidth={true} href="https://wa.me/34662332120">Escribir por WhatsApp</Button>
            <Button variant="secondary" fullWidth={true} href="https://www.google.com/maps/dir/?api=1&destination=Av.+l%27Horta+27%2C+46210+Picanya%2C+Valencia%2C+Spain">Cómo llegar</Button>
            <Button variant="ghost" fullWidth={true} href="https://www.instagram.com/calmaeta.coffee">Ver Instagram</Button>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Contact, InfoRow });