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

// kentcdodds — LEGENDARY · 89 OVR · computed from public activity
const card = (
  <Email backgroundColor="#f2ecdd" contentWidth="720px">
    <Row><Column>
      <Masthead />
      <PlayerHero playerName="Kent C. Dodds" ovr={89}
                  position="ST" tier="LEGENDARY" />
      <FormStats stats={{"BUILD":60,"REVIEW":90,"SHIP":99,"VOLUME":97,"IMPACT":99}} />
      <SeasonNotes />
      <ProgrammeFooter handle="kentcdodds" />
    </Column></Row>
  </Email>
);

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