// CCSE 2026 website — Features, Screenshots, How it works, Exam info

function Features({ t }) {
  const { SectionHeading: SH, FeatureCard, Badge: Bdg } = dsLib();
  const f = t.features;
  return (
    <section className="section" id="funciones">
      <div className="container">
        <Reveal><SH eyebrow={f.eyebrow} title={f.title} lede={f.lede} /></Reveal>
        <div className="featgrid">
          {f.cards.map((c, i) => (
            <Reveal key={c.title} delay={(i % 4) * 80}>
              <FeatureCard accent={c.accent} icon={<Icon name={c.icon} size={22} />} title={c.title}
                badge={c.badge ? <Bdg tone="orange" solid>{c.badge}</Bdg> : null}>
                {c.text}
              </FeatureCard>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function Screenshots({ t }) {
  const { SectionHeading: SH, PhoneFrame: Phone, Badge: Bdg } = dsLib();
  const s = t.shots;
  const railRef = React.useRef(null);
  const scroll = (dir) => {
    const el = railRef.current;
    if (el) el.scrollBy({ left: dir * 292, behavior: "smooth" });
  };
  return (
    <section className="section alt" id="capturas">
      <div className="container">
        <Reveal><SH eyebrow={s.eyebrow} title={s.title} lede={s.lede} /></Reveal>
      </div>
      <Reveal delay={120}>
        <div className="railwrap">
          <div className="rail" ref={railRef}>
            {s.items.map((item, i) => (
              <figure className="railcard" key={item.src + i}>
                <Phone src={SHOTS + item.src} alt={item.label} width={232} shadow={i === 0} />
                <figcaption><Bdg tone={i === 5 ? "purple" : "blue"}>{item.label}</Bdg></figcaption>
              </figure>
            ))}
          </div>
          <div className="railnav">
            <button className="iconbtn big" onClick={() => scroll(-1)} aria-label="Anterior"><Icon name="arrow-left" size={19} /></button>
            <button className="iconbtn big" onClick={() => scroll(1)} aria-label="Siguiente"><Icon name="arrow-right" size={19} /></button>
          </div>
        </div>
      </Reveal>
    </section>
  );
}

function HowItWorks({ t }) {
  const { SectionHeading: SH, ProgressBar: PBar } = dsLib();
  const h = t.how;
  return (
    <section className="section" id="como-funciona">
      <div className="container">
        <Reveal><SH eyebrow={h.eyebrow} title={h.title} /></Reveal>
        <div className="steps">
          {h.steps.map((st, i) => (
            <Reveal key={st.title} delay={i * 120} className="step">
              <div className="stepnum">
                <span className="stepnum-badge">{i + 1}</span>
                <Icon name={st.icon} size={26} />
              </div>
              <h3>{st.title}</h3>
              <p>{st.text}</p>
            </Reveal>
          ))}
        </div>
        <Reveal delay={360}>
          <div className="howprogress">
            <PBar label={h.progressLabel} sublabel={h.progressValue + "%"} value={h.progressValue} flag />
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function ExamInfo({ t }) {
  const { SectionHeading: SH, TopicChip: Topic } = dsLib();
  const e = t.exam;
  return (
    <section className="section alt" id="examen">
      <div className="container examgrid">
        <div>
          <Reveal><SH align="start" eyebrow={e.eyebrow} title={e.title} /></Reveal>
          <Reveal delay={100}><p className="prose">{e.p1}</p></Reveal>
          <Reveal delay={160}><p className="prose">{e.p2}</p></Reveal>
          <Reveal delay={220}>
            <div className="topicrow">
              {e.topics.map((tp) => (
                <Topic key={tp.label} icon={<Icon name={tp.icon} size={19} />} label={tp.label} count={tp.count} />
              ))}
            </div>
          </Reveal>
        </div>
        <Reveal delay={140}>
          <div className="factcard">
            {e.facts.map((f, i) => (
              <div className="fact" key={i}>
                <div className="factnum">{f.value}</div>
                <div className="factlabel">{f.label}</div>
              </div>
            ))}
          </div>
        </Reveal>
      </div>
    </section>
  );
}

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