// Contact footer.

function ContactBtn({ icon, label, value, href, primary }) {
  return (
    <a
      href={href}
      className={`group flex items-center justify-between gap-4 px-6 py-5 rounded-2xl transition hairline`}
      style={{
        background: primary ? "var(--accent)" : "var(--surface-0)",
        color: primary ? "#FFFFFF" : "var(--text)",
        borderColor: primary ? "transparent" : "var(--border)",
      }}
    >
      <div className="flex items-center gap-4">
        <div className="w-10 h-10 rounded-xl flex items-center justify-center" style={{ background: primary ? "rgba(255,255,255,0.18)" : "var(--accent-soft)", color: primary ? "#FFFFFF" : "var(--accent)" }}>
          <Icon name={icon} size={18} strokeWidth={1.8} />
        </div>
        <div>
          <div className="mono text-[10px] uppercase tracking-[0.18em]" style={{ opacity: 0.7 }}>{label}</div>
          <div className="text-[15px] mt-0.5">{value}</div>
        </div>
      </div>
      <Icon name="arrow-up-right" size={18} className="opacity-70 group-hover:translate-x-0.5 transition" />
    </a>
  );
}

function FooterSection() {
  const { t } = useT();
  return (
    <section id="contact" className="relative pt-28 md:pt-36 pb-16 hairline-t overflow-hidden">
      <div className="absolute inset-0 bg-grid opacity-50 pointer-events-none" />
      <div className="relative max-w-[1320px] mx-auto px-6 md:px-10">
        <Reveal>
          <SectionHeader
            label={t("contact.label")}
            title={<>{t("contact.title.a")} <em className="serif not-italic" style={{color:"var(--accent)"}}>{t("contact.title.em")}</em></>}
            kicker={t("contact.kicker")}
          />
        </Reveal>

        <div className="mt-14 grid grid-cols-12 gap-5">
          <Reveal className="col-span-12 md:col-span-6" delay={0.05}>
            <ContactBtn primary icon="mail" label={t("contact.email")} value={PROFILE.email} href={`mailto:${PROFILE.email}`} />
          </Reveal>
          <Reveal className="col-span-12 md:col-span-3" delay={0.1}>
            <ContactBtn icon="phone" label={t("contact.phone")} value={PROFILE.phone} href={`tel:${PROFILE.phone.replace(/\s/g,"")}`} />
          </Reveal>
          <Reveal className="col-span-12 md:col-span-3" delay={0.15}>
            <ContactBtn icon="map-pin" label={t("contact.location")} value={t("contact.locationValue")} href="#" />
          </Reveal>
        </div>

        {/* signature strip */}
        <Reveal delay={0.1}>
          <div className="mt-20 hairline-t pt-8">
            <div className="serif text-[64px] md:text-[112px] leading-[0.9] tracking-[-0.02em]" style={{textWrap:"balance"}}>
              {t("footer.signA")} <span style={{color:"var(--accent)"}}>→</span> <em className="not-italic" style={{color:"var(--accent)"}}>{t("footer.signB")}</em>.
            </div>
          </div>
        </Reveal>

        <div className="mt-14 flex flex-wrap items-center justify-between gap-3 mono text-[10px] t-dim uppercase tracking-[0.18em]">
          <div>© {new Date().getFullYear()} Ana García · {t("footer.copy")}</div>
          <div className="flex items-center gap-4">
            <span>{t("footer.snapshot")}</span>
            <span>·</span>
            <span className="flex items-center gap-1.5"><span className="dot pulse" /> {t("footer.available")}</span>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { FooterSection });