/* ─── 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() {
  return (
    <SSection id="comunidad" ariaLabel="Testimonios">
      <STag text="La comunidad" />
      <STitle>Ellos ya corrieron<br/>Love Trail</STitle>
      <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,
            padding: "32px 26px", margin: 0, position: "relative",
          }}>
            <span aria-hidden="true" style={{
              position: "absolute", top: -2, left: 22,
              fontFamily: sF.display, fontSize: 80, color: sC.sunset,
              opacity: 0.2, lineHeight: 1,
            }}>"</span>
            <blockquote style={{
              fontSize: 16, color: sC.text, lineHeight: 1.7,
              fontStyle: "italic", margin: 0, marginBottom: 22,
              position: "relative", zIndex: 1, fontWeight: 400,
              textWrap: "pretty",
            }}>
              "{t.text}"
            </blockquote>
            <figcaption style={{
              display: "flex", justifyContent: "space-between",
              alignItems: "flex-end", gap: 12, flexWrap: "wrap",
            }}>
              <div>
                <div style={{ fontFamily: sF.display, fontSize: 16, fontWeight: 600, color: sC.text }}>
                  {t.name}
                </div>
                <div style={{ fontSize: 13, color: sC.textMuted }}>{t.loc}</div>
              </div>
              <span style={{
                background: "rgba(245,155,60,0.15)", color: sC.sunsetSoft,
                fontSize: 11, fontWeight: 700,
                padding: "5px 12px", borderRadius: 99,
                fontFamily: sF.mono, letterSpacing: "0.08em",
                border: `1px solid rgba(245,155,60,0.3)`,
              }}>{t.dist}</span>
            </figcaption>
          </figure>
        ))}
      </div>
    </SSection>
  );
}

/* ── SPONSOR LOGO PLACEHOLDER ── */
function SponsorLogo({ name, tag, size, accent }) {
  // Generates a clean monogram + name placeholder (no fake brand recreation)
  const initials = name.split(" ").slice(0, 2).map(w => w[0]).join("");
  const sizes = {
    gold:   { h: 120, mono: 36, name: 14, tag: 11 },
    silver: { h: 96,  mono: 28, name: 12, tag: 10 },
    bronze: { h: 76,  mono: 20, name: 11, tag: 0 },
    media:  { h: 64,  mono: 18, name: 11, tag: 0 },
  }[size];

  return (
    <div style={{
      height: sizes.h,
      display: "flex", alignItems: "center", gap: 14,
      padding: "0 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.background = "linear-gradient(135deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02))"; }}
    onMouseLeave={e => { e.currentTarget.style.borderColor = sC.border; e.currentTarget.style.background = "linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01))"; }}
    >
      <div aria-hidden="true" style={{
        flexShrink: 0,
        width: sizes.h * 0.55, height: sizes.h * 0.55, borderRadius: 10,
        background: `linear-gradient(135deg, ${accent}38, ${accent}14)`,
        border: `1.5px solid ${accent}66`,
        display: "grid", placeItems: "center",
        fontFamily: sF.display, fontSize: sizes.mono, fontWeight: 700,
        color: accent, letterSpacing: "0.02em",
      }}>{initials}</div>
      <div style={{ minWidth: 0 }}>
        <div style={{
          fontFamily: sF.display, fontSize: sizes.name, fontWeight: 700,
          color: sC.text, letterSpacing: "0.04em", lineHeight: 1.1,
          textTransform: "uppercase",
          overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap",
        }}>{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>

      {/* GOLD */}
      <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" accent={sC.sunset} />
          ))}
        </div>
      </SponsorTier>

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

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

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

      {/* CTA: Become a sponsor */}
      <div style={{
        marginTop: 48,
        background: `linear-gradient(135deg, rgba(245,155,60,0.10), rgba(125,211,252,0.06))`,
        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:sponsors@lovetrail.run" className="cta-btn">
          Contactanos
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" aria-hidden="true">
            <line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/>
          </svg>
        </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);

  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@lovetrail.run" style={{ color: sC.sunsetSoft, textDecoration: "underline", textDecorationThickness: 2, textUnderlineOffset: 3 }}>hola@lovetrail.run</a>.
      </SLede>

      {/* Category filters */}
      <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(245,155,60,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",
                  fontSize: 18, fontWeight: 700,
                  transition: "all 0.25s",
                  transform: isOpen ? "rotate(45deg)" : "rotate(0)",
                }}>+</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",
                  marginLeft: 0,
                }}>
                <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;