// Serena Hollywood — Pre-launch landing (same structure as Serena Arredondo)

const { useState, useEffect } = React;

const SOURCES = [
  { id: "redes", label: "Redes sociales" },
  { id: "mail", label: "Recibí un mail del proyecto" },
  { id: "web", label: "Web de PBG" },
  { id: "otros", label: "Otros" }];

function App() {
  const [barLight, setBarLight] = useState(false);
  useEffect(() => {
    const onScroll = () => setBarLight(window.scrollY > window.innerHeight * 0.6);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  const scrollToForm = (e) => {
    if (e) e.preventDefault();
    const el = document.getElementById("prelanzamiento");
    if (el) window.scrollTo({ top: el.offsetTop - 60, behavior: "smooth" });
  };
  return (
    <>
      <TopBar light={barLight} onCTA={scrollToForm} />
      <Hero onCTA={scrollToForm} />
      <FormBlock />
      <Concept />
      <Footer />
      <WhatsAppFab />
    </>);
}

function TopBar({ light, onCTA }) {
  // knockout artwork on the hero, graphite master once the bar goes light
  return (
    <header className={"bar" + (light ? " is-light" : "")} data-screen-label="Top bar">
      <a className="bar__brand" href="#top">
        <img className="bar__brand-logo" src={light ? "hollywood/assets/pbg-iso-bajada.png" : "hollywood/assets/pbg-iso-bajada-white.png"} alt="PBG Desarrollos" />
      </a>
      <div className="bar__meta">
        <span>PRELANZAMIENTO / PALERMO HOLLYWOOD / BS.AS.</span>
      </div>
      <a className="bar__cta" href="#prelanzamiento" onClick={onCTA}>Acceso anticipado</a>
    </header>);
}

function Hero({ onCTA }) {
  return (
    <section className="hero" id="top" data-screen-label="Hero">
      <div className="hero__media" style={{ backgroundImage: "url(hollywood/assets/hero-corner.png)" }} />
      <div className="hero__veil" />
      <div className="hero__inner">
        <div className="hero__center">
          <div style={{ flex: 1 }} />
          <img className="hero__logo" src="hollywood/assets/logo-serena-hollywood-white.png" alt="serena® Hollywood" />
          <p className="hero__tagline hero__tagline--right">
            <em>todo lo que pasa,</em> CERCA.<br />
            <em>todo lo que importa,</em> ADENTRO.
          </p>
        </div>
        <div className="hero__sub">
          <div className="hero__loc">
            <div><b>GUATEMALA 5984</b></div>
            <div style={{ opacity: 0.85 }}>esquina Arévalo · Palermo Hollywood</div>
            <div style={{ opacity: 0.85 }}>Ciudad de Buenos Aires</div>
          </div>
          <button className="hero__cta" type="button" onClick={onCTA}>
            <span>Sumate al prelanzamiento</span>
            <span className="arrow">↓</span>
          </button>
        </div>
      </div>
    </section>);
}

function FormBlock() {
  return (
    <section className="form-section" id="prelanzamiento" data-screen-label="Formulario prelanzamiento">
      <div className="form-section__inner">
        <div className="form-section__lead">
          <div className="form-section__eyebrow">
            <span className="num">01.</span>
            <span className="lab">Acceso anticipado</span>
          </div>
          <h2 className="form-section__title">
            Sumate al prelanzamiento <em>de un nuevo Serena.</em>
          </h2>
          <p className="form-section__copy">
            Antes de la salida al mercado abrimos un círculo cerrado de inversores para
            conocer el proyecto en detalle. Dejanos tus datos y nos vamos a contactar con vos.
          </p>
          <ul className="form-section__list">
            <li><span className="n">01.</span><span>Acceso a plantas, valores y unidades disponibles.</span></li>
            <li><span className="n">02.</span><span>Reunión privada con el equipo comercial de PBG.</span></li>
            <li><span className="n">03.</span><span>Condiciones preferenciales por tiempo limitado.</span></li>
          </ul>
          <div className="form-section__seal">
            PBG® Desarrollos · +20 años · +15 edificios
          </div>
        </div>
        <PreLaunchForm />
      </div>
    </section>);
}

function PreLaunchForm() {
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [areaCode, setAreaCode] = useState("+54 11");
  const [phone, setPhone] = useState("");
  const [source, setSource] = useState("");
  const [sourceOther, setSourceOther] = useState("");
  const [otherProjects, setOtherProjects] = useState(null);
  const [submitted, setSubmitted] = useState(false);
  const [sending, setSending] = useState(false);
  const [submitError, setSubmitError] = useState(null);

  const emailValid = /^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(email.trim());
  const phoneValid = phone.trim().replace(/\D/g, "").length >= 6;
  const sourceValid = source && (source !== "otros" || sourceOther.trim().length > 0);
  const formValid = name.trim().length > 1 && emailValid && phoneValid && sourceValid && otherProjects !== null;

  const onSubmit = async (e) => {
    e.preventDefault();
    if (!formValid) return;
    setSending(true);
    setSubmitError(null);

    const formData = new FormData();
    formData.append("form", "prelanzamiento");
    formData.append("name", name);
    formData.append("email", email);
    formData.append("phone", `${areaCode} ${phone}`);
    formData.append("howHeard", source);
    if (source === "otros") formData.append("howHeardOther", sourceOther);
    formData.append("otherProjects", String(otherProjects));
    formData.append("source_url", window.location.href);

    try {
      const res = await fetch("/api/contact", { method: "POST", body: formData });
      if (res.ok) {
        setSubmitted(true);
      } else {
        setSubmitError("No pudimos registrar tu solicitud. Intentá de nuevo.");
      }
    } catch {
      setSubmitError("No pudimos registrar tu solicitud. Intentá de nuevo.");
    } finally {
      setSending(false);
    }
  };

  if (submitted) {
    return (
      <div className="form-card">
        <div className="success">
          <div className="success__mark">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
              <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">
            Tu solicitud quedó registrada. Un asesor del equipo PBG se va a contactar con vos
            en las próximas 48 horas hábiles con la información completa del prelanzamiento
            de Serena Hollywood.
          </p>
          <div className="success__meta">Confirmación enviada a {email || "tu correo"}</div>
        </div>
      </div>);
  }

  return (
    <form className="form-card" onSubmit={onSubmit} noValidate>
      <div className="form-card__head">
        <h3>Formulario de acceso</h3>
        <span className="step">5 campos · 2 min</span>
      </div>

      <div className="field">
        <label className="field__label" htmlFor="f-name">Nombre y apellido <span className="req">/</span></label>
        <input id="f-name" type="text" autoComplete="name" placeholder="Ej. María Lasarte" value={name} onChange={(e) => setName(e.target.value)} />
      </div>

      <div className="field">
        <label className="field__label" htmlFor="f-email">Correo electrónico <span className="req">/</span></label>
        <input id="f-email" type="email" autoComplete="email" placeholder="nombre@correo.com" value={email} onChange={(e) => setEmail(e.target.value)} />
      </div>

      <div className="field field--phone">
        <label className="field__label" htmlFor="f-phone">Teléfono <span className="req">/</span></label>
        <div className="field__row">
          <input id="f-area" type="text" inputMode="tel" aria-label="Código de área" value={areaCode} onChange={(e) => setAreaCode(e.target.value)} style={{ letterSpacing: "0.06em" }} />
          <input id="f-phone" type="tel" autoComplete="tel-national" placeholder="5555 1234" value={phone} onChange={(e) => setPhone(e.target.value)} />
        </div>
        <div className="field__hint">Incluí código de área</div>
      </div>

      <div className="field">
        <label className="field__label">¿Cómo te enteraste del proyecto? <span className="req">/</span></label>
        <div className="chips" role="radiogroup">
          {SOURCES.map((s) =>
            <button key={s.id} type="button" role="radio" aria-checked={source === s.id}
              className={"chip" + (source === s.id ? " is-on" : "")}
              onClick={() => setSource(s.id)}>
              <span className="dot" />
              <span>{s.label}</span>
            </button>)}
        </div>
        {source === "otros" &&
          <div className="field field--other" style={{ marginTop: 6 }}>
            <input type="text" placeholder="Contanos cómo nos conociste" value={sourceOther} onChange={(e) => setSourceOther(e.target.value)} autoFocus />
          </div>}
      </div>

      <div className="field">
        <label className="field__label">¿Te interesaría recibir información sobre otros proyectos de PBG? <span className="req">/</span></label>
        <div className="yn" role="radiogroup">
          <button type="button" role="radio" aria-checked={otherProjects === true}
            className={"yn__option" + (otherProjects === true ? " is-on" : "")}
            onClick={() => setOtherProjects(true)}>
            <span className="lab">Sí, mantenerme al día</span>
            <span className="mark">01.</span>
          </button>
          <button type="button" role="radio" aria-checked={otherProjects === false}
            className={"yn__option" + (otherProjects === false ? " is-on" : "")}
            onClick={() => setOtherProjects(false)}>
            <span className="lab">No, solo Hollywood</span>
            <span className="mark">02.</span>
          </button>
        </div>
      </div>

      <div className="submit-row">
        <p className="submit-row__legal">
          Al enviar este formulario aceptás recibir comunicaciones de PBG Desarrollos
          sobre el proyecto Serena Hollywood.
        </p>
        {submitError && <p className="submit-error">{submitError}</p>}
        <button className="submit" type="submit" disabled={!formValid || sending}>
          <span>{sending ? "Enviando..." : "Recibir acceso anticipado"}</span>
          <span className="arrow">→</span>
        </button>
      </div>
    </form>);
}

function Concept() {
  return (
    <section className="concept-section" data-screen-label="Concepto">
      <div className="concept">
        <div className="concept__left">
          <div>
            <span className="num">02.</span>
            <span className="lab">El proyecto</span>
          </div>
          <p className="concept__lead">
            LA CIUDAD ALREDEDOR,
            <em>tu mundo adentro.</em>
          </p>
        </div>
        <div className="concept__copy">
          <p>
            Serena Hollywood es una esquina residencial en Guatemala y Arévalo, en el punto
            donde Palermo Hollywood late más fuerte: gastronomía, diseño y cultura urbana a
            pasos. Afuera, el movimiento del barrio; adentro, la calma de una casa bien pensada.
          </p>
          <p>
            Cuarenta metros de fachada sobre dos calles, con horizontales, madera y retiros que
            hacen que nueve pisos se lean más bajos y más cercanos. Unidades de diseño eficiente
            con mucha luz natural, tres niveles de amenities y cocheras por rampa: todo lo que
            hace falta para vivir bien, resuelto con precisión y materiales nobles.
          </p>
          <div className="concept__pill-row">
            <span className="concept__pill">50 unidades</span>
            <span className="concept__pill">2, 3 &amp; 4 ambientes</span>
            <span className="concept__pill">60 a 135 m²</span>
            <span className="concept__pill">9 pisos</span>
            <span className="concept__pill">39 cocheras</span>
            <span className="concept__pill">3 niveles de amenities</span>
          </div>
          <div className="concept__credits">
            <div className="concept__credit">
              <span>Desarrolla</span>
              <img src="hollywood/assets/pbg-iso-bajada.png" alt="PBG Desarrollos" style={{ width: "118px", height: "47px" }} />
            </div>
            <div className="concept__credit">
              <span>Arquitectura</span>
              <img src="hollywood/assets/logo-aisenson-arq.png" alt="AISENSON Arquitectos" style={{ width: "144px", height: "54px" }} />
            </div>
          </div>
        </div>
      </div>
    </section>);
}

const WA_HREF = "https://wa.me/5491131170399?text=" + encodeURIComponent("Hola PBG, vengo de la web del prelanzamiento de Serena Hollywood y quiero recibir informaci\u00f3n.");

function WhatsAppFab() {
  return (
    <a className="wa-fab" href={WA_HREF} target="_blank" rel="noopener" aria-label="Escribinos por WhatsApp">
      <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
        <path d="M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.45 1.32 4.95L2 22l5.25-1.38a9.9 9.9 0 0 0 4.79 1.22h.01c5.46 0 9.91-4.45 9.91-9.91C21.96 6.45 17.5 2 12.04 2Zm5.8 14.13c-.24.68-1.4 1.3-1.94 1.35-.5.05-.97.23-3.27-.68-2.75-1.08-4.5-3.9-4.63-4.08-.14-.18-1.11-1.48-1.11-2.83 0-1.34.7-2 .95-2.28.25-.27.54-.34.72-.34h.52c.17 0 .39-.06.61.46.24.57.8 1.97.87 2.11.07.14.12.3.02.48-.09.18-.14.3-.28.46l-.42.49c-.14.14-.28.3-.12.58.16.27.71 1.17 1.52 1.9 1.05.93 1.93 1.22 2.2 1.36.27.14.43.12.59-.07.16-.18.68-.79.86-1.06.18-.27.36-.23.61-.14.25.09 1.6.75 1.87.89.27.14.45.2.52.32.07.11.07.66-.17 1.34Z" />
      </svg>
      <span className="sr-only">WhatsApp</span>
    </a>);
}

function Footer() {
  return (
    <footer className="foot" data-screen-label="Footer">
      <div className="foot__brand">
        <img src="hollywood/assets/pbg-iso-bajada-white.png" alt="PBG Desarrollos" />
        <div className="tag">
          Excelencia, diseño<br />y calidad constructiva.
        </div>
      </div>
      <div className="foot__meta">
        Av. Libertador 5936 12°B<br />
        Ciudad de Buenos Aires, Argentina<br />
        T. (+5411) 5353 9901<br />
        WhatsApp (+5411) 3117 0399<br />
        contacto@pbgdesarrollos.com.ar
      </div>
      <div className="foot__bar">
        <span>© 2026 PBG Desarrollos / Todos los derechos reservados</span>
        <span>SERENA Hollywood / Prelanzamiento</span>
      </div>
    </footer>);
}

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