/* global React */
const { useState: useState2, useEffect: useEffect2, useRef: useRef2 } = React;
const { Reveal: Reveal2, useT: useT2, useLang: useLang2, PHOTOS: PHOTOS2 } = window.CieloPart1;

// ============================================
// Lead magnet — Manual de IA
// ============================================
function Manual() {
  const t = useT2();
  const [email, setEmail] = useState2("");
  const [submitted, setSubmitted] = useState2(false);

  const submit = (e) => {
    e.preventDefault();
    if (!email || !/.+@.+\..+/.test(email)) return;
    setSubmitted(true);
  };

  return (
    <section className="section manual" id="manual">
      <div className="manual-bg" aria-hidden="true">
        <div className="sunburst" style={{ width: 600, height: 600, top: -200, right: -200 }} />
        <div className="sunburst" style={{ width: 500, height: 500, bottom: -200, left: -200, opacity: 0.4 }} />
      </div>
      <div className="container manual-grid">
        <div className="manual-copy">
          <Reveal2><div className="eyebrow" style={{ color: "rgba(246,239,226,0.7)" }}>{t.manual.eyebrow}</div></Reveal2>
          <Reveal2 delay={80}>
            <div className="manual-kicker mono">{t.manual.kicker}</div>
          </Reveal2>
          <Reveal2 delay={140} as="h2" className="manual-title">
            {t.manual.title_a} <em className="manual-em">{t.manual.title_b}</em>
          </Reveal2>
          <Reveal2 delay={220}><p className="manual-sub">{t.manual.sub}</p></Reveal2>

          <Reveal2 delay={300}>
            <ul className="manual-list">
              {t.manual.bullets.map((b, i) => (
                <li key={i}><span className="manual-arrow">→</span>{b}</li>
              ))}
            </ul>
          </Reveal2>

          <Reveal2 delay={420}>
            {!submitted ? (
              <form className="manual-form" onSubmit={submit}>
                <input
                  type="email"
                  required
                  placeholder={t.manual.placeholder}
                  value={email}
                  onChange={e => setEmail(e.target.value)}
                />
                <button type="submit" className="btn btn-sunset">{t.manual.cta} →</button>
              </form>
            ) : (
              <div className="form-success">
                <div className="success-icon">✓</div>
                <div>
                  <div className="serif" style={{ fontSize: 22 }}>{t.manual.success_t}</div>
                  <div style={{ opacity: 0.8, marginTop: 6 }}>{t.manual.success_b}</div>
                </div>
              </div>
            )}
          </Reveal2>
          <Reveal2 delay={500}><p className="manual-privacy mono">{t.manual.privacy}</p></Reveal2>
        </div>

        <Reveal2 delay={200} className="manual-art">
          {/* PDF cover mockup */}
          <div className="pdf-stack">
            <div className="pdf-cover">
              <div className="pdf-cover-inner">
                <div className="pdf-eyebrow mono">CIELO¹ MERCADOTECNIA · 2026</div>
                <div className="pdf-title">
                  <span>Manual</span>
                  <span className="pdf-title-em">Fundamental</span>
                  <span>de IA</span>
                </div>
                <div className="pdf-sub">para Negocios Mexicanos</div>
                <div className="pdf-sun" />
                <div className="pdf-foot">
                  <div className="mono" style={{ fontSize: 10, opacity: 0.7 }}>30 PÁGINAS</div>
                  <div className="mono" style={{ fontSize: 10, opacity: 0.7 }}>VOL. 01</div>
                </div>
              </div>
            </div>
            <div className="pdf-shadow" />
          </div>
        </Reveal2>
      </div>
    </section>
  );
}

// ============================================
// Sister products
// ============================================
function Productos() {
  const t = useT2();
  return (
    <section className="section productos" id="productos">
      <div className="container">
        <div className="section-head">
          <Reveal2><div className="eyebrow">{t.productos.eyebrow}</div></Reveal2>
          <Reveal2 delay={80} as="h2" className="h-display">{t.productos.title}</Reveal2>
          <Reveal2 delay={160}><p className="section-sub muted">{t.productos.sub}</p></Reveal2>
        </div>
        <div className="prod-grid">
          {t.productos.items.map((p, i) => {
            const inner = (
              <React.Fragment>
                <div className="prod-mark mono">{String(i+1).padStart(2,'0')}</div>
                <div className="prod-name serif">{p.n}</div>
                <div className="prod-desc muted">{p.d}</div>
                <div className="prod-arrow">{p.live ? '→' : '· soon ·'}</div>
              </React.Fragment>
            );
            return p.live ? (
              <Reveal2 key={i} delay={i * 60} as="a" href={p.url} target="_blank" rel="noopener" className="prod-card">{inner}</Reveal2>
            ) : (
              <Reveal2 key={i} delay={i * 60} className="prod-card prod-card-soon" style={{opacity:0.6, cursor:'default'}}>{inner}</Reveal2>
            );
          })}
        </div>
      </div>
    </section>
  );
}

// ============================================
// Contacto
// ============================================
function Contacto() {
  const t = useT2();
  const [form, setForm] = useState2({ name: "", biz: "", msg: "" });
  const [sent, setSent] = useState2(false);
  const submit = (e) => { e.preventDefault(); setSent(true); };

  return (
    <section className="section contacto" id="contacto">
      <div className="container contacto-grid">
        <div>
          <Reveal2><div className="eyebrow">{t.contacto.eyebrow}</div></Reveal2>
          <Reveal2 delay={80} as="h2" className="h-display">
            {t.contacto.title_a} <span className="grad-text">{t.contacto.title_b}</span>
          </Reveal2>
          <Reveal2 delay={160}><p className="section-sub muted">{t.contacto.sub}</p></Reveal2>

          <Reveal2 delay={240}>
            <div className="contacto-actions">
              <a href="https://wa.me/526641234567" target="_blank" rel="noopener" className="btn btn-wa">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="white"><path d="M.057 24l1.687-6.163a11.867 11.867 0 0 1-1.587-5.946C.16 5.335 5.495 0 12.05 0a11.82 11.82 0 0 1 8.413 3.488 11.824 11.824 0 0 1 3.48 8.414c-.003 6.557-5.338 11.892-11.893 11.892a11.9 11.9 0 0 1-5.688-1.448L.057 24zm6.597-3.807c1.676.995 3.276 1.591 5.392 1.592 5.448 0 9.886-4.434 9.889-9.885.002-5.462-4.415-9.89-9.881-9.892-5.452 0-9.887 4.434-9.889 9.884a9.86 9.86 0 0 0 1.51 5.26l.7 1.18-1.04 3.797 3.318-.936zm11.387-5.464c-.074-.124-.272-.198-.57-.347-.296-.149-1.758-.868-2.03-.967-.272-.099-.47-.149-.669.149-.198.297-.768.967-.941 1.165-.173.198-.347.223-.644.074-.297-.149-1.255-.462-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.297-.347.446-.521.151-.172.2-.296.3-.495.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51l-.57-.01c-.198 0-.52.074-.792.372s-1.04 1.016-1.04 2.479 1.065 2.876 1.213 3.074c.149.198 2.095 3.2 5.076 4.487.709.306 1.263.489 1.694.626.712.226 1.36.194 1.872.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413z"/></svg>
                {t.contacto.wa}
              </a>
              <a href="#" className="btn btn-primary">📅 {t.contacto.cal}</a>
            </div>
          </Reveal2>

          <Reveal2 delay={320}>
            <div className="contacto-meta">
              <div className="contacto-row">
                <span className="mono muted">EMAIL</span>
                <span>hola@cielomercadotecnia.com</span>
              </div>
              <div className="contacto-row">
                <span className="mono muted">TEL</span>
                <span>+52 664 123 4567</span>
              </div>
              <div className="contacto-row">
                <span className="mono muted">OFICINA</span>
                <span>Tijuana, Baja California</span>
              </div>
            </div>
          </Reveal2>
        </div>

        <Reveal2 delay={200}>
          <div className="contacto-form-wrap">
            {!sent ? (
              <form className="contacto-form" onSubmit={submit}>
                <div className="mono" style={{ fontSize: 11, letterSpacing: "0.16em", color: "rgba(246,239,226,0.6)" }}>{t.contacto.email_label.toUpperCase()}</div>
                <label>
                  <span>{t.contacto.form_name}</span>
                  <input required value={form.name} onChange={e => setForm(f => ({...f, name: e.target.value}))} />
                </label>
                <label>
                  <span>{t.contacto.form_biz}</span>
                  <input required value={form.biz} onChange={e => setForm(f => ({...f, biz: e.target.value}))} />
                </label>
                <label>
                  <span>{t.contacto.form_msg}</span>
                  <textarea rows={4} required value={form.msg} onChange={e => setForm(f => ({...f, msg: e.target.value}))} />
                </label>
                <button type="submit" className="btn btn-sunset" style={{ alignSelf: "flex-start" }}>{t.contacto.form_send} →</button>
              </form>
            ) : (
              <div className="form-success" style={{ background: "rgba(255,255,255,0.06)", color: "var(--cream)" }}>
                <div className="success-icon">✓</div>
                <div>
                  <div className="serif" style={{ fontSize: 22 }}>{t.contacto.form_success}</div>
                </div>
              </div>
            )}
          </div>
        </Reveal2>
      </div>
    </section>
  );
}

// ============================================
// Footer
// ============================================
function Footer() {
  const t = useT2();
  return (
    <footer className="footer">
      <div className="container footer-grid">
        <div>
          <div style={{ fontFamily: "var(--serif)", fontSize: 28 }}>
            Cielo<sup style={{ fontFamily: "var(--mono)", fontSize: 14, color: "var(--gold-soft)", verticalAlign: "super" }}>¹</sup> Mercadotecnia
          </div>
          <div className="muted" style={{ marginTop: 8, fontSize: 14 }}>{t.footer.tag}</div>
        </div>
        <div className="footer-links">
          {t.footer.links.map((l, i) => <span key={i} className="muted mono" style={{ fontSize: 12 }}>{l}</span>)}
        </div>
      </div>
      <div className="footer-bigword serif" aria-hidden="true">CIELO</div>
    </footer>
  );
}

// ============================================
// Sticky lead-magnet banner
// ============================================
function StickyBanner() {
  const t = useT2();
  const [visible, setVisible] = useState2(false);
  const [dismissed, setDismissed] = useState2(false);

  useEffect2(() => {
    const onScroll = () => {
      if (dismissed) return;
      const y = window.scrollY;
      const h = document.documentElement.scrollHeight;
      const vh = window.innerHeight;
      // show after 600px scrolled and hide near bottom (within 200px of footer)
      setVisible(y > 600 && y < h - vh - 200);
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, [dismissed]);

  if (dismissed) return null;
  return (
    <div className={`sticky-banner ${visible ? "visible" : ""}`}>
      <div className="sticky-inner">
        <div className="sticky-icon">
          <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="1.5">
            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/>
          </svg>
        </div>
        <div className="sticky-copy">
          <div className="mono sticky-kicker">{t.sticky.kicker.toUpperCase()}</div>
          <div className="sticky-msg">{t.sticky.msg}</div>
        </div>
        <a href="#manual" className="btn btn-sunset sticky-cta">{t.sticky.cta} →</a>
        <button className="sticky-close" onClick={() => setDismissed(true)} aria-label="Cerrar">×</button>
      </div>
    </div>
  );
}

window.CieloPart2 = { Manual, Productos, Contacto, Footer, StickyBanner };