// Ensinos — 4 níveis. Layout: 'cards' | 'stack' | 'tabs'
const Ensinos = ({ layout }) => {
  const list = window.ABACO.ensinos;
  const [active, setActive] = React.useState(list[0].id);
  layout = layout || 'cards';

  if (layout === 'tabs') {
    const cur = list.find((e) => e.id === active) || list[0];
    return (
      <section id="ensinos" className="ensinos">
        <div className="container">
          <div className="section-head">
            <div className="eyebrow">Etapas de ensino</div>
            <h2>Do primeiro sorriso ao último vestibular.</h2>
            <p>Quatro etapas pensadas para acompanhar cada fase do desenvolvimento — com o mesmo cuidado, do berçário ao pré-vestibular.</p>
          </div>
          <div className="ensinos-tabs">
            {list.map((e) => (
              <button key={e.id}
                      className={"ensinos-tab " + (active === e.id ? 'active' : '')}
                      onClick={() => setActive(e.id)}>
                <span className="ensinos-tab-ico">{e.icon}</span>
                <span>
                  <strong>{e.label}</strong>
                  <em>{e.ages}</em>
                </span>
              </button>
            ))}
          </div>
          <div className="ensinos-tab-panel">
            <div className={"ensinos-tab-photo ph " + (cur.color === 'default' ? '' : cur.color)}>
              <span>{cur.label}</span>
            </div>
            <div className="ensinos-tab-body">
              <h3>{cur.tagline}</h3>
              <p>{cur.blurb}</p>
              <ul className="ensinos-features">
                <li>Projeto pedagógico próprio</li>
                <li>Acompanhamento individual</li>
                <li>Material didático integrado</li>
                <li>Atividades extracurriculares inclusas</li>
              </ul>
              <a href="#matricula" className="btn btn-outline">Conhecer detalhes →</a>
            </div>
          </div>
        </div>
      </section>
    );
  }

  return (
    <section id="ensinos" className="ensinos">
      <div className="container">
        <div className="section-head">
          <div className="eyebrow">Etapas de ensino</div>
          <h2>Do primeiro sorriso ao último vestibular.</h2>
          <p>Quatro etapas pensadas para acompanhar cada fase do desenvolvimento — com o mesmo cuidado, do berçário ao pré-vestibular.</p>
        </div>
        <div className="ensinos-grid">
          {list.map((e, i) => (
            <article key={e.id} className={"ensinos-card ensinos-card-" + e.color}>
              <div className="ensinos-card-head">
                <span className="ensinos-card-num">0{i + 1}</span>
              </div>
              <div className="ensinos-card-body">
                <span className="ensinos-card-ages">{e.ages}</span>
                <h3>{e.label}</h3>
                <p>{e.blurb}</p>
              </div>
              <a href="#matricula" className="ensinos-card-cta">
                Saiba mais
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4">
                  <path d="M5 12h14M13 5l7 7-7 7" />
                </svg>
              </a>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
};

window.Ensinos = Ensinos;