// ============= HOW IT WORKS + FEATURES =============
const STEP_ICONS = [<IconSearch />, <IconYT />, <IconShield />, <IconSend />];

function HowItWorks() {
  const { t } = useApp();
  const steps = t("how.steps") || [];
  return (
    <section className="section" id="how">
      <div className="wrap">
        <SecHead eyebrow={t("how.eyebrow")} t1={t("how.title1")} t2={t("how.title2")} sub={t("how.sub")} />
        <div className="how__grid">
          <div className="how__line" aria-hidden="true"></div>
          {steps.map((s, i) => (
            <Reveal key={i} className="step" delay={i * 80}>
              <div className="step__k">STEP {s.k}</div>
              <div className="step__ico">{STEP_ICONS[i] || <IconBolt />}</div>
              <div className="step__t">{s.t}</div>
              <div className="step__d">{s.d}</div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

const FEAT_ICONS = { check: <IconCheck />, send: <IconSend />, chart: <IconChart />, flame: <IconFlame />, inbox: <IconInbox />, spark: <IconWand /> };

function Features() {
  const { t } = useApp();
  const hero = t("features.hero");
  const items = t("features.items") || [];
  const counts = t("features.counts") || [];
  // visual treatments per item index
  return (
    <section className="section" id="features">
      <div className="wrap">
        <SecHead eyebrow={t("features.eyebrow")} t1={t("features.title1")} t2={t("features.title2")} sub={t("features.sub")} center />
        <div className="bento">
          {/* hero feature — wide, tall, accent */}
          <Reveal className="bcell bcell--w3 bcell--h2 bcell--accent">
            <span className="bcell__tag">{hero.tag}</span>
            <span className="bcell__ico"><IconYT /></span>
            <div className="bcell__t" style={{ fontSize: 22 }}>{hero.t}</div>
            <div className="bcell__d">{hero.d}</div>
            <div className="minibars" aria-hidden="true">
              {[40, 62, 48, 80, 56, 96, 70, 52, 64, 88].map((h, i) => <i key={i} style={{ height: `${h}%` }}></i>)}
            </div>
          </Reveal>

          {/* two stacked small cells on the right */}
          <Reveal className="bcell bcell--w3" delay={60}>
            <span className="bcell__tag">{items[0].tag}</span>
            <span className="bcell__ico">{FEAT_ICONS[items[0].ico]}</span>
            <div className="bcell__t">{items[0].t}</div>
            <div className="bcell__d">{items[0].d}</div>
          </Reveal>
          <Reveal className="bcell bcell--w3" delay={100}>
            <span className="bcell__tag">{items[1].tag}</span>
            <span className="bcell__ico">{FEAT_ICONS[items[1].ico]}</span>
            <div className="bcell__t">{items[1].t}</div>
            <div className="bcell__d">{items[1].d}</div>
          </Reveal>

          {/* row of three */}
          {[2, 3, 4].map((idx, k) => (
            <Reveal key={idx} className="bcell bcell--w2" delay={k * 60}>
              <span className="bcell__tag">{items[idx].tag}</span>
              <span className="bcell__ico">{FEAT_ICONS[items[idx].ico]}</span>
              <div className="bcell__t">{items[idx].t}</div>
              <div className="bcell__d">{items[idx].d}</div>
            </Reveal>
          ))}

          {/* AI-Help wide + counters cell */}
          <Reveal className="bcell bcell--w3" delay={80}>
            <span className="bcell__tag">{items[5].tag}</span>
            <span className="bcell__ico">{FEAT_ICONS[items[5].ico]}</span>
            <div className="bcell__t">{items[5].t}</div>
            <div className="bcell__d">{items[5].d}</div>
            <div className="tagrow">{(t("features.aiTags") || []).map((tg, i) => <span key={i}>{tg}</span>)}</div>
          </Reveal>
          <Reveal className="bcell bcell--w3 bcell--accent stackcell" delay={120}>
            <span className="bcell__ico"><IconLayers /></span>
            <div className="bcell__t">{t("features.stackT")}</div>
            <div className="bcell__d">{t("features.stackD")}</div>
            <div className="fcount">
              {counts.map((c, i) => (
                <div key={i} className="fcount__cell"><div className="fcount__v">{c.v}<span className="u">{c.u}</span></div><div className="fcount__l">{c.l}</div></div>
              ))}
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { HowItWorks, Features });