// deGold brand book — component library
// Share globals so multi-file JSX stays safe.

const { useState, useEffect, useRef, useMemo } = React;

// ─────────────────────────────────────────────────────────────
// Primitives
const Mono = ({children, className="", style}) => (
  <span className={`mono ${className}`} style={style}>{children}</span>
);
const Eyebrow = ({children, className=""}) => (
  <div className={`upper ${className}`} style={{color:"var(--ink-4)"}}>{children}</div>
);
const Rule = ({dark, style}) => (
  <div style={{borderBottom: dark?"1px solid var(--dk-line)":"1px solid var(--ink)", ...style}} />
);

// ─────────────────────────────────────────────────────────────
// The wordmark — 'de / gold' with an oxblood slash.
// The slash IS the sygnet — no separate monogram, nothing to copy.
// Variants:
//   "full"      →  de / gold        (default)
//   "markOnly"  →  gold             (when context already says 'de')
//   "ticker"    →  de / gold ◆ gVault   (product lockup for brand book)
const Wordmark = ({size=60, color, variant="full"}) => {
  const ink = color || "var(--ink)";
  const wordStyle = {
    fontFamily: "var(--font-sans)",
    fontSize: size,
    fontWeight: 500,
    letterSpacing: "-0.045em",
    color: ink,
  };
  const slashStyle = {
    fontFamily: "var(--font-sans)",
    fontSize: size * 1.05,
    fontWeight: 300,
    color: "var(--ox)",
    margin: `0 ${size * 0.06}px`,
    transform: "translateY(2px)",
    display: "inline-block",
  };
  return (
    <span style={{display:"inline-flex", alignItems:"baseline", gap:0, lineHeight:1}}>
      {variant !== "markOnly" && <span style={wordStyle}>de</span>}
      {variant !== "markOnly" && <span style={slashStyle}>/</span>}
      <span style={wordStyle}>gold</span>
      {variant === "ticker" && (
        <span style={{
          fontFamily: "var(--font-mono)",
          fontSize: size * 0.32,
          letterSpacing: ".05em",
          color: "var(--ox)",
          transform: "translateY(-0.9em)",
          marginLeft: size * 0.18,
          fontWeight: 500,
        }}>◆ gVault</span>
      )}
    </span>
  );
};

// Monogram — "dg" inside a bracket frame
const Monogram = ({size=80, bg="var(--ink)", fg="var(--paper)"}) => (
  <div style={{width:size,height:size,background:bg,color:fg,display:"grid",placeItems:"center",position:"relative",fontFamily:"var(--font-mono)",fontWeight:500}}>
    <div style={{position:"absolute",inset:6,border:`1px solid ${fg}`,opacity:0.25}}/>
    <div style={{fontSize:size*0.36,letterSpacing:"-0.06em"}}>dg</div>
    <div style={{position:"absolute",bottom:6,left:8,fontSize:size*0.08,letterSpacing:".15em",opacity:0.55}}>◆ VAULT</div>
  </div>
);

// ─────────────────────────────────────────────────────────────
// Ticker strip — the recurring Bloomberg-ish band
const Ticker = ({items, dark, speed=60}) => {
  const row = [...items, ...items];
  return (
    <div style={{
      background: dark?"var(--ink)":"var(--paper-2)",
      color: dark?"var(--paper)":"var(--ink)",
      borderTop: "1px solid var(--ink)",
      borderBottom: "1px solid var(--ink)",
      overflow:"hidden",
      position:"relative"
    }}>
      <div style={{display:"flex",gap:48,padding:"10px 0",whiteSpace:"nowrap",animation:`tickerScroll ${speed}s linear infinite`}}>
        {row.map((it,i)=>(
          <span key={i} style={{display:"inline-flex",gap:10,alignItems:"baseline",fontFamily:"var(--font-mono)",fontSize:12,letterSpacing:".04em"}}>
            <span style={{opacity:0.5,fontSize:10}}>◆</span>
            <span style={{opacity:0.6}}>{it.label}</span>
            <span style={{fontWeight:500}}>{it.value}</span>
            {it.delta && <span style={{color: it.delta.startsWith("+")?"var(--pos)":"var(--ox-2)"}}>{it.delta}</span>}
          </span>
        ))}
      </div>
      <style>{`@keyframes tickerScroll { from{transform:translateX(0)} to{transform:translateX(-50%)} }`}</style>
    </div>
  );
};

// ─────────────────────────────────────────────────────────────
// Section frame
const Section = ({id, num, eyebrow, title, desc, children}) => (
  <section id={id}>
    <div className="wrap">
      <div className="section-head">
        <div className="num-tag">§ {num}</div>
        <div>
          <div className="eyebrow" style={{marginBottom:6}}>{eyebrow}</div>
          <h2>{title}</h2>
          {desc && <p style={{color:"var(--ink-4)", maxWidth:680, marginTop:10, fontSize:14}}>{desc}</p>}
        </div>
        <div className="mono" style={{fontSize:11,color:"var(--ink-5)",textAlign:"right"}}>DGB · v1.0 · 2026</div>
      </div>
      <div className="section-body">{children}</div>
    </div>
  </section>
);

// ─────────────────────────────────────────────────────────────
// Small ornamental pieces
const BarCode = ({seed=7, width=220, height=44, color="var(--ink)"}) => {
  // Deterministic pseudo-random bar pattern.
  const bars = useMemo(()=>{
    let s = seed;
    const rnd = () => (s = (s*9301+49297)%233280, s/233280);
    const arr = [];
    let x = 0;
    while(x < width){
      const w = 1 + Math.floor(rnd()*4);
      const gap = 1 + Math.floor(rnd()*3);
      arr.push({x, w});
      x += w + gap;
    }
    return arr;
  }, [seed, width]);
  return (
    <svg width={width} height={height} style={{display:"block"}}>
      {bars.map((b,i)=><rect key={i} x={b.x} y={0} width={b.w} height={height-10} fill={color}/>)}
      <text x={0} y={height-1} fontFamily="var(--font-mono)" fontSize="9" fill={color} letterSpacing="2">DGBK · 4626 · 7540 · {seed.toString().padStart(6,"0")}</text>
    </svg>
  );
};

const Crosshair = ({size=16, color="var(--ink)"}) => (
  <svg width={size} height={size} viewBox="0 0 16 16"><line x1="0" y1="8" x2="16" y2="8" stroke={color} strokeWidth="1"/><line x1="8" y1="0" x2="8" y2="16" stroke={color} strokeWidth="1"/><circle cx="8" cy="8" r="2.5" fill="none" stroke={color}/></svg>
);

Object.assign(window, { Mono, Eyebrow, Rule, Wordmark, Monogram, Ticker, Section, BarCode, Crosshair });