// kit.jsx — shared primitives for the LifeAfterCall site.

const LAC = {
  paper: '#F4EFE2', paper2: '#EBE3CD', paper3: '#E2D9BF', cream: '#FBF8EE',
  midnight: '#181F2B', midnight2: '#1B2230',
  ink: '#181F2B', inkSoft: '#3A414F', dim: '#8B826E', dim2: '#A8A18B',
  amber: '#F6AD55', amberDeep: '#C77A1F',
  teal: '#4FD1C5', tealDeep: '#1F9189',
  line: 'rgba(24,31,43,0.16)', lineSoft: 'rgba(24,31,43,0.08)', lineHard: '#181F2B',
};
const F = {
  serif: "'Instrument Serif', 'Times New Roman', serif",
  sans:  "'Bricolage Grotesque', system-ui, sans-serif",
  mono:  "'JetBrains Mono', ui-monospace, monospace",
};

// Pick the accent for a given time-of-day band.
const accentFor = (when) =>
  when === 'pm' ? LAC.tealDeep : when === 'noon' ? LAC.midnight : LAC.amberDeep;

// ── HorizonGlyph ────────────────────────────────────────────────
function HorizonGlyph({ size = 22, time = 'am', stroke, sun }) {
  const lineY = 0.62, r = 0.16, offset = 0.06;
  const cy = time === 'am' ? lineY - offset : time === 'pm' ? lineY + offset : lineY;
  const fillSun = sun || (time === 'pm' ? LAC.tealDeep : time === 'noon' ? LAC.midnight : LAC.amber);
  return (
    <svg width={size} height={size} viewBox="0 0 1 1" style={{ display: 'block' }}>
      <line x1="0.04" y1={lineY} x2="0.96" y2={lineY} stroke={stroke || LAC.midnight} strokeWidth="0.018" />
      <circle cx="0.5" cy={cy} r={r} fill={fillSun} />
    </svg>
  );
}

// ── Mono label ──────────────────────────────────────────────────
function Mono({ children, color, size = 11, track = '0.16em', as: As = 'span', style, ...rest }) {
  return (
    <As style={{
      fontFamily: F.mono, fontWeight: 500, fontSize: size,
      letterSpacing: track, textTransform: 'uppercase',
      color: color || LAC.dim, ...style,
    }} {...rest}>{children}</As>
  );
}

// ── Department badge ────────────────────────────────────────────
function Dept({ no, name, when = 'am' }) {
  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 10 }}>
      <HorizonGlyph size={18} time={when} />
      <Mono color={accentFor(when)} size={11}>{no}</Mono>
      <Mono color={LAC.midnight} size={11}>{name}</Mono>
    </span>
  );
}

// ── Asterism ────────────────────────────────────────────────────
function Asterism({ width = 140, color = LAC.midnight }) {
  return (
    <div style={{ display: 'inline-flex', alignItems: 'center', gap: 10, color }}>
      <div style={{ width: width * 0.3, height: 1, background: 'currentColor', opacity: 0.4 }} />
      <span style={{ display: 'inline-flex', gap: 6, alignItems: 'center' }}>
        <span style={{ width: 5, height: 5, borderRadius: '50%', background: LAC.amberDeep }} />
        <span style={{ width: 4, height: 4, borderRadius: '50%', background: 'currentColor' }} />
        <span style={{ width: 5, height: 5, borderRadius: '50%', background: LAC.tealDeep }} />
      </span>
      <div style={{ width: width * 0.3, height: 1, background: 'currentColor', opacity: 0.4 }} />
    </div>
  );
}

// ── Button ──────────────────────────────────────────────────────
function LACButton({ children, ghost, glyph = 'am', onClick, style, type = 'button' }) {
  const [hover, setHover] = React.useState(false);
  const bg = ghost ? 'transparent' : (hover ? LAC.amberDeep : LAC.midnight);
  const color = ghost ? LAC.midnight : LAC.paper;
  return (
    <button
      type={type}
      onClick={onClick}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        display: 'inline-flex', alignItems: 'center', gap: 10,
        padding: '11px 16px', border: ghost ? `1px solid ${LAC.midnight}` : 0,
        background: ghost ? (hover ? LAC.midnight : 'transparent') : bg,
        color: ghost ? (hover ? LAC.paper : LAC.midnight) : color,
        fontFamily: F.mono, fontWeight: 500, fontSize: 11,
        letterSpacing: '0.14em', textTransform: 'uppercase', cursor: 'pointer',
        transition: 'background .15s, color .15s', ...style,
      }}
    >
      {children}
      {glyph && <HorizonGlyph size={14} time={glyph} stroke={ghost && !hover ? LAC.midnight : LAC.paper} sun={ghost && !hover ? LAC.amber : LAC.amber} />}
    </button>
  );
}

// ── Hairline ────────────────────────────────────────────────────
function Rule({ hard, color, opacity = 1, style }) {
  return <div style={{
    height: 1, background: hard ? LAC.lineHard : (color || LAC.line),
    opacity, ...style,
  }} />;
}

// ── Folio chrome (top corners of a printable block) ─────────────
function FolioTop({ left, right, color = LAC.dim, padX = 32, top = 18 }) {
  return (
    <div style={{
      position: 'absolute', top, left: padX, right: padX,
      display: 'flex', justifyContent: 'space-between', alignItems: 'center',
      pointerEvents: 'none', zIndex: 2,
    }}>
      <Mono color={color}>{left}</Mono>
      <Mono color={color}>{right}</Mono>
    </div>
  );
}

// ── PhotoSlot — diagonal-stripes placeholder with faux horizon ──
// Used wherever a real photo will live. Caption + time stamp baked in.
function PhotoSlot({
  height = 360, when = 'am', caption = '[ photo · 4:3 · placeholder ]', time = '06:14 a.m.',
  sunPosX = 0.7, sunPosY = 0.62, horizonY = 0.62, style,
}) {
  const id = React.useMemo(() => 'ps' + Math.random().toString(36).slice(2, 8), []);
  return (
    <div style={{ position: 'relative', height, background: LAC.paper2, overflow: 'hidden', ...style }}>
      <svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none"
           style={{ opacity: 0.55, position: 'absolute', inset: 0 }}>
        <defs>
          <pattern id={`stripes_${id}`} width="3.4" height="3.4" patternUnits="userSpaceOnUse" patternTransform="rotate(45)">
            <line x1="0" y1="0" x2="0" y2="3.4" stroke={accentFor(when)} strokeWidth="0.35" />
          </pattern>
          <linearGradient id={`fade_${id}`} x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor={LAC.paper} stopOpacity="0" />
            <stop offset="80%" stopColor={LAC.paper2} stopOpacity="0.7" />
          </linearGradient>
        </defs>
        <rect width="100" height="100" fill={`url(#stripes_${id})`} />
        <rect width="100" height="100" fill={`url(#fade_${id})`} />
      </svg>
      <div style={{ position: 'absolute', left: 0, right: 0, top: `${horizonY * 100}%`, height: 1, background: LAC.midnight, opacity: 0.5 }} />
      <div style={{
        position: 'absolute',
        left: `calc(${sunPosX * 100}% - 40px)`,
        top: `calc(${sunPosY * 100}% - 80px)`,
        width: 80, height: 80, borderRadius: '50%',
        background: when === 'pm' ? LAC.teal : when === 'noon' ? LAC.midnight : LAC.amber,
        mixBlendMode: 'multiply',
      }} />
      <Mono style={{ position: 'absolute', bottom: 14, left: 18 }}>{caption}</Mono>
      <div style={{ position: 'absolute', top: 14, right: 18, display: 'flex', alignItems: 'center', gap: 8 }}>
        <HorizonGlyph size={14} time={when} />
        <Mono>{time}</Mono>
      </div>
    </div>
  );
}

// ── EmailField — squared, ink-bordered, with inline submit ──────
function EmailField({ onSubmit, placeholder = 'you@hospital.org', cta = 'Subscribe', glyph = 'am' }) {
  const [v, setV] = React.useState('');
  const [hover, setHover] = React.useState(false);
  const valid = /.+@.+\..+/.test(v);
  const submit = (e) => { if (e) e.preventDefault(); if (valid) onSubmit && onSubmit(v); };
  return (
    <form onSubmit={submit} style={{
      display: 'flex', alignItems: 'stretch', maxWidth: 460, border: `1px solid ${LAC.midnight}`,
      background: LAC.paper,
    }}>
      <input
        type="email" value={v} onChange={(e) => setV(e.target.value)} placeholder={placeholder}
        style={{
          flex: 1, padding: '14px 16px', background: 'transparent', border: 0, outline: 'none',
          fontFamily: F.sans, fontSize: 15, color: LAC.midnight, minWidth: 0,
        }}
      />
      <button
        type="submit" disabled={!valid}
        onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
        style={{
          padding: '0 16px', border: 0, borderLeft: `1px solid ${LAC.midnight}`,
          background: !valid ? LAC.paper2 : (hover ? LAC.amberDeep : LAC.midnight),
          color: !valid ? LAC.dim : LAC.paper,
          fontFamily: F.mono, fontWeight: 500, fontSize: 11,
          letterSpacing: '0.14em', textTransform: 'uppercase',
          cursor: valid ? 'pointer' : 'not-allowed',
          display: 'inline-flex', alignItems: 'center', gap: 10,
          transition: 'background .15s, color .15s',
        }}
      >
        {cta}
        <HorizonGlyph size={14} time={glyph}
          stroke={!valid ? LAC.dim : LAC.paper}
          sun={!valid ? LAC.dim2 : LAC.amber} />
      </button>
    </form>
  );
}

// ── Wordmark (stacked) — uses the SVG asset ─────────────────────
function Wordmark({ height = 36, color = LAC.midnight }) {
  return (
    <div style={{
      display: 'inline-flex', alignItems: 'center', height,
      color, fontFamily: F.serif, fontWeight: 400, lineHeight: 0.86,
    }}>
      <span style={{ fontSize: height * 0.62, letterSpacing: '-0.02em' }}>
        Life<span style={{ fontStyle: 'italic', color: LAC.amberDeep }}>After</span>Call
      </span>
    </div>
  );
}

Object.assign(window, {
  LAC, F, accentFor,
  HorizonGlyph, Mono, Dept, Asterism, LACButton, Rule, FolioTop,
  PhotoSlot, EmailField, Wordmark,
});