/* Rotunda — Homepage Sections */

/* ============ CATEGORÍAS (3 cards) ============ */
function Categorias({ onNavigate }) {
  const macCount = window.MACETAS ? window.MACETAS.length : 0;
  const floCount = window.FLOREROS ? window.FLOREROS.length : 0;
  const totalCount = macCount + floCount;

  return (
    <section className="section" id="catalogo" style={{ padding: "50px" }}>
      <div className="section-head">
        <div className="head-left">
          <span className="eyebrow"><span className="dash"></span>01 · Catálogo</span>
          <h2 className="h-section">Dos familias,<br /><span className="serif-it">una misma mano.</span></h2>
        </div>
        <div className="head-right">
          Cada pieza pertenece a una de dos familias. Macetas para acompañar plantas y volúmenes; floreros para sostener flor o silencio.
        </div>
      </div>

      <div className="cats cats-2">
        <Reveal delay={1} className="cat-card" onClick={() => onNavigate("catalog", "macetas")}>
          <div className="frame">
            <ImagePlate id="cat-macetas" tile="#8a7a64" placeholder="MACETAS · Imagen de portada" corner=""></ImagePlate>
          </div>
          <div className="overlay"></div>
          <div className="arrow" aria-hidden="true">↗</div>
          <div className="label-block">
            <h3>Macetas<span className="it">para habitar</span></h3>
            <div className="meta"></div>
          </div>
        </Reveal>

        <Reveal delay={2} className="cat-card" onClick={() => onNavigate("catalog", "floreros")}>
          <div className="frame">
            <ImagePlate id="cat-floreros" tile="#a39782" placeholder="FLOREROS · Imagen de portada" corner=""></ImagePlate>
          </div>
          <div className="overlay"></div>
          <div className="arrow" aria-hidden="true">↗</div>
          <div className="label-block">
            <h3>Floreros<span className="it">para decorar</span></h3>
            <div className="meta"></div>
          </div>
        </Reveal>
      </div>

      <Reveal delay={3} className="cat-bar" onClick={() => onNavigate("catalog", "todas")}>
        <div className="cat-bar-img">
          <ImagePlate id="cat-completo" tile="#6b5e4f" placeholder="CATÁLOGO COMPLETO · Imagen" corner=""></ImagePlate>
        </div>
        <div className="cat-bar-content">
          <span className="cat-bar-title">Catálogo completo</span>
          <span className="cat-bar-count"></span>
          <span className="cat-bar-link">Ver todo el catálogo <span className="cta-arrow">→</span></span>
        </div>
      </Reveal>
    </section>);

}

/* ============ NOSOTROS ============ */
function Nosotros() {
  return (
    <section className="section" id="nosotros" style={{ padding: "30px" }}>
      <div className="section-head">
        <div className="head-left">
          <span className="eyebrow"><span className="dash"></span>02 · Nosotros</span>
        </div>
      </div>

      {/* Stats row first */}
      <Reveal className="about-stats about-stats--top" style={{ padding: "20px 0px 40px", margin: "50px 0px 91px", width: "1059px", height: "110px" }}>
        <div className="item">
          <div className="num">+200</div>
          <div className="lbl">Piezas en catálogo</div>
        </div>
        <div className="item">
          <div className="num">2023</div>
          <div className="lbl">Año de fundación</div>
        </div>
        <div className="item">
          <div className="num">MX</div>
          <div className="lbl">Monterrey, Nuevo León</div>
        </div>
      </Reveal>

      {/* Title + image */}
      <div className="about-row" style={{ height: "0px", marginBottom: "0px" }}>
        <Reveal className="about-row-text">
          <h2 className="h-section">Hecho a mano,<br /><span className="serif-it">una pieza a la vez.</span></h2>
        </Reveal>
        <Reveal delay={1} className="about-row-img">
          <ImagePlate id="about-1" tile="#7d6a52" placeholder="Retrato del taller · vista amplia" corner="Taller · 01"></ImagePlate>
        </Reveal>
      </div>

      {/* Text + image */}
      <div className="about-row about-row--reverse">
        <Reveal className="about-row-text">
          <p className="pull">Diseñamos objetos que no piden permiso para <span className="it">quedarse.</span></p>
          <p className="body-text">Cada pieza de Rotunda se construye en un taller de quinientos metros cuadrados en el barrio de San Pedro, Monterrey. Trabajamos con barros del norte de México, mezclas propias y un horno que decide lo que la mano no controla.</p>
          <p className="body-text">Nuestras piezas se firman, se numeran y se fotografían antes de salir. Lo que ofrecemos no es decoración: es un objeto con memoria.</p>
        </Reveal>
        <Reveal delay={1} className="about-row-img">
          <ImagePlate id="about-2" tile="#9a8d7a" placeholder="Proceso de taller" corner="Detalle · 02"></ImagePlate>
        </Reveal>
      </div>

      {/* Workshop video section */}
      <Reveal className="workshop-video">
        <div className="wv-media">
          <image-slot id="taller-video" shape="rect"
          placeholder="VIDEO DE TALLER · Arrastra tu video o imagen aquí"
          style={{ position: "absolute", inset: "0", width: "100%", height: "100%", "--slot-bg": "#3a342d", "--slot-color": "rgba(241,238,232,0.7)", "--slot-border": "rgba(241,238,232,0.3)" }}>
          </image-slot>
          <div className="wv-overlay"></div>
          <div className="wv-content">
            <h2 className="wv-title">
              <span className="wv-line">El taller</span>
              <span className="wv-line wv-it">donde todo nace.</span>
            </h2>
          </div>
        </div>
      </Reveal>
    </section>);

}

/* ============ CONFIANZA ============ */
function Confianza() {
  const blocks = [
  { num: "01", title: "Empaque artesanal", text: "Cada pieza viaja protegida en capas de papel kraft, espuma biodegradable y caja reforzada. El empaque es parte de la experiencia." },
  { num: "02", title: "Envío a todo México", text: "Entregamos en 5 a 10 días hábiles a cualquier punto del país. Rastreo incluido en todos los pedidos." },
  { num: "03", title: "Garantía de llegada", text: "Si tu pieza llega dañada, la reemplazamos sin costo y sin preguntas. Así de simple." },
  { num: "04", title: "Hecho a mano, firmado", text: "Cada objeto lleva el sello de Rotunda presionado en el material crudo. No es etiqueta: es parte de la pieza." }];


  const testimonials = [
  { text: "La maceta Kazán es espectacular en persona. Las fotos no le hacen justicia — el acabado Azul Safiro tiene una profundidad que solo se aprecia al tacto.", name: "María G.", city: "Ciudad de México" },
  { text: "Pedimos tres floreros para el lobby del despacho. Llegaron impecables, con un empaque que daba gusto abrir. Pura atención al detalle.", name: "Carlos R.", city: "Guadalajara" },
  { text: "Llevo dos años comprando piezas de Rotunda. Cada una es diferente y eso es lo que las hace especiales. Son objetos que se sienten vivos.", name: "Ana L.", city: "Monterrey" }];


  return (
    <section className="section confianza-section" style={{ padding: "0px 50px 0px", height: "700px" }}>

      {/* 4 info blocks */}
      <div className="confianza-grid">
        {blocks.map((b, i) =>
        <Reveal key={b.num} delay={i} className="confianza-block">
            <span className="confianza-num">{b.num}</span>
            <h4 className="confianza-title">{b.title}</h4>
            <p className="confianza-text">{b.text}</p>
          </Reveal>
        )}
      </div>

      {/* Testimonials */}
      <div className="testimonials" style={{ padding: "50px 55px 99px" }}>
        <Reveal>
          <h3 className="h-section test-heading">Lo que dicen<br /><span className="serif-it">quienes ya tienen una pieza.</span></h3>
        </Reveal>
        <div className="test-grid">
          {testimonials.map((t, i) =>
          <Reveal key={i} delay={i + 1} className="test-card">
              <span className="test-quote">"</span>
              <p className="test-text">{t.text}</p>
              <div className="test-author">
                <strong>{t.name}</strong>
                <span>{t.city}</span>
              </div>
            </Reveal>
          )}
        </div>
      </div>
    </section>);

}

/* ============ CONTACTO ============ */
function Contacto() {
  const [form, setForm] = React.useState({ name: "", email: "", phone: "", topic: "Cotización", message: "", whatsapp: true });
  const [sent, setSent] = React.useState(false);

  const submit = (e) => {
    e.preventDefault();
    if (!form.email.includes("@")) return;
    setSent(true);
    setTimeout(() => setSent(false), 6000);
    setForm({ name: "", email: "", phone: "", topic: "Cotización", message: "", whatsapp: true });
  };

  return (
    <section className="section" id="contacto">
      <div className="section-head">
        <div className="head-left">
          <span className="eyebrow"><span className="dash"></span>03 · Contacto</span>
          <h2 className="h-section">Escríbenos.<br /><span className="serif-it">Respondemos pronto.</span></h2>
        </div>
        <div className="head-right">
          Para cotizaciones, prensa, mayoreo o una visita al showroom. También respondemos por WhatsApp e Instagram.
        </div>
      </div>

      <div className="contact">
        <form className="contact-form" onSubmit={submit}>
          <div className="row">
            <div className="field"><label htmlFor="c-name">Nombre</label><input id="c-name" type="text" required value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })}></input></div>
            <div className="field"><label htmlFor="c-email">Correo</label><input id="c-email" type="email" required value={form.email} onChange={(e) => setForm({ ...form, email: e.target.value })}></input></div>
          </div>
          <div className="row">
            <div className="field"><label htmlFor="c-phone">Teléfono · WhatsApp</label><input id="c-phone" type="tel" value={form.phone} onChange={(e) => setForm({ ...form, phone: e.target.value })}></input></div>
          </div>
          <div className="field"><label htmlFor="c-msg">Mensaje</label><textarea id="c-msg" required placeholder="Cuéntanos qué pieza te interesa, dimensiones, color, dónde vivirá…" value={form.message} onChange={(e) => setForm({ ...form, message: e.target.value })}></textarea></div>
          <label className="check"><input type="checkbox" checked={form.whatsapp} onChange={(e) => setForm({ ...form, whatsapp: e.target.checked })}></input><span className="box">{form.whatsapp ? "✓" : ""}</span>Prefiero que me contacten por WhatsApp</label>
          <button type="submit" className="btn btn--solid">{sent ? "Mensaje enviado ✓" : "Enviar mensaje"}{!sent && <span className="btn-arrow">→</span>}</button>
          {sent && <p className="sent-msg">Recibimos tu mensaje. Respondemos en menos de 24 horas hábiles.</p>}
        </form>
      </div>

      <div className="contact-info-bar">
        <div className="group"><h5>Showroom · Monterrey</h5><p>Carretera Nacional</p><a href="https://wa.me/528123456789?text=Hola%2C%20me%20gustar%C3%ADa%20agendar%20una%20visita%20al%20taller." target="_blank" rel="noopener">Agendar visita ↗</a></div>
        <div className="group"><h5>Correo</h5><a href="mailto:hola@rotunda.mx">hola@rotunda.mx</a></div>
        <div className="group"><h5>Teléfono · WhatsApp</h5><a href="tel:+528123456789">+52 81 2345 6789</a><a href="https://wa.me/528123456789" target="_blank" rel="noopener">Abrir en WhatsApp ↗</a></div>
        <div className="group"><h5>Redes</h5><a href="https://instagram.com/rotunda.mx" target="_blank" rel="noopener">Instagram · @rotunda.mx ↗</a><a href="https://tiktok.com/@rotunda.mx" target="_blank" rel="noopener">TikTok · @rotunda.mx ↗</a></div>
        <div className="group"><h5>Horario de atención</h5><p>Lunes a Viernes · 10:00 – 19:00</p><p>Sábado · 11:00 – 16:00</p></div>
        <div className="group"><h5>Rotunda Proyectos</h5><a href="mailto:trade@rotunda.mx">trade@rotunda.mx</a><a href="https://wa.me/528123456789?text=Hola%2C%20me%20interesa%20el%20programa%20Rotunda%20Proyectos." target="_blank" rel="noopener">WhatsApp ↗</a><p className="small">Arquitectos, diseñadores y compradores comerciales</p></div>
      </div>
    </section>);

}

/* ============ TRADE / ARQUITECTOS ============ */
function TradeSection() {
  return (
    <section className="trade-section">
      <div className="trade-full-bg">
        <image-slot id="trade-bg" shape="rect"
        placeholder="IMAGEN · Proyecto arquitectónico con piezas Rotunda"
        style={{ position: "absolute", inset: "0", width: "100%", height: "100%", "--slot-bg": "#2a2520", "--slot-color": "rgba(241,238,232,0.5)", "--slot-border": "rgba(241,238,232,0.2)" }}>
        </image-slot>
        <div className="trade-full-overlay"></div>
      </div>
      <div className="trade-full-content">
        <Reveal>
          <p className="trade-eyebrow">Rotunda Proyectos · Arquitectos &amp; Interioristas</p>
        </Reveal>
        <Reveal delay={1}>
          <h2 className="trade-hero-title">
            <span className="trade-hero-line">Para quienes</span>
            <span className="trade-hero-line trade-hero-it">proyectan espacios.</span>
          </h2>
        </Reveal>
        <Reveal delay={2} className="trade-bottom">
          <p className="trade-desc">Precios especiales, asesoría de selección y piezas en exclusiva para tus proyectos.</p>
          <a href="mailto:trade@rotunda.mx" className="trade-email">trade@rotunda.mx</a>
          <a href="https://wa.me/528123456789?text=Hola%2C%20me%20interesa%20el%20programa%20Rotunda%20Proyectos%20para%20arquitectos." target="_blank" rel="noopener" className="trade-cta">
            Solicitar acceso <span className="cta-arrow">→</span>
          </a>
        </Reveal>
      </div>
    </section>);
}

/* ============ NEWSLETTER ============ */
function NewsletterBanner() {
  const [email, setEmail] = React.useState("");
  const [sent, setSent] = React.useState(false);
  const submit = (e) => {e.preventDefault();if (!email.includes("@")) return;setSent(true);setTimeout(() => setSent(false), 6000);setEmail("");};
  return (
    <section className="newsletter">
      <div>
        <h3>Recibe el catálogo,<br /><span className="it">una vez por temporada.</span></h3>
        <p>Lanzamientos lentos, sin ruido. Una nota cuando hay piezas nuevas o ediciones limitadas.</p>
      </div>
      <form className={`newsletter-form ${sent ? "sent" : ""}`} onSubmit={submit}>
        <input type="email" placeholder="tu@correo.com" value={email} onChange={(e) => setEmail(e.target.value)} required></input>
        <button type="submit">{sent ? "Suscrito ✓" : "Suscribir"} <span className="ar">→</span></button>
      </form>
    </section>);

}

/* ============ FOOTER ============ */
function Footer({ onNavigate }) {
  return (
    <footer className="footer">
      <div className="footer-mark"><img src="logo-white.png" alt="Rotunda" className="footer-logo-img"></img></div>
      <div className="footer-grid">
        <div><h6>Navegar</h6><ul><li><a href="#inicio" onClick={(e) => {e.preventDefault();onNavigate && onNavigate("home");}}>Inicio</a></li><li><a href="#catalogo" onClick={(e) => {e.preventDefault();onNavigate && onNavigate("catalog", "todas");}}>Catálogo</a></li><li><a href="#nosotros">Nosotros</a></li><li><a href="#contacto">Contacto</a></li></ul></div>
        <div><h6>Catálogo</h6><ul><li><a href="#" onClick={(e) => {e.preventDefault();onNavigate && onNavigate("catalog", "macetas");}}>Macetas</a></li><li><a href="#" onClick={(e) => {e.preventDefault();onNavigate && onNavigate("catalog", "floreros");}}>Floreros</a></li><li><a href="#contacto">Mayoreo</a></li></ul></div>
        <div><h6>Contacto</h6><ul><li><a href="mailto:hola@rotunda.mx">hola@rotunda.mx</a></li><li><a href="https://wa.me/528123456789">WhatsApp</a></li><li><a href="#contacto">Visita al Showroom</a></li></ul></div>
        <div><h6>Redes</h6><ul><li><a href="https://instagram.com/rotunda.mx">Instagram</a></li><li><a href="https://tiktok.com/@rotunda.mx">TikTok</a></li></ul></div>
      </div>
      <div className="footer-end"><span>© 2026 Rotunda — Hecho a mano en Monterrey, México</span><span>Catálogo · Edición 2026</span></div>
    </footer>);

}

Object.assign(window, { Categorias, Nosotros, Confianza, Contacto, TradeSection, NewsletterBanner, Footer });