/* global React, ICONS, useReveal, LynxMark */

function Contact() {
  const ref = useReveal();
  return (
    <section
      id="contacto"
      ref={ref}
      className="reveal section"
      style={{
        position: "relative",
        overflow: "hidden",
        padding: "clamp(100px, 14vh, 160px) var(--pad-x)",
      }}
    >
      <div
        aria-hidden="true"
        style={{
          position: "absolute",
          inset: 0,
          background:
            "radial-gradient(60% 60% at 30% 50%, rgba(94, 233, 242, 0.18), transparent 70%), radial-gradient(50% 50% at 75% 60%, rgba(245, 181, 71, 0.18), transparent 70%), linear-gradient(160deg, #0e2744 0%, #0a1f38 50%, #050f1d 100%)",
        }}
      />
      <div
        aria-hidden="true"
        style={{
          position: "absolute",
          inset: 0,
          backgroundImage:
            "linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px)",
          backgroundSize: "60px 60px",
          maskImage: "radial-gradient(60% 60% at 50% 50%, black, transparent)",
          WebkitMaskImage: "radial-gradient(60% 60% at 50% 50%, black, transparent)",
          pointerEvents: "none",
        }}
      />

      <div className="container" style={{ position: "relative", textAlign: "center" }}>
        <div className="section-head section-head--in-center-block">
          <span className="eyebrow">
            <span className="dash"></span>
            Contactar
          </span>
        </div>

        <h2
          className="h-section"
          style={{ marginTop: 24, maxWidth: "20ch", marginInline: "auto" }}
        >
          Hablemos de <br />
          <span
            style={{
              background: "linear-gradient(95deg, #5EE9F2 0%, #F5B547 100%)",
              WebkitBackgroundClip: "text",
              WebkitTextFillColor: "transparent",
              backgroundClip: "text",
            }}
          >
            tu proyecto.
          </span>
        </h2>

        <p className="lead" style={{ marginTop: 28, marginInline: "auto", textAlign: "center" }}>
          Una persona real atiende el teléfono, siempre. Cuéntanos qué necesitas —
          estaremos en obra esta semana.
        </p>

        <div style={{ marginTop: 56 }}>
          <a
            href="tel:+34634707655"
            className="contact-phone-card"
            style={{
              display: "inline-flex",
              alignItems: "center",
              gap: 24,
              padding: "20px 36px",
              borderRadius: 24,
              background: "rgba(255, 255, 255, 0.03)",
              border: "1px solid rgba(94, 233, 242, 0.25)",
              backdropFilter: "blur(20px)",
              transition: "transform .25s ease, border-color .25s ease, background .25s ease",
            }}
            onMouseEnter={(e) => {
              e.currentTarget.style.borderColor = "rgba(94, 233, 242, 0.6)";
              e.currentTarget.style.background = "rgba(94, 233, 242, 0.06)";
              e.currentTarget.style.transform = "translateY(-2px)";
            }}
            onMouseLeave={(e) => {
              e.currentTarget.style.borderColor = "rgba(94, 233, 242, 0.25)";
              e.currentTarget.style.background = "rgba(255, 255, 255, 0.03)";
              e.currentTarget.style.transform = "translateY(0)";
            }}
          >
            <div
              style={{
                width: 56,
                height: 56,
                borderRadius: 16,
                background: "var(--cyan)",
                color: "var(--navy-900)",
                display: "inline-flex",
                alignItems: "center",
                justifyContent: "center",
                boxShadow: "0 0 30px rgba(94, 233, 242, 0.5)",
              }}
            >
              <div style={{ width: 26, height: 26 }}>{ICONS.phone}</div>
            </div>
            <div style={{ textAlign: "left" }}>
              <div
                style={{
                  fontFamily: "var(--font-mono)",
                  fontSize: 11,
                  letterSpacing: "0.18em",
                  textTransform: "uppercase",
                  color: "var(--cyan)",
                  marginBottom: 4,
                }}
              >
                Línea directa
              </div>
              <div className="contact-phone-number">
                +34 634 70 76 55
              </div>
            </div>
          </a>
        </div>

        <div
          style={{
            marginTop: 28,
            display: "flex",
            gap: 14,
            justifyContent: "center",
            flexWrap: "wrap",
          }}
        >
          <a
            href="https://wa.me/34634707655?text=Hola%2C%20quiero%20informaci%C3%B3n%20sobre%20LYNCARED"
            target="_blank"
            rel="noopener noreferrer"
            className="btn btn-lg"
            style={{
              background: "#25D366",
              color: "#0a1f38",
              boxShadow: "0 14px 40px -10px rgba(37, 211, 102, 0.5)",
            }}
          >
            <span style={{ width: 18, height: 18, display: "inline-flex" }}>{ICONS.whatsapp}</span>
            WhatsApp
          </a>
          <a href="mailto:info@lyncared.com" className="btn btn-ghost btn-lg">
            Enviar un mensaje
            <span style={{ width: 18, height: 18, display: "inline-flex" }}>{ICONS.arrow}</span>
          </a>
        </div>

        <div
          style={{
            marginTop: 64,
            display: "flex",
            justifyContent: "center",
            gap: 36,
            flexWrap: "wrap",
            fontFamily: "var(--font-mono)",
            fontSize: 11,
            letterSpacing: "0.14em",
            textTransform: "uppercase",
            color: "var(--text-mute)",
          }}
        >
          <span style={{ display: "inline-flex", alignItems: "center", gap: 8 }}>
            <CyanDot /> Atendemos el teléfono
          </span>
          <span style={{ display: "inline-flex", alignItems: "center", gap: 8 }}>
            <CyanDot /> Presupuesto en 48h
          </span>
          <span style={{ display: "inline-flex", alignItems: "center", gap: 8 }}>
            <CyanDot /> Técnicos certificados
          </span>
        </div>
      </div>
    </section>
  );
}

function CyanDot() {
  return (
    <span style={{ width: 6, height: 6, borderRadius: 999, background: "var(--cyan)", boxShadow: "0 0 10px var(--cyan)" }} />
  );
}

function Footer() {
  return (
    <footer
      style={{
        background: "var(--navy-950)",
        borderTop: "1px solid rgba(255,255,255,0.06)",
        padding: "56px var(--pad-x) 32px",
      }}
    >
      <div
        className="container"
        style={{
          display: "grid",
          gridTemplateColumns: "minmax(0, 1.4fr) repeat(3, minmax(0, 1fr))",
          gap: 40,
          marginBottom: 48,
        }}
        id="footer-grid"
      >
        <div>
          <a href="#top" style={{ display: "inline-flex", alignItems: "center", gap: 12, marginBottom: 16 }}>
            <LynxMark size={28} chip />
            <span style={{ fontFamily: "var(--font-display)", fontSize: 16, fontWeight: 500, letterSpacing: "0.22em" }}>
              LYNCARED
            </span>
          </a>
          <p style={{ color: "var(--text-mute)", fontSize: 13.5, lineHeight: 1.6, maxWidth: 320 }}>
            Instalaciones eléctricas, solar, redes y mantenimiento — ingeniería de dos fundadores con 15 años de experiencia combinada.
          </p>
        </div>

        <FooterCol
          title="Servicios"
          items={["Instalaciones", "Recarga VE", "Placas solares", "Mantenimiento", "Redes"]}
        />
        <FooterCol
          title="Empresa"
          items={["Nosotros", "Fundadores", "Contacto", "Aviso legal", "Privacidad"]}
        />
        <FooterCol
          title="Contacto"
          items={["+34 634 70 76 55", "info@lyncared.com", "España", "WhatsApp", "Línea directa"]}
        />
      </div>

      <div
        className="container"
        style={{
          paddingTop: 24,
          borderTop: "1px solid rgba(255,255,255,0.06)",
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
          flexWrap: "wrap",
          gap: 12,
          fontFamily: "var(--font-mono)",
          fontSize: 11,
          letterSpacing: "0.14em",
          textTransform: "uppercase",
          color: "var(--text-mute)",
        }}
      >
        <span>© 2026 LYNCARED · Todos los derechos reservados.</span>
        <span>España · 15 años de experiencia combinada</span>
      </div>

      <style>{`
        @media (max-width: 760px) {
          #footer-grid { grid-template-columns: 1fr 1fr !important; }
        }
      `}</style>
    </footer>
  );
}

function FooterCol({ title, items }) {
  return (
    <div>
      <div
        style={{
          fontFamily: "var(--font-mono)",
          fontSize: 11,
          letterSpacing: "0.18em",
          textTransform: "uppercase",
          color: "var(--text)",
          marginBottom: 16,
        }}
      >
        {title}
      </div>
      <ul style={{ listStyle: "none", display: "flex", flexDirection: "column", gap: 10 }}>
        {items.map((it) => (
          <li key={it}>
            <a
              href="#"
              style={{ color: "var(--text-mute)", fontSize: 13.5, transition: "color .2s ease" }}
              onMouseEnter={(e) => (e.currentTarget.style.color = "var(--cyan)")}
              onMouseLeave={(e) => (e.currentTarget.style.color = "var(--text-mute)")}
            >
              {it}
            </a>
          </li>
        ))}
      </ul>
    </div>
  );
}

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