// Section components for the wedding invitation
// Exposes: Hero, Welcome, Countdown, Padrinos, Details, InfoStrip, RSVP, Foot, Mono

const Mono = ({ size, style = {}, className = "" }) => {
  const sz = size != null ? { width: size, height: size } : null;
  return (
    <span className={"mono-img " + className} style={{ ...(sz || {}), ...style }} aria-label="Monograma S+D" role="img" />
  );
};

// Decorative thin two-line ornament with center accent
const Ornament = ({ color = "currentColor", w = 80 }) => (
  <svg width={w} height="14" viewBox="0 0 200 20" fill="none" style={{ display: "block" }}>
    <line x1="0" y1="10" x2="78" y2="10" stroke={color} strokeWidth="1" opacity=".6" />
    <circle cx="100" cy="10" r="3" stroke={color} strokeWidth="1" fill="none" opacity=".7" />
    <circle cx="100" cy="10" r="1" fill={color} opacity=".9" />
    <line x1="122" y1="10" x2="200" y2="10" stroke={color} strokeWidth="1" opacity=".6" />
  </svg>
);

const Hero = ({ layout, dateLine, locationLine }) => (
  <header className="hero" data-layout={layout} data-screen-label="01 Hero">
    {layout !== "centered" && (
      <div className="hero-photo">
        <picture>
          <source media="(max-width: 768px)" srcSet="assets/photo-1-mobile.jpeg" />
          <img src="assets/photo-1-desktop.jpeg" alt="" />
        </picture>
      </div>
    )}
    <div className="hero-top">
      <div className="label">We are getting married</div>
      <div className="label" style={{ textAlign: "right" }}>Zapopan · Jalisco</div>
    </div>

    <div className="hero-stage">
      <Mono className="hero-mono" />
    </div>

    <div className="hero-bottom">
      <div className="col">
        <div className="label">La fecha</div>
        <div className="big">{dateLine}</div>
      </div>
      <div className="col center" style={{ minWidth: 140 }}>
        <Ornament color="currentColor" w={120} />
        <div className="label" style={{ marginTop: 8 }}>Save the date</div>
      </div>
      <div className="col right">
        <div className="label">El lugar</div>
        <div className="big">{locationLine}</div>
      </div>
    </div>
  </header>
);

const Welcome = () => (
  <section className="welcome" data-screen-label="02 Bienvenida">
    <div className="copy">
      <div className="label">— We are getting married —</div>
      <h2>Estamos muy <em>emocionados</em>.</h2>
      <p>De celebrar con ustedes este día tan especial. Nos hace muchísima ilusión compartir el inicio de esta nueva etapa rodeados de nuestras personas favoritas.</p>
      <p>Hemos creado este espacio para que tengan a la mano todos los detalles y nos acompañen en la cuenta regresiva para el gran día.</p>
      <p>¡Gracias por ser parte de nuestra historia y por celebrar el amor con nosotros!</p>
      <div className="sig">— Salma &amp; Dylan</div>
    </div>
  </section>
);

const useCountdown = (target) => {
  const [now, setNow] = React.useState(Date.now());
  React.useEffect(() => {
    const id = setInterval(() => setNow(Date.now()), 1000);
    return () => clearInterval(id);
  }, []);
  const ms = Math.max(0, target - now);
  const d = Math.floor(ms / 86400000);
  const h = Math.floor((ms % 86400000) / 3600000);
  const m = Math.floor((ms % 3600000) / 60000);
  const s = Math.floor((ms % 60000) / 1000);
  return { d, h, m, s };
};

const Countdown = ({ targetISO }) => {
  const target = React.useMemo(() => new Date(targetISO).getTime(), [targetISO]);
  const { d, h, m, s } = useCountdown(target);
  const cell = (n, lbl) => (
    <div className="cd-cell">
      <div className="cd-num">{String(n).padStart(2, "0")}</div>
      <div className="cd-lbl">{lbl}</div>
    </div>
  );
  return (
    <section className="countdown" data-screen-label="03 Countdown">
      <div className="label">— The big day —</div>
      <h2>Cuenta <em>regresiva</em></h2>
      <div className="cd-grid">
        {cell(d, "Días")}
        {cell(h, "Horas")}
        {cell(m, "Min")}
        {cell(s, "Seg")}
      </div>
    </section>
  );
};

const Details = () => (
  <section className="details" data-screen-label="04 Detalles">
    <div className="details-head">
      <div className="label">— The wedding day —</div>
      <h2>Ceremonia <em>&amp;</em> Recepción</h2>
    </div>
    <div className="events">
      <article className="event">
        <div className="label">Iglesia</div>
        <h3>La Misa</h3>
        <div className="divider" />
        <div className="when">3:30 de la tarde</div>
        <div className="where">Iglesia de San Josemaría Escrivá</div>
        <div className="addr">Paseo San Josemaría Escrivá 550<br />Colinas de San Javier, C.P. 44660, Guadalajara, Jalisco</div>
        <a className="map" target="_blank" rel="noreferrer" href="https://maps.google.com/?q=Iglesia+San+Josemaria+Escriva+Paseo+San+Josemaria+Escriva+550+Colinas+de+San+Javier+Guadalajara+Jalisco">Cómo llegar →</a>
      </article>
      <article className="event">
        <div className="label">Recepción</div>
        <h3>La Fiesta</h3>
        <div className="divider" />
        <div className="when">6:00 de la tarde</div>
        <div className="where">La Dovena · Jardín de Eventos</div>
        <div className="addr">Camino a la Presa y Calle de las Lomas<br />San Pedro Tlaquepaque, Jalisco</div>
        <a className="map" target="_blank" rel="noreferrer" href="https://maps.google.com/?q=La+Dovena+Jardin+de+Eventos+Camino+a+la+Presa+Calle+de+las+Lomas+San+Pedro+Tlaquepaque+Jalisco">Cómo llegar →</a>
      </article>
    </div>
  </section>
);

const InfoStrip = () => (
  <section className="strip" data-screen-label="05 Info">
    <div>
      <div className="label">— Dress code —</div>
      <h3><em>Formal</em></h3>
      <p><strong>Mujeres:</strong> vestido largo o midi.<br /><strong>Hombres:</strong> traje formal.<br />Por favor, evita el color blanco.</p>
    </div>
    <div className="vline" />
    <div>
      <div className="label">— Gift registry —</div>
      <h3>Mesa de <em>regalos</em></h3>
      <p>Tu presencia es nuestro mejor regalo. Si quieres consentirnos un poquito más, recibimos transferencia.</p>
      <div className="gift-card">
        <div className="gift-card-head">Datos bancarios</div>
        <div className="gift-row"><span>Banco</span><span>NU</span></div>
        <div className="gift-row"><span>A nombre de</span><span>Dylan Torres</span></div>
        <div className="gift-row"><span>Tarjeta</span><span>6381 8000 0182 3741 53</span></div>
      </div>
    </div>
  </section>
);

const Padrinos = () => (
  <section className="quote" data-screen-label="06 Padrinos">
    <div className="quote-inner">
      <Ornament color="var(--moss)" w={140} />
      <div className="label">— Padrinos de velación —</div>
      <h2>A nuestros <em>padrinos</em></h2>
      <p style={{ maxWidth: "56ch", lineHeight: 1.7, fontSize: 15, color: "color-mix(in srgb, var(--ink) 75%, transparent)" }}>
        Un agradecimiento muy especial a nuestros queridos padrinos de velación, Juana Zendejas Abarca y Armando Benitez Barba. Gracias por acompañarnos con su luz, su amor y su sabiduría en este camino que hoy iniciamos.
      </p>
      <div aria-hidden="true" style={{ height: 1, width: "60%", maxWidth: 380, background: "color-mix(in srgb, var(--ink) 18%, transparent)", marginTop: 12 }} />
    </div>
  </section>
);

const RSVP_ENDPOINT = "https://script.google.com/macros/s/AKfycbwQ77sqaGgY6XEhr5JKqOc4_DlY8niwPVc_Cp36SV2KzMteN8Bfnw86U4jxAkVZs3grZA/exec";

const RSVP = () => {
  const [form, setForm] = React.useState({
    name: "", attend: "", inviteType: "", count: "1", guests: "",
    allergies: "", phone: "", transport: ""
  });
  const [errs, setErrs] = React.useState({});
  const [sent, setSent] = React.useState(false);
  const [sending, setSending] = React.useState(false);
  const [submitErr, setSubmitErr] = React.useState("");

  const set = (k, v) => setForm(f => ({ ...f, [k]: v }));

  const chooseInvite = (type) => {
    setForm(f => ({
      ...f,
      inviteType: type,
      count: type === "solo" ? "1" : (+f.count >= 2 ? f.count : "2"),
      guests: type === "solo" ? "" : f.guests,
    }));
    setErrs(e => ({ ...e, inviteType: undefined }));
  };

  const submit = async (e) => {
    e.preventDefault();
    const next = {};
    if (!form.name.trim()) next.name = "Pon tu nombre completo, porfa.";
    if (!form.attend) next.attend = "Cuéntanos si vienes.";
    if (form.attend === "yes") {
      if (!form.inviteType) next.inviteType = "Dinos si vienes solo/a o con acompañantes.";
      if (!form.count || +form.count < 1) next.count = "Al menos 1.";
      if (!form.phone.trim()) next.phone = "Necesitamos un contacto.";
      if (!form.transport) next.transport = "Indica si necesitas transporte.";
    }
    setErrs(next);
    if (Object.keys(next).length > 0) return;

    if (RSVP_ENDPOINT.indexOf("__") === 0) {
      setSubmitErr("El backend aún no está conectado. Avísale a Darell.");
      return;
    }

    setSending(true);
    setSubmitErr("");
    try {
      const res = await fetch(RSVP_ENDPOINT, {
        method: "POST",
        body: JSON.stringify({ ...form, submittedAt: new Date().toISOString() }),
      });
      const data = await res.json();
      if (data && data.ok) {
        setSent(true);
      } else {
        setSubmitErr("No pudimos guardar tu confirmación. Intenta de nuevo en un momento.");
      }
    } catch (err) {
      setSubmitErr("Sin conexión. Revisa tu internet e inténtalo otra vez.");
    } finally {
      setSending(false);
    }
  };

  if (sent) {
    return (
      <section className="rsvp" data-screen-label="07 RSVP">
        <div className="rsvp-wrap thanks">
          <div className="check">✓</div>
          <div className="label">— Confirmación recibida —</div>
          <h3>Gracias, <em>{form.name.split(" ")[0] || "amig@"}</em>.</h3>
          <p style={{ maxWidth: "46ch", lineHeight: 1.7, color: "color-mix(in srgb,var(--cream) 80%,transparent)" }}>
            {form.attend === "yes"
              ? `Te apuntamos para ${form.count} ${+form.count === 1 ? "lugar" : "lugares"}. Nos vemos el 29 de agosto.`
              : "Te vamos a extrañar. Gracias por avisarnos con tiempo."}
          </p>
          <button type="button" className="submit" onClick={() => { setSent(false); setForm({ name: "", attend: "", inviteType: "", count: "1", guests: "", allergies: "", phone: "", transport: "" }); }} style={{ marginTop: 24 }}>Confirmar a alguien más</button>
        </div>
      </section>
    );
  }

  return (
    <section className="rsvp" data-screen-label="07 RSVP">
      <div className="rsvp-wrap">
        <div className="label">— Save your seat —</div>
        <h2>Confirma tu <em>asistencia</em></h2>
        <p className="lede">Ayúdanos a tener todo listo. Una respuesta por persona invitada — la cantidad de acompañantes debe coincidir con los lugares reservados en tu invitación.</p>

        <form onSubmit={submit} noValidate>
          <div className={"field" + (errs.name ? " err" : "")}>
            <label htmlFor="r-name">Nombre completo</label>
            <input id="r-name" autoComplete="name" placeholder="Ej. María López Reyes" value={form.name} onChange={e => set("name", e.target.value)} />
            {errs.name && <div className="errmsg">{errs.name}</div>}
          </div>

          <div className={"field" + (errs.attend ? " err" : "")}>
            <label>¿Asistirás?</label>
            <div className="seg" role="radiogroup">
              <button type="button" role="radio" aria-checked={form.attend === "yes"} className={form.attend === "yes" ? "on" : ""} onClick={() => set("attend", "yes")}>Sí, ahí estaré</button>
              <button type="button" role="radio" aria-checked={form.attend === "no"} className={form.attend === "no" ? "on" : ""} onClick={() => set("attend", "no")}>No podré</button>
            </div>
            {errs.attend && <div className="errmsg">{errs.attend}</div>}
          </div>

          {form.attend === "yes" && (
            <>
              <div className={"field" + (errs.inviteType ? " err" : "")}>
                <label>¿Tu invitación es individual o con acompañantes?</label>
                <div className="seg" role="radiogroup">
                  <button type="button" role="radio" aria-checked={form.inviteType === "solo"} className={form.inviteType === "solo" ? "on" : ""} onClick={() => chooseInvite("solo")}>Individual</button>
                  <button type="button" role="radio" aria-checked={form.inviteType === "group"} className={form.inviteType === "group" ? "on" : ""} onClick={() => chooseInvite("group")}>Con acompañantes</button>
                </div>
                {errs.inviteType && <div className="errmsg">{errs.inviteType}</div>}
              </div>

              {form.inviteType === "group" && (
                <>
                  <div className={"field" + (errs.count ? " err" : "")}>
                    <label htmlFor="r-count">Cantidad de acompañantes</label>
                    <select id="r-count" value={form.count} onChange={e => set("count", e.target.value)}>
                      <option value="2">1 acompañante</option>
                      <option value="3">2 acompañantes</option>
                      <option value="4">3 acompañantes</option>
                      <option value="5">4 acompañantes</option>
                    </select>
                    {errs.count && <div className="errmsg">{errs.count}</div>}
                  </div>

                  <div className="field">
                    <label htmlFor="r-guests">Nombres de acompañantes</label>
                    <textarea id="r-guests" rows="2" placeholder="Uno por línea, por favor." value={form.guests} onChange={e => set("guests", e.target.value)} />
                  </div>
                </>
              )}

              {form.inviteType && (
                <>
                  <div className={"field" + (errs.phone ? " err" : "")}>
                    <label htmlFor="r-phone">Teléfono de contacto</label>
                    <input id="r-phone" type="tel" autoComplete="tel" placeholder="33 1234 5678" value={form.phone} onChange={e => set("phone", e.target.value)} />
                    {errs.phone && <div className="errmsg">{errs.phone}</div>}
                  </div>

                  <div className="field">
                    <label htmlFor="r-allergies">Alergias o restricciones alimentarias</label>
                    <input id="r-allergies" placeholder="Ninguna / mariscos / vegetariano…" value={form.allergies} onChange={e => set("allergies", e.target.value)} />
                  </div>

                  <div className={"field" + (errs.transport ? " err" : "")}>
                    <label>¿Necesitas transporte?</label>
                    <div className="seg" role="radiogroup">
                      <button type="button" role="radio" aria-checked={form.transport === "yes"} className={form.transport === "yes" ? "on" : ""} onClick={() => set("transport", "yes")}>Sí, por favor</button>
                      <button type="button" role="radio" aria-checked={form.transport === "no"} className={form.transport === "no" ? "on" : ""} onClick={() => set("transport", "no")}>No, gracias</button>
                    </div>
                    {errs.transport && <div className="errmsg">{errs.transport}</div>}
                  </div>
                </>
              )}
            </>
          )}

          {submitErr && <div className="errmsg" style={{ textAlign: "center", marginTop: 8 }}>{submitErr}</div>}
          <button type="submit" className="submit" disabled={sending}>{sending ? "Enviando…" : "Enviar confirmación"}</button>
        </form>
      </div>
    </section>
  );
};

const Foot = () => (
  <footer data-screen-label="08 Footer">
    <Mono size={120} />
    <p>29 · Agosto · 2026</p>
    <div className="sig">Te esperamos.</div>
  </footer>
);

Object.assign(window, { Hero, Welcome, Countdown, Padrinos, Details, InfoStrip, RSVP, Foot, Mono, Ornament });