// Serena Arredondo — Pre-launch Landing
// Hero + form at the top, short concept below, PBG footer.

const { useState, useEffect, useRef } = 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);
  const formRef = useRef(null);

  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 />
    </>);

}

/* ────────────────────────────────────────────────────────────────────── */

function TopBar({ light, onCTA }) {
  return (
    <header className={"bar" + (light ? " is-light" : "")} data-screen-label="Top bar">
      <a className="bar__brand" href="#top">
        <img className="bar__brand-logo" src="serena/assets/PBG_logo_dark.png" alt="PBG Desarrollos" />
      </a>
      <div className="bar__meta">
        <span className="bar__meta-dot" />
        <span>PRELANZAMIENTO / COLEGIALES / 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(serena/assets/hero_serena.jpg)" }} />
      <div className="hero__veil" />
      <div className="hero__inner">
        <div className="hero__center" style={{ padding: "2px 0px 64px" }}>
          <img className="hero__logo" src="serena/assets/serena_logo.png" alt="Serena Arredondo" style={{ width: "400px", objectFit: "cover" }} />
          <div style={{ flex: 1 }} />
          <p className="hero__tagline" style={{ fontFamily: "Canela", textAlign: "left" }}>
            UN ECOSISTEMA URBANO <span className="accent"></span><br />
            en el corazón de Colegiales.
          </p>
        </div>

        <div className="hero__sub">
          <div className="hero__loc">
            <div><b>ENRIQUE MARTINEZ 1223</b></div>
            <div style={{ opacity: 0.85 }}>esquina Virrey Arredondo · Colegiales</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 <em>prelanzamiento</em> de Serena.
          </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 planos, 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 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 ynValid = otherProjects !== null;
  const formValid = name.trim().length > 1 && emailValid && phoneValid && sourceValid && ynValid;

  const onSubmit = (e) => {
    e.preventDefault();
    if (!formValid) return;
    setSubmitted(true);
  };

  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="square" strokeLinejoin="miter">
              <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 Arredondo.
          </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 Serena</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 Arredondo.
        </p>
        <button className="submit" type="submit" disabled={!formValid}>
          <span>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 concepto</span>
          </div>
          <p className="concept__lead">
            No es solo un edificio.<br />
            <span className="accent">Es una forma de vivir</span><br />
            con todo cerca.
          </p>
        </div>
        <div className="concept__copy">
          <p>
            Serena nace desde la cercanía: al barrio, a los servicios,
            a la comunidad. Un proyecto residencial de escala cuidada que
            integra arquitectura contemporánea, naturaleza y vida cotidiana
            en una experiencia de barrio viva y actual.
          </p>
          <p>
            47 residencias contemporáneas con amplias superficies, terrazas
            privadas y tipologías tipo casa — pensadas para quienes buscan
            algo más que una vivienda: un lugar al que pertenecer.
          </p>
          <div className="concept__pill-row">
            <span className="concept__pill">47 unidades</span>
            <span className="concept__pill">2 · 3 · 4 ambientes</span>
            <span className="concept__pill">49 a 360 m²</span>
          </div>
        </div>
      </div>
    </section>);

}

/* ────────────────────────────────────────────────────────────────────── */

function Footer() {
  return (
    <footer className="foot" data-screen-label="Footer">
      <div className="foot__brand">
        <img src="serena/assets/PBG_logo_white.png" alt="PBG Desarrollos" />
        <div className="tag">
          PBG® Desarrollos<br />
          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 />
        contacto@pbgdesarrollos.com.ar
      </div>
      <div className="foot__bar">
        <span>© 2026 PBG® Desarrollos / Todos los derechos reservados</span>
        <span>Serena Arredondo / Prelanzamiento</span>
      </div>
    </footer>);

}

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