const { useState: useState3, useEffect: useEffect3, useRef: useRef3 } = React;

/* ---------- Gallery ---------- */
function Gallery() {
  const [pieces] = useGallery();
  return (
    <section id="galeria" className="section" data-screen-label="Galeria">
      <div className="wrap">
        <div className="section-header">
          <div className="section-label">04 · Galería</div>
          <h2 className="section-title">Piezas <em>hechas</em><br/>en casa.</h2>
        </div>
        <div className="gallery-strip">
          {pieces.map((p, i) => (
            <Reveal key={p.id || i} delay={i * 60} className="g-cell">
              <div className="g-item" style={{
                background: p.img ? `url(${p.img}) center/cover` : p.bg,
                aspectRatio: p.ratio, marginTop: p.mt
              }}>
                {!p.img && <div className="g-ph"></div>}
                <div className="g-label">{p.label}</div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- Shop ---------- */
function Shop() {
  const [products] = useShop();
  return (
    <section id="tienda" className="section" data-screen-label="Tienda">
      <div className="wrap">
        <div className="section-header">
          <div className="section-label">05 · Tienda</div>
          <h2 className="section-title">Llévate un<br/><em>pedazo</em> a casa.</h2>
        </div>
        <div className="shop-grid">
          {products.map((p, i) => (
            <Reveal key={p.id || i} delay={i * 50}>
              <div className="product">
                <div className={`product-img ${p.cls}`}>
                  {p.img
                    ? <img src={p.img} alt={p.name} style={{width:'100%', height:'100%', objectFit:'cover', borderRadius:'inherit'}}/>
                    : <ClayShape kind={p.shape} />}
                </div>
                <div className="product-name">{p.name}</div>
                <div className="product-meta">
                  <span>{p.type}</span>
                  <span className="product-price">{p.price}</span>
                </div>
                {typeof p.stock === 'number' && p.stock > 0 && p.stock <= 3 && (
                  <div style={{fontSize:11, letterSpacing:'0.08em', textTransform:'uppercase', color:'#d49a2a', marginTop:6}}>Quedan {p.stock}</div>
                )}
                {p.stock === 0 && (
                  <div style={{fontSize:11, letterSpacing:'0.08em', textTransform:'uppercase', color:'#8a3a18', marginTop:6}}>Agotado</div>
                )}
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function ClayShape({ kind }) {
  const shapes = {
    cup: <svg viewBox="0 0 100 100" className="product-shape"><ellipse cx="50" cy="30" rx="30" ry="6" fill="none" stroke="rgba(240,228,168,0.7)" strokeWidth="2"/><path d="M20 30 Q20 85 50 85 Q80 85 80 30" fill="rgba(240,228,168,0.15)" stroke="rgba(240,228,168,0.7)" strokeWidth="2"/><path d="M78 45 Q92 50 78 65" fill="none" stroke="rgba(240,228,168,0.7)" strokeWidth="2"/></svg>,
    bowl: <svg viewBox="0 0 100 100" className="product-shape"><ellipse cx="50" cy="35" rx="42" ry="8" fill="none" stroke="rgba(240,228,168,0.7)" strokeWidth="2"/><path d="M8 35 Q10 80 50 80 Q90 80 92 35" fill="rgba(240,228,168,0.15)" stroke="rgba(240,228,168,0.7)" strokeWidth="2"/></svg>,
    vase: <svg viewBox="0 0 100 100" className="product-shape"><path d="M35 15 L65 15 L60 30 Q85 40 85 65 Q85 90 50 90 Q15 90 15 65 Q15 40 40 30 Z" fill="rgba(240,228,168,0.15)" stroke="rgba(240,228,168,0.7)" strokeWidth="2"/></svg>,
    plate: <svg viewBox="0 0 100 100" className="product-shape"><ellipse cx="50" cy="55" rx="45" ry="10" fill="rgba(240,228,168,0.15)" stroke="rgba(240,228,168,0.7)" strokeWidth="2"/><ellipse cx="50" cy="53" rx="35" ry="6" fill="none" stroke="rgba(240,228,168,0.5)" strokeWidth="1"/></svg>,
    teapot: <svg viewBox="0 0 100 100" className="product-shape"><ellipse cx="48" cy="55" rx="30" ry="25" fill="rgba(240,228,168,0.15)" stroke="rgba(240,228,168,0.7)" strokeWidth="2"/><path d="M75 50 L90 40 L88 55" fill="none" stroke="rgba(240,228,168,0.7)" strokeWidth="2"/><path d="M18 50 Q10 55 15 62" fill="none" stroke="rgba(240,228,168,0.7)" strokeWidth="2"/><rect x="42" y="22" width="12" height="6" rx="2" fill="rgba(240,228,168,0.7)"/></svg>,
    pot: <svg viewBox="0 0 100 100" className="product-shape"><path d="M25 30 L75 30 L70 85 L30 85 Z" fill="rgba(240,228,168,0.15)" stroke="rgba(240,228,168,0.7)" strokeWidth="2"/><line x1="22" y1="34" x2="78" y2="34" stroke="rgba(240,228,168,0.7)" strokeWidth="2"/></svg>
  };
  return shapes[kind] || shapes.cup;
}

/* ---------- Private events ---------- */
function PrivateEvents() {
  return (
    <section id="eventos" className="section events-private" data-screen-label="Eventos privados">
      <div className="wrap">
        <div className="section-header">
          <div className="section-label">06 · Eventos privados</div>
          <h2 className="section-title" style={{ color: 'var(--cream)' }}>Cumpleaños,<br/>despedidas, <em>clan</em>.</h2>
        </div>
        <div className="pe-grid">
          <div className="pe-card">
            <div className="pe-card-head">
              <h3>Paquete Solstice<br/>Privado</h3>
              <div className="pe-price"><span className="cur">S/</span> 1,800</div>
            </div>
            <ul className="pe-list">
              <li><span className="pe-num">12</span><span>Asientos para tu grupo — sesión completa exclusiva</span></li>
              <li><span className="pe-num">6</span><span>Botellas de vino o bebidas a elección</span></li>
              <li><span className="pe-num">03</span><span>Tablas grandes de charcutería artesanal</span></li>
              <li><span className="pe-num">01</span><span>Torta para cerrar la noche</span></li>
              <li><span className="pe-num">★</span><span>Dos ceramistas guiando la sesión</span></li>
              <li><span className="pe-num">◎</span><span>Todas las piezas cocidas y listas en 2 semanas</span></li>
            </ul>
            <a href="#contacto" className="pkg-btn" style={{ borderColor: 'rgba(240,228,168,0.35)' }}>Reservar fecha</a>
          </div>
          <div className="pe-copy">
            <h3>Cuando la arcilla se convierte en la excusa perfecta.</h3>
            <p>Ideal para cumpleaños, despedidas de soltera, aniversarios de empresa o simplemente una tarde fuera de lo común con tu gente. Tú traes a los tuyos — nosotros traemos la arcilla, el vino y la tabla.</p>
            <a href="#contacto" className="pe-btn">Cotizar mi evento <span className="pe-btn-arrow">→</span></a>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- Testimonial ---------- */
function Testimonial() {
  return (
    <section className="testimonial" data-screen-label="Testimonio">
      <div className="wrap">
        <Reveal>
          <p className="testimonial-quote">
            "Llegué pensando que haría una taza. Salí con <em>tres piezas</em>, dos amigas nuevas y la idea de que estoy volviendo <em>cada semana</em>."
          </p>
          <p className="testimonial-author">— Camila R., alumna del paquete Ritmo</p>
        </Reveal>
      </div>
    </section>
  );
}

/* ---------- Contact ---------- */
function Contact() {
  const [sent, setSent] = useState3(false);
  return (
    <section id="contacto" className="section contact" data-screen-label="Contacto">
      <div className="wrap">
        <div className="section-header">
          <div className="section-label">07 · Contacto</div>
          <h2 className="section-title">Escríbenos —<br/>la primera <em>copa</em> va de casa.</h2>
        </div>
        <div className="contact-grid">
          <form className="contact-form" onSubmit={(e) => { e.preventDefault(); setSent(true); }}>
            <div className="field">
              <label>Nombre</label>
              <input type="text" placeholder="¿Cómo te llamas?" required />
            </div>
            <div className="field">
              <label>Correo o WhatsApp</label>
              <input type="text" placeholder="tu@correo.com" required />
            </div>
            <div className="field">
              <label>¿Qué te interesa?</label>
              <select>
                <option>Paquete Descubre — S/ 150</option>
                <option>Paquete Ritmo — S/ 250</option>
                <option>Paquete Inmersión — S/ 450</option>
                <option>Evento privado — S/ 1,800</option>
                <option>Solo quiero saber más</option>
              </select>
            </div>
            <div className="field">
              <label>Cuéntanos</label>
              <textarea placeholder="Una fecha, un número, lo que imaginas..." />
            </div>
            <button className="contact-submit" type="submit">
              {sent ? '¡Gracias! Te escribimos pronto ✓' : 'Enviar mensaje'}
            </button>
          </form>

          <div>
            <div className="contact-info-block">
              <h4>Dirección</h4>
              <p>Manuel Ugarteche 605,<br/>Arequipa, Perú</p>
            </div>
            <div className="contact-info-block">
              <h4>Horarios</h4>
              <p>Mar – Sáb<br/><span style={{ opacity: 0.7, fontSize: 20 }}>10:00 – 13:00</span><br/><span style={{ opacity: 0.7, fontSize: 20 }}>15:00 – 20:00</span><br/><span style={{ opacity: 0.4, fontSize: 14, fontFamily: 'var(--font-body)', letterSpacing: '0.08em' }}>Cerrado Dom y Lun</span></p>
            </div>
            <div className="contact-info-block">
              <h4>Escríbenos</h4>
              <p><a href="#">hola@solstice.pe</a><br/><a href="#" style={{ opacity: 0.8 }}>+51 954 221 887</a></p>
            </div>
            <div className="contact-map">
              <iframe
                src="https://maps.google.com/maps?q=Manuel+Ugarteche+605,+Arequipa,+Peru&output=embed&z=16"
                width="100%" height="220" style={{ border: 0, borderRadius: 12, display: 'block' }}
                allowFullScreen loading="lazy" referrerPolicy="no-referrer-when-downgrade"
                title="Ubicación Solstice Cerámica"
              ></iframe>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- Footer ---------- */
function Footer() {
  return (
    <footer className="footer" data-screen-label="Footer">
      <div className="wrap">
        <div className="footer-big">Solstice.</div>
        <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr', gap: 40, marginBottom: 40, paddingBottom: 40, borderTop: '1px solid rgba(240,228,168,0.15)', paddingTop: 40 }}>
          <div style={{ fontFamily: 'var(--font-display)', fontSize: 20, lineHeight: 1.3, maxWidth: 320 }}>
            Cerámica, vino y tiempo lento en el corazón de Arequipa.
          </div>
          <div>
            <div className="mono" style={{ opacity: 0.6, marginBottom: 12 }}>Explora</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              <a href="#clases">Clases</a>
              <a href="parejas.html">Parejas</a>
              <a href="fechas/index.html">Próximas fechas</a>
              <a href="blog/index.html">Blog</a>
              <a href="sobre-el-estudio.html">Sobre nosotros</a>
              <a href="faq.html">FAQ</a>
            </div>
          </div>
          <div>
            <div className="mono" style={{ opacity: 0.6, marginBottom: 12 }}>Encuéntranos</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              <a href="#">Instagram</a>
              <a href="#">TikTok</a>
              <a href="#">WhatsApp</a>
            </div>
          </div>
          <div>
            <div className="mono" style={{ opacity: 0.6, marginBottom: 12 }}>Newsletter</div>
            <div style={{ fontSize: 14, opacity: 0.8, marginBottom: 8 }}>Noticias del estudio, 1 vez al mes.</div>
            <div style={{ display: 'flex', gap: 8, borderBottom: '1px solid rgba(240,228,168,0.3)', paddingBottom: 6 }}>
              <input placeholder="tu@correo.com" style={{ background: 'transparent', border: 0, color: 'var(--cream)', outline: 'none', flex: 1, fontSize: 14 }} />
              <button>→</button>
            </div>
          </div>
        </div>
        <div className="footer-bottom">
          <div>© 2026 Solstice Cerámica · Arequipa, Perú</div>
          <div>Hecho con barro y cariño</div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Gallery, Shop, PrivateEvents, Testimonial, Contact, Footer });