/* global React */

function FinalCTA({ t }) {
  return (
    <section style={{ background: "var(--burgundy-dark)", color: "#fff", padding: "120px 0 110px", position: "relative", overflow: "hidden" }}>
      <div className="absolute inset-0" style={{ background: "radial-gradient(70% 90% at 50% 0%, rgba(201,169,97,0.18) 0%, transparent 55%)" }} />
      <div className="relative mx-auto px-6 text-center" style={{ maxWidth: 820 }}>
        <div className="reveal">
          <div className="flex items-center justify-center gap-4 mb-7">
            <span className="rule-gold" /><span className="eyebrow" style={{ color: "var(--gold)" }}>{t.ctaEyebrow}</span><span className="rule-gold" />
          </div>
          <h2 className="font-serif" style={{ fontSize: "clamp(2.2rem, 4.4vw, 3.7rem)", fontWeight: 500, lineHeight: 1.08, color: "#fff" }}>{t.ctaTitle}</h2>
          <p className="mx-auto mt-6" style={{ color: "rgba(248,244,237,0.82)", fontSize: "1.1rem", lineHeight: 1.65, maxWidth: 560 }}>{t.ctaLead}</p>
          <div className="flex flex-col sm:flex-row items-center justify-center gap-4 mt-10">
            <button className="font-sans" style={{ background: "var(--gold)", color: "#3a2a10", borderRadius: 3, padding: "17px 34px", letterSpacing: "0.12em", textTransform: "uppercase", fontSize: "0.74rem", fontWeight: 700, border: "none", cursor: "pointer", transition: "transform 0.25s ease, box-shadow 0.25s ease", boxShadow: "0 14px 36px -14px rgba(201,169,97,0.6)" }}
              onMouseEnter={(e) => { e.currentTarget.style.transform = "translateY(-2px)"; }}
              onMouseLeave={(e) => { e.currentTarget.style.transform = "none"; }}>
              {t.ctaBtn}
            </button>
            <a href="tel:+34972000000" className="btn-ghost font-sans" style={{ color: "rgba(248,244,237,0.92)", borderRadius: 3, padding: "17px 30px", letterSpacing: "0.1em", textTransform: "uppercase", fontSize: "0.74rem", fontWeight: 600, textDecoration: "none" }}>
              {t.ctaCall}
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer({ t, lang, setLang, langs }) {
  const cols = [
    { h: t.footExplore, items: t.nav.slice(1, 5) },
    { h: t.footCompany, items: [t.nav[5], t.nav[6], "Blog", "AICAT 403"] },
    { h: t.footContact, items: ["Av. Just Marlès, Lloret de Mar", "+34 972 000 000", "hola@grupgcb.com"] },
  ];
  return (
    <footer style={{ background: "var(--burgundy-dark)", color: "rgba(248,244,237,0.78)", borderTop: "1px solid rgba(248,244,237,0.12)" }}>
      <div className="mx-auto px-6 lg:px-12" style={{ maxWidth: 1340, paddingTop: 70, paddingBottom: 36 }}>
        <div className="grid lg:grid-cols-12 gap-12">
          {/* brand */}
          <div className="lg:col-span-4">
            <div className="font-serif" style={{ color: "#fff", fontSize: "2rem", fontWeight: 600 }}>GB</div>
            <div className="font-serif" style={{ color: "rgba(248,244,237,0.7)", textTransform: "uppercase", letterSpacing: "0.2em", fontSize: "0.56rem", marginTop: 4 }}>Grup GCB Immobiliaris · GironaCostaBrava</div>
            <p className="mt-6" style={{ fontSize: "0.92rem", lineHeight: 1.65, maxWidth: 300 }}>{t.footTagline}</p>
            <div className="mt-6" style={{ fontSize: "0.66rem", letterSpacing: "0.08em", lineHeight: 1.8, color: "rgba(248,244,237,0.6)", textTransform: "uppercase" }}>{t.topCred}</div>
          </div>

          {cols.map((c, i) => (
            <div key={i} className="lg:col-span-2">
              <h4 className="eyebrow" style={{ color: "var(--gold)", fontSize: "0.62rem", marginBottom: 16 }}>{c.h}</h4>
              <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 10 }}>
                {c.items.map((it, j) => (
                  <li key={j}><a href="#" onClick={(e) => e.preventDefault()} className="foot-link" style={{ color: "rgba(248,244,237,0.78)", textDecoration: "none", fontSize: "0.88rem" }}>{it}</a></li>
                ))}
              </ul>
            </div>
          ))}

          {/* languages */}
          <div className="lg:col-span-2">
            <h4 className="eyebrow" style={{ color: "var(--gold)", fontSize: "0.62rem", marginBottom: 16 }}>{t.footLang}</h4>
            <div className="grid grid-cols-2 gap-y-3 gap-x-2">
              {langs.map((l) => (
                <button key={l.code} onClick={() => setLang(l.code)} className="foot-link" style={{ display: "flex", alignItems: "center", gap: 7, background: "none", border: "none", cursor: "pointer", color: lang === l.code ? "var(--gold)" : "rgba(248,244,237,0.78)", fontSize: "0.84rem", padding: 0, fontFamily: "DM Sans, sans-serif" }}>
                  <span>{l.flag}</span>{l.label}
                </button>
              ))}
            </div>
          </div>
        </div>

        <div className="flex flex-col md:flex-row items-center justify-between gap-4 mt-16" style={{ paddingTop: 24, borderTop: "1px solid rgba(248,244,237,0.12)" }}>
          <span style={{ fontSize: "0.78rem", color: "rgba(248,244,237,0.55)" }}>© {new Date().getFullYear()} Grup GCB Immobiliaris. {t.footRights}</span>
          <div className="flex items-center gap-5" style={{ fontSize: "0.78rem", color: "rgba(248,244,237,0.55)" }}>
            <a href="#" onClick={(e) => e.preventDefault()} className="foot-link" style={{ color: "inherit", textDecoration: "none" }}>Privacitat</a>
            <a href="#" onClick={(e) => e.preventDefault()} className="foot-link" style={{ color: "inherit", textDecoration: "none" }}>Cookies</a>
            <a href="#" onClick={(e) => e.preventDefault()} className="foot-link" style={{ color: "inherit", textDecoration: "none" }}>Avís legal</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { FinalCTA, Footer });