/* ─── TESTIMONIALS + SPONSORS + FAQ ─── */
const { C: sC, FONTS: sF, TESTIMONIALS: sTEST, SPONSORS: sSPON, FAQS: sFAQS } = window.LT;
const { useViewport: sUseViewport } = window.LTHooks;
const { Section: SSection, SectionTag: STag, SectionTitle: STitle, Lede: SLede } = window.LTUI;

function Testimonials() {
  // Loop video clips per testimonial — ambient trail footage placeholder via gradient + parallax SVG
  const videoSources = [
    "https://cdn.coverr.co/videos/coverr-running-on-a-mountain-trail-7048/1080p.mp4",
    "https://cdn.coverr.co/videos/coverr-trail-running-in-the-mountains-9499/1080p.mp4",
    "https://cdn.coverr.co/videos/coverr-running-through-mountain-paths-8849/1080p.mp4",
  ];
  return (
    <SSection id="comunidad" ariaLabel="Testimonios">
      <STag text="La comunidad" />
      <STitle>Ellos ya corrieron<br/>Love Trail</STitle>
      <SLede>
        Cada edición deja huellas. Estas son las voces de quienes ya pisaron Las Bardas
        y se llevaron una historia para contar.
      </SLede>
      <div style={{
        display: "grid",
        gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))",
        gap: 20, marginTop: 24,
      }}>
        {sTEST.map((t, i) => (
          <figure key={i} style={{
            background: sC.card, border: `1px solid ${sC.border}`, borderRadius: 16,
            margin: 0, position: "relative", overflow: "hidden",
            transition: "transform 0.3s, border-color 0.3s",
          }}
          onMouseEnter={e => { e.currentTarget.style.transform = "translateY(-4px)"; e.currentTarget.style.borderColor = sC.sunset + "66"; }}
          onMouseLeave={e => { e.currentTarget.style.transform = "translateY(0)"; e.currentTarget.style.borderColor = sC.border; }}
          >
            {/* Video bg */}
            <div style={{ position: "relative", height: 200, overflow: "hidden", background: sC.deep }}>
              <video
                src={videoSources[i % videoSources.length]}
                autoPlay loop muted playsInline
                aria-hidden="true"
                style={{
                  width: "100%", height: "100%", objectFit: "cover",
                  position: "absolute", inset: 0,
                  filter: "saturate(0.85) brightness(0.7)",
                }}
                onError={e => { e.currentTarget.style.display = "none"; }}
              />
              <div aria-hidden="true" style={{
                position: "absolute", inset: 0,
                background: `linear-gradient(180deg, transparent 0%, transparent 50%, ${sC.card} 100%),
                             linear-gradient(135deg, ${sC.sunset}33, transparent 60%)`,
              }}/>
              <div style={{
                position: "absolute", top: 14, left: 14,
                display: "flex", alignItems: "center", gap: 6,
                background: "rgba(11,15,20,0.75)", backdropFilter: "blur(8px)",
                padding: "5px 10px", borderRadius: 99,
                fontSize: 10, color: sC.sunsetSoft, fontWeight: 700,
                fontFamily: sF.mono, letterSpacing: "0.1em",
                border: `1px solid ${sC.sunset}55`,
              }}>
                <span aria-hidden="true" style={{
                  width: 6, height: 6, borderRadius: "50%", background: sC.sunset,
                  animation: "pulse 2s infinite",
                }}/>
                {t.dist.toUpperCase()}
              </div>
            </div>

            {/* Quote */}
            <div style={{ padding: "26px 26px 28px", position: "relative" }}>
              <span aria-hidden="true" style={{
                position: "absolute", top: -22, left: 22,
                fontFamily: sF.display, fontSize: 80, color: sC.sunset,
                opacity: 0.35, lineHeight: 1,
              }}>"</span>
              <blockquote style={{
                fontSize: 16, color: sC.text, lineHeight: 1.7,
                fontStyle: "italic", margin: 0, marginBottom: 22,
                fontWeight: 400, textWrap: "pretty",
              }}>
                "{t.text}"
              </blockquote>
              <figcaption>
                <div style={{ fontFamily: sF.display, fontSize: 16, fontWeight: 600, color: sC.text }}>
                  {t.name}
                </div>
                <div style={{ fontSize: 13, color: sC.textMuted, marginTop: 2 }}>{t.loc}</div>
              </figcaption>
            </div>
          </figure>
        ))}
      </div>
    </SSection>
  );
}

/* ── SPONSOR LOGO with thematic art ── */
function SponsorLogo({ name, tag, size, accent, tier }) {
  const SponsorArt = window.SponsorArt;
  const sizes = {
    gold:   { h: 140, name: 15, tag: 11, art: 80 },
    silver: { h: 110, name: 13, tag: 10, art: 60 },
    bronze: { h: 90,  name: 12, tag: 0,  art: 48 },
    media:  { h: 80,  name: 12, tag: 0,  art: 44 },
  }[size];

  return (
    <div style={{
      height: sizes.h,
      display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center",
      gap: 10, padding: "14px 18px",
      background: "linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01))",
      border: `1px solid ${sC.border}`,
      borderRadius: 12,
      transition: "all 0.25s",
    }}
    onMouseEnter={e => { e.currentTarget.style.borderColor = accent; e.currentTarget.style.transform = "translateY(-2px)"; }}
    onMouseLeave={e => { e.currentTarget.style.borderColor = sC.border; e.currentTarget.style.transform = "translateY(0)"; }}
    >
      <SponsorArt tier={tier} accent={accent} size={sizes.art} />
      <div style={{ textAlign: "center", minWidth: 0 }}>
        <div style={{
          fontFamily: sF.display, fontSize: sizes.name, fontWeight: 700,
          color: sC.text, letterSpacing: "0.04em", lineHeight: 1.1,
          textTransform: "uppercase",
        }}>{name}</div>
        {tag && sizes.tag > 0 && (
          <div style={{
            fontSize: sizes.tag, color: sC.textMuted, marginTop: 4,
            fontFamily: sF.mono, letterSpacing: "0.06em",
          }}>{tag}</div>
        )}
      </div>
    </div>
  );
}

function Sponsors() {
  const { isMobile } = sUseViewport();
  return (
    <SSection id="sponsors" dark ariaLabel="Sponsors y partners">
      <STag text="Lo hacen posible" color={sC.sunsetSoft} />
      <STitle>Sponsors &amp;<br/>partners</STitle>
      <SLede>
        Marcas que entrenan con nosotros, recorren la montaña con nosotros y creen
        en la cultura del trail running argentino. Sin ellas, no hay carrera.
      </SLede>

      <SponsorTier label="Gold Partners" accent={sC.sunset}>
        <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "repeat(2, 1fr)", gap: 18 }}>
          {sSPON.gold.map((s, i) => (
            <SponsorLogo key={i} name={s.name} tag={s.tag} size="gold" tier="gold" accent={sC.sunset} />
          ))}
        </div>
      </SponsorTier>

      <SponsorTier label="Silver Partners" accent={sC.skySoft}>
        <div style={{ display: "grid", gridTemplateColumns: `repeat(auto-fit, minmax(${isMobile ? 220 : 240}px, 1fr))`, gap: 14 }}>
          {sSPON.silver.map((s, i) => (
            <SponsorLogo key={i} name={s.name} tag={s.tag} size="silver" tier="silver" accent={sC.skySoft} />
          ))}
        </div>
      </SponsorTier>

      <SponsorTier label="Bronze &amp; Comunidad" accent={sC.earth}>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(180px, 1fr))", gap: 12 }}>
          {sSPON.bronze.map((s, i) => (
            <SponsorLogo key={i} name={s.name} size="bronze" tier="bronze" accent={sC.earth} />
          ))}
        </div>
      </SponsorTier>

      <SponsorTier label="Media Partners" accent={sC.green}>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(180px, 1fr))", gap: 12 }}>
          {sSPON.media.map((s, i) => (
            <SponsorLogo key={i} name={s.name} size="media" tier="media" accent={sC.green} />
          ))}
        </div>
      </SponsorTier>

      <div style={{
        marginTop: 48,
        background: `linear-gradient(135deg, rgba(61,183,176,0.12), rgba(31,111,135,0.10))`,
        border: `1.5px solid ${sC.border}`,
        borderRadius: 18,
        padding: "clamp(28px, 4vw, 40px)",
        display: "flex", alignItems: "center", justifyContent: "space-between",
        gap: 24, flexWrap: "wrap",
      }}>
        <div style={{ flex: "1 1 320px" }}>
          <h3 style={{
            fontFamily: sF.display, fontSize: 26, fontWeight: 700,
            color: sC.text, marginBottom: 8, letterSpacing: "0.01em",
          }}>¿Querés ser sponsor?</h3>
          <p style={{ color: sC.textSoft, fontSize: 15, lineHeight: 1.6, maxWidth: 520 }}>
            Sumá tu marca a la comunidad trail más grande de la Patagonia.
            Más de 1.200 corredores y 5.000 acompañantes esperan tu historia.
          </p>
        </div>
        <a href="mailto:hola@lovetrailcarrera.com" className="cta-btn">
          Contactanos
          <window.MIcon name="arrow_forward" size={16} />
        </a>
      </div>
    </SSection>
  );
}

function SponsorTier({ label, accent, children }) {
  return (
    <div style={{ marginBottom: 36 }}>
      <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 16 }}>
        <span aria-hidden="true" style={{ width: 24, height: 2, background: accent, borderRadius: 2 }} />
        <h3 style={{
          fontFamily: sF.mono, fontSize: 12, fontWeight: 700,
          color: accent, letterSpacing: "0.18em", textTransform: "uppercase",
        }}>{label}</h3>
      </div>
      {children}
    </div>
  );
}

/* ── FAQ ── */
function FAQ() {
  const [open, setOpen] = React.useState(0);
  const [filter, setFilter] = React.useState("Todos");
  const cats = ["Todos", ...Array.from(new Set(sFAQS.map(f => f.cat)))];
  const filtered = filter === "Todos" ? sFAQS : sFAQS.filter(f => f.cat === filter);
  const MIcon = window.MIcon;

  return (
    <SSection id="faq" ariaLabel="Preguntas frecuentes">
      <STag text="Preguntas frecuentes" />
      <STitle>Q &amp; A</STitle>
      <SLede>
        Las preguntas que más nos hacen, respondidas. ¿No encontrás lo que buscás?
        Escribinos a <a href="mailto:hola@lovetrailcarrera.com" style={{ color: sC.sunsetSoft, textDecoration: "underline", textDecorationThickness: 2, textUnderlineOffset: 3 }}>hola@lovetrailcarrera.com</a>.
      </SLede>

      <div role="tablist" aria-label="Filtrar por categoría" style={{
        display: "flex", gap: 10, flexWrap: "wrap", marginBottom: 28,
      }}>
        {cats.map(c => (
          <button key={c} role="tab" aria-selected={filter === c}
            onClick={() => setFilter(c)}
            style={{
              background: filter === c ? sC.sunset : "transparent",
              color: filter === c ? sC.night : sC.textSoft,
              border: `1.5px solid ${filter === c ? sC.sunset : sC.borderLight}`,
              padding: "8px 18px", borderRadius: 99,
              fontSize: 13, fontWeight: 700, cursor: "pointer",
              fontFamily: sF.body, letterSpacing: "0.02em",
              transition: "all 0.2s",
            }}>{c}</button>
        ))}
      </div>

      <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
        {filtered.map((f, i) => {
          const isOpen = open === i;
          return (
            <div key={`${filter}-${i}`} style={{
              background: sC.card,
              border: `1px solid ${isOpen ? sC.sunset + "66" : sC.border}`,
              borderRadius: 14, overflow: "hidden",
              transition: "border-color 0.25s",
            }}>
              <button aria-expanded={isOpen} aria-controls={`faq-panel-${i}`} id={`faq-q-${i}`}
                onClick={() => setOpen(isOpen ? -1 : i)}
                style={{
                  width: "100%", textAlign: "left", padding: "22px 24px",
                  background: "transparent", border: "none", cursor: "pointer",
                  display: "flex", alignItems: "center", justifyContent: "space-between",
                  gap: 16, color: sC.text, fontFamily: sF.body,
                }}>
                <div style={{ display: "flex", alignItems: "center", gap: 16, flex: 1, minWidth: 0 }}>
                  <span style={{
                    fontSize: 10, fontFamily: sF.mono, color: sC.sunsetSoft,
                    background: "rgba(61,183,176,0.15)",
                    padding: "4px 10px", borderRadius: 99,
                    letterSpacing: "0.1em", flexShrink: 0, fontWeight: 700,
                  }}>{f.cat.toUpperCase()}</span>
                  <span style={{
                    fontFamily: sF.display, fontSize: "clamp(16px, 2vw, 19px)",
                    fontWeight: 600, color: sC.text, letterSpacing: "0.005em",
                  }}>{f.q}</span>
                </div>
                <span aria-hidden="true" style={{
                  width: 36, height: 36, borderRadius: "50%", flexShrink: 0,
                  background: isOpen ? sC.sunset : "rgba(255,255,255,0.05)",
                  color: isOpen ? sC.night : sC.text,
                  display: "grid", placeItems: "center",
                  transition: "all 0.25s",
                  transform: isOpen ? "rotate(45deg)" : "rotate(0)",
                }}>
                  <MIcon name="add" size={18} />
                </span>
              </button>
              <div id={`faq-panel-${i}`} role="region" aria-labelledby={`faq-q-${i}`} hidden={!isOpen}
                style={{ padding: isOpen ? "0 24px 24px 24px" : "0 24px" }}>
                <p style={{
                  fontSize: 15, color: sC.textSoft, lineHeight: 1.75,
                  borderTop: `1px solid ${sC.border}`,
                  paddingTop: 18, textWrap: "pretty",
                }}>{f.a}</p>
              </div>
            </div>
          );
        })}
      </div>
    </SSection>
  );
}

window.LTTestimonials = Testimonials;
window.LTSponsors = Sponsors;
window.LTFAQ = FAQ;