// Footer.jsx — contact band + quote + brand bar
function Footer() {
  const socials = ['instagram', 'linkedin', 'whatsapp', 'mail'];
  const waHref = `https://api.whatsapp.com/send?phone=5491124072455&text=${encodeURIComponent('Quiero realizarte una consulta desde la web... ')}`;
  const socialHref = {
    instagram: 'https://www.instagram.com/alfabeth_agencia/',
    linkedin: 'https://www.linkedin.com/company/alfabeth-agencia-de-diseno/about/?viewAsMember=true',
    whatsapp: waHref,
    mail: 'mailto:empresaalfabeth@gmail.com',
  };
  const socialTarget = (s) => (s === 'mail' ? undefined : '_blank');
  const socialRel = (s) => (s === 'mail' ? undefined : 'noopener noreferrer');
  return (
    <footer data-screen-label="Footer" style={{ position: 'relative', isolation: 'isolate', overflow: 'visible' }}>
      {/* Full-bleed purple surface + Trama Circular watermark hugging the TRUE
          top-right corner (Brand Manual §3.12). The bleed layer clips it, so it
          no longer shows a hard seam at the 1920 boundary on wide monitors. */}
      <BleedLayer bg="var(--purple)">
        <div style={{
          position: 'absolute', top: -120, right: -140, width: 620, height: 620,
          backgroundImage: 'url(assets/brand/cadena-crecimiento.png)',
          backgroundSize: 'contain', backgroundRepeat: 'no-repeat',
          opacity: 0.10,
        }} />
      </BleedLayer>
      {/* Contact CTA band */}
      <div style={{
        position: 'relative',
        textAlign: 'center', padding: '120px 160px 110px',
        display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 26,
      }}>
        <DashedRule width={160} color="var(--teal)" />
        <h2 className="t-display" style={{ color: 'var(--peach)', fontSize: 64, margin: '8px 0 0', whiteSpace: 'nowrap' }}>
          ¿Tenés una consulta?
        </h2>
        <p className="t-body-sm" style={{ color: 'var(--white)', maxWidth: 880, margin: 0 }}>
          Si tenés una idea, un proyecto en mente o simplemente querés saber cómo podemos ayudarte,
          escribinos. Nos encanta conversar y encontrar soluciones que se adapten a lo que necesitás.
          Respondemos personalmente. Sin robots, sin vueltas.
        </p>
        <a href={waHref} target="_blank" rel="noopener noreferrer" style={{
          marginTop: 14, display: 'inline-flex', alignItems: 'center', gap: 12,
          background: 'var(--peach)', color: 'var(--purple)',
          border: 'none', borderRadius: 'var(--radius-pill)',
          padding: '16px 40px', cursor: 'pointer', fontFamily: 'var(--font-display)',
          fontWeight: 700, fontSize: 22, boxShadow: 'var(--shadow-cta)',
          textDecoration: 'none',
          transition: 'background .15s ease, color .15s ease',
        }}
        onMouseEnter={e => { e.currentTarget.style.background = 'var(--teal)'; }}
        onMouseLeave={e => { e.currentTarget.style.background = 'var(--peach)'; }}>
          <Icon name="whatsapp" size={24} stroke="var(--purple)" sw={2} /> Charlemos
        </a>
        <DashedRule width={160} color="var(--teal)" style={{ marginTop: 12 }} />
      </div>

      {/* Quote band */}
      <div style={{
        padding: '90px 160px', display: 'flex', justifyContent: 'flex-end',
      }}>
        <blockquote className="t-quote" style={{
          color: 'var(--white)', textAlign: 'right', maxWidth: 760, margin: 0, textWrap: 'balance',
        }}>
          “Crecer en diseño es equivocarse con sentido. Lo técnico mejora, lo creativo evoluciona.”
          <footer className="t-subtitle" style={{ marginTop: 18, fontSize: 22 }}>— Paula Scher —</footer>
        </blockquote>
      </div>

      {/* Brand bar */}
      <div style={{
        padding: '46px 160px', display: 'flex', alignItems: 'center',
        justifyContent: 'space-between', gap: 32, flexWrap: 'wrap',
      }}>
        <img src="assets/logo-alfabeth.png" alt="AlfaBeth" style={{ height: 48 }} />
        <div style={{ display: 'flex', gap: 18 }}>
          {socials.map(s => (
            <a key={s} href={socialHref[s]} target={socialTarget(s)} rel={socialRel(s)} title={s} style={{ display: 'block' }}>
              <DottedRing size={44} color="var(--peach)" sw={3} fill="transparent">
                <Icon name={s} size={19} stroke="var(--peach)" sw={1.8} />
              </DottedRing>
            </a>
          ))}
        </div>
        <span style={{
          fontFamily: 'var(--font-display)', fontSize: 16, color: 'rgba(245,218,170,0.7)',
        }}>© 2025 AlfaBeth · Agencia de Diseño Visual y Estratégico</span>
      </div>
    </footer>
  );
}
window.Footer = Footer;