/* Testimonials — mixed grid: metric callouts + quote cards on cream/pink */

const Testimonials = () => {
  const items = t("testimonials.items");
  const callouts = t("testimonials.callouts");
  const ref = useReveal();
  const [idx, setIdx] = React.useState(0);

  React.useEffect(() => {
    const id = setInterval(() => setIdx((i) => (i + 1) % items.length), 7000);
    return () => clearInterval(id);
  }, [items.length]);

  // Interleaved layout: 4 callouts + 4 quotes
  const tint = ["var(--bg-cream)", "var(--bg-pink)", "var(--bg-cream)", "var(--bg-pink)"];

  return (
    <section id="testimonials" ref={ref}>
      <div className="container">
        <div style={{ textAlign: "center", marginBottom: 48 }} className="reveal">
          <div style={{ marginBottom: 14 }}><span className="eyebrow">{t("testimonials.eyebrow")}</span></div>
          <h2 className="h2" style={{ maxWidth: 740, margin: "0 auto" }}>{t("testimonials.title")}</h2>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 16 }} className="test-grid">
          {/* row 1: callout, quote, quote, callout */}
          {[0, 1, 2, 3].map((col) => {
            const isCallout = col === 0 || col === 3;
            const cIdx = col === 0 ? 0 : col === 3 ? 1 : null;
            const qIdx = col === 1 ? 0 : col === 2 ? 1 : null;
            return (
              <React.Fragment key={`r1-${col}`}>
                {isCallout ? <CalloutCard data={callouts[cIdx]} tint={tint[col]} /> : <QuoteCard data={items[qIdx]} tint={tint[col]} />}
              </React.Fragment>
            );
          })}
          {/* row 2: quote, callout, callout, quote */}
          {[0, 1, 2, 3].map((col) => {
            const isCallout = col === 1 || col === 2;
            const cIdx = col === 1 ? 2 : col === 2 ? 3 : null;
            const qIdx = col === 0 ? 2 : col === 3 ? 3 : null;
            return (
              <React.Fragment key={`r2-${col}`}>
                {isCallout ? <CalloutCard data={callouts[cIdx]} tint={tint[col]} /> : <QuoteCard data={items[qIdx]} tint={tint[col]} />}
              </React.Fragment>
            );
          })}
        </div>
      </div>
      <style>{`
        @media (max-width: 980px) { .test-grid { grid-template-columns: repeat(2, 1fr) !important; } }
        @media (max-width: 560px) { .test-grid { grid-template-columns: 1fr !important; } }
      `}</style>
    </section>
  );
};

const CalloutCard = ({ data, tint }) => (
  <div className="reveal" style={{
    padding: 28,
    borderRadius: 20,
    background: tint,
    border: "1px solid var(--line)",
    display: "flex", flexDirection: "column", gap: 12,
    minHeight: 220,
  }}>
    <div style={{
      fontFamily: "var(--font-display)",
      fontSize: "clamp(48px, 5vw, 72px)",
      letterSpacing: "-0.02em", lineHeight: 1,
      fontWeight: 400, color: "var(--accent)",
    }}>{data.value}</div>
    <div style={{ fontSize: 16, fontWeight: 500, color: "var(--ink)" }}>{data.title}</div>
    <p style={{ fontSize: 13, color: "var(--ink-3)", lineHeight: 1.5 }}>{data.body}</p>
  </div>
);

const QuoteCard = ({ data, tint }) => (
  <div className="reveal" style={{
    padding: 24,
    borderRadius: 20,
    background: tint,
    border: "1px solid var(--line)",
    display: "flex", flexDirection: "column", gap: 14,
    minHeight: 220,
  }}>
    <svg width="26" height="20" viewBox="0 0 26 20" fill="none" aria-hidden>
      <path d="M6 20V12H2C2 7 5 3 10 1l1 3c-3 1-5 3-5 6h3v10H6zm12 0V12h-4c0-5 3-9 8-11l1 3c-3 1-5 3-5 6h3v10h-3z" fill="var(--accent)" opacity="0.8" />
    </svg>
    <p style={{ fontSize: 14, color: "var(--ink-2)", lineHeight: 1.55, flex: 1 }}>
      {data.quote}
    </p>
    <div style={{ display: "flex", alignItems: "center", gap: 10, marginTop: 4 }}>
      <img src={data.img} alt="" style={{
        width: 38, height: 38, borderRadius: "50%", objectFit: "cover",
        background: "#fff", border: "2px solid #fff",
      }} />
      <div>
        <div style={{ fontSize: 13, fontWeight: 500 }}>{data.name}</div>
        <div style={{ fontSize: 12, color: "var(--ink-3)" }}>{data.role}</div>
      </div>
    </div>
  </div>
);

window.Testimonials = Testimonials;