// ============= WHY US + TESTIMONIALS + STORIES =============
const WHY_ICONS = { shield: <IconShield />, flame: <IconFlame />, spark: <IconWand />, msg: <IconMsg />, gauge: <IconGauge />, rocket: <IconRocket /> };

function WhyUs() {
  const { t } = useApp();
  const points = t("whyus.points") || [];
  return (
    <section className="section">
      <div className="wrap">
        <SecHead eyebrow={t("whyus.eyebrow")} t1={t("whyus.title1")} t2={t("whyus.title2")} sub={t("whyus.sub")} center />
        <div className="why__grid">
          {points.map((p, i) => (
            <Reveal key={i} className="why" delay={(i % 3) * 70}>
              <div className="why__ico">{WHY_ICONS[p.ico] || <IconBolt />}</div>
              <div className="why__t">{p.t}</div>
              <div className="why__d">{p.d}</div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

const AV_COLORS = [
  "linear-gradient(140deg,#2AABEE,#1b6fb0)",
  "linear-gradient(140deg,#7E72F2,#5448c4)",
  "linear-gradient(140deg,#2BCB86,#1c8a5b)",
  "linear-gradient(140deg,#F5A23D,#c47416)",
  "linear-gradient(140deg,#F2607A,#c43e58)",
];
function initials(n) { return n.split(" ").map((w) => w[0]).slice(0, 2).join("").toUpperCase(); }

function TCard({ item, idx }) {
  return (
    <div className="tcard">
      <div className="tcard__stars">{[0,1,2,3,4].map((i) => <IconStar key={i} />)}</div>
      <div className="tcard__q">“{item.t}”</div>
      <div className="tcard__who">
        <span className="tcard__av" style={{ background: AV_COLORS[idx % AV_COLORS.length] }}>{initials(item.n)}</span>
        <div><div className="tcard__n">{item.n}</div><div className="tcard__r">{item.r}</div></div>
      </div>
    </div>
  );
}

function Testimonials() {
  const { t } = useApp();
  const items = t("testimonials.items") || [];
  const half = Math.ceil(items.length / 2);
  const rowA = items.slice(0, half);
  const rowB = items.slice(half);
  return (
    <section className="section" id="reviews">
      <div className="wrap">
        <SecHead eyebrow={t("testimonials.eyebrow")} t1={t("testimonials.title1")} t2={t("testimonials.title2")} center />
      </div>
      <div className="marq" style={{ "--dur": "60s" }}>
        <div className="marq__track">
          {[...rowA, ...rowA].map((it, i) => <TCard key={i} item={it} idx={i} />)}
        </div>
      </div>
      <div className="marq" style={{ "--dur": "72s", marginTop: "var(--s4)" }}>
        <div className="marq__track rev">
          {[...rowB, ...rowB].map((it, i) => <TCard key={i} item={it} idx={i + 3} />)}
        </div>
      </div>
    </section>
  );
}

function Stories() {
  const { t } = useApp();
  const items = t("stories.items") || [];
  const lblBefore = t("stories.lblBefore"), lblAfter = t("stories.lblAfter");
  const AV = ["linear-gradient(140deg,#2AABEE,#1b6fb0)", "linear-gradient(140deg,#7E72F2,#5448c4)", "linear-gradient(140deg,#2BCB86,#1c8a5b)"];
  const BARS = [[22, 30, 26, 44, 58, 100], [30, 26, 40, 52, 70, 100], [8, 14, 30, 52, 76, 100]];
  return (
    <section className="section">
      <div className="wrap">
        <SecHead eyebrow={t("stories.eyebrow")} t1={t("stories.title1")} t2={t("stories.title2")} sub={t("stories.sub")} center />
        <div className="stories">
          {items.map((s, i) => (
            <Reveal key={i} className="story" delay={i * 90}>
              <div className="story__head">
                <span className="story__av" style={{ background: AV[i % AV.length] }}>{s.name[0]}</span>
                <div className="story__id">
                  <div className="story__name">{s.name}</div>
                  <div className="story__role">{s.role}</div>
                </div>
                <span className="story__days">{s.days}</span>
              </div>

              <div className="story__hero">
                <div className="story__after-block">
                  <span className="story__lbl">{lblAfter}</span>
                  <div className="story__after"><span className="story__amt">{s.after}</span><span className="u">{s.u}</span></div>
                </div>
                <span className={`story__mult ${s.mult === "NEW" ? "is-new" : ""}`}>
                  {s.mult === "NEW" ? <React.Fragment><IconRocket />NEW</React.Fragment> : <React.Fragment><IconTrendUp />×{s.mult}</React.Fragment>}
                </span>
              </div>

              <div className="story__bars" aria-hidden="true">
                {BARS[i % BARS.length].map((h, k) => (
                  <span key={k} className={k === BARS[i % BARS.length].length - 1 ? "hot" : ""} style={{ "--h": `${h}%` }}></span>
                ))}
              </div>

              <div className="story__before-row">
                <span className="story__lbl">{lblBefore}</span>
                <span className="story__before">{s.before}</span>
              </div>

              <p className="story__t">{s.t}</p>

              <div className="story__metric"><IconCheck />{s.metric}</div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { WhyUs, Testimonials, Stories });