// PULSE — typografie-verkenning. Het aanbevolen v5-icoon (vlakkere rechterhelft)
// onder telkens een ander woordmerk-lettertype. Bovenste set = recreatie van de
// referentie; daarna een set eigen, passende suggesties.

const GOLD = "#9C7E55";
const PAPER = "#F6F2EA";

// The recommended v5 mark.
function Mark({ h = 116, color = GOLD }) {
  return (
    <PulseIcon
      bowlR={45}
      leftExt={0.175}
      bendAll={15}
      rightRx={34}
      sw={3.2}
      color={color}
      style={{ height: h }}
    />
  );
}

// "— HEALTH & LIFESTYLE —" rule, consistent across every variant.
function SubRule({ color = GOLD }) {
  return (
    <div style={{
      display: "flex", alignItems: "center", justifyContent: "center", gap: 10,
    }}>
      <span style={{ width: 22, height: 1, background: color, opacity: 0.65 }}></span>
      <span style={{
        fontFamily: "'Jost', sans-serif", fontWeight: 400, fontSize: 11.5,
        letterSpacing: "0.26em", color, textTransform: "uppercase",
        paddingLeft: "0.26em", whiteSpace: "nowrap",
      }}>Health &amp; Lifestyle</span>
      <span style={{ width: 22, height: 1, background: color, opacity: 0.65 }}></span>
    </div>
  );
}

// One full lockup: wordmark + sub-rule + mark.
function Lockup({ text = "PULSE", font, weight = 400, size = 44, spacing = "0em",
                  transform = "none", italic = false, lineShift = 0 }) {
  return (
    <div style={{
      width: "100%", height: "100%", background: PAPER,
      display: "flex", flexDirection: "column", alignItems: "center",
      justifyContent: "center", gap: 22,
    }}>
      <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 13 }}>
        <div style={{
          fontFamily: font, fontWeight: weight, fontSize: size,
          letterSpacing: spacing, textTransform: transform,
          fontStyle: italic ? "italic" : "normal", color: GOLD, lineHeight: 1,
          paddingLeft: spacing, marginTop: lineShift,
        }}>{text}</div>
        <SubRule />
      </div>
      <Mark />
    </div>
  );
}

const AB_W = 330, AB_H = 430;

function App() {
  return (
    <DesignCanvas>
      <DCSection
        id="caps"
        title="Hoofdletters — zoals de referentie"
        subtitle="Vijf PULSE-zetwijzen in hoofdletters, met het aanbevolen v5-icoon. Kleur (goud) nog niet vastgelegd."
      >
        <DCArtboard id="c1" label="01 · Fijne brede serif" width={AB_W} height={AB_H}><Lockup font="'Cormorant', serif" weight={300} size={46} spacing="0.30em" transform="uppercase" /></DCArtboard>
        <DCArtboard id="c2" label="02 · Klassieke serif" width={AB_W} height={AB_H}><Lockup font="'Playfair Display', serif" weight={500} size={43} spacing="0.10em" transform="uppercase" /></DCArtboard>
        <DCArtboard id="c3" label="03 · Vette geometrische sans" width={AB_W} height={AB_H}><Lockup font="'Montserrat', sans-serif" weight={700} size={38} spacing="0.07em" transform="uppercase" /></DCArtboard>
        <DCArtboard id="c4" label="04 · Hoog-contrast didone" width={AB_W} height={AB_H}><Lockup font="'Bodoni Moda', serif" weight={500} size={43} spacing="0.07em" transform="uppercase" /></DCArtboard>
        <DCArtboard id="c5" label="05 · Lichte sans, breed" width={AB_W} height={AB_H}><Lockup font="'Jost', sans-serif" weight={300} size={39} spacing="0.34em" transform="uppercase" /></DCArtboard>
      </DCSection>

      <DCSection
        id="lower"
        title="Kleine letters — zoals de referentie"
        subtitle="Dezelfde vijf posities in kleine letters, inclusief een handgeschreven script."
      >
        <DCArtboard id="l1" label="06 · Geometrische sans (licht)" width={AB_W} height={AB_H}><Lockup font="'Poppins', sans-serif" weight={300} size={50} spacing="0.01em" transform="lowercase" /></DCArtboard>
        <DCArtboard id="l2" label="07 · Serif (Cormorant)" width={AB_W} height={AB_H}><Lockup font="'Cormorant Garamond', serif" weight={500} size={58} transform="lowercase" /></DCArtboard>
        <DCArtboard id="l3" label="08 · Script / handgeschreven" width={AB_W} height={AB_H}><Lockup font="'Sacramento', cursive" weight={400} size={62} transform="lowercase" lineShift={-4} /></DCArtboard>
        <DCArtboard id="l4" label="09 · Elegante serif" width={AB_W} height={AB_H}><Lockup font="'Playfair Display', serif" weight={500} size={52} transform="lowercase" /></DCArtboard>
        <DCArtboard id="l5" label="10 · Lichte sans (Questrial)" width={AB_W} height={AB_H}><Lockup font="'Questrial', sans-serif" weight={400} size={50} spacing="0.03em" transform="lowercase" /></DCArtboard>
      </DCSection>

      <DCSection
        id="extra"
        title="Extra passende suggesties"
        subtitle="Eigen toevoegingen die bij het verfijnde, rustige karakter van het merk passen."
      >
        <DCArtboard id="e1" label="11 · Marcellus — Romeinse caps" width={AB_W} height={AB_H}><Lockup font="'Marcellus', serif" weight={400} size={44} spacing="0.20em" transform="uppercase" /></DCArtboard>
        <DCArtboard id="e2" label="12 · Italiana — fashion serif" width={AB_W} height={AB_H}><Lockup font="'Italiana', serif" weight={400} size={47} spacing="0.16em" transform="uppercase" /></DCArtboard>
        <DCArtboard id="e3" label="13 · Outfit — ultralicht modern" width={AB_W} height={AB_H}><Lockup font="'Outfit', sans-serif" weight={200} size={42} spacing="0.30em" transform="uppercase" /></DCArtboard>
        <DCArtboard id="e4" label="14 · Spectral — serif cursief" width={AB_W} height={AB_H}><Lockup font="'Spectral', serif" weight={300} size={54} italic={true} transform="lowercase" /></DCArtboard>
        <DCArtboard id="e5" label="15 · Allura — vloeiend script" width={AB_W} height={AB_H}><Lockup font="'Allura', cursive" weight={400} size={68} transform="lowercase" lineShift={-6} /></DCArtboard>
        <DCArtboard id="e6" label="16 · DM Serif — display serif" width={AB_W} height={AB_H}><Lockup font="'DM Serif Display', serif" weight={400} size={52} transform="lowercase" /></DCArtboard>
      </DCSection>
    </DesignCanvas>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);
