const { useState: useState2, useEffect: useEffect2, useRef: useRef2 } = React;

/* ---------- About ---------- */
function About() {
  return (
    <section id="nosotros" className="section" data-screen-label="Nosotros">
      <div className="wrap">
        <div className="section-header">
          <div className="section-label">01 · Nosotros</div>
          <h2 className="section-title">Un estudio<br/>que <em>respira</em> barro.</h2>
        </div>
        <div className="about-grid">
          <Reveal className="about-img">
            <div className="about-img-ph">
              <span>foto del estudio — arequipa</span>
            </div>
          </Reveal>
          <div className="about-copy">
            <Reveal><p>Solstice nació en una pequeña casona del centro de Arequipa con una idea simple: que hacer cerámica debería sentirse como una tarde con amigos — relajada, creativa y un poco desordenada.</p></Reveal>
            <Reveal delay={100}><p>Aquí no solo enseñamos a tornear. Servimos vino, armamos tablas de charcutería y dejamos que las horas pasen mientras las manos descubren formas nuevas.</p></Reveal>
            <Reveal delay={200}>
              <div style={{ marginTop: 16 }}></div>
            </Reveal>
          </div>
        </div>
      </div>
    </section>
  );
}

function Reveal({ children, className = '', delay = 0 }) {
  const ref = useRef2(null);
  const [vis, setVis] = useState2(false);
  useEffect2(() => {
    const obs = new IntersectionObserver((entries) => {
      entries.forEach((e) => { if (e.isIntersecting) setVis(true); });
    }, { threshold: 0.15 });
    if (ref.current) obs.observe(ref.current);
    return () => obs.disconnect();
  }, []);
  return (
    <div ref={ref} className={`reveal ${className} ${vis ? 'in' : ''}`} style={{ transitionDelay: `${delay}ms` }}>
      {children}
    </div>
  );
}

/* ---------- Packages ---------- */
function Packages() {
  const pkgs = [
    {
      name: 'Descubre',
      slug: 'descubre',
      tag: 'Taller de cerámica de fin de semana en Arequipa',
      price: 150,
      per: '2 clases · 7 días aparte',
      features: [
        'Clase 1: modelado en arcilla',
        'Clase 2: pintura de tu pieza',
        'Vino, jugo y otras bebidas — libre',
        'Tabla de charcutería en cada sesión',
        'Todo el material incluido',
        'Tu pieza cocida y lista para llevar'
      ],
      cta: 'Reservar Descubre'
    },
    {
      name: 'Ritmo',
      slug: 'ritmo',
      tag: 'Curso mensual de cerámica en Arequipa',
      price: 250,
      per: '4 clases · 1 por semana',
      features: [
        '4 sesiones mensuales',
        '2 bebidas por clase (sangría, jugo o gaseosa)',
        'Sandwich o snack artesanal',
        'Piezas guardadas y cocidas',
        'Acceso a materiales básicos',
        'Comunidad + ceremonia mensual'
      ],
      badge: 'Más popular',
      featured: true,
      cta: 'Reservar Ritmo'
    },
    {
      name: 'Inmersión',
      slug: 'inmersion',
      tag: 'Programa intensivo mensual en Arequipa',
      price: 450,
      per: '8 clases · 2 por semana',
      features: [
        '8 sesiones en el mes',
        '2 bebidas por clase',
        'Sandwich o snack artesanal',
        'Acceso prioritario a tornos',
        'Descuentos en piezas de la tienda',
        '1 invitado de cortesía'
      ],
      cta: 'Reservar Inmersión'
    }
  ];
  return (
    <section id="clases" className="section packages" data-screen-label="Clases y paquetes">
      <div className="wrap">
        <div className="section-header">
          <div className="section-label">02 · Clases y paquetes</div>
          <h2 className="section-title">Elige tu<br/><em>experiencia</em>.</h2>
        </div>
        <div className="pkg-grid">
          {pkgs.map((p, i) => (
            <Reveal key={p.name} delay={i * 100}>
              <div className={`pkg ${p.featured ? 'featured' : ''}`}>
                {p.badge && <div className="pkg-badge">{p.badge}</div>}
                <div className="pkg-name">{p.name}</div>
                <div className="pkg-tag">{p.tag}</div>
                <div className="pkg-price"><span className="cur">S/</span>{p.price}</div>
                <div className="pkg-per">{p.per}</div>
                <ul className="pkg-list">
                  {p.features.map((f, j) => <li key={j}>{f}</li>)}
                </ul>
                <a href={`${p.slug}.html`} className="pkg-btn">Ver detalles →</a>
                <a href="#contacto" className="pkg-btn" style={{marginTop:8, background:'transparent', color:'inherit', border:'1px solid currentColor'}}>{p.cta}</a>
              </div>
            </Reveal>
          ))}
        </div>
        <div style={{textAlign:'center', marginTop:60}}>
          <a href="parejas.html" style={{
            fontFamily:'var(--font-hand)', fontSize:28, color:'var(--clay)',
            borderBottom:'1px solid currentColor', paddingBottom:4
          }}>
            ¿Vienes en pareja? Mira nuestra experiencia especial →
          </a>
        </div>
      </div>
    </section>
  );
}

/* ---------- Calendar ---------- */
function Calendar() {
  const [events, setEvents] = useEvents();
  const [month, setMonth] = useState2(4);
  const [year, setYear] = useState2(2026);
  const [selected, setSelected] = useState2(null);
  const [hovered, setHovered] = useState2(null);
  const [mousePos, setMousePos] = useState2({ x: 0, y: 0 });

  const monthNames = ['Enero','Febrero','Marzo','Abril','Mayo','Junio','Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre'];
  const monthShort = ['ENE','FEB','MAR','ABR','MAY','JUN','JUL','AGO','SEP','OCT','NOV','DIC'];

  const firstDay = new Date(year, month, 1).getDay();
  const daysInMonth = new Date(year, month + 1, 0).getDate();
  const startOffset = (firstDay + 6) % 7;

  // Events in this month, mapped by day
  const monthEvents = events.filter(e => {
    const d = new Date(e.date + 'T00:00:00');
    return d.getMonth() === month && d.getFullYear() === year;
  });
  const eventsByDay = {};
  monthEvents.forEach(e => {
    const d = new Date(e.date + 'T00:00:00').getDate();
    if (!eventsByDay[d]) eventsByDay[d] = [];
    eventsByDay[d].push(e);
  });

  const visibleEvents = selected != null && eventsByDay[selected]
    ? eventsByDay[selected]
    : monthEvents.slice().sort((a, b) => a.date.localeCompare(b.date));

  const cells = [];
  // Monday=0 ... Sunday=6 after the +6%7 shift
  // Working days: Tue(1), Wed(2), Thu(3), Fri(4), Sat(5) — closed Mon(0) and Sun(6)
  for (let i = 0; i < startOffset; i++) cells.push({ muted: true, d: '' });
  for (let d = 1; d <= daysInMonth; d++) {
    const dow = new Date(year, month, d).getDay(); // 0=Sun, 1=Mon, ..., 6=Sat
    const closed = dow === 0 || dow === 1; // Sunday or Monday
    cells.push({ d, event: !!eventsByDay[d], selected: d === selected, closed });
  }

  const nav = (dir) => {
    let nm = month + dir, ny = year;
    if (nm < 0) { nm = 11; ny--; } else if (nm > 11) { nm = 0; ny++; }
    setMonth(nm); setYear(ny);
    setSelected(null);
  };

  const hoveredEvt = hovered != null ? (eventsByDay[hovered] || [])[0] : null;
  const spotsLeft = hoveredEvt ? hoveredEvt.total - hoveredEvt.taken : 0;

  return (
    <section id="calendario" className="section" data-screen-label="Calendario">
      <div className="wrap">
        <div className="section-header">
          <div className="section-label">03 · Calendario</div>
          <h2 className="section-title">Lo que <em>pasa</em><br/>este mes.</h2>
        </div>
        <div className="cal-grid">
          <div className="cal-month" onMouseMove={(e) => setMousePos({ x: e.clientX, y: e.clientY })}>
            <div className="cal-head">
              <h3>{monthNames[month]} <span style={{ opacity: 0.4 }}>{year}</span></h3>
              <div className="cal-nav">
                <button onClick={() => nav(-1)}>‹</button>
                <button onClick={() => nav(1)}>›</button>
              </div>
            </div>
            <div className="cal-weekdays">
              {['L','M','X','J','V','S','D'].map((w, i) => <div key={i}>{w}</div>)}
            </div>
            <div className="cal-days">
              {cells.map((c, i) => (
                <div key={i}
                  className={`cal-day ${c.muted ? 'muted' : ''} ${c.closed ? 'closed' : ''} ${c.event ? 'has-event' : ''} ${c.selected ? 'selected' : ''}`}
                  title={c.closed ? 'Cerrado — solo martes a sábado' : ''}
                  onClick={() => !c.muted && !c.closed && setSelected(c.d === selected ? null : c.d)}
                  onMouseEnter={() => !c.muted && c.event && setHovered(c.d)}
                  onMouseLeave={() => setHovered(null)}>
                  {c.d}
                </div>
              ))}
            </div>
            <div style={{ marginTop: 24, paddingTop: 20, borderTop: '1px solid rgba(42,21,9,0.15)', display: 'flex', gap: 20, fontSize: 13, color: 'var(--ink-soft)', justifyContent: 'space-between', flexWrap: 'wrap' }}>
              <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                  <span style={{ width: 8, height: 8, borderRadius: '50%', background: 'var(--accent)' }}></span>
                  Con evento
                </div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                  <span style={{ width: 8, height: 8, borderRadius: '50%', background: 'var(--ink-soft)', opacity: 0.4 }}></span>
                  Disponible
                </div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 6, opacity: 0.6 }}>
                  <span style={{ width: 8, height: 8, background: 'repeating-linear-gradient(45deg, var(--ink-soft) 0 2px, transparent 2px 4px)' }}></span>
                  Cerrado
                </div>
              </div>
            </div>
          </div>

          <div className="events-list">
            {visibleEvents.length === 0 && (
              <div style={{ padding: 40, textAlign: 'center', color: 'var(--ink-soft)', fontFamily: 'var(--font-hand)', fontSize: 24 }}>
                No hay eventos este mes todavía.
              </div>
            )}
            {visibleEvents.map((e, i) => {
              const day = new Date(e.date + 'T00:00:00').getDate();
              const m = new Date(e.date + 'T00:00:00').getMonth();
              const left = e.total - e.taken;
              const pct = e.total > 0 ? (e.taken / e.total) * 100 : 0;
              return (
                <Reveal key={e.id} delay={i * 80}>
                  <div className="event">
                    <div className="event-date">
                      {String(day).padStart(2, '0')}
                      <span className="m">{monthShort[m]}</span>
                    </div>
                    <div className="event-body">
                      <h4>{e.title}</h4>
                      <div className="event-meta">
                        <span>⏱ {e.time}</span>
                        <span>· {e.tag}</span>
                      </div>
                      <div className="event-spots">
                        <div className="event-spots-bar">
                          <div className="event-spots-fill" style={{ width: `${pct}%`, background: left === 0 ? '#8a3a18' : 'var(--accent)' }}></div>
                        </div>
                        <div className="event-spots-text">
                          {left === 0 ? 'Agotado' : `${left} de ${e.total} cupos disponibles`}
                        </div>
                      </div>
                    </div>
                    <div className="event-price">{e.price}</div>
                  </div>
                </Reveal>
              );
            })}
          </div>
        </div>
      </div>

      {hoveredEvt && (
        <div className="cal-tooltip" style={{ left: mousePos.x, top: mousePos.y }}>
          <div className="cal-tooltip-title">{hoveredEvt.title}</div>
          <div className="cal-tooltip-meta">{hoveredEvt.time}</div>
          <div className="cal-tooltip-spots">
            <span className={`cal-tooltip-dot ${spotsLeft === 0 ? 'empty' : spotsLeft <= 3 ? 'low' : ''}`}></span>
            {spotsLeft === 0 ? 'Agotado' : `${spotsLeft} cupo${spotsLeft === 1 ? '' : 's'} libre${spotsLeft === 1 ? '' : 's'}`}
            <span style={{ opacity: 0.5 }}>· {hoveredEvt.price}</span>
          </div>
        </div>
      )}
    </section>
  );
}

Object.assign(window, { Reveal, About, Packages, Calendar });