// ee-kit.jsx — Expansive EDGE motion kit: constants, helpers, scene hook,
// monoline Icon set, Figure, persistent chrome, and the SceneFrame caption block.
// Loaded as text/babel after React + animations.jsx.

const EE = {
  teal: '#04454c',
  mint: '#65ecac',
  ink: '#3b3b3b',
  muted: '#aaaaaa',
  surface: '#ffffff',
  teal05: '#f2f6f7',
  teal10: '#e6edee',
  mint05: '#f5fdf8',
  mint10: '#e8fcf0',
  mint20: '#d1fae1',
  tealDeep: '#022b30',
  tealDarker: '#013338',
  border: '#e6e9eb',
  display: "'Poppins', sans-serif",
  body: "'Montserrat', sans-serif",
};

const EASE = Easing.easeOutCubic;

// eased 0..1 ramp for [start, start+dur] given a local clock t
function ramp(t, start, dur, ease = EASE) {
  if (dur <= 0) return t >= start ? 1 : 0;
  return ease(clamp((t - start) / dur, 0, 1));
}

// appear helper -> {opacity, ty} sliding up 14px
function appear(t, start, dur = 0.5, rise = 14) {
  const p = ramp(t, start, dur);
  return { opacity: p, transform: `translateY(${(1 - p) * rise}px)` };
}

// Scene wrapper opacity: fade in over first `fin`s, out over last `fout`s.
function useScene(fin = 0.45, fout = 0.45) {
  const { localTime, duration } = useSprite();
  const t = localTime;
  const inP = clamp(t / fin, 0, 1);
  const outP = clamp((duration - t) / fout, 0, 1);
  const sceneOpacity = Easing.easeOutCubic(inP) * Easing.easeInOutCubic(outP);
  return { t, d: duration, sceneOpacity };
}

// ── Monoline icon set (Lucide-style, 2px stroke, brand-teal) ────────────────
const ICON_PATHS = {
  check: <path d="M5 13l4 4L19 7" />,
  camera: (
    <g>
      <path d="M3 8.5a2 2 0 0 1 2-2h2l1.2-1.8a1 1 0 0 1 .83-.45h5.94a1 1 0 0 1 .83.45L17 6.5h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
      <circle cx="12" cy="13" r="3.2" />
    </g>
  ),
  truck: (
    <g>
      <path d="M2 6h11v9H2z" />
      <path d="M13 9h4l3 3v3h-7z" />
      <circle cx="7" cy="17.5" r="1.8" />
      <circle cx="17" cy="17.5" r="1.8" />
    </g>
  ),
  shield: (
    <g>
      <path d="M12 3l7 2.5v5.5c0 4.5-3 7.5-7 9-4-1.5-7-4.5-7-9V5.5z" />
      <path d="M9 12l2 2 4-4.5" />
    </g>
  ),
  layers: (
    <g>
      <path d="M12 4l8 4-8 4-8-4z" />
      <path d="M4 12l8 4 8-4" />
      <path d="M4 16l8 4 8-4" />
    </g>
  ),
  users: (
    <g>
      <circle cx="9" cy="8" r="3" />
      <path d="M3.5 19a5.5 5.5 0 0 1 11 0" />
      <path d="M16 5.5a3 3 0 0 1 0 5.6" />
      <path d="M17 13.5a5.5 5.5 0 0 1 3.5 5.5" />
    </g>
  ),
  send: <path d="M21 4L3 11l7 2.5L13 20l3-9z" />,
  pin: (
    <g>
      <path d="M12 21c4-4.5 7-7.8 7-11a7 7 0 1 0-14 0c0 3.2 3 6.5 7 11z" />
      <circle cx="12" cy="10" r="2.5" />
    </g>
  ),
  home: (
    <g>
      <path d="M4 11l8-6 8 6" />
      <path d="M6 10v9h12v-9" />
    </g>
  ),
  clipboard: (
    <g>
      <path d="M8 5H6a1 1 0 0 0-1 1v13a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1h-2" />
      <rect x="9" y="3.5" width="6" height="3.2" rx="1" />
      <path d="M8.5 11h7M8.5 14.5h5" />
    </g>
  ),
  clock: (
    <g>
      <circle cx="12" cy="12" r="8.5" />
      <path d="M12 7.5V12l3 2" />
    </g>
  ),
  message: (
    <path d="M4 5h16a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H9l-4 3v-3H4a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1z" />
  ),
};

function Icon({ name, size = 24, color = EE.teal, stroke = 2, style }) {
  return (
    <svg
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      stroke={color}
      strokeWidth={stroke}
      strokeLinecap="round"
      strokeLinejoin="round"
      style={style}
    >
      {ICON_PATHS[name]}
    </svg>
  );
}

// Mint-tinted rounded-square icon container (brand spec)
function IconChip({ name, size = 64, icon = 30, bg = EE.mint10, color = EE.teal, radius = 18, stroke = 2 }) {
  return (
    <div style={{
      width: size, height: size, borderRadius: radius,
      background: bg, display: 'flex', alignItems: 'center', justifyContent: 'center',
      flexShrink: 0,
    }}>
      <Icon name={name} size={icon} color={color} stroke={stroke} />
    </div>
  );
}

// ── Monoline human figure ───────────────────────────────────────────────────
function Figure({ x = 0, y = 0, scale = 1, color = EE.teal, stroke = 5, opacity = 1, mint = false }) {
  const c = mint ? EE.mint : color;
  return (
    <svg width={120 * scale} height={200 * scale} viewBox="0 0 120 200"
      style={{ position: 'absolute', left: x, top: y, opacity, overflow: 'visible' }}
      fill="none" stroke={c} strokeWidth={stroke} strokeLinecap="round" strokeLinejoin="round">
      <circle cx="60" cy="34" r="22" />
      <path d="M60 56v74" />
      <path d="M60 72l-34 26M60 72l34 26" />
      <path d="M60 130l-26 56M60 130l26 56" />
    </svg>
  );
}

// ── Persistent top chrome for content scenes ────────────────────────────────
function Chrome({ time, from, to }) {
  const vis = time >= from - 0.3 && time <= to + 0.3;
  const opacity = clamp(Math.min((time - (from - 0.3)) / 0.4, ((to + 0.3) - time) / 0.4), 0, 1);
  if (!vis) return null;
  const progress = clamp((time - from) / (to - from), 0, 1);
  return (
    <div style={{ position: 'absolute', inset: 0, opacity, pointerEvents: 'none' }}>
      {/* top-left brand tag */}
      <div style={{ position: 'absolute', left: 72, top: 56, display: 'flex', alignItems: 'center', gap: 16 }}>
        <img src="assets/icon-two-color.png" alt="" style={{ width: 42, height: 42, objectFit: 'contain' }} />
        <div style={{ lineHeight: 1.25 }}>
          <div style={{ fontFamily: EE.display, fontWeight: 700, fontSize: 19, color: EE.teal, letterSpacing: '-0.01em' }}>Re-Roof Day 1</div>
          <div style={{ fontFamily: EE.body, fontWeight: 500, fontSize: 14, color: EE.muted }}>Site setup and tear-off prep</div>
        </div>
      </div>
      {/* top-right goal */}
      <div style={{ position: 'absolute', right: 72, top: 58, display: 'flex', alignItems: 'center', gap: 10 }}>
        <Icon name="clock" size={20} color={EE.teal} stroke={2} />
        <div style={{ fontFamily: EE.body, fontWeight: 600, fontSize: 14, color: EE.teal, letterSpacing: '0.12em' }}>TEAR-OFF BY 8:30 AM</div>
      </div>
      {/* progress hairline */}
      <div style={{ position: 'absolute', left: 72, right: 72, top: 116, height: 2, background: EE.border, borderRadius: 2 }}>
        <div style={{ height: '100%', width: `${progress * 100}%`, background: EE.mint, borderRadius: 2 }} />
      </div>
    </div>
  );
}

// ── Scene caption block (verb-first headline, bottom-left) ───────────────────
function Caption({ t, step, title, sub, accent = EE.mint }) {
  const a0 = appear(t, 0.25, 0.55);
  const a1 = appear(t, 0.4, 0.55);
  const a2 = appear(t, 0.58, 0.55);
  return (
    <div style={{ position: 'absolute', left: 72, bottom: 84, maxWidth: 1180 }}>
      <div style={{ ...a0, display: 'flex', alignItems: 'center', gap: 14, marginBottom: 18 }}>
        <span style={{ width: 30, height: 3, background: accent, borderRadius: 2 }} />
        <span style={{ fontFamily: EE.body, fontWeight: 600, fontSize: 18, letterSpacing: '0.12em', color: EE.teal }}>{step}</span>
      </div>
      <h1 style={{ ...a1, margin: 0, fontFamily: EE.display, fontWeight: 700, fontSize: 78, lineHeight: 1.02, letterSpacing: '-0.025em', color: EE.teal }}>{title}</h1>
      <p style={{ ...a2, margin: '20px 0 0', fontFamily: EE.body, fontWeight: 400, fontSize: 29, lineHeight: 1.5, color: EE.ink, maxWidth: 980 }}>{sub}</p>
    </div>
  );
}

Object.assign(window, { EE, EASE, ramp, appear, useScene, Icon, IconChip, Figure, Chrome, Caption });