/* global React, DesignCanvas, DCSection, DCArtboard */
const { useState } = React;

const GREEN = "#16a34a";
const GREEN_DEEP = "#14532d";
const GREEN_LIGHT = "#86efac";
const INK = "#14110d";
const PAPER = "#faf7f0";
const CREAM = "#f0e8d6";

/* ============================================================
   THE MARK — two bubbles in conversation.
   Variations on rhythm/weight, then we pick one.
   ============================================================ */

/* A — original two-bubble stack */
const MarkA = ({ size = 80, primary = GREEN, secondary = GREEN_DEEP }) => (
  <svg width={size} height={size} viewBox="0 0 80 80" fill="none">
    <path d="M8 16a8 8 0 0 1 8-8h28a8 8 0 0 1 8 8v14a8 8 0 0 1-8 8H22l-10 8v-8a8 8 0 0 1-4-7V16z" fill={primary}/>
    <path d="M36 42h28a8 8 0 0 1 8 8v14a8 8 0 0 1-8 8h-6v8l-10-8H36a8 8 0 0 1-8-8V50a8 8 0 0 1 8-8z" fill={secondary}/>
  </svg>
);

/* B — overlapping with a small offset, more "in conversation" */
const MarkB = ({ size = 80, primary = GREEN, secondary = INK }) => (
  <svg width={size} height={size} viewBox="0 0 80 80" fill="none">
    <path d="M6 14a8 8 0 0 1 8-8h30a8 8 0 0 1 8 8v16a8 8 0 0 1-8 8H22l-8 7a2 2 0 0 1-3-2v-5a8 8 0 0 1-5-8V14z" fill={primary}/>
    <path d="M74 50a8 8 0 0 0-8-8H40a8 8 0 0 0-8 8v14a8 8 0 0 0 8 8h22l8 7a2 2 0 0 0 3-2v-5a8 8 0 0 0 1-3V50z" fill={secondary}/>
  </svg>
);

/* C — perfectly geometric circles, like radio buttons / dialog */
const MarkC = ({ size = 80, primary = GREEN, secondary = INK }) => (
  <svg width={size} height={size} viewBox="0 0 80 80" fill="none">
    <circle cx="26" cy="28" r="22" fill={primary}/>
    <circle cx="54" cy="52" r="22" fill={secondary}/>
    <path d="M14 44l-6 6a1 1 0 0 0 1 1l8-3" fill={primary}/>
    <path d="M68 36l6-6a1 1 0 0 1 1 1l-3 8" fill={secondary}/>
  </svg>
);

/* D — rounded squares, modern app-icon feel */
const MarkD = ({ size = 80, primary = GREEN, secondary = GREEN_DEEP }) => (
  <svg width={size} height={size} viewBox="0 0 80 80" fill="none">
    <rect x="6" y="8" width="42" height="34" rx="10" fill={primary}/>
    <path d="M12 38v8l8-4h-8z" fill={primary}/>
    <rect x="32" y="38" width="42" height="34" rx="10" fill={secondary}/>
    <path d="M68 68v8l-8-4h8z" fill={secondary}/>
  </svg>
);

/* E — lighter / heavier two-bubble (refined version of A, more confident) */
const MarkE = ({ size = 80, primary = GREEN, secondary = INK }) => (
  <svg width={size} height={size} viewBox="0 0 80 80" fill="none">
    {/* upper bubble — green, opens left */}
    <path d="M10 14a8 8 0 0 1 8-8h26a10 10 0 0 1 10 10v12a10 10 0 0 1-10 10H22l-6 6a1.5 1.5 0 0 1-2.5-1v-6a10 10 0 0 1-3.5-7V14z" fill={primary}/>
    {/* lower bubble — ink, opens right */}
    <path d="M70 50a10 10 0 0 0-10-10H38a10 10 0 0 0-10 10v12a10 10 0 0 0 10 10h22l6 6a1.5 1.5 0 0 0 2.5-1v-6a10 10 0 0 0 1.5-5V50z" fill={secondary}/>
  </svg>
);

/* ============================================================
   THE WORDMARK — "praat" sans + "box" serif italic
   ============================================================ */

function PraatBox({ size = 56, sansColor = INK, serifColor = GREEN }) {
  return (
    <span style={{ display: "inline-flex", alignItems: "baseline", lineHeight: 1, letterSpacing: "-0.025em" }}>
      <span style={{
        fontFamily: '"Geist", -apple-system, sans-serif',
        fontWeight: 600,
        fontSize: size,
        color: sansColor,
      }}>praat</span>
      <span style={{
        fontFamily: '"Instrument Serif", Georgia, serif',
        fontWeight: 400,
        fontStyle: "italic",
        fontSize: size * 1.1,
        color: serifColor,
        marginLeft: size * -0.005,
      }}>box</span>
    </span>
  );
}

/* ============================================================
   LOCKUPS
   ============================================================ */

function Lockup({ Mark, size = 64, gap = 16, sansColor = INK, serifColor = GREEN, markPrimary = GREEN, markSecondary = INK }) {
  return (
    <div style={{ display: "inline-flex", alignItems: "center", gap }}>
      {Mark && <Mark size={size} primary={markPrimary} secondary={markSecondary} />}
      <PraatBox size={size * 0.7} sansColor={sansColor} serifColor={serifColor} />
    </div>
  );
}

/* ============================================================
   ARTBOARDS
   ============================================================ */

function HeroBoard({ Mark, label, bg = PAPER, sansColor = INK, serifColor = GREEN, markPrimary = GREEN, markSecondary = INK }) {
  return (
    <div style={{ width: "100%", height: "100%", background: bg, display: "flex", flexDirection: "column" }}>
      <div style={{ flex: 1, display: "grid", placeItems: "center", padding: 32 }}>
        <Lockup Mark={Mark} size={80} sansColor={sansColor} serifColor={serifColor} markPrimary={markPrimary} markSecondary={markSecondary} />
      </div>
      <div style={{ borderTop: bg === INK ? "1px solid rgba(255,255,255,0.12)" : "1px solid #e0d9cb", padding: "12px 20px", fontFamily: '"Geist Mono", monospace', fontSize: 11, letterSpacing: "0.08em", color: bg === INK ? "rgba(255,255,255,0.5)" : "#807a72", textTransform: "uppercase" }}>
        {label}
      </div>
    </div>
  );
}

function ScaleBoard({ Mark }) {
  return (
    <div style={{ width: "100%", height: "100%", background: PAPER, display: "flex", flexDirection: "column", padding: 28, gap: 22, justifyContent: "center" }}>
      <Lockup Mark={Mark} size={64} />
      <div style={{ height: 1, background: "#e0d9cb" }} />
      <Lockup Mark={Mark} size={36} gap={11} />
      <div style={{ height: 1, background: "#e0d9cb" }} />
      <Lockup Mark={Mark} size={22} gap={7} />
      <div style={{ height: 1, background: "#e0d9cb" }} />
      <Lockup Mark={Mark} size={14} gap={5} />
      <div style={{ marginTop: "auto", paddingTop: 12, borderTop: "1px solid #e0d9cb", fontFamily: '"Geist Mono", monospace', fontSize: 11, letterSpacing: "0.08em", color: "#807a72", textTransform: "uppercase" }}>
        Scaling · 64 / 36 / 22 / 14 px
      </div>
    </div>
  );
}

function FaviconBoard({ Mark }) {
  return (
    <div style={{ width: "100%", height: "100%", background: PAPER, padding: 28, display: "flex", flexDirection: "column", gap: 24, justifyContent: "center" }}>
      <div style={{ display: "flex", gap: 22, alignItems: "flex-end", justifyContent: "center" }}>
        {[16, 24, 32, 48, 64].map((s) => (
          <div key={s} style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 8 }}>
            <Mark size={s} />
            <span style={{ fontFamily: '"Geist Mono", monospace', fontSize: 9, color: "#807a72", letterSpacing: "0.08em" }}>{s}PX</span>
          </div>
        ))}
      </div>
      <div style={{ marginTop: "auto", paddingTop: 12, borderTop: "1px solid #e0d9cb", fontFamily: '"Geist Mono", monospace', fontSize: 11, letterSpacing: "0.08em", color: "#807a72", textTransform: "uppercase" }}>
        Favicon · App icon
      </div>
    </div>
  );
}

function NavBoard({ Mark }) {
  return (
    <div style={{ width: "100%", height: "100%", background: PAPER, display: "flex", flexDirection: "column" }}>
      <div style={{ height: 64, borderBottom: "1px solid #e0d9cb", display: "flex", alignItems: "center", justifyContent: "space-between", padding: "0 24px", background: "white" }}>
        <Lockup Mark={Mark} size={28} gap={9} />
        <div style={{ display: "flex", gap: 22, alignItems: "center", fontFamily: '"Geist", sans-serif', fontSize: 13, color: "#5a5347" }}>
          <span>Product</span><span>Pricing</span><span>Docs</span>
          <span style={{ background: GREEN, color: "white", padding: "7px 14px", borderRadius: 999, fontWeight: 500 }}>Start free</span>
        </div>
      </div>
      <div style={{ flex: 1, padding: "40px 24px", display: "flex", flexDirection: "column", gap: 12 }}>
        <div style={{ fontFamily: '"Instrument Serif", Georgia, serif', fontSize: 38, lineHeight: 1, letterSpacing: "-0.02em", color: INK }}>
          Customer support that <em style={{ color: GREEN }}>actually</em> reads your docs.
        </div>
        <div style={{ fontFamily: '"Geist", sans-serif', fontSize: 14, color: "#5a5347", maxWidth: "85%", lineHeight: 1.5 }}>
          A chat widget you can install in 30 seconds.
        </div>
      </div>
      <div style={{ borderTop: "1px solid #e0d9cb", padding: "12px 20px", fontFamily: '"Geist Mono", monospace', fontSize: 11, letterSpacing: "0.08em", color: "#807a72", textTransform: "uppercase" }}>
        In context · Marketing nav
      </div>
    </div>
  );
}

function MarkOnlyBoard({ Mark, label, bg, primary, secondary }) {
  return (
    <div style={{ width: "100%", height: "100%", background: bg, display: "flex", flexDirection: "column" }}>
      <div style={{ flex: 1, display: "grid", placeItems: "center" }}>
        <Mark size={140} primary={primary} secondary={secondary} />
      </div>
      <div style={{ borderTop: bg === INK ? "1px solid rgba(255,255,255,0.12)" : "1px solid #e0d9cb", padding: "12px 20px", fontFamily: '"Geist Mono", monospace', fontSize: 11, letterSpacing: "0.08em", color: bg === INK ? "rgba(255,255,255,0.5)" : "#807a72", textTransform: "uppercase" }}>
        {label}
      </div>
    </div>
  );
}

/* ============================================================
   APP — refine the mark across 5 candidate symbols, plus
   a "Final lockup" section with the chosen direction at all
   sizes / contexts.
   ============================================================ */

const SYMBOLS = [
  { id: "a", title: "A — Original", subtitle: "Two stacked bubbles like the original 02. Even visual weight.", Mark: MarkA },
  { id: "b", title: "B — Overlapping", subtitle: "Subtle overlap. Reads more like a back-and-forth conversation.", Mark: MarkB },
  { id: "c", title: "C — Geometric circles", subtitle: "Pure circles with tiny tails. Most app-icon-like.", Mark: MarkC },
  { id: "d", title: "D — Rounded squares", subtitle: "Squarer, more interface-y. Plays well at favicon size.", Mark: MarkD },
  { id: "e", title: "E — Refined original", subtitle: "Same idea as A but with cleaner curves and a longer second bubble.", Mark: MarkE },
];

function App() {
  return (
    <DesignCanvas>
      {SYMBOLS.map((s) => (
        <DCSection key={s.id} id={s.id} title={s.title} subtitle={s.subtitle}>
          <DCArtboard id={`${s.id}-hero`} label="Primary lockup" width={520} height={340} style={{ padding: 0 }}>
            <HeroBoard Mark={s.Mark} label="Light · Primary lockup" />
          </DCArtboard>
          <DCArtboard id={`${s.id}-mark`} label="Symbol only" width={420} height={340} style={{ padding: 0 }}>
            <MarkOnlyBoard Mark={s.Mark} label="Symbol only · 140px" bg={PAPER} primary={GREEN} secondary={INK} />
          </DCArtboard>
          <DCArtboard id={`${s.id}-scale`} label="Scaling" width={420} height={340} style={{ padding: 0 }}>
            <ScaleBoard Mark={s.Mark} />
          </DCArtboard>
          <DCArtboard id={`${s.id}-favicon`} label="Favicon" width={520} height={340} style={{ padding: 0 }}>
            <FaviconBoard Mark={s.Mark} />
          </DCArtboard>
          <DCArtboard id={`${s.id}-dark`} label="On dark" width={520} height={340} style={{ padding: 0 }}>
            <HeroBoard Mark={s.Mark} bg={INK} sansColor="white" serifColor={GREEN_LIGHT} markPrimary={GREEN_LIGHT} markSecondary="white" label="Dark · ink background" />
          </DCArtboard>
          <DCArtboard id={`${s.id}-mono-light`} label="Mono · ink" width={420} height={340} style={{ padding: 0 }}>
            <HeroBoard Mark={s.Mark} bg={CREAM} sansColor={INK} serifColor={INK} markPrimary={INK} markSecondary={INK} label="Monochrome · single ink" />
          </DCArtboard>
          <DCArtboard id={`${s.id}-mono-green`} label="Mono · green" width={420} height={340} style={{ padding: 0 }}>
            <HeroBoard Mark={s.Mark} bg={PAPER} sansColor={GREEN} serifColor={GREEN} markPrimary={GREEN} markSecondary={GREEN} label="Monochrome · single green" />
          </DCArtboard>
          <DCArtboard id={`${s.id}-nav`} label="In nav" width={680} height={340} style={{ padding: 0 }}>
            <NavBoard Mark={s.Mark} />
          </DCArtboard>
        </DCSection>
      ))}
    </DesignCanvas>
  );
}

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