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 className={align === 'baseline' ? 'calmaeta-inforow calmaeta-inforow--top' : 'calmaeta-inforow'} style={{ 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, useLang } = window;
  const { t } = useLang();

  return (
    <section id="contacto" className="calmaeta-section-contact" style={{ background: 'var(--color-perla)' }}>
      <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',
            }}>{t.contact.eyebrow}</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',
            }}>{t.contact.heading}</h2>

            <div style={{ display: 'flex', flexDirection: 'column', gap: '0' }}>
              <InfoRow label={t.contact.addressLabel} 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={t.contact.hoursLabel}
                value={<React.Fragment>
                  {t.contact.hours.map((line, i) => (
                    <React.Fragment key={i}>{line}{i < t.contact.hours.length - 1 && <br />}</React.Fragment>
                  ))}
                </React.Fragment>}
              />
              <InfoRow label={t.contact.whatsappLabel} align="center" value="+34 662 33 21 20" href="https://wa.me/34662332120" />
              <InfoRow label={t.contact.instagramLabel} 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',
            }}>{t.contact.visitUs}</div>
            <Button variant="primary" fullWidth={true} href="https://wa.me/34662332120">{t.contact.ctaWhatsapp}</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">{t.contact.ctaDirections}</Button>
            <Button variant="ghost" fullWidth={true} href="https://www.instagram.com/calmaeta.coffee">{t.contact.ctaInstagram}</Button>
          </div>
        </div>
      </div>
    </section>
  );
}

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