/* Nueva Umbría — contacto, pie y app */
const { Input, Select, Textarea, Footer } = NU;

const PHONE_DISPLAY = "+34 601 300 522";
const PHONE_TEL = "+34601300522";
const EMAIL = "nuevaumbriaservicios@gmail.com";
const SOY_OPTIONS = ["Una empresa", "Un particular / hogar", "Una comunidad", "Entidad pública"];

/* Dato de contacto clicable */
function ContactLine({ icon, label, value, href }) {
  const inner = (
    <div style={{ display: "flex", alignItems: "flex-start", gap: 12 }}>
      <span style={{ flex: "none", width: 38, height: 38, borderRadius: "var(--radius-md)", background: "rgba(255,255,255,0.16)", display: "flex", alignItems: "center", justifyContent: "center", color: "#fff" }}>
        <Icon name={icon} size={19} />
      </span>
      <span>
        <span style={{ display: "block", fontSize: 13, color: "rgba(255,255,255,0.75)" }}>{label}</span>
        <span style={{ display: "block", fontSize: 16, fontWeight: 600, color: "#fff", marginTop: 1 }}>{value}</span>
      </span>
    </div>
  );
  return href
    ? <a href={href} style={{ textDecoration: "none" }}>{inner}</a>
    : inner;
}

function ContactSection({ quoteType }) {
  const [form, setForm] = useState({ nombre: "", telefono: "", email: "", soy: "", servicio: "", localidad: "", mensaje: "", rgpd: false });
  const [errors, setErrors] = useState({});
  const [sent, setSent] = useState(false);

  useEffect(() => {
    if (quoteType) setForm((f) => ({ ...f, soy: quoteType }));
  }, [quoteType]);

  const set = (k) => (e) => {
    const v = k === "rgpd" ? e.target.checked : e.target.value;
    setForm((f) => ({ ...f, [k]: v }));
  };

  const validate = () => {
    const er = {};
    if (!form.nombre.trim()) er.nombre = "Dinos cómo te llamas.";
    if (!form.telefono.trim()) er.telefono = "Necesitamos un teléfono para responderte.";
    else if (!/^[+0-9\s()-]{7,}$/.test(form.telefono.trim())) er.telefono = "Revisa el número de teléfono.";
    if (form.email.trim() && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email.trim())) er.email = "Revisa el correo electrónico.";
    if (!form.rgpd) er.rgpd = "Necesitamos tu consentimiento para responderte.";
    setErrors(er);
    return Object.keys(er).length === 0;
  };

  const buildText = () => {
    const L = [];
    L.push("Hola Nueva Umbría, quiero pedir un presupuesto.");
    L.push("");
    L.push("Nombre: " + form.nombre);
    L.push("Teléfono: " + form.telefono);
    if (form.email.trim()) L.push("Email: " + form.email);
    if (form.soy) L.push("Soy: " + form.soy);
    if (form.servicio.trim()) L.push("Servicio: " + form.servicio);
    if (form.localidad.trim()) L.push("Localidad: " + form.localidad);
    if (form.mensaje.trim()) L.push("Necesito: " + form.mensaje);
    return L.join("\n");
  };

  const submit = (e) => {
    e.preventDefault();
    if (!validate()) return;
    window.open(WA_LINK + "?text=" + encodeURIComponent(buildText()), "_blank");
    setSent(true);
  };

  const sendEmail = () => {
    if (!validate()) return;
    const subject = "Solicitud de presupuesto — " + (form.nombre || "Nueva Umbría");
    window.location.href = "mailto:" + EMAIL + "?subject=" + encodeURIComponent(subject) + "&body=" + encodeURIComponent(buildText());
    setSent(true);
  };

  return (
    <section id="contacto" style={{ background: "var(--verde-umbria)", padding: "80px 0" }}>
      <div className="nu-container">
        <div style={{ maxWidth: 640, color: "#fff" }}>
          <p style={{ fontWeight: 600, fontSize: 14, letterSpacing: "0.04em", margin: 0, color: "var(--menta)" }}>Contacto</p>
          <h2 style={{ fontFamily: "var(--font-heading)", fontWeight: 600, fontSize: 34, lineHeight: "42px", margin: "12px 0 0", color: "#fff", textWrap: "balance" }}>Pide tu presupuesto sin compromiso</h2>
          <p style={{ fontSize: 17, lineHeight: "28px", color: "rgba(255,255,255,0.9)", margin: "12px 0 0" }}>Cuéntanos qué necesitas y te respondemos rápido. Sin trámites ni esperas.</p>
        </div>

        <div className="contact-grid" style={{ marginTop: 40 }}>
          {/* Formulario */}
          <Card variant="surface" padding="lg">
            {sent ? (
              <div style={{ textAlign: "center", padding: "32px 12px", display: "flex", flexDirection: "column", alignItems: "center", gap: 14 }}>
                <span style={{ width: 60, height: 60, borderRadius: "50%", background: "var(--menta)", color: "var(--verde-umbria)", display: "flex", alignItems: "center", justifyContent: "center" }}>
                  <Icon name="check" size={30} />
                </span>
                <h3 style={{ fontFamily: "var(--font-heading)", fontWeight: 600, fontSize: 22, margin: 0 }}>¡Gracias!</h3>
                <p style={{ fontSize: 16, lineHeight: "26px", color: "var(--gris-piedra)", margin: 0, maxWidth: 380 }}>
                  Hemos recibido tu solicitud. Te respondemos lo antes posible.
                </p>
                <Button variant="secondary" size="md" onClick={() => setSent(false)}>Enviar otra solicitud</Button>
              </div>
            ) : (
              <form onSubmit={submit} noValidate style={{ display: "flex", flexDirection: "column", gap: 16 }}>
                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
                  <Input label="Nombre" required placeholder="Cómo te llamas" value={form.nombre} onChange={set("nombre")} error={errors.nombre} />
                  <Input label="Teléfono" required type="tel" placeholder="601 300 522" value={form.telefono} onChange={set("telefono")} error={errors.telefono} />
                </div>
                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
                  <Input label="Email" type="email" placeholder="tu@correo.com (opcional)" value={form.email} onChange={set("email")} error={errors.email} />
                  <Select label="Soy…" options={["", ...SOY_OPTIONS]} value={form.soy} onChange={set("soy")} />
                </div>
                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
                  <Input label="Tipo de espacio o servicio" placeholder="Oficina, comunidad, cristales… (opcional)" value={form.servicio} onChange={set("servicio")} />
                  <Input label="Localidad" placeholder="Huelva, Sevilla… (opcional)" value={form.localidad} onChange={set("localidad")} />
                </div>
                <Textarea label="Cuéntanos qué necesitas" rows={4} placeholder="Cuéntanos un poco sobre tu espacio y la frecuencia que buscas" value={form.mensaje} onChange={set("mensaje")} />

                <label style={{ display: "flex", gap: 10, alignItems: "flex-start", fontSize: 14, lineHeight: "21px", color: "var(--gris-piedra)", cursor: "pointer" }}>
                  <input type="checkbox" checked={form.rgpd} onChange={set("rgpd")} style={{ width: 18, height: 18, marginTop: 1, accentColor: "var(--verde-umbria)", flex: "none" }} />
                  <span>He leído y acepto la <a href="#" onClick={(e) => e.preventDefault()} style={{ color: "var(--verde-umbria)", fontWeight: 600 }}>política de privacidad</a>.{errors.rgpd && <span style={{ display: "block", color: "var(--coral-oscuro)", marginTop: 4 }}>{errors.rgpd}</span>}</span>
                </label>

                <div style={{ display: "flex", flexWrap: "wrap", alignItems: "center", gap: 14, marginTop: 4 }}>
                  <Button variant="accent" size="lg" type="submit" iconLeft={<Icon name="message-circle" size={18} />}>Enviar y pedir presupuesto</Button>
                  <button type="button" onClick={sendEmail} style={{ background: "none", border: "none", cursor: "pointer", color: "var(--verde-umbria)", fontWeight: 600, fontSize: 15, fontFamily: "var(--font-body)", display: "inline-flex", alignItems: "center", gap: 6 }}>
                    <Icon name="mail" size={17} /> o envíanos un email
                  </button>
                </div>
              </form>
            )}
          </Card>

          {/* Datos directos */}
          <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
            <ContactLine icon="phone" label="Teléfono" value={PHONE_DISPLAY} href={"tel:" + PHONE_TEL} />
            <ContactLine icon="message-circle" label="WhatsApp" value={PHONE_DISPLAY} href={WA_LINK} />
            <ContactLine icon="mail" label="Email" value={EMAIL} href={"mailto:" + EMAIL} />
            <ContactLine icon="map-pin" label="Zona de servicio" value="Huelva y Sevilla" />
            <ContactLine icon="clock" label="Horario" value="Lunes a viernes, 9:00–18:00" />
            <p style={{ fontSize: 15, lineHeight: "24px", color: "rgba(255,255,255,0.88)", margin: "6px 0 0", fontStyle: "italic" }}>
              Te respondemos rápido. Nadie se queda esperando.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ── Pie ───────────────────────────────────────────────────────── */
function SiteFooter() {
  return (
    <Footer
      columns={[
        { title: "Servicios", links: ["Comunidades", "Oficinas y empresas", "Comercios", "Cristales", "Hogares"] },
        { title: "Empresa", links: ["Servicios", "Cómo trabajamos", "Sobre nosotros", "Opiniones", "Contacto"] },
      ]}
      phone={PHONE_DISPLAY}
      email={EMAIL}
      area="Huelva y Sevilla · L–V, 9:00–18:00"
      social={["Instagram", "Facebook"]}
    />
  );
}

/* ── WhatsApp flotante ─────────────────────────────────────────── */
function FloatingWhatsApp() {
  return (
    <a className="nu-wa" href={WA_LINK} target="_blank" rel="noopener" aria-label="Escríbenos por WhatsApp">
      <Icon name="message-circle" size={28} />
    </a>
  );
}

/* ── App ───────────────────────────────────────────────────────── */
function App() {
  const [quoteType, setQuoteType] = useState("");

  useEffect(() => { refreshIcons(); });

  const scrollToContact = () => {
    const el = document.getElementById("contacto");
    if (el) window.scrollTo({ top: el.offsetTop - 64, behavior: "smooth" });
  };
  const onQuote = () => scrollToContact();
  const onQuoteType = (t) => { setQuoteType(t); setTimeout(scrollToContact, 30); };

  return (
    <React.Fragment>
      <Header onQuote={onQuote} />
      <Hero onQuote={onQuote} />
      <Trust />
      <Services onQuote={onQuote} />
      <Audiences onQuoteType={onQuoteType} />
      <Process />
      <About />
      <Testimonials />
      <ContactSection quoteType={quoteType} />
      <SiteFooter />
      <FloatingWhatsApp />
    </React.Fragment>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);