import { registerTool, Email, Row, Column,
         renderToHtml, renderToJson } from "@unlayer/react-elements";

// custom tools — the SAME config shape as the Builder's unlayer.registerTool
const PlayerHero = registerTool({
  name: "player_hero",
  renderer: { exporters: {
    web:   (v) => heroMarkup(v),        // your (values) => html functions
    email: (v) => heroEmailMarkup(v),   // email-safe variant
  }},
});
// …Masthead, FormStats, SeasonNotes, ProgrammeFooter registered the same way

// yyx990803 — SILVER · 63 OVR · computed from public activity
const card = (
  <Email backgroundColor="#f2ecdd" contentWidth="720px">
    <Row><Column>
      <Masthead />
      <PlayerHero playerName="Evan You" ovr={63}
                  position="CM" tier="SILVER" />
      <FormStats stats={{"BUILD":45,"REVIEW":42,"SHIP":42,"VOLUME":85,"IMPACT":99}} />
      <SeasonNotes />
      <ProgrammeFooter handle="yyx990803" />
    </Column></Row>
  </Email>
);

const html   = renderToHtml(card, { title: "yyx990803 · GitHub FC", fonts });
const design = renderToJson(card);  // → stored as { type: "custom", slug, values }
                                    //   opens in the Builder as REAL tools