// TabsFeature — sitemap §11 / §14. Tab list on the left, image on the right.
// Reusable for the Education/PipCast/Supervision block AND the Team teaser.
// Mirrors home/layout-491 and home/layout-491_1 from the Relume export.

function TabsFeature({ scheme = "scheme-2", eyebrow, title, body, tabs }) {
  const [active, setActive] = useState(0);
  const current = tabs[active];

  return (
    <Section scheme={scheme}>
      <div style={{ maxWidth: 560, margin: "0 auto 80px", textAlign: "center" }}>
        {eyebrow && <p style={{ fontWeight: 600, marginBottom: 16 }}>{eyebrow}</p>}
        <h2 style={{ fontSize: "var(--kl-text-h2)", marginBottom: 24 }}>{title}</h2>
        {body && <p style={{ fontSize: "var(--kl-text-medium)", lineHeight: 1.5 }}>{body}</p>}
      </div>

      <div className="kl-split" style={{ gap: 80, alignItems: "center" }}>
        {/* Tab list */}
        <ul style={{ listStyle: "none", padding: 0, margin: 0 }}>
          {tabs.map((t, i) => {
            const isActive = i === active;
            return (
              <li key={t.h}
                  onClick={() => setActive(i)}
                  style={{
                    cursor: "pointer",
                    padding: "24px 0",
                    borderBottom: "1px solid var(--kl-border)",
                    opacity: isActive ? 1 : 0.45,
                    transition: "opacity 200ms var(--kl-ease)",
                  }}>
                <h3 style={{ fontSize: "var(--kl-text-h4)", marginBottom: isActive ? 12 : 0 }}>{t.h}</h3>
                <div style={{
                  maxHeight: isActive ? 200 : 0,
                  overflow: "hidden",
                  transition: "max-height 300ms var(--kl-ease)",
                }}>
                  <p style={{ fontSize: "var(--kl-text-medium)", lineHeight: 1.5, paddingTop: 4 }}>{t.b}</p>
                </div>
              </li>
            );
          })}
        </ul>

        {/* Image */}
        <div style={{ position: "relative", width: "100%", aspectRatio: "1 / 1", borderRadius: "var(--kl-radius-card-lg)", overflow: "hidden", boxShadow: "var(--kl-card-shadow)" }}>
          <img
            key={current.img}
            src={current.img}
            alt=""
            style={{
              position: "absolute", inset: 0,
              width: "100%", height: "100%", objectFit: "cover",
              animation: "kl-fade 0.3s var(--kl-ease)",
            }}
          />
          <style>{`@keyframes kl-fade { from { opacity: 0; } to { opacity: 1; } }`}</style>
        </div>
      </div>
    </Section>
  );
}

window.TabsFeature = TabsFeature;