// lib/brand.jsx
// Shared brand-level components: slashes motif, brand vertical line,
// the ALDENE wordmark (built in SVG so we can animate it),
// service chips, app window chrome, etc.

// ── Color tokens (mirrored from colors_and_type.css for JS use) ────────────
const ALD = {
  navy:     '#1E2442',
  navy900:  '#161B33',
  navy700:  '#2B3155',
  navy500:  '#3D4470',
  navy300:  '#6B729B',
  yellow:   '#EFBA25',
  yellow6:  '#C79410',
  yellow2:  '#F9E4A5',
  white:    '#FFFFFF',
  off:      '#F6F5F0',
  paper:    '#EFEDE5',
  svc: {
    info:   '#2E8BE6',
    print:  '#2EB85C',
    tel:    '#B43C7E',
    mob:    '#C4642A',
    ged:    '#D9394E',
    cyber:  '#8E3DC4',
    ia:     '#1FB8B0',
  },
};

const FONT_DISPLAY = '"Montserrat", system-ui, sans-serif';
const FONT_BODY    = '"Poppins", system-ui, sans-serif';
const FONT_MONO    = '"JetBrains Mono", ui-monospace, monospace';

// ── Slash motif ───────────────────────────────────────────────────────────
// Cluster of tilted parallelograms in a corner (top-right or bottom-left).
// Animates in with a stagger.
function SlashCluster({
  x = 0, y = 0,
  origin = 'tr',          // 'tr' top-right, 'bl' bottom-left
  scale = 1,
  rotate = -24,
  appearAt = 0,           // global time
  stagger = 0.12,
  duration = 0.6,
  out = null,             // if set, fade out at this global time
}) {
  const t = useTime();
  const bars = [
    { w: 60, h: 220, color: ALD.yellow2,  offsetY: 60 },
    { w: 60, h: 340, color: ALD.yellow,   offsetY: 0  },
    { w: 60, h: 280, color: 'rgba(255,255,255,.14)', offsetY: 30 },
    { w: 60, h: 360, color: ALD.navy500,  offsetY: -10 },
  ];

  return (
    <div style={{
      position: 'absolute',
      left: x, top: y,
      transform: `rotate(${rotate}deg) scale(${scale})`,
      transformOrigin: origin === 'tr' ? 'top right' : 'bottom left',
      display: 'flex',
      gap: 24,
      pointerEvents: 'none',
    }}>
      {bars.map((b, i) => {
        const start = appearAt + i * stagger;
        const localT = Math.max(0, Math.min(1, (t - start) / duration));
        const e = Easing.easeOutCubic(localT);
        let outOp = 1;
        if (out != null && t > out) {
          outOp = Math.max(0, 1 - (t - out) / 0.6);
        }
        return (
          <div key={i} style={{
            width: b.w,
            height: b.h,
            background: b.color,
            borderRadius: 6,
            marginTop: b.offsetY,
            transform: `translateY(${(1 - e) * 80}px)`,
            opacity: e * outOp,
            willChange: 'transform, opacity',
          }} />
        );
      })}
    </div>
  );
}

// ── Vertical brand line (the thin navy-500 guide at ~85% right) ─────────
function BrandLine({ right = '8%', color = ALD.navy500, opacity = 1 }) {
  return (
    <div style={{
      position: 'absolute',
      top: 0, bottom: 0,
      right,
      width: 1,
      background: color,
      opacity,
      pointerEvents: 'none',
    }}/>
  );
}

// ── ALDENE wordmark — uses the real brand SVG, animates a left-to-right
//    wipe reveal and a separate yellow dot pop. Width:height ratio 7.26:1
//    (viewBox 1198.54 × 165.11). The brand SVG has the dot already at
//    cx=1168.48 cy=135.05 r=30.06 in viewBox coords (right-bottom area).
// ───────────────────────────────────────────────────────────────────────
function AldeneWordmark({
  height = 100,
  drawProgress = 1,   // 0..1 — wipe reveal of the wordmark
  dotPop = 1,         // 0..1 — yellow dot scale-in
  dotColor = ALD.yellow,
}) {
  const ratio = 1198.54 / 165.11;   // 7.26
  const width = height * ratio;
  // Yellow dot positioning (overlay on top of the white SVG dot).
  // Dot center: 1168.48 / 1198.54 = 0.9749  ;  135.05 / 165.11 = 0.8179
  // Dot radius: 30.06 / 165.11 = 0.1821 of height
  const dotLeftPct = 0.9749 * 100;
  const dotTopPct  = 0.8179 * 100;
  const dotR = 0.1821 * height;

  // Wipe reveal: clip-path inset from right
  const clipRight = (1 - Math.max(0, Math.min(1, drawProgress))) * 100;

  return (
    <div style={{
      position: 'relative',
      width, height,
      display: 'inline-block',
    }}>
      {/* The actual wordmark SVG, wiped in left-to-right */}
      <img
        src="brand/logo-aldene-paysage-mono-white.svg"
        alt="ALDENE"
        style={{
          display: 'block',
          width: '100%', height: '100%',
          clipPath: `inset(0 ${clipRight}% 0 0)`,
          WebkitClipPath: `inset(0 ${clipRight}% 0 0)`,
        }}
      />
      {/* Yellow dot — overlays the white dot in the SVG */}
      <div style={{
        position: 'absolute',
        left: `${dotLeftPct}%`,
        top:  `${dotTopPct}%`,
        width:  dotR * 2,
        height: dotR * 2,
        marginLeft: -dotR,
        marginTop:  -dotR,
        borderRadius: '50%',
        background: dotColor,
        transform: `scale(${dotPop})`,
        opacity: dotPop,
        transformOrigin: 'center',
        willChange: 'transform, opacity',
      }}/>
    </div>
  );
}

// ── ServiceChip — coloured dot + label ────────────────────────────────
function ServiceChip({ color, label, size = 18, style = {} }) {
  return (
    <div style={{
      display: 'inline-flex', alignItems: 'center', gap: 12,
      fontFamily: FONT_BODY, fontWeight: 500, fontSize: size,
      color: ALD.white, letterSpacing: '.01em',
      ...style,
    }}>
      <span style={{
        width: size * 0.55, height: size * 0.55,
        borderRadius: 999, background: color, display: 'inline-block',
      }}/>
      {label}
    </div>
  );
}

// ── AppFrame — macOS-style window chrome with title bar ──────────────
function AppFrame({
  title = 'Aldene App',
  width, height,
  x = 0, y = 0,
  children,
  accent = ALD.svc.ia,
  showTraffic = true,
  background = ALD.off,
  scale = 1,
  borderColor = 'rgba(0,0,0,0.10)',
}) {
  const TITLEBAR = 38;
  return (
    <div style={{
      position: 'absolute',
      left: x, top: y,
      width, height,
      transform: `scale(${scale})`,
      transformOrigin: 'center',
      borderRadius: 14,
      overflow: 'hidden',
      background,
      boxShadow: '0 30px 80px rgba(0,0,0,0.45), 0 0 0 1px ' + borderColor,
      display: 'flex', flexDirection: 'column',
      willChange: 'transform, opacity',
    }}>
      {/* Title bar */}
      <div style={{
        height: TITLEBAR,
        background: '#F0EDE5',
        borderBottom: '1px solid rgba(0,0,0,0.08)',
        display: 'flex', alignItems: 'center',
        padding: '0 16px',
        gap: 14,
        flexShrink: 0,
      }}>
        {showTraffic && (
          <div style={{ display: 'flex', gap: 8 }}>
            <span style={{ width: 12, height: 12, borderRadius: 6, background: '#FF5F57' }}/>
            <span style={{ width: 12, height: 12, borderRadius: 6, background: '#FEBC2E' }}/>
            <span style={{ width: 12, height: 12, borderRadius: 6, background: '#28C840' }}/>
          </div>
        )}
        <div style={{
          fontFamily: FONT_BODY, fontWeight: 500, fontSize: 13,
          color: '#4A5175', letterSpacing: '.01em',
          flex: 1, textAlign: 'center',
          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
        }}>
          <span style={{
            width: 8, height: 8, borderRadius: 4, background: accent, display: 'inline-block',
          }}/>
          {title}
        </div>
        <div style={{ width: 60 }}/>
      </div>
      <div style={{ flex: 1, overflow: 'hidden', position: 'relative' }}>
        {children}
      </div>
    </div>
  );
}

// ── Eyebrow label — spaced caps in yellow ──────────────────────────────
function Eyebrow({ children, color = ALD.yellow, size = 14, style = {} }) {
  return (
    <div style={{
      fontFamily: FONT_DISPLAY,
      fontWeight: 700,
      fontSize: size,
      letterSpacing: '.24em',
      textTransform: 'uppercase',
      color,
      ...style,
    }}>
      {children}
    </div>
  );
}

// ── Display heading — big uppercase navy/white ─────────────────────────
function Display({ children, size = 88, color = ALD.white, style = {}, dot = false, dotColor = ALD.yellow }) {
  return (
    <div style={{
      fontFamily: FONT_DISPLAY,
      fontWeight: 800,
      fontSize: size,
      lineHeight: 1.02,
      letterSpacing: '-0.01em',
      textTransform: 'uppercase',
      color,
      ...style,
    }}>
      {children}
      {dot && <span style={{ color: dotColor }}>.</span>}
    </div>
  );
}

// ── Cursor / typed text — types characters one at a time ───────────────
function TypedText({ text, start = 0, charsPerSec = 28, cursor = true, style = {} }) {
  const t = useTime();
  const elapsed = Math.max(0, t - start);
  const n = Math.min(text.length, Math.floor(elapsed * charsPerSec));
  const showCursor = cursor && (n < text.length || (Math.floor(t * 2) % 2 === 0));
  return (
    <span style={style}>
      {text.slice(0, n)}
      {showCursor && <span style={{ opacity: 0.7 }}>▍</span>}
    </span>
  );
}

// ── PageBackground — flat navy with optional brandline + slash clusters ──
function PageBackground({ children, background = ALD.navy, brandLine = true, brandLineRight = '8%' }) {
  return (
    <div style={{
      position: 'absolute', inset: 0,
      background,
      overflow: 'hidden',
    }}>
      {brandLine && <BrandLine right={brandLineRight}/>}
      {children}
    </div>
  );
}

Object.assign(window, {
  ALD, FONT_DISPLAY, FONT_BODY, FONT_MONO,
  SlashCluster, BrandLine, AldeneWordmark,
  ServiceChip, AppFrame, Eyebrow, Display,
  TypedText, PageBackground,
});