/* iPixelP — shared slide primitives & helpers */

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

// ---------- Brand strip / chrome ----------
function ChromeTab({ index, total, label, light }) {
  const num = String(index).padStart(2, '0');
  const tot = String(total).padStart(2, '0');
  return (
    <div className="chrome-tab">
      <span className="dot"></span>
      <span>{label}</span>
      <span style={{ opacity: 0.4 }}>·</span>
      <span className="num">{num}</span>
      <span style={{ opacity: 0.4 }}>/ {tot}</span>
    </div>
  );
}

function ChromeFoot({ left, right, light, markSrc, markStyle }) {
  const defaultMark = light ? "assets/mark.png" : "assets/mark-light.png";
  return (
    <div className="chrome-foot">
      <div style={{ display: 'flex', alignItems: 'center', gap: 18 }}>
        <img
          src={markSrc || defaultMark}
          alt="iPixelP"
          className={markSrc ? "" : "mark-mini"}
          style={markStyle}
        />
        <span>{left}</span>
      </div>
      <div>{right}</div>
    </div>
  );
}

// ---------- Striped placeholder w/ optional play overlay ----------
function Placeholder({ label, ratio = "16:9", variant = "dark", play = false, onClick, style, children, corner }) {
  return (
    <div
      className={`placeholder${variant === 'warm' ? ' warm' : ''}${variant === 'red' ? ' red' : ''}`}
      style={style}
    >
      {corner && <div className="ph-corner">{corner}</div>}
      {play && (
        <div className="play-overlay" onClick={onClick}>
          <div className="play-btn" />
        </div>
      )}
      {children}
      {label && <div className="ph-label">{label}</div>}
    </div>
  );
}

// ---------- Eyebrow ----------
function Eyebrow({ children, className = '', noRule = false, style }) {
  return (
    <div className={`eyebrow ${noRule ? 'no-rule' : ''} ${className}`} style={style}>
      {children}
    </div>
  );
}

// ---------- Slide wrapper ----------
function Slide({ index, total, label, light, children, footL, footR, dataLabel, footMarkSrc, footMarkStyle }) {
  return (
    <section className={`slide${light ? ' light' : ''}`} data-screen-label={dataLabel || `${String(index).padStart(2,'0')} ${label||''}`.trim()}>
      <ChromeTab index={index} total={total} label={label} light={light} />
      {children}
      <ChromeFoot light={light} left={footL || 'IPIXELP · PORTFOLIO 2026'} right={footR || 'IPIXELP.COM'} markSrc={footMarkSrc} markStyle={footMarkStyle} />
    </section>
  );
}

// ---------- Tiny icons (geometric, not skeuomorphic) ----------
function ServiceIcon({ kind }) {
  const stroke = "#E31E24";
  const sw = 1.6;
  const props = { width: 36, height: 36, viewBox: "0 0 36 36", fill: "none", stroke, strokeWidth: sw };
  switch (kind) {
    case 'video':
      return (<svg {...props}><rect x="3" y="9" width="22" height="18"/><path d="M25 14 L33 9 V27 L25 22 Z"/></svg>);
    case 'strategy':
      return (<svg {...props}><circle cx="18" cy="18" r="14"/><circle cx="18" cy="18" r="7"/><circle cx="18" cy="18" r="1.6" fill={stroke}/></svg>);
    case 'offline':
      return (<svg {...props}><rect x="4" y="6" width="28" height="20"/><path d="M4 30 L18 22 L32 30"/></svg>);
    case 'press':
      return (<svg {...props}><rect x="5" y="7" width="22" height="22"/><path d="M27 11 H32 V25 a4 4 0 0 1 -4 4 H27"/><path d="M9 12 H23 M9 17 H23 M9 22 H17"/></svg>);
    case 'event':
      return (<svg {...props}><path d="M6 30 L18 6 L30 30 Z"/><path d="M11 22 H25"/></svg>);
    case 'web':
      return (<svg {...props}><circle cx="18" cy="18" r="14"/><path d="M4 18 H32 M18 4 C 22 12 22 24 18 32 M18 4 C 14 12 14 24 18 32"/></svg>);
    default: return null;
  }
}

// ---------- Country map (10 countries, dot positions on simple atlas) ----------
function MapMENA({ countries }) {
  // Coordinates approximated for an SVG world atlas viewBox
  const W = 900, H = 540;
  // [name, x, y]
  const pts = [
    ["Tunisie",     345, 195, true],
    ["Algérie",     280, 230],
    ["Maroc",       205, 215],
    ["Libye",       400, 245],
    ["Égypte",      485, 260],
    ["Mauritanie",  175, 305],
    ["Palestine",   555, 245],
    ["Koweït",      640, 280],
    ["Qatar",       675, 310],
    ["Turquie",     560, 145],
  ];
  return (
    <svg viewBox={`0 0 ${W} ${H}`} style={{ width: '100%', height: '100%' }}>
      {/* Faint base graticule */}
      <defs>
        <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
          <path d="M40 0 H0 V40" fill="none" stroke="rgba(255,255,255,0.04)" strokeWidth="1"/>
        </pattern>
      </defs>
      <rect width={W} height={H} fill="url(#grid)"/>
      {/* Schematic land masses (very abstract, NOT a real map) */}
      <g fill="rgba(255,255,255,0.05)" stroke="rgba(255,255,255,0.15)" strokeWidth="1">
        {/* North Africa wedge */}
        <path d="M120 180 L520 170 L560 220 L540 320 L420 360 L240 350 L150 300 Z"/>
        {/* Arabia */}
        <path d="M540 230 L720 240 L740 360 L640 410 L560 360 Z"/>
        {/* Anatolia */}
        <path d="M460 110 L640 100 L660 160 L500 175 Z"/>
      </g>
      {pts.map(([name, x, y, hq], i) => (
        <g key={name}>
          <circle cx={x} cy={y} r={hq ? 12 : 7} fill={hq ? "#E31E24" : "rgba(227,30,36,0.55)"} />
          {hq && <circle cx={x} cy={y} r={22} fill="none" stroke="#E31E24" strokeOpacity="0.5" strokeWidth="1">
            <animate attributeName="r" from="12" to="32" dur="2.4s" repeatCount="indefinite"/>
            <animate attributeName="stroke-opacity" from="0.6" to="0" dur="2.4s" repeatCount="indefinite"/>
          </circle>}
          <line x1={x} y1={y} x2={x + (x > 450 ? 18 : -18)} y2={y - 18} stroke="rgba(255,255,255,0.25)" strokeWidth="1"/>
          <text
            x={x + (x > 450 ? 22 : -22)} y={y - 22}
            textAnchor={x > 450 ? "start" : "end"}
            fill="rgba(255,255,255,0.85)"
            fontFamily="'JetBrains Mono', monospace"
            fontSize="13"
            letterSpacing="2"
            style={{ textTransform: 'uppercase' }}
          >{name.toUpperCase()}</text>
        </g>
      ))}
    </svg>
  );
}

// Export to window so other Babel scripts can use these
Object.assign(window, {
  Slide, ChromeTab, ChromeFoot, Placeholder, Eyebrow, ServiceIcon, MapMENA,
});