// components-modules.jsx — Belt (三块碑文) + Modules Bento grid.
// All hand-drawn module art removed; replaced with PicSlot placeholders.

/* ─────────── BELT · 三块碑文 ─────────── */
const ROMAN = ["I", "II", "III"];

function Belt({ items }) {
  return (
    <div className="belt">
      <div className="shell belt-grid">
        {items.map((it, i) => (
          <div className="belt-stele" key={i}>
            <span className="belt-stele__watermark" aria-hidden="true">{it.num}</span>
            <div className="belt-stele__head">
              <span className="belt-stele__roman">{ROMAN[i] || (i + 1)}</span>
            </div>
            <h4 className="belt-stele__title">{it.h}</h4>
            <div className="belt-stele__rule" />
            <p className="belt-stele__body">{it.p}</p>
          </div>
        ))}
      </div>
    </div>
  );
}

/* ─────────── MODULES · Bento Grid ───────────
   Layout (12-col):
     [   Atlas (big · 8)    ][  Cast (4)  ]
     [ Outline 4 ][ Codex 4 ][ Library 4  ]
     [          Agent (12 · wide bottom)   ]
*/
const BENTO_SPAN = {
  atlas:      { cols: 8, tall: true  },
  characters: { cols: 4, tall: true  },
  outline:    { cols: 4, tall: false },
  rules:      { cols: 4, tall: false },
  library:    { cols: 4, tall: false },
  agent:      { cols: 12, tall: false, wide: true },
};

function ModuleCard({ card, lang }) {
  const span = BENTO_SPAN[card.kind] || { cols: 4 };
  const cls = [
    "feature-card",
    `feature-card--cols-${span.cols}`,
    span.tall ? "feature-card--tall" : "",
    span.wide ? "feature-card--wide-row" : "",
  ].join(" ");

  return (
    <div className={cls}>
      <div className="feature-card__head">
        <div className="tag">
          <span className="pic-slot__dot" />
          {card.tag}
        </div>
        <h3>{card.h}</h3>
        <p>{card.p}</p>
      </div>
      <div className="feature-card__shot">
        <PicSlot
          src={card.screenshot}
          variant="product"
          label={card.tag}
          hint={card.placeholderHint}
          aspect={span.wide ? "21/8" : span.tall ? "4/3" : "16/10"}
        />
      </div>
    </div>
  );
}

function ModulesSection({ copy, lang }) {
  // Reorder cards to fit the Bento layout: atlas, characters, outline, rules, library, agent
  const orderKey = ["atlas", "characters", "outline", "rules", "library", "agent"];
  const cards = [...copy.moduleCards].sort(
    (a, b) => orderKey.indexOf(a.kind) - orderKey.indexOf(b.kind)
  );

  return (
    <section className="modules" id="modules">
      <div className="shell">
        <div className="sec-head">
          <div className="left">
            <span className="eyebrow">{copy.modules.eyebrow}</span>
            <h2 className="h2">{copy.modules.title}</h2>
            <p>{copy.modules.kicker}</p>
          </div>
        </div>
        <div className="bento-grid">
          {cards.map((c, i) => <ModuleCard card={c} key={i} lang={lang} />)}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Belt, ModuleCard, ModulesSection });