// Generative Studio — Brand system.
// The locked logo (galaxy constellation + mono wordmark) rendered at many sizes
// and in several contexts. Self-contained Mark + Wordmark primitives.

const ACCENT = 'oklch(0.65 0.2 250)'; // electric blue
const PAPER = '#F1EEE6'; // warm off-white
const INK = '#0E0E0E'; // near-black
const MUTED = '#6a6a68';
const MONO = 'ui-monospace, "JetBrains Mono", Menlo, monospace';

// ── Mark ─────────────────────────────────────────────────────
// Galaxy constellation. Pure SVG, no container, sizes to the given `size`.
// Colors are parameterized so monochrome lockups (black/white/blue) work.
function Mark({ size = 96, accent = ACCENT, ink = INK, haze = INK, showAccent = true }) {
  const stars = [
  [40, 36, 1.0, 1.0],
  [58, 18, 0.70, 0.95], [68, 34, 0.60, 0.85], [60, 54, 0.65, 0.90],
  [42, 62, 0.55, 0.85], [22, 58, 0.70, 0.95], [12, 40, 0.60, 0.85],
  [18, 22, 0.55, 0.85], [34, 14, 0.65, 0.90],
  [6, 14, 0.35, 0.45], [72, 10, 0.30, 0.40], [74, 60, 0.35, 0.45],
  [10, 66, 0.35, 0.45], [50, 6, 0.30, 0.40], [4, 30, 0.25, 0.35],
  [78, 46, 0.28, 0.38], [28, 70, 0.28, 0.38],
  [52, 28, 0.40, 0.55], [30, 42, 0.40, 0.55], [46, 46, 0.38, 0.50]];

  const edges = [
  [0, 1], [0, 3], [0, 5], [0, 7], [0, 8],
  [1, 2], [2, 3], [3, 4], [4, 5], [5, 6], [6, 7], [7, 8], [8, 1],
  [0, 17], [0, 18], [0, 19]];

  const accentEdge = [0, 1];
  const w = size;
  const h = size * (76 / 82);

  return (
    <svg width={w} height={h} viewBox="0 0 82 76" style={{ display: 'block', flexShrink: 0 }}>
      {edges.map(([a, b], i) => {
        const isAccent = showAccent && (a === accentEdge[0] && b === accentEdge[1] || a === accentEdge[1] && b === accentEdge[0]);
        const bright = Math.min(stars[a][3], stars[b][3]);
        return (
          <line key={i}
          x1={stars[a][0]} y1={stars[a][1]}
          x2={stars[b][0]} y2={stars[b][1]}
          stroke={isAccent ? accent : haze}
          strokeWidth={isAccent ? 1.3 : 0.9}
          opacity={isAccent ? 0.95 : 0.28 + bright * 0.25} />);

      })}
      {stars.map(([x, y, s, b], i) => {
        const isAnchor = i === 0;
        const r = isAnchor ? 4.6 : 1.2 + s * 2.4;
        return (
          <circle key={i} cx={x} cy={y} r={r}
          fill={isAnchor && showAccent ? accent : ink}
          opacity={isAnchor ? 1 : 0.35 + b * 0.6} />);

      })}
    </svg>);

}

// ── Wordmark (mono) ──────────────────────────────────────────
function Wordmark({ size = 26, color = INK, accent = ACCENT, showDot = true }) {
  return (
    <div style={{ fontFamily: MONO, fontSize: size, fontWeight: 500, letterSpacing: '-0.015em', lineHeight: 1, color }}>
      generative<span style={{ color: showDot ? accent : color }}>.</span>studio
    </div>);

}

function Descriptor({ size = 10, color = MUTED, align = 'left' }) {
  return (
    <div style={{ fontFamily: MONO, fontSize: size, letterSpacing: '0.28em', textTransform: 'uppercase', color, textAlign: align }}>
      Software-based design & solutions
    </div>);

}

// ── Lockups ──────────────────────────────────────────────────
function Horizontal({ markSize = 110, wordSize = 28, color = INK, accent = ACCENT, gap = 32, withDescriptor = true, descColor = MUTED }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap }}>
      <Mark size={markSize} ink={color} accent={accent} showAccent={accent !== color} />
      <div>
        <Wordmark size={wordSize} color={color} accent={accent} showDot={accent !== color} />
        {withDescriptor && <div style={{ marginTop: 12 }}><Descriptor color={descColor} /></div>}
      </div>
    </div>);

}

function Stacked({ markSize = 120, wordSize = 24, color = INK, accent = ACCENT, withDescriptor = true, descColor = MUTED, align = 'center' }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: align === 'center' ? 'center' : 'flex-start', gap: 18 }}>
      <Mark size={markSize} ink={color} accent={accent} showAccent={accent !== color} />
      <Wordmark size={wordSize} color={color} accent={accent} showDot={accent !== color} />
      {withDescriptor && <Descriptor color={descColor} align={align} />}
    </div>);

}

// ── Artboard helpers ─────────────────────────────────────────
const Frame = ({ w = 640, h = 420, bg = PAPER, pad = 0, children, style = {} }) =>
<div style={{
  width: w, height: h, background: bg, position: 'relative', overflow: 'hidden',
  display: 'flex', alignItems: 'center', justifyContent: 'center', padding: pad, ...style
}}>
    {children}
  </div>;


const Tag = ({ children, color = 'rgba(0,0,0,0.45)' }) =>
<div style={{
  position: 'absolute', left: 24, bottom: 18, fontFamily: MONO,
  fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color
}}>{children}</div>;


// ─────────────────────────────────────────────────────────────
// LOCKUPS
// ─────────────────────────────────────────────────────────────

function LockupHorizontal() {
  return (
    <Frame>
      <Horizontal />
      <Tag>Primary · horizontal</Tag>
    </Frame>);

}

function LockupStacked() {
  return (
    <Frame>
      <Stacked />
      <Tag>Stacked</Tag>
    </Frame>);

}

function LockupMarkOnly() {
  return (
    <Frame>
      <Mark size={180} />
      <Tag>Mark only</Tag>
    </Frame>);

}

function LockupWordmarkOnly() {
  return (
    <Frame>
      <div>
        <Wordmark size={42} />
        <div style={{ marginTop: 16 }}><Descriptor size={12} /></div>
      </div>
      <Tag>Wordmark only</Tag>
    </Frame>);

}

// ─────────────────────────────────────────────────────────────
// MONOCHROME
// ─────────────────────────────────────────────────────────────

function MonoBlack() {
  return (
    <Frame bg={PAPER}>
      <Horizontal color={INK} accent={INK} withDescriptor={true} descColor="#7a7a78" />
      <Tag>Monochrome · ink</Tag>
    </Frame>);

}

function MonoWhite() {
  return (
    <Frame bg={INK}>
      <Horizontal color="#F1EEE6" accent="#F1EEE6" withDescriptor={true} descColor="rgba(241,238,230,0.55)" />
      <Tag color="rgba(241,238,230,0.45)">Monochrome · paper</Tag>
    </Frame>);

}

function MonoBlue() {
  return (
    <Frame bg={PAPER}>
      <Horizontal color={ACCENT} accent={ACCENT} withDescriptor={true} descColor="oklch(0.55 0.12 250)" />
      <Tag>Monochrome · blue</Tag>
    </Frame>);

}

// ─────────────────────────────────────────────────────────────
// SIZE RAMP — proves the mark holds up small
// ─────────────────────────────────────────────────────────────

function SizeRamp() {
  const sizes = [128, 96, 64, 40, 24, 16];
  return (
    <Frame>
      <div style={{ display: 'flex', alignItems: 'flex-end', gap: 36 }}>
        {sizes.map((s) =>
        <div key={s} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 14 }}>
            <Mark size={s} />
            <span style={{ fontFamily: MONO, fontSize: 10, color: MUTED, letterSpacing: '0.1em' }}>{s}px</span>
          </div>
        )}
      </div>
      <Tag>Size ramp</Tag>
    </Frame>);

}

// ─────────────────────────────────────────────────────────────
// FAVICON / APP ICON grid — mark on square tiles
// ─────────────────────────────────────────────────────────────

function AppIcons() {
  const tiles = [
  { bg: PAPER, ink: INK, label: 'Light' },
  { bg: INK, ink: '#F1EEE6', label: 'Dark' },
  { bg: ACCENT, ink: '#F1EEE6', label: 'Brand' },
  { bg: '#14121A', ink: '#F1EEE6', label: 'Deep' }];

  return (
    <Frame>
      <div style={{ display: 'flex', gap: 24 }}>
        {tiles.map((t) =>
        <div key={t.label} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 10 }}>
            <div style={{ width: 96, height: 96, background: t.bg, borderRadius: 20, display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: '0 1px 0 rgba(0,0,0,0.05), 0 8px 20px rgba(0,0,0,0.08)' }}>
              <Mark size={66} ink={t.ink} accent={t.bg === PAPER ? ACCENT : t.ink} showAccent={t.bg === PAPER} haze={t.ink} />
            </div>
            <span style={{ fontFamily: MONO, fontSize: 10, color: MUTED, letterSpacing: '0.1em' }}>{t.label}</span>
          </div>
        )}
      </div>
      <Tag>App icon · 96px</Tag>
    </Frame>);

}

// ─────────────────────────────────────────────────────────────
// MOCKUPS
// ─────────────────────────────────────────────────────────────

// Website header
function MockupSite() {
  return (
    <Frame bg="#E8E5DE" pad={0}>
      <div style={{ width: 560, height: 340, background: PAPER, boxShadow: '0 20px 40px rgba(0,0,0,0.08)', borderRadius: 8, overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
        {/* browser chrome */}
        <div style={{ height: 28, background: '#E6E2D9', display: 'flex', alignItems: 'center', padding: '0 10px', gap: 6 }}>
          <span style={{ width: 8, height: 8, borderRadius: 999, background: '#C9C4B8' }} />
          <span style={{ width: 8, height: 8, borderRadius: 999, background: '#C9C4B8' }} />
          <span style={{ width: 8, height: 8, borderRadius: 999, background: '#C9C4B8' }} />
          <div style={{ marginLeft: 12, fontFamily: MONO, fontSize: 9, color: MUTED, letterSpacing: '0.1em' }}>generative.studio</div>
        </div>
        {/* header */}
        <div style={{ padding: '16px 24px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', borderBottom: '1px solid rgba(0,0,0,0.06)' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <Mark size={28} />
            <Wordmark size={14} />
          </div>
          <div style={{ display: 'flex', gap: 18, fontFamily: MONO, fontSize: 10, letterSpacing: '0.16em', textTransform: 'uppercase', color: INK }}>
            <span>Work</span><span>Services</span><span>About</span><span style={{ color: ACCENT }}>Contact</span>
          </div>
        </div>
        {/* hero */}
        <div style={{ flex: 1, padding: '36px 24px', display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 14 }}>
          <div style={{ fontFamily: MONO, fontSize: 9, letterSpacing: '0.28em', textTransform: 'uppercase', color: MUTED }}>
            Software-based design & solutions
          </div>
          <div style={{ fontFamily: '"Helvetica Neue", Helvetica, Arial, sans-serif', fontSize: 32, fontWeight: 500, letterSpacing: '-0.02em', lineHeight: 1.02, color: INK, maxWidth: 420 }}>
            We build and maintain the software that runs your business.
          </div>
          <div style={{ display: 'flex', gap: 10, marginTop: 6 }}>
            <span style={{ padding: '8px 14px', background: INK, color: PAPER, fontFamily: MONO, fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', borderRadius: 4 }}>Start a project →</span>
            <span style={{ padding: '8px 14px', border: `1px solid ${INK}`, color: INK, fontFamily: MONO, fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', borderRadius: 4 }}>Our work</span>
          </div>
        </div>
      </div>
      <Tag>Website header</Tag>
    </Frame>);

}

// Business card (front + back, as one artboard)
function MockupCard() {
  return (
    <Frame bg="#DCD9D1" pad={0}>
      <div style={{ display: 'flex', gap: 28 }}>
        {/* front */}
        <div style={{ width: 260, height: 150, background: PAPER, borderRadius: 4, padding: 18, display: 'flex', flexDirection: 'column', justifyContent: 'space-between', boxShadow: '0 10px 24px rgba(0,0,0,0.1)' }}>
          <Mark size={44} />
          <div>
            <Wordmark size={14} />
            <div style={{ marginTop: 6, fontFamily: MONO, fontSize: 8, letterSpacing: '0.22em', textTransform: 'uppercase', color: MUTED }}>
              Software-based design & solutions
            </div>
          </div>
        </div>
        {/* back */}
        <div style={{ width: 260, height: 150, background: INK, borderRadius: 4, padding: 18, color: PAPER, display: 'flex', flexDirection: 'column', justifyContent: 'space-between', boxShadow: '0 10px 24px rgba(0,0,0,0.1)' }}>
          <div style={{ fontFamily: MONO, fontSize: 11, letterSpacing: '-0.01em', lineHeight: 1.4 }}>
            <div style={{ fontWeight: 500 }}>Your Name</div>
            <div style={{ color: 'rgba(241,238,230,0.6)' }}>Founder · Engineer</div>
          </div>
          <div style={{ fontFamily: MONO, fontSize: 9, letterSpacing: '0.1em', color: 'rgba(241,238,230,0.7)', lineHeight: 1.8 }}>
            <div>hello<span style={{ color: ACCENT }}>@</span>generative.studio</div>
            <div>+1 (000) 000-0000</div>
            <div>generative.studio</div>
          </div>
        </div>
      </div>
      <Tag>Business card · front + back</Tag>
    </Frame>);

}

// Commercial Invoice — rebuilt to mirror the user's Word template
function MockupInvoice() {
  const label = { fontFamily: MONO, fontSize: 8, letterSpacing: '0.22em', textTransform: 'uppercase', color: MUTED };
  const body = { fontFamily: 'Arial, Helvetica, sans-serif', fontSize: 10, color: INK, lineHeight: 1.5 };
  return (
    <Frame bg="#E8E5DE">
      <div style={{ width: 460, height: 360, background: PAPER, boxShadow: '0 14px 30px rgba(0,0,0,0.1)', padding: '22px 26px', display: 'flex', flexDirection: 'column', gap: 14, position: 'relative' }}>
        {/* brand block */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <Mark size={30} />
          <div>
            <Wordmark size={12} />
            <div style={{ marginTop: 3, fontFamily: MONO, fontSize: 6.5, letterSpacing: '0.22em', textTransform: 'uppercase', color: MUTED }}>
              Software-based design & solutions
            </div>
          </div>
        </div>

        {/* centered title */}
        <div style={{ textAlign: 'center', fontFamily: 'Arial, Helvetica, sans-serif', fontWeight: 700, fontSize: 14, letterSpacing: '0.12em', color: INK, marginTop: 4 }}>
          COMMERCIAL INVOICE
        </div>

        {/* receiver */}
        <div>
          <div style={label}>Receiver Information</div>
          <div style={{ ...body, marginTop: 4 }}>
            <div>Full legal company name (exactly as registered)</div>
            <div style={{ color: MUTED }}>Registered address — street, number, postal code, city, country</div>
          </div>
        </div>

        {/* invoice no + date */}
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', borderTop: `1px solid ${INK}`, borderBottom: `1px solid ${INK}`, padding: '8px 0' }}>
          <div style={body}><span style={{ color: MUTED }}>Invoice no:</span> <b>001</b></div>
          <div style={body}><span style={{ color: MUTED }}>Date:</span> <b>2026-04-22</b></div>
        </div>

        {/* line item */}
        <div style={{ ...body, display: 'flex', justifyContent: 'space-between', gap: 16 }}>
          <span style={{ maxWidth: 280 }}>Yacht teaser trailers — production of 5 short-form video trailers</span>
          <span style={{ fontVariantNumeric: 'tabular-nums' }}>€ 1,000<span style={{ color: ACCENT }}>.</span>00</span>
        </div>
        <div style={{ ...body, color: MUTED, fontStyle: 'italic', marginTop: -8 }}>
          S/ One Thousand Euro and 00/100
        </div>

        {/* payment block */}
        <div style={{ marginTop: 'auto', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16, borderTop: `1px solid ${INK}`, paddingTop: 10 }}>
          <div>
            <div style={label}>Payment Details</div>
            <div style={{ ...body, marginTop: 3, color: MUTED }}>
              <div>Bank · IBAN</div>
              <div>BIC/SWIFT</div>
            </div>
          </div>
          <div>
            <div style={label}>Payment Term</div>
            <div style={{ ...body, marginTop: 3 }}>Within 14 days after invoice date</div>
          </div>
        </div>
      </div>
      <Tag>Commercial invoice</Tag>
    </Frame>);

}

// Social avatar — the mark on the brand-blue tile, as you'd see in a profile
function MockupAvatar() {
  return (
    <Frame bg="#E8E5DE">
      <div style={{ display: 'flex', alignItems: 'center', gap: 28 }}>
        {/* avatar tile */}
        <div style={{ width: 150, height: 150, background: INK, borderRadius: 999, display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: '0 10px 24px rgba(0,0,0,0.1)' }}>
          <Mark size={100} ink="#F1EEE6" accent={ACCENT} haze="#F1EEE6" />
        </div>
        {/* context — profile card-like */}
        <div style={{ width: 240, padding: 16, background: PAPER, borderRadius: 8, boxShadow: '0 10px 24px rgba(0,0,0,0.08)' }}>
          <Wordmark size={16} />
          <div style={{ marginTop: 6, fontFamily: MONO, fontSize: 9, letterSpacing: '0.22em', textTransform: 'uppercase', color: MUTED }}>
            @generativestudio
          </div>
          <div style={{ marginTop: 12, fontFamily: '"Helvetica Neue", Helvetica, Arial, sans-serif', fontSize: 12, color: INK, lineHeight: 1.4 }}>
            Software solutions & IT consulting. Custom builds, integrations, maintenance.
          </div>
          <div style={{ marginTop: 10, fontFamily: MONO, fontSize: 9, color: ACCENT }}>generative.studio</div>
        </div>
      </div>
      <Tag>Social avatar · profile</Tag>
    </Frame>);

}

// Terminal splash — on-brand for engineering clients
function MockupTerminal() {
  return (
    <Frame bg="#E8E5DE">
      <div style={{ width: 520, height: 320, background: '#0B0B0D', borderRadius: 8, overflow: 'hidden', boxShadow: '0 14px 30px rgba(0,0,0,0.2)' }}>
        <div style={{ height: 26, background: '#17181B', display: 'flex', alignItems: 'center', padding: '0 10px', gap: 6 }}>
          <span style={{ width: 8, height: 8, borderRadius: 999, background: '#3A3B3F' }} />
          <span style={{ width: 8, height: 8, borderRadius: 999, background: '#3A3B3F' }} />
          <span style={{ width: 8, height: 8, borderRadius: 999, background: '#3A3B3F' }} />
          <div style={{ marginLeft: 12, fontFamily: MONO, fontSize: 9, color: 'rgba(241,238,230,0.5)' }}>zsh — generative-studio</div>
        </div>
        <div style={{ padding: 22, display: 'flex', alignItems: 'center', gap: 18 }}>
          <Mark size={64} ink="#F1EEE6" accent={ACCENT} haze="#F1EEE6" />
          <div style={{ fontFamily: MONO, color: '#F1EEE6' }}>
            <div style={{ fontSize: 14, fontWeight: 500 }}>
              generative<span style={{ color: ACCENT }}>.</span>studio
            </div>
            <div style={{ fontSize: 10, color: 'rgba(241,238,230,0.5)', marginTop: 4 }}>v1.0.0 · welcome</div>
          </div>
        </div>
        <div style={{ padding: '0 22px', fontFamily: MONO, fontSize: 11, color: 'rgba(241,238,230,0.75)', lineHeight: 1.7 }}>
          <div><span style={{ color: ACCENT }}>$</span> gs init my-project</div>
          <div style={{ color: 'rgba(241,238,230,0.55)' }}>  ↳ provisioning infrastructure…</div>
          <div style={{ color: 'rgba(241,238,230,0.55)' }}>  ↳ connecting services…</div>
          <div><span style={{ color: ACCENT }}>✓</span> ready in 2.4s</div>
        </div>
      </div>
      <Tag>Terminal splash</Tag>
    </Frame>);

}

// Video intro card — since you do AI video editing work too
function MockupVideoCard() {
  return (
    <Frame bg="#DCD9D1" pad={0}>
      <div style={{ width: 540, height: 304, background: INK, borderRadius: 6, overflow: 'hidden', position: 'relative', boxShadow: '0 16px 32px rgba(0,0,0,0.2)' }}>
        {/* subtle star haze background */}
        <div style={{ position: 'absolute', inset: 0, opacity: 0.4 }}>
          <Mark size={540} ink="#F1EEE6" accent={ACCENT} haze="#F1EEE6" />
        </div>
        <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(circle at 50% 50%, rgba(14,14,14,0) 30%, rgba(14,14,14,0.85) 75%)' }} />
        {/* content */}
        <div style={{ position: 'absolute', inset: 0, padding: 28, display: 'flex', flexDirection: 'column', justifyContent: 'space-between', color: '#F1EEE6' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <Mark size={24} ink="#F1EEE6" accent={ACCENT} haze="#F1EEE6" />
            <Wordmark size={12} color="#F1EEE6" accent={ACCENT} />
          </div>
          <div>
            <div style={{ fontFamily: MONO, fontSize: 9, letterSpacing: '0.3em', textTransform: 'uppercase', color: 'rgba(241,238,230,0.55)' }}>
              Case study · 01
            </div>
            <div style={{ fontFamily: '"Helvetica Neue", Helvetica, Arial, sans-serif', fontSize: 28, fontWeight: 500, letterSpacing: '-0.02em', lineHeight: 1.05, marginTop: 10, maxWidth: 380 }}>
              Rebuilding a retail inventory system.
            </div>
            <div style={{ marginTop: 16, fontFamily: MONO, fontSize: 10, letterSpacing: '0.16em', textTransform: 'uppercase', color: ACCENT }}>
              Watch →
            </div>
          </div>
        </div>
      </div>
      <Tag>Video / case-study card</Tag>
    </Frame>);

}

Object.assign(window, {
  // primitives
  Mark, Wordmark, Descriptor, Horizontal, Stacked,
  ACCENT, PAPER, INK, MUTED, MONO,
  // artboards
  LockupHorizontal, LockupStacked, LockupMarkOnly, LockupWordmarkOnly,
  MonoBlack, MonoWhite, MonoBlue,
  SizeRamp, AppIcons,
  MockupSite, MockupCard, MockupInvoice, MockupAvatar, MockupTerminal, MockupVideoCard
});