// SERENA Hollywood — Contacto (tarjetas + formulario) · Footer

const { useState: useState_C } = React;

const DS_C = window.SERENAHollywoodDesignSystem_24d468 || {};
const { Headline: Headline_C, SectionNumber: SectionNumber_C, CreditMark: CreditMark_C, Button: Button_C, TextField: TextField_C, SelectField: SelectField_C } = DS_C;
const DS_ASSETS_C = "hollywood/ds-assets/";

const INTERESTS = window.TIPO_OPTIONS;

function ContactCards() {
  return (
    <div className="cont__cards">
      <a className="cont__card" href={window.WA_URL} target="_blank" rel="noopener noreferrer">
        <span className="cont__card-icon" aria-hidden="true">
          <svg viewBox="0 0 24 24" strokeLinecap="round" strokeLinejoin="round">
            <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.86 19.86 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.86 19.86 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.1 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92Z" />
          </svg>
        </span>
        <div className="cont__card-body">
          <span className="cont__card-lab">Teléfono</span>
          <span className="cont__card-main">11 3117 0399</span>
        </div>
      </a>

      <a className="cont__card" href="mailto:contacto@pbgdesarrollos.com.ar">
        <span className="cont__card-icon" aria-hidden="true">
          <svg viewBox="0 0 24 24" strokeLinecap="round" strokeLinejoin="round">
            <rect x="3" y="5" width="18" height="14" rx="0.5" />
            <path d="m3 7 9 6 9-6" />
          </svg>
        </span>
        <div className="cont__card-body">
          <span className="cont__card-lab">Mail</span>
          <span className="cont__card-main">contacto@pbgdesarrollos.com.ar</span>
        </div>
      </a>

      <a className="cont__card cont__card--wa" href={window.WA_URL} target="_blank" rel="noopener noreferrer">
        <span className="cont__card-icon" aria-hidden="true"><window.WhatsAppIcon /></span>
        <div className="cont__card-body">
          <span className="cont__card-lab">WhatsApp directo</span>
          <span className="cont__card-main">Escribinos ahora</span>
        </div>
      </a>
    </div>);
}

function Contacto() {
  return (
    <section className="block dark" id="contacto" data-screen-label="Contacto">
      <div className="inner">
        <SectionNumber_C number="06" label="Contacto" tone="inverse" />

        <div className="cont__head">
          <Headline_C size="l" tone="inverse" style={{ marginTop: 28 }}
            lines={[{ text: "Una forma más cálida", register: "caps" }, { text: "de vivir Hollywood", register: "italic" }]} />
          <p className="copy-lede">
            Dejanos tus datos y te enviamos planos, superficies, valores y
            unidades disponibles. También podés escribirnos directo por WhatsApp.
          </p>
        </div>

        <ContactCards />

        <div className="cont">
          <div className="cont__lead">
            <Headline_C as="h3" size="s" tone="inverse"
              lines={[{ text: "Solicitar", register: "caps" }, { text: "información", register: "italic" }]} />
            <p className="cont__lead-copy">
              Un asesor del equipo PBG Desarrollos se pone en contacto en las
              próximas 24 a 48 horas hábiles con la información completa del
              proyecto.
            </p>
            <ul className="cont__list">
              <li><span className="n">01.</span><span>Planos, superficies y valores actualizados.</span></li>
              <li><span className="n">02.</span><span>Reunión privada con el equipo comercial.</span></li>
              <li><span className="n">03.</span><span>Condiciones de financiación y formas de pago.</span></li>
            </ul>
            <div className="cont__seal">
              PBG Desarrollos · Arquitectura AISENSON · Palermo Hollywood
            </div>
          </div>
          <ContactForm />
        </div>
      </div>
    </section>);
}

function ContactForm() {
  const [name, setName] = useState_C("");
  const [email, setEmail] = useState_C("");
  const [areaCode, setAreaCode] = useState_C("+54 11");
  const [phone, setPhone] = useState_C("");
  const [interest, setInterest] = useState_C("");
  const [message, setMessage] = useState_C("");
  const [submitted, setSubmitted] = useState_C(false);
  const [busy, setBusy] = useState_C(false);

  const emailValid = /^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(email.trim());
  const phoneValid = phone.trim().replace(/\D/g, "").length >= 6;
  const formValid = name.trim().length > 1 && emailValid && phoneValid && interest;

  const onSubmit = async (e) => {
    e.preventDefault();
    if (!formValid || busy) return;
    setBusy(true);
    await window.submitLead({
      form: "contacto",
      name: name.trim(),
      email: email.trim(),
      phone: `${areaCode} ${phone}`.trim(),
      interest,
      message: message.trim()
    });
    setBusy(false);
    setSubmitted(true);
  };

  if (submitted) {
    return (
      <div className="form-card">
        <div className="success">
          <div className="success__mark">
            <svg viewBox="0 0 24 24" strokeWidth="1.5" strokeLinecap="square"><path d="M4 12.5 L10 18 L20 6" /></svg>
          </div>
          <h3 className="success__title">Gracias, <em>{name.split(" ")[0] || "te anotamos"}</em></h3>          <p className="success__copy">
            Recibimos tu consulta y te vamos a contactar a la brevedad con la
            información completa de SERENA Hollywood. Si querés, descargá el
            brochure ahora mismo.
          </p>
          <button type="button" className="success__wa" onClick={window.downloadBrochure} style={{ background: "var(--graphite-900)" }}>
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" aria-hidden="true">
              <path d="M12 4v12M6 12l6 6 6-6M4 20h16" />
            </svg>
            <span>Descargar brochure</span>
          </button>
          <a className="success__wa" href={window.WA_URL} target="_blank" rel="noopener noreferrer">
            <window.WhatsAppIcon />
            <span>Escribir por WhatsApp</span>
          </a>
          <div className="success__meta">Confirmación enviada a {email}</div>
        </div>
      </div>);
  }

  return (
    <form className="form-card" onSubmit={onSubmit} noValidate>
      <div className="form-card__head">
        <h3>SOLICITAR INFORMACION</h3>
        <span className="step">2 min</span>
      </div>

      <TextField_C label="Nombre y apellido" type="text" placeholder="Ej. María Lasarte"
        value={name} onChange={(e) => setName(e.target.value)} />

      <TextField_C label="Correo electrónico" type="email" placeholder="nombre@correo.com"
        value={email} onChange={(e) => setEmail(e.target.value)} />

      <div className="field--phone">
        <div className="field__row">
          <TextField_C label="Código" type="tel" value={areaCode} onChange={(e) => setAreaCode(e.target.value)} />
          <TextField_C label="Teléfono" type="tel" placeholder="5555 1234" hint="Incluí código de área"
            value={phone} onChange={(e) => setPhone(e.target.value)} />
        </div>
      </div>

      <SelectField_C label="Tipología de interés" placeholder="Seleccionar tipología…"
        options={INTERESTS.map((it) => ({ value: it.id, label: it.label }))}
        value={interest} onChange={(e) => setInterest(e.target.value)} />

      <TextField_C label="Consulta / Mensaje (opcional)" multiline rows={3}
        placeholder="Si querés, dejanos tu consulta…"
        value={message} onChange={(e) => setMessage(e.target.value)} />

      <div className="submit-row">
        <p className="submit-row__legal">
          Tu información está protegida. Al enviar aceptás recibir comunicaciones
          de PBG Desarrollos.
        </p>
        <Button_C variant="primary" size="lg" type="submit" disabled={!formValid || busy} iconRight="→">
          {busy ? "Enviando…" : "Enviar consulta"}
        </Button_C>
      </div>
    </form>);
}

function Footer() {
  return (
    <footer className="foot" data-screen-label="Footer">
      <div className="foot__inner">
        <div className="foot__brand">
          <img src={window.__resources.serenaLogoWhite} alt="serena® Hollywood" />
          <div className="tag">
            Todo lo que pasa, cerca.<br />
            Todo lo que importa, adentro.<br />
          </div>
          <div className="foot__credits">
            <CreditMark_C kind="developer" tone="inverse" assetsBase={DS_ASSETS_C} />
            <CreditMark_C kind="architecture" tone="inverse" assetsBase={DS_ASSETS_C} />
          </div>
        </div>

        <div className="foot__col">
          <h5>Proyecto</h5>
          <ul>
            <li><a href="#proyecto">El proyecto</a></li>
            <li><a href="#unidades">Tipologías</a></li>
            <li><a href="#amenities">Amenities</a></li>
            <li><a href="#ubicacion">Ubicación</a></li>
            <li><a href="#equipo">Arquitectura</a></li>
            <li><a href="#contacto">Contacto</a></li>
          </ul>
        </div>

        <div className="foot__col">
          <h5>Contacto</h5>
          <p>
            Guatemala 5984<br />
            Palermo Hollywood, Buenos Aires<br /><br />
            <a href="mailto:contacto@pbgdesarrollos.com.ar">contacto@pbgdesarrollos.com.ar</a><br />
            <a href={window.WA_URL} target="_blank" rel="noopener noreferrer">WhatsApp +54 9 11 3117-0399 ↗</a>
          </p>
        </div>

        <div className="foot__col">
          <h5>Seguinos</h5>
          <ul>
            <li><a href="https://instagram.com/pbg_desarrollos" target="_blank" rel="noopener noreferrer">@pbg_desarrollos ↗</a></li>
            <li><a href="https://pbgdesarrollos.com.ar" target="_blank" rel="noopener noreferrer">pbgdesarrollos.com.ar ↗</a></li>
          </ul>
        </div>
      </div>

      <div className="foot__bar">
        <span>© 2026 PBG Desarrollos · serena® Hollywood · Arquitectura AISENSON</span>
        <span>Las imágenes, medidas y/o contenidos que se exhiben pueden no concordar en su totalidad con la realidad de la construcción.</span>
      </div>
    </footer>);
}

Object.assign(window, { Contacto, ContactForm, ContactCards, Footer });