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

// adeelraza — BRONZE · 59 OVR · computed from public activity
const card = (
  <Email backgroundColor="#f2ecdd" contentWidth="720px">
    <Row><Column>
      <Masthead />
      <PlayerHero playerName="Adeel Raza" ovr={59}
                  position="CB" tier="BRONZE" />
      <FormStats stats={{"BUILD":46,"REVIEW":72,"SHIP":74,"VOLUME":61,"IMPACT":41}} />
      <SeasonNotes />
      <ProgrammeFooter handle="adeelraza" />
    </Column></Row>
  </Email>
);

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