// sections.jsx — landing sections, composed from the sbor/ka UI kit (window.UI.*)

// Apply tweak overrides (stripeBands, checkerN, dotsN, tileStyle) to a cell array
const applyTweaks = (cells, tw) => {
  if (!tw) return cells;
  return cells.map((c) => {
    let next = { ...c };
    if (tw.tileStyle === "panot") next = { kind: "dots", bg: c.bg || c.a || c.c1 || "var(--sb-bone)", dot: c.dot || c.b || c.c2 || c.star || "var(--sb-ink)", n: 2 };
    else if (tw.tileStyle === "stripes") next = { kind: "stripes", dir: c.dir || "h", c1: c.c1 || c.bg || c.a || "var(--sb-coral)", c2: c.c2 || c.dot || c.b || "var(--sb-bone)", bands: tw.stripeBands || 8 };
    else if (tw.tileStyle === "geometric") {
      // map every cell to a rotating geo set
      const seq = ["check", "dots", "stripes"];
      const k = seq[Math.floor(Math.random() * seq.length)];
      if (k === "check") next = { kind: "check", a: c.bg || c.a || "var(--sb-coral)", b: c.dot || c.b || "var(--sb-ink)", n: tw.checkerN || 2 };
      else if (k === "dots") next = { kind: "dots", bg: c.bg || c.a || "var(--sb-bone)", dot: c.dot || c.b || "var(--sb-ink)", n: tw.dotsN || 3 };
      else next = { kind: "stripes", dir: c.dir || "h", c1: c.c1 || c.bg || "var(--sb-coral)", c2: c.c2 || c.dot || "var(--sb-bone)", bands: tw.stripeBands || 4 };
    }
    if (next.kind === "stripes") next.bands = tw.stripeBands || next.bands || 4;
    if (next.kind === "check") next.n = tw.checkerN || next.n || 3;
    if (next.kind === "dots") next.n = tw.dotsN || next.n || 3;
    return next;
  });
};

// SectionHead comes from the kit (src/ui-kit.jsx → window.SectionHead / UI.SectionHead).

const Hero = ({ t, tw }) =>
<section className="section" id="top" style={{ borderWidth: "0px" }}>
    <div className="hero">
      <div className="hero-head">
        <div className="stamp"><span className="dot"></span>{t.hero.stamp}</div>
        <h1 className="hero-h1">
          {t.hero.title[0]}<em>{t.hero.title[1]}</em>{t.hero.title[2]}
        </h1>
      </div>
      {tw?.showHeroPattern !== false && <div className="hero-pattern"><HeroPattern cells={applyTweaks(window.HERO_DEFAULT_CELLS, tw)} /></div>}
      <div className="hero-body" style={{ lineHeight: "1", opacity: "1", borderWidth: "0px" }}>
        <p>{t.hero.body}</p>
      </div>
      <div className="hero-ctas">
        <button className="cta primary">
          <div className="lab">{t.hero.ctaJoinSub}</div>
          <div className="big">{t.hero.ctaJoin}</div>
          <div className="arr">→</div>
        </button>
        <button className="cta secondary">
          <div className="lab">{t.hero.ctaReadSub}</div>
          <div className="big">{t.hero.ctaRead}</div>
          <div className="arr">→</div>
        </button>
      </div>
    </div>
  </section>;


const Stats = ({ t }) => {
  const items = [
  { ...t.stats.a, cls: "yellow", idx: "01" },
  { ...t.stats.b, cls: "coral", idx: "02" },
  { ...t.stats.c, cls: "ink", idx: "03" },
  { ...t.stats.d, cls: "peri", idx: "04" }];

  return (
    <section className="section" id="stats" style={{ borderWidth: "0px" }}>
      <UI.SectionHead num={t.stats.head.num} lab={t.stats.head.lab} meta={t.stats.meta} />
      <div className="stats" style={{ marginTop: 24, borderWidth: "0px" }}>
        {items.map((s, i) =>
          <UI.StatCard key={i} lab={s.l} idx={s.idx} num={s.n} desc={s.d} color={s.cls} />
        )}
      </div>
    </section>);

};

const Courses = ({ t }) => {
  const colors = ["coral", "yellow", "peri", "mint", "sky", "bone"];
  return (
    <section className="section" id="courses" style={{ borderWidth: "0px" }}>
      <UI.SectionHead num={t.courses.head.num} lab={t.courses.head.lab} meta={t.courses.meta} />
      <div className="courses" style={{ borderWidth: "0px" }}>
        <div className="courses-intro" style={{ borderWidth: "0px" }}>
          <h2>{t.courses.title[0]}<br />{t.courses.title[1]}</h2>
          <p>{t.courses.lead}</p>
          <div className="cta-wrap" style={{ display: "flex", gap: 0 }}>
            <UI.Button arrow>{t.courses.cta}</UI.Button>
            <UI.Button variant="yellow">{t.courses.ctaSecondary}</UI.Button>
          </div>
        </div>
        <div className="courses-grid">
          {t.courses.levels.map((lv, i) =>
            <UI.CourseCard key={i} code={lv.code} title={lv.t} lang={lv.g} weeks={lv.w}
              color={colors[i % colors.length]} motif={i} />
          )}
        </div>
      </div>
    </section>);

};

const Jur = ({ t, tw }) =>
<section className="section" id="jur" style={{ borderWidth: "0px" }}>
    <UI.SectionHead num={t.jur.head.num} lab={t.jur.head.lab} meta={t.jur.meta} />
    <div className="jur" style={{ borderWidth: "0px" }}>
      {tw?.showJurPattern !== false && <div className="jur-pattern" style={{ borderWidth: "0px" }}><JurPattern cells={applyTweaks(window.JUR_DEFAULT_CELLS, tw)} /></div>}
      <div className="jur-text" style={{ borderWidth: "0px" }}>
        <h2>{t.jur.title[0]}<br />{t.jur.title[1]}</h2>
        <p>{t.jur.lead}</p>
        <div className="cta-wrap" style={{ display: "flex", gap: 0 }}>
          <UI.Button variant="red" arrow>{t.jur.cta}</UI.Button>
          <UI.Button variant="yellow">{t.jur.ctaSecondary}</UI.Button>
        </div>
      </div>
      <div className="jur-services">
        {t.jur.services.map((s, i) =>
      <div key={i} className="jur-svc" style={{ borderWidth: "0px" }}>
            <div className="name">{s.name}</div>
            <div className="desc">{s.desc}</div>
            <div className="arr">→</div>
          </div>
      )}
      </div>
    </div>
    <div className="free-banner" style={{ borderWidth: "0px" }}>
      <div className="l-wrap">
        <div className="l">{t.jur.free.l}</div>
        <div className="word">{t.jur.free.word}</div>
      </div>
      <div className="right">
        <span className="pill">{t.jur.free.a}</span>
        <span className="pill">{t.jur.free.b}</span>
        <span className="pill">{t.jur.free.c}</span>
      </div>
    </div>
  </section>;


const Media = ({ t }) => {
  const cardClasses = ["bone", "yellow", "ink", "coral"];
  const journalCta = (t.media.tabs[t.media.tabs.length - 1] || "").replace(/\s*→\s*$/, "");
  return (
    <section className="section" id="media" style={{ borderWidth: "0px" }}>
      <UI.SectionHead num={t.media.head.num} lab={t.media.head.lab} meta={t.media.meta} />
      <div className="media" style={{ borderWidth: "0px" }}>
        <div className="media-head" style={{ borderWidth: "0px" }}>
          <h2>{t.media.title[0]}<br />{t.media.title[1]}</h2>
          <div className="lead">{t.media.lead}</div>
        </div>
        <div className="media-thursday" style={{ borderWidth: "0px" }}>
          <div className="l">{t.media.thursdayLab}</div>
          <div className="day">{t.media.thursday}</div>
          <UI.Button href="media.html" variant="bone" arrow>{journalCta}</UI.Button>
        </div>
        <div className="media-list">
          {t.media.cards.map((c, i) =>
            <UI.ArtCard key={i} fmt={c.fmt} title={c.t} author={c.a} meta={c.date} color={cardClasses[i]} />
          )}
        </div>
      </div>
    </section>);

};

const Events = ({ t }) => {
  const cls = ["peri", "coral", "yellow", "teal"];
  return (
    <section className="section" id="events" style={{ borderWidth: "0px" }}>
      <UI.SectionHead num={t.events.head.num} lab={t.events.head.lab} meta={t.events.meta} />
      <div className="events" style={{ borderWidth: "0px" }}>
        <div className="events-head" style={{ borderWidth: "0px" }}>
          <h2>{t.events.title[0]}<br />{t.events.title[1]}</h2>
          <div className="lead">{t.events.lead}</div>
        </div>
        <div className="events-grid">
          {t.events.cards.map((c, i) =>
            <UI.EventCard key={i} tag={c.tag} time={c.time} title={c.t} place={c.place} date={c.date} color={cls[i]} />
          )}
        </div>
      </div>
    </section>);

};

const BigCta = ({ t, tw }) =>
<section className="section" id="about" style={{ borderWidth: "0px" }}>
    <div className="bigcta" style={{ borderWidth: "0px" }}>
      {tw?.showBigCtaArt !== false && <div className="bigcta-art"><BigCtaArt cells={applyTweaks(window.BIGCTA_DEFAULT_CELLS, tw)} /></div>}
      <div className="bigcta-text">
        <h2>{t.bigcta.title[0]}<em>{t.bigcta.title[1]}</em></h2>
        <div className="lead">{t.bigcta.lead}</div>
        <div className="actions">
          <UI.Button variant="yellow-cta" size="lg">{t.bigcta.btnJoin}</UI.Button>
          <UI.Button variant="ghost-light">{t.bigcta.btnTg}</UI.Button>
          <UI.Button variant="ghost-light">{t.bigcta.btnInsta}</UI.Button>
        </div>
      </div>
    </div>
  </section>;


const Footer = ({ t, lang }) =>
<footer className="footer" style={{ borderWidth: "0px" }}>
    <div className="footer-top">
      <div className="footer-brand" style={{ borderWidth: "0px" }}>
        <div>
          <div className="mark">
            <UI.Logo variant={lang === "ru" ? "cyrillic" : "latin"} height={40} alt={lang === "ru" ? "сбор/ка" : "sbor/ka"} />
          </div>
          <div className="tag" style={{ marginTop: 16 }}>{t.footer.tag}</div>
        </div>
        <div className="small">{t.footer.smallNote}</div>
      </div>
      <div className="footer-cols">
        {t.footer.cols.map((col, i) =>
      <div key={i} className="footer-col" style={{ borderWidth: "0px" }}>
            <div className="h">{col.h}</div>
            {col.links.map((l, j) =>
        <a key={j} href="#">{l}</a>
        )}
          </div>
      )}
      </div>
    </div>
    <div className="footer-bottom">
      <div className="leg" style={{ borderWidth: "0px" }}>
        {t.footer.legal.map((l, i) => <span key={i}>{l}</span>)}
      </div>
      <div className="footer-tools">
        <a className="footer-kit" href="ui-kit.html" title="дизайн-система sbor/ka">ui kit ↗</a>
        <div className="insta"><a href="#">{t.footer.insta}</a></div>
      </div>
    </div>
  </footer>;


Object.assign(window, { Hero, Stats, Courses, Jur, Media, Events, BigCta, Footer });