// PULSE logo canvas — current mark vs. improved options (larger p-bowl),
// plus a vertical wordmark lockup. Relies on PulseIcon (logo-icon.jsx) and
// the DesignCanvas family (design-canvas.jsx).

const GOLD = "#A4875F";
const PAPER = "#F6F2EA";

function Plate({ children, h = 360 }) {
  return (
    <div style={{
      width: "100%", height: h, background: PAPER,
      display: "flex", alignItems: "center", justifyContent: "center",
    }}>{children}</div>
  );
}

function Tag({ children }) {
  return (
    <div style={{
      position: "absolute", left: 0, right: 0, bottom: 14, textAlign: "center",
      fontFamily: "'Jost', sans-serif", fontSize: 11, letterSpacing: "0.18em",
      textTransform: "uppercase", color: "#B6A893",
    }}>{children}</div>
  );
}

function IconPlate({ icon, note, h = 360 }) {
  return (
    <div style={{ position: "relative" }}>
      <Plate h={h}>{icon}</Plate>
      {note ? <Tag>{note}</Tag> : null}
    </div>
  );
}

function Wordmark({ size = 1, weight = 500 }) {
  return (
    <div style={{ textAlign: "center", lineHeight: 1 }}>
      <div style={{
        fontFamily: "'Cormorant Garamond', serif", fontWeight: weight,
        fontSize: 58 * size, letterSpacing: "0.34em", color: GOLD,
        paddingLeft: "0.34em",
      }}>PULSE</div>
      <div style={{
        display: "flex", alignItems: "center", justifyContent: "center",
        gap: 12, marginTop: 14 * size,
      }}>
        <span style={{ width: 26 * size, height: 1, background: GOLD, opacity: 0.7 }}></span>
        <span style={{
          fontFamily: "'Jost', sans-serif", fontSize: 12.5 * size,
          letterSpacing: "0.32em", color: GOLD, textTransform: "uppercase",
          paddingLeft: "0.32em", whiteSpace: "nowrap",
        }}>Health &amp; Lifestyle</span>
        <span style={{ width: 26 * size, height: 1, background: GOLD, opacity: 0.7 }}></span>
      </div>
    </div>
  );
}

function App() {
  return (
    <DesignCanvas>
      <DCSection
        id="icoon"
        title="Het icoon — uiteinde uitgelijnd op de ring-opening"
        subtitle="De verlenging is teruggebracht tot ~17,5% zodat het open uiteinde van de bowl op één lijn (vanuit het midden) ligt met het meest linkse uiteinde van de buitenste cirkel. Kleur (goud) nog niet vastgelegd."
      >
        <DCArtboard id="v2" label="v2 · 25% (270°)" width={260} height={360}>
          <IconPlate icon={<PulseIcon bowlR={45} leftExt={0.25} style={{ height: 290 }} />} note="uiteinde op horizontaal" />
        </DCArtboard>

        <DCArtboard id="ext" label="Uitgelijnd ~17,5% — aanbevolen" width={260} height={360}>
          <IconPlate icon={<PulseIcon bowlR={45} leftExt={0.175} style={{ height: 290 }} />} note="uiteinde op ring-opening" />
        </DCArtboard>

        <DCArtboard id="ext-big" label="Uitgelijnd · groter" width={260} height={360}>
          <IconPlate icon={<PulseIcon bowlR={51} leftExt={0.175} style={{ height: 290 }} />} note="bowl 51" />
        </DCArtboard>
      </DCSection>

      <DCSection
        id="lockup"
        title="In lockup"
        subtitle="Het verlengde icoon onder het woordmerk, op brandschaal."
      >
        <DCArtboard id="vertical" label="Verticaal lockup" width={420} height={520}>
          <div style={{
            width: "100%", height: "100%", background: PAPER,
            display: "flex", flexDirection: "column", alignItems: "center",
            justifyContent: "center", gap: 30,
          }}>
            <Wordmark size={1} />
            <PulseIcon bowlR={45} leftExt={0.175} style={{ height: 190 }} />
          </div>
        </DCArtboard>

        <DCArtboard id="compact" label="Compact (rij)" width={420} height={260}>
          <div style={{
            width: "100%", height: "100%", background: PAPER,
            display: "flex", alignItems: "center", justifyContent: "center", gap: 28,
          }}>
            <PulseIcon bowlR={45} leftExt={0.175} style={{ height: 150 }} />
            <Wordmark size={0.8} />
          </div>
        </DCArtboard>

        <DCArtboard id="favicon" label="Op donker" width={260} height={260}>
          <div style={{
            width: "100%", height: "100%", background: "#2A2620",
            display: "flex", alignItems: "center", justifyContent: "center",
          }}>
            <PulseIcon bowlR={45} leftExt={0.175} color="#D8C39E" style={{ height: 170 }} />
          </div>
        </DCArtboard>
      </DCSection>
    </DesignCanvas>
  );
}

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