// sections.jsx — Programs, methodology, stats, testimonials, FAQ, CTA, footer

const { useState: useStateS, useEffect: useEffectS } = React;

function Programs({ p }) {
  const [active, setActive] = useStateS(0);
  const program = PROGRAMS[active];

  return (
    <section id="programas" style={{ padding: "120px 32px 80px", background: p.bg }}>
      <div style={{ maxWidth: 1280, margin: "0 auto" }}>
        <SectionHeader p={p} eyebrow="Tres extraescolares · una metodología"
        title={<>Cada peque encuentra <em style={{ fontStyle: "normal", color: p.primary }}>su sitio</em>.</>}
        subtitle="Robótica, Diverciencia y Mundo digital. Pueden combinar varias o quedarse con una. Cada programa avanza por niveles, así que un alumno crece con nosotros año tras año." />

        <div data-program-tabs style={{
          display: "flex", gap: 8, marginTop: 56, marginBottom: 32, flexWrap: "wrap",
          background: p.surface, padding: 6, borderRadius: 999, border: `1px solid ${p.ink}11`,
          width: "fit-content"
        }}>
          {PROGRAMS.map((prog, i) =>
          <button key={prog.id} onClick={() => setActive(i)} style={{
            border: 0, padding: "12px 22px", borderRadius: 999, cursor: "default",
            fontSize: 15, fontWeight: 600,
            fontFamily: "'Plus Jakarta Sans', sans-serif",
            background: i === active ? p.ink : "transparent",
            color: i === active ? p.bg : p.inkSoft,
            transition: "all .2s ease"
          }}>{prog.name}</button>
          )}
        </div>

        <div data-program-detail style={{
          display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 48, alignItems: "stretch",
          background: p.surface, borderRadius: 32, padding: 40, border: `1px solid ${p.ink}0d`,
          boxShadow: `0 4px 30px ${p.ink}08`
        }}>
          <div>
            <div style={{
              display: "inline-block", padding: "5px 12px", borderRadius: 999,
              background: p[program.color] + "22", color: p[program.color],
              fontSize: 12, fontWeight: 700, letterSpacing: ".05em"
            }}>{program.age}</div>
            <h3 style={{
              fontFamily: "'Bricolage Grotesque', sans-serif", fontWeight: 700,
              fontSize: 56, lineHeight: 1.0, letterSpacing: "-.03em",
              color: p.ink, margin: "20px 0 16px"
            }}>{program.name}</h3>
            <p style={{
              fontSize: 22, lineHeight: 1.35, color: p.ink, margin: "0 0 24px",
              fontFamily: "'Bricolage Grotesque', sans-serif", fontWeight: 500
            }}>{program.tagline}</p>
            <p style={{ fontSize: 16, lineHeight: 1.6, color: p.inkSoft, marginBottom: 28 }}>
              {program.description}
            </p>
            <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 12 }}>
              {program.bullets.map((b) =>
              <li key={b} style={{ display: "flex", gap: 12, alignItems: "flex-start", fontSize: 15, color: p.ink }}>
                  <span style={{
                  flexShrink: 0, width: 22, height: 22, borderRadius: 999,
                  background: p[program.color], color: program.color === "accent" ? p.ink : "#fff",
                  display: "grid", placeItems: "center", fontSize: 12, fontWeight: 700,
                  marginTop: 1
                }}>✓</span>
                  <span>{b}</span>
                </li>
              )}
            </ul>
            <a href={`${program.id}.html`} style={{
              display: "inline-flex", alignItems: "center", gap: 8, marginTop: 36,
              color: p.ink, fontWeight: 600, fontSize: 15, textDecoration: "none",
              borderBottom: `2px solid ${p.ink}`, paddingBottom: 4
            }}>Ver programa completo <span>→</span></a>
          </div>
          <div style={{
            position: "relative", borderRadius: 24, overflow: "hidden",
            minHeight: 480, background: p.chip
          }}>
            <img src={program.image} alt={program.name}
            style={{ width: "100%", height: "100%", objectFit: "cover", position: "absolute", inset: 0 }} />
            <div style={{
              position: "absolute", bottom: 20, left: 20, right: 20,
              background: p.surface + "ee", backdropFilter: "blur(8px)",
              padding: "16px 20px", borderRadius: 16,
              display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 16
            }}>
              {[
              { k: "1 sesión / semana", v: program.duration || "90 min" },
              { k: "Niveles", v: "Iniciación · Avanzado" },
              { k: "Cuota", v: program.price || "35€/mes" }].
              map((d) =>
              <div key={d.k}>
                  <div style={{ fontSize: 11, color: p.inkSoft, fontWeight: 600, letterSpacing: ".03em" }}>{d.k.toUpperCase()}</div>
                  <div style={{ fontSize: 14, color: p.ink, fontWeight: 600, fontFamily: "'Bricolage Grotesque', sans-serif", marginTop: 2 }}>{d.v}</div>
                </div>
              )}
            </div>
          </div>
        </div>
      </div>
    </section>);

}

function SectionHeader({ p, eyebrow, title, subtitle, align = "left" }) {
  return (
    <div data-section-header style={{ maxWidth: 720, textAlign: align, margin: align === "center" ? "0 auto" : "0" }}>
      <div style={{
        fontSize: 12, fontWeight: 700, letterSpacing: ".12em", textTransform: "uppercase",
        color: p.primary, marginBottom: 16
      }}>{eyebrow}</div>
      <h2 style={{
        fontFamily: "'Bricolage Grotesque', sans-serif", fontWeight: 700,
        fontSize: "clamp(40px, 4.6vw, 64px)", lineHeight: 1.05, letterSpacing: "-.03em",
        color: p.ink, margin: 0
      }}>{title}</h2>
      {subtitle &&
      <p style={{
        fontSize: 18, lineHeight: 1.55, color: p.inkSoft, marginTop: 20,
        fontFamily: "'Plus Jakarta Sans', sans-serif"
      }}>{subtitle}</p>
      }
    </div>);

}

function Pillars({ p }) {
  const C = window.WIPBOT_CONTENT;
  const items = (C && C.pillars ? C.pillars : [
    { k: "01", title: "Crea",      desc: "Construye, modela, pinta, prototipa. Cada sesión termina con algo hecho con sus manos.",                                   imageKey: "crea"     },
    { k: "02", title: "Aprende",   desc: "Pensamiento lógico, mates aplicadas, lengua técnica. Sin que parezca un examen.",                                          imageKey: "aprende"  },
    { k: "03", title: "Comparte",  desc: "Trabajo en equipo, presentar lo que han hecho, perder con deportividad y ganar con humildad.",                              imageKey: "comparte" }
  ]).map(function(it) { return Object.assign({}, it, { img: ASSETS[it.imageKey] || it.img }); });

  return (
    <section id="metodologia" style={{ padding: "100px 32px", background: p.surface }}>
      <div style={{ maxWidth: 1280, margin: "0 auto" }}>
        <SectionHeader p={p} eyebrow="Nuestra metodología STEAM"
        title={<>Crear, aprender, compartir.<br />En ese orden.</>}
        subtitle="No es solo lo que aprenden, es cómo lo aprenden. Tres pilares que repetimos cada sesión, cada trimestre, cada curso." />
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24, marginTop: 64 }}>
          {items.map((it) =>
          <article key={it.k} style={{
            background: p.bg, borderRadius: 24, overflow: "hidden",
            border: `1px solid ${p.ink}10`
          }}>
              <div style={{ aspectRatio: "4/3", overflow: "hidden", background: p.chip }}>
                <img src={it.img} alt={it.title} style={{ width: "100%", height: "100%", objectFit: "cover" }} />
              </div>
              <div style={{ padding: "28px 28px 32px" }}>
                <div style={{
                fontFamily: "'Bricolage Grotesque', sans-serif", fontWeight: 700,
                fontSize: 13, color: p.primary, letterSpacing: ".05em"
              }}>{it.k}</div>
                <h3 style={{
                fontFamily: "'Bricolage Grotesque', sans-serif", fontWeight: 700,
                fontSize: 36, letterSpacing: "-.02em", color: p.ink,
                margin: "8px 0 12px"
              }}>{it.title}</h3>
                <p style={{ fontSize: 15, lineHeight: 1.55, color: p.inkSoft, margin: 0 }}>{it.desc}</p>
              </div>
            </article>
          )}
        </div>
      </div>
    </section>);

}

function StatsBand({ p }) {
  return (
    <section style={{
      background: p.primary, color: p.primaryInk,
      padding: "80px 32px", position: "relative", overflow: "hidden"
    }}>
      <div style={{ maxWidth: 1280, margin: "0 auto", position: "relative", zIndex: 1 }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 2fr", gap: 56, alignItems: "center" }}>
          <h2 style={{
            fontFamily: "'Bricolage Grotesque', sans-serif", fontWeight: 700,
            fontSize: 48, lineHeight: 1.05, letterSpacing: "-.03em", margin: 0
          }}>
            7 años cerca<br />
            de las familias<br />
            del <em style={{ fontStyle: "normal", color: p.accent }}>Bajo Aragón</em>.
          </h2>
          <div data-stats-grid style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 32 }}>
            {STATS.map((s) =>
            <div key={s.label} style={{ borderTop: `1px solid ${p.primaryInk}33`, paddingTop: 20 }}>
                <div style={{
                fontFamily: "'Bricolage Grotesque', sans-serif", fontWeight: 700,
                fontSize: 80, lineHeight: 1, letterSpacing: "-.04em",
                color: p.accent
              }}>
                  {s.n}{s.suffix && <span style={{ fontSize: 32, marginLeft: 6, color: p.primaryInk + "cc" }}>{s.suffix}</span>}
                </div>
                <div style={{ fontSize: 14, marginTop: 8, opacity: .8, lineHeight: 1.4 }}>{s.label}</div>
              </div>
            )}
          </div>
        </div>
      </div>
      <svg viewBox="0 0 1200 400" style={{ position: "absolute", inset: 0, opacity: .08, pointerEvents: "none" }}>
        <circle cx="1100" cy="60" r="180" fill={p.accent} />
        <circle cx="80" cy="380" r="140" fill={p.primaryInk} />
      </svg>
    </section>);

}

function Testimonials({ p }) {
  return (
    <section id="nosotros" style={{ padding: "100px 32px", background: p.bg }}>
      <div style={{ maxWidth: 1280, margin: "0 auto" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 56, alignItems: "end", marginBottom: 56 }}>
          <SectionHeader p={p} eyebrow="Familias de Wipbot"
          title={<>Lo que dicen los <em style={{ fontStyle: "normal", color: p.primary }}>padres</em>.</>} />
          <p style={{ fontSize: 16, color: p.inkSoft, lineHeight: 1.55, fontFamily: "'Plus Jakarta Sans', sans-serif" }}>Más de 300 familias han pasado por nuestras aulas en todo el Bajo Aragon. Estos son algunos de los comentarios que recibimos cada curso.


          </p>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24 }}>
          {TESTIMONIALS.map((t, i) =>
          <article key={i} style={{
            background: i === 1 ? p.ink : p.surface,
            color: i === 1 ? p.bg : p.ink,
            padding: 32, borderRadius: 24,
            border: i === 1 ? "none" : `1px solid ${p.ink}10`,
            display: "flex", flexDirection: "column", gap: 24
          }}>
              <svg width="32" height="22" viewBox="0 0 32 22">
                <path d="M0 22 V12 C0 5 4 0 12 0 V6 C7 6 6 9 6 12 H12 V22 Z M20 22 V12 C20 5 24 0 32 0 V6 C27 6 26 9 26 12 H32 V22 Z"
              fill={i === 1 ? p.accent : p.primary} />
              </svg>
              <p style={{
              fontSize: 18, lineHeight: 1.45, margin: 0, flex: 1,
              fontFamily: "'Bricolage Grotesque', sans-serif", fontWeight: 500,
              letterSpacing: "-.01em"
            }}>"{t.text}"</p>
              <div style={{ borderTop: `1px solid ${i === 1 ? p.bg + "22" : p.ink + "12"}`, paddingTop: 16 }}>
                <div style={{ fontWeight: 700, fontSize: 14 }}>{t.author}</div>
                <div style={{ fontSize: 12, opacity: .65, marginTop: 2 }}>{t.role}</div>
              </div>
            </article>
          )}
        </div>
      </div>
    </section>);

}

function FAQ({ p }) {
  const [open, setOpen] = useStateS(0);
  return (
    <section id="faq" style={{ padding: "100px 32px", background: p.surface }}>
      <div style={{ maxWidth: 1100, margin: "0 auto", display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 80, alignItems: "start" }}>
        <div data-faq-side style={{ position: "sticky", top: 100 }}>
          <SectionHeader p={p} eyebrow="Para padres"
          title={<>Las dudas que <em style={{ fontStyle: "normal", color: p.primary }}>todos</em> tenéis.</>}
          subtitle="Si no encuentras tu respuesta, escríbenos por WhatsApp y te contestamos en el día." />
          <a href="https://wa.me/+34622457302" style={{
            display: "inline-flex", alignItems: "center", gap: 10, marginTop: 28,
            background: p.ink, color: p.bg, padding: "14px 22px", borderRadius: 999,
            fontWeight: 600, fontSize: 15, textDecoration: "none"
          }}>
            <span style={{
              width: 22, height: 22, borderRadius: 999, background: "#25D366",
              display: "grid", placeItems: "center", fontSize: 12
            }}>✓</span>
            Escríbenos por WhatsApp
          </a>
        </div>
        <div>
          {FAQ_ITEMS.map((item, i) =>
          <div key={i} style={{ borderBottom: `1px solid ${p.ink}14` }}>
              <button onClick={() => setOpen(open === i ? -1 : i)} style={{
              width: "100%", textAlign: "left", border: 0, background: "transparent",
              padding: "22px 0", cursor: "default",
              display: "flex", justifyContent: "space-between", gap: 24, alignItems: "center",
              fontFamily: "'Bricolage Grotesque', sans-serif", fontWeight: 600,
              fontSize: 20, color: p.ink, letterSpacing: "-.01em"
            }}>
                <span>{item.q}</span>
                <span style={{
                flexShrink: 0, width: 32, height: 32, borderRadius: 999,
                background: open === i ? p.ink : p.chip,
                color: open === i ? p.bg : p.ink,
                display: "grid", placeItems: "center", fontSize: 16,
                transition: "all .2s ease",
                transform: open === i ? "rotate(45deg)" : "rotate(0)"
              }}>+</span>
              </button>
              <div style={{
              maxHeight: open === i ? 300 : 0, overflow: "hidden",
              transition: "max-height .3s ease"
            }}>
                <p style={{
                fontSize: 16, lineHeight: 1.6, color: p.inkSoft,
                margin: 0, paddingBottom: 22, paddingRight: 56
              }}>{item.a}</p>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

function CTA({ p }) {
  return (
    <section id="contacto-cta" style={{ padding: "100px 32px", background: p.bg }}>
      <div data-cta-card style={{
        maxWidth: 1280, margin: "0 auto",
        background: p.accent, borderRadius: 40, padding: "80px 64px",
        position: "relative", overflow: "hidden",
        display: "grid", gridTemplateColumns: "1.5fr 1fr", gap: 56, alignItems: "center"
      }}>
        <div>
          <div style={{
            fontSize: 12, fontWeight: 700, letterSpacing: ".12em", textTransform: "uppercase",
            color: p.ink, opacity: .6, marginBottom: 16
          }}>Temporada 2026/2027 · Desde septiembre</div>
          <h2 style={{
            fontFamily: "'Bricolage Grotesque', sans-serif", fontWeight: 700,
            fontSize: "clamp(44px, 5vw, 72px)", lineHeight: 1.0, letterSpacing: "-.03em",
            color: p.ink, margin: 0
          }}>
            Las clases de prueba<br />
            vuelven en <em style={{ fontStyle: "normal", textDecoration: "underline", textDecorationThickness: 4, textUnderlineOffset: 8 }}>septiembre</em>.
          </h2>
          <p style={{ fontSize: 18, color: p.ink, opacity: .8, marginTop: 24, maxWidth: 520, lineHeight: 1.5 }}>
            Son gratuitas, sin compromiso. Escríbenos ahora y te avisamos en cuanto abran las inscripciones.
          </p>
          <div style={{ display: "flex", gap: 12, marginTop: 36, flexWrap: "wrap" }}>
            <a href="https://wa.me/+34622457302" style={{
              background: p.ink, color: p.bg, padding: "16px 26px", borderRadius: 999,
              fontSize: 16, fontWeight: 600, textDecoration: "none"
            }}>Avisarme en septiembre →</a>
            <a href="tel:622457302" style={{
              color: p.ink, padding: "16px 26px", borderRadius: 999,
              fontSize: 16, fontWeight: 600, textDecoration: "none",
              border: `1.5px solid ${p.ink}`
            }}>Llamar · 622 457 302</a>
          </div>
        </div>
        <div style={{
          background: p.surface, borderRadius: 24, padding: 36,
          boxShadow: `0 20px 60px ${p.ink}1a`,
          display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", textAlign: "center", gap: 12
        }}>
          <div style={{ fontSize: 40 }}>📅</div>
          <div style={{ fontFamily: "'Bricolage Grotesque', sans-serif", fontWeight: 700, fontSize: 22, color: p.ink, letterSpacing: "-.02em" }}>Inscripciones abiertas<br />en septiembre</div>
          <div style={{ fontSize: 14, color: p.inkSoft, lineHeight: 1.5 }}>Escríbenos por WhatsApp y te avisamos en cuanto estén disponibles los horarios.</div>
          <a href="https://wa.me/+34622457302" style={{ marginTop: 8, background: p.ink, color: p.bg, padding: "12px 22px", borderRadius: 999, fontSize: 14, fontWeight: 600, textDecoration: "none" }}>WhatsApp →</a>
        </div>
      </div>
    </section>);

}

function Footer({ p }) {
  return (
    <footer style={{ background: p.ink, color: p.bg, padding: "80px 32px 40px" }}>
      <div style={{ maxWidth: 1280, margin: "0 auto" }}>
        <div style={{ display: "grid", gridTemplateColumns: "2fr 1fr 1fr 1fr", gap: 48, paddingBottom: 56, borderBottom: `1px solid ${p.bg}22` }}>
          <div>
            <img src={ASSETS.logo} alt="Wipbot" style={{ height: 48, objectFit: "contain" }} />
            <p style={{ fontSize: 15, lineHeight: 1.6, opacity: .7, marginTop: 16, maxWidth: 360 }}>Extraescolares STEAM en Alcañiz y alrededores. Formando peques de primaria y secundaria desde 2019 en el Bajo Aragón.


            </p>
            <div style={{ display: "flex", gap: 12, marginTop: 24 }}>
              {[{ l: "WhatsApp", h: "https://wa.me/+34622457302" }, { l: "Facebook", h: "https://www.facebook.com/Wipbot-2323325014567595" }].map((s) =>
              <a key={s.l} href={s.h} style={{
                padding: "8px 16px", border: `1px solid ${p.bg}33`, borderRadius: 999,
                color: p.bg, textDecoration: "none", fontSize: 13, fontWeight: 500
              }}>{s.l} ↗</a>
              )}
            </div>
          </div>
          <FooterCol title="Extraescolares" links={[["Robótica", "robotica.html"], ["DiverCiencia", "diverciencia.html"], ["Mundo Digital", "mundo-digital.html"], ["Campus 2026", "campus.html"], ["Todos los programas", "programas.html"]]} p={p} />
          <FooterCol title="Wipbot" links={[["Sobre nosotros", "nosotros.html"], ["Contacto", "contacto.html"], ["Área cliente", "https://wipbot.acadesoft.com/students"]]} p={p} />
          <div>
            <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: ".1em", textTransform: "uppercase", opacity: .5 }}>Visítanos</div>
            <div style={{ marginTop: 16, fontSize: 14, lineHeight: 1.7, opacity: .85 }}>
              Avenida Huesca 35<br />
              44600 Alcañiz, Teruel<br />
              <br />
              Mié y Jue · 15:30h+<br />
              <a href="tel:622457302" style={{ color: p.accent, textDecoration: "none" }}>622 457 302</a><br />
              <a href="mailto:hola@wipbot.es" style={{ color: p.accent, textDecoration: "none" }}>hola@wipbot.es</a>
            </div>
          </div>
        </div>
        <div style={{
          paddingTop: 32, display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: 16,
          fontSize: 12, opacity: .55
        }}>
          <div>© 2026 Wipbot Extraescolares · Alcañiz, Teruel</div>
          <div style={{ display: "flex", gap: 24 }}>
            <a href="privacidad.html" style={{ color: p.bg, textDecoration: "none" }}>Política de privacidad</a>
            <a href="terminos.html" style={{ color: p.bg, textDecoration: "none" }}>Términos y condiciones</a>
          </div>
        </div>
      </div>
    </footer>);

}

function FooterCol({ title, links, p }) {
  return (
    <div>
      <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: ".1em", textTransform: "uppercase", opacity: .5 }}>{title}</div>
      <ul style={{ listStyle: "none", padding: 0, margin: "16px 0 0", display: "flex", flexDirection: "column", gap: 10 }}>
        {links.map((l) => {
          const [label, href] = Array.isArray(l) ? l : [l, "#"];
          return <li key={label}><a href={href} style={{ color: p.bg, textDecoration: "none", fontSize: 14, opacity: .85 }}>{label}</a></li>;
        })}
      </ul>
    </div>);

}

Object.assign(window, { Programs, Pillars, StatsBand, Testimonials, FAQ, CTA, Footer, SectionHeader });