/* ─────────────────────────────────────────────────────────────────
   Hoopoetech shared primitives:
   - Logo
   - Placeholder (striped, optional caution-tape header)
   - HeroSchematic (animated technical drawing)
   - Service glyphs (line-icon style, monospaced industrial)
   - Reveal-on-scroll hook
   ───────────────────────────────────────────────────────────────── */

function Logo() {
  return (
    <a href="#top" className="nav-logo" aria-label="Hoopoestech Advanced Materials">
      <img src="assets/hoopooes-logo.png" alt="Hoopoestech Advanced Materials" className="brand-logo" width="675" height="450" fetchpriority="high"/>
    </a>
  );
}

/* Striped placeholder for imagery the user will swap in later */
function Placeholder({ label, tape = false, style }) {
  return (
    <div className="placeholder" style={{ position: 'relative', ...style }}>
      {tape && (
        <div style={{
          position: 'absolute', top: 0, left: 0, right: 0, height: 16,
          background: 'repeating-linear-gradient(45deg, #FFE135 0 10px, #111 10px 20px)'
        }}/>
      )}
      <span>{label}</span>
    </div>
  );
}

/* Hook: add `.in` class when element enters viewport */
function useReveal() {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver(
      (entries) => entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('in'); }),
      { threshold: 0.12 }
    );
    io.observe(el);
    return () => io.disconnect();
  }, []);
  return ref;
}

/* Hero schematic — animated drafting-style drawing */
function HeroSchematic() {
  return (
    <svg className="hero-schematic" viewBox="0 0 520 520" fill="none" aria-hidden="true">
      <defs>
        <pattern id="hatch" patternUnits="userSpaceOnUse" width="6" height="6" patternTransform="rotate(45)">
          <line x1="0" y1="0" x2="0" y2="6" stroke="rgba(255,225,53,0.18)" strokeWidth="1"/>
        </pattern>
      </defs>

      {/* outer measurement frame */}
      <g stroke="rgba(255,255,255,0.18)" strokeWidth="1" strokeDasharray="3 4">
        <rect x="40" y="40" width="440" height="440"/>
      </g>

      {/* corner ticks */}
      {[[40,40,1,1],[480,40,-1,1],[40,480,1,-1],[480,480,-1,-1]].map(([x,y,sx,sy],i)=>(
        <g key={i} stroke="#FFE135" strokeWidth="1.5">
          <line x1={x} y1={y} x2={x + sx*16} y2={y}/>
          <line x1={x} y1={y} x2={x} y2={y + sy*16}/>
        </g>
      ))}

      {/* center isometric form — abstract part */}
      <g transform="translate(260 260)">
        <polygon points="-100,-50 0,-100 100,-50 100,50 0,100 -100,50"
                 fill="url(#hatch)" stroke="rgba(255,255,255,0.5)" strokeWidth="1.2"/>
        <polygon points="-100,-50 0,0 100,-50" fill="none" stroke="rgba(255,255,255,0.5)" strokeWidth="1.2"/>
        <polygon points="0,0 0,100 -100,50 -100,-50 0,0" fill="none" stroke="rgba(255,255,255,0.7)" strokeWidth="1.2"/>
        <line x1="-100" y1="-50" x2="100" y2="50" stroke="rgba(255,255,255,0.2)" strokeWidth="0.6"/>
        <line x1="100" y1="-50" x2="-100" y2="50" stroke="rgba(255,255,255,0.2)" strokeWidth="0.6"/>
      </g>

      {/* drawn-in CNC path */}
      <path
        d="M 60 380 L 160 380 L 200 320 L 280 320 L 320 380 L 460 380"
        stroke="#FFE135" strokeWidth="2" strokeDasharray="540" strokeDashoffset="0"
        style={{ animation: 'drawIn 3.4s ease-out forwards', '--total': '540' }}
      />

      {/* dimension lines */}
      <g stroke="rgba(255,255,255,0.3)" strokeWidth="0.8" fontFamily="JetBrains Mono" fontSize="10" fill="rgba(255,255,255,0.6)">
        <line x1="40" y1="20" x2="480" y2="20"/>
        <line x1="40" y1="14" x2="40" y2="26"/>
        <line x1="480" y1="14" x2="480" y2="26"/>
        <text x="260" y="14" textAnchor="middle" fill="rgba(255,255,255,0.6)">440.00 mm</text>

        <line x1="500" y1="40" x2="500" y2="480"/>
        <line x1="494" y1="40" x2="506" y2="40"/>
        <line x1="494" y1="480" x2="506" y2="480"/>
        <text x="500" y="260" textAnchor="middle" transform="rotate(90 500 260)" fill="rgba(255,255,255,0.6)">440.00 mm</text>
      </g>

      {/* labels */}
      <g fontFamily="JetBrains Mono" fontSize="9" fill="#FFE135" letterSpacing="1">
        <text x="50" y="58">DWG-01 · REV 04</text>
        <text x="50" y="72" fill="rgba(255,255,255,0.4)">SCALE 1:4</text>
      </g>
    </svg>
  );
}

/* ── Service glyphs ──────────────────────────────────────────────
   72x72 line drawings. Industrial / drafting style, monochrome.
   ───────────────────────────────────────────────────────────── */

const G = {
  stroke: 'currentColor',
  fill: 'none',
  strokeWidth: 1.4,
  strokeLinecap: 'round',
  strokeLinejoin: 'round',
};

function GlyphResearch() {
  return (
    <svg viewBox="0 0 72 72" {...G}>
      <circle cx="30" cy="30" r="16"/>
      <line x1="42" y1="42" x2="58" y2="58"/>
      <circle cx="30" cy="30" r="3" fill="#FFE135" stroke="none"/>
      <line x1="22" y1="30" x2="38" y2="30" strokeDasharray="2 2"/>
      <line x1="30" y1="22" x2="30" y2="38" strokeDasharray="2 2"/>
    </svg>
  );
}

function GlyphBox() {
  return (
    <svg viewBox="0 0 72 72" {...G}>
      <polygon points="36,8 60,20 60,52 36,64 12,52 12,20"/>
      <polyline points="12,20 36,32 60,20"/>
      <line x1="36" y1="32" x2="36" y2="64"/>
      <line x1="24" y1="14" x2="48" y2="26" stroke="#FFE135"/>
    </svg>
  );
}

function GlyphPacking() {
  return (
    <svg viewBox="0 0 72 72" {...G}>
      <rect x="10" y="22" width="22" height="22"/>
      <rect x="40" y="22" width="22" height="22"/>
      <rect x="25" y="44" width="22" height="22"/>
      <line x1="21" y1="22" x2="21" y2="44" stroke="#FFE135"/>
      <line x1="51" y1="22" x2="51" y2="44" stroke="#FFE135"/>
    </svg>
  );
}

function GlyphCNC() {
  return (
    <svg viewBox="0 0 72 72" {...G}>
      <rect x="8" y="44" width="56" height="14"/>
      <polygon points="30,20 42,20 50,32 22,32" fill="#FFE135" stroke="#FFE135"/>
      <line x1="36" y1="32" x2="36" y2="44"/>
      <line x1="14" y1="58" x2="14" y2="64"/>
      <line x1="58" y1="58" x2="58" y2="64"/>
      <path d="M 12 50 L 26 50 L 30 46 L 42 46 L 46 50 L 60 50" stroke="rgba(255,255,255,0.5)"/>
    </svg>
  );
}

function GlyphAcrylic() {
  return (
    <svg viewBox="0 0 72 72" {...G}>
      <rect x="14" y="14" width="44" height="44"/>
      <rect x="20" y="20" width="32" height="32" stroke="rgba(255,255,255,0.4)" strokeDasharray="3 2"/>
      <line x1="14" y1="14" x2="20" y2="20" stroke="#FFE135"/>
      <line x1="58" y1="14" x2="52" y2="20" stroke="#FFE135"/>
      <line x1="14" y1="58" x2="20" y2="52" stroke="#FFE135"/>
      <line x1="58" y1="58" x2="52" y2="52" stroke="#FFE135"/>
    </svg>
  );
}

function GlyphLaser() {
  return (
    <svg viewBox="0 0 72 72" {...G}>
      <rect x="14" y="44" width="44" height="14"/>
      <circle cx="36" cy="20" r="6"/>
      <line x1="36" y1="26" x2="36" y2="44" stroke="#FFE135" strokeWidth="2"/>
      <line x1="22" y1="51" x2="50" y2="51" stroke="rgba(255,255,255,0.4)" strokeDasharray="2 2"/>
      <circle cx="36" cy="51" r="2" fill="#FFE135" stroke="none"/>
    </svg>
  );
}

function GlyphMDF() {
  return (
    <svg viewBox="0 0 72 72" {...G}>
      <polygon points="10,24 62,24 62,32 10,32"/>
      <polygon points="10,32 62,32 58,36 14,36"/>
      <line x1="14" y1="36" x2="14" y2="56"/>
      <line x1="58" y1="36" x2="58" y2="56"/>
      <line x1="14" y1="56" x2="58" y2="56"/>
      <line x1="20" y1="28" x2="52" y2="28" stroke="#FFE135"/>
    </svg>
  );
}

function GlyphEPS() {
  return (
    <svg viewBox="0 0 72 72" {...G}>
      <circle cx="22" cy="26" r="6"/>
      <circle cx="40" cy="22" r="5"/>
      <circle cx="52" cy="32" r="7"/>
      <circle cx="28" cy="42" r="5"/>
      <circle cx="46" cy="48" r="6"/>
      <circle cx="22" cy="56" r="4" stroke="#FFE135"/>
      <circle cx="56" cy="54" r="4" stroke="#FFE135"/>
    </svg>
  );
}

function GlyphMetal() {
  return (
    <svg viewBox="0 0 72 72" {...G}>
      <polyline points="10,52 22,40 22,20 50,20 50,40 62,52"/>
      <line x1="10" y1="52" x2="62" y2="52"/>
      <line x1="22" y1="40" x2="50" y2="40" stroke="rgba(255,255,255,0.4)" strokeDasharray="2 2"/>
      <line x1="28" y1="20" x2="28" y2="40" stroke="#FFE135"/>
      <line x1="44" y1="20" x2="44" y2="40" stroke="#FFE135"/>
      <circle cx="36" cy="14" r="3" fill="#FFE135" stroke="#FFE135"/>
    </svg>
  );
}

function GlyphMetalLaser() {
  return (
    <svg viewBox="0 0 72 72" {...G}>
      {/* sheet of metal */}
      <rect x="10" y="46" width="52" height="10"/>
      <line x1="10" y1="50" x2="62" y2="50" stroke="rgba(255,255,255,0.4)" strokeDasharray="2 2"/>
      {/* laser head */}
      <rect x="30" y="14" width="12" height="10"/>
      {/* beam */}
      <line x1="36" y1="24" x2="36" y2="46" stroke="#FFE135" strokeWidth="2"/>
      {/* sparks */}
      <line x1="32" y1="44" x2="28" y2="40" stroke="#FFE135"/>
      <line x1="40" y1="44" x2="44" y2="40" stroke="#FFE135"/>
      <line x1="36" y1="44" x2="36" y2="38" stroke="#FFE135"/>
      <circle cx="36" cy="46" r="2" fill="#FFE135" stroke="none"/>
    </svg>
  );
}

function GlyphCNCMachine() {
  return (
    <svg viewBox="0 0 72 72" {...G}>
      {/* gantry top */}
      <line x1="10" y1="14" x2="62" y2="14"/>
      <line x1="14" y1="14" x2="14" y2="48"/>
      <line x1="58" y1="14" x2="58" y2="48"/>
      {/* spindle */}
      <rect x="30" y="18" width="12" height="16"/>
      <line x1="36" y1="34" x2="36" y2="44" stroke="#FFE135" strokeWidth="2"/>
      <circle cx="36" cy="46" r="2" fill="#FFE135" stroke="#FFE135"/>
      {/* bed + workpiece */}
      <rect x="10" y="48" width="52" height="10"/>
      <rect x="24" y="44" width="24" height="4" fill="rgba(255,255,255,0.1)"/>
      {/* rotation indicator */}
      <path d="M 30 26 A 6 6 0 0 1 42 26" stroke="#FFE135" fill="none"/>
    </svg>
  );
}

function GlyphCarbon() {
  return (
    <svg viewBox="0 0 72 72" {...G}>
      {/* carbon-fibre weave: alternating diagonal strips */}
      <defs>
        <clipPath id="cf-clip">
          <rect x="12" y="12" width="48" height="48"/>
        </clipPath>
      </defs>
      <rect x="12" y="12" width="48" height="48"/>
      <g clipPath="url(#cf-clip)" strokeWidth="1.2">
        {/* warp */}
        <line x1="12" y1="20" x2="60" y2="20"/>
        <line x1="12" y1="28" x2="60" y2="28"/>
        <line x1="12" y1="36" x2="60" y2="36"/>
        <line x1="12" y1="44" x2="60" y2="44"/>
        <line x1="12" y1="52" x2="60" y2="52"/>
        {/* weft */}
        <line x1="20" y1="12" x2="20" y2="60"/>
        <line x1="28" y1="12" x2="28" y2="60"/>
        <line x1="36" y1="12" x2="36" y2="60" stroke="#FFE135"/>
        <line x1="44" y1="12" x2="44" y2="60"/>
        <line x1="52" y1="12" x2="52" y2="60"/>
        {/* highlight diagonal */}
        <line x1="12" y1="12" x2="60" y2="60" stroke="#FFE135" strokeWidth="1.6"/>
      </g>
    </svg>
  );
}

/* ── Service-card placeholder image variants for case studies ── */
function PlaceImgA() {
  return (
    <svg width="100%" height="100%" viewBox="0 0 600 300" preserveAspectRatio="xMidYMid slice" style={{display:'block'}}>
      <defs>
        <pattern id="pa-grid" patternUnits="userSpaceOnUse" width="40" height="40">
          <path d="M 40 0 L 0 0 0 40" stroke="rgba(255,255,255,0.06)" fill="none"/>
        </pattern>
        <pattern id="pa-stripe" patternUnits="userSpaceOnUse" width="20" height="20" patternTransform="rotate(135)">
          <line x1="0" y1="0" x2="0" y2="20" stroke="rgba(255,255,255,0.04)" strokeWidth="10"/>
        </pattern>
      </defs>
      <rect width="600" height="300" fill="#1a1a20"/>
      <rect width="600" height="300" fill="url(#pa-stripe)"/>
      <rect width="600" height="300" fill="url(#pa-grid)"/>
      <g stroke="rgba(255,255,255,0.18)" fill="none" strokeWidth="1" strokeDasharray="3 3">
        <rect x="120" y="80" width="360" height="140"/>
      </g>
      <g stroke="#FFE135" strokeWidth="1.6" fill="none">
        <line x1="120" y1="60" x2="120" y2="76"/>
        <line x1="480" y1="60" x2="480" y2="76"/>
        <line x1="120" y1="68" x2="480" y2="68"/>
      </g>
      <text x="300" y="160" textAnchor="middle" fontFamily="JetBrains Mono" fontSize="12" fill="rgba(255,255,255,0.4)" letterSpacing="2">
        AEROSPACE PROTOTYPE · 800 × 400 × 320 mm
      </text>
      <text x="300" y="184" textAnchor="middle" fontFamily="JetBrains Mono" fontSize="10" fill="rgba(255,225,53,0.6)" letterSpacing="2">
        [ PLACEHOLDER · DROP IMAGE HERE ]
      </text>
    </svg>
  );
}

function PlaceImgB() {
  return (
    <svg width="100%" height="100%" viewBox="0 0 600 300" preserveAspectRatio="xMidYMid slice" style={{display:'block'}}>
      <rect width="600" height="300" fill="#16161c"/>
      <g stroke="rgba(255,255,255,0.12)" fill="none">
        {Array.from({length:10}).map((_,i)=>(
          <line key={i} x1={i*60} y1="0" x2={i*60} y2="300"/>
        ))}
      </g>
      <g transform="translate(300 150)">
        <polygon points="-110,-40 0,-90 110,-40 110,40 0,90 -110,40" fill="rgba(255,255,255,0.04)" stroke="rgba(255,255,255,0.3)"/>
        <polygon points="-110,-40 0,10 110,-40" fill="none" stroke="rgba(255,255,255,0.3)"/>
        <polygon points="0,10 0,90" stroke="#FFE135" fill="none"/>
      </g>
      <text x="20" y="280" fontFamily="JetBrains Mono" fontSize="11" fill="rgba(255,225,53,0.7)" letterSpacing="2">PART · ALU-6061 / V-GROOVE</text>
    </svg>
  );
}

function PlaceImgC() {
  return (
    <svg width="100%" height="100%" viewBox="0 0 600 300" preserveAspectRatio="xMidYMid slice" style={{display:'block'}}>
      <rect width="600" height="300" fill="#101015"/>
      <g>
        {Array.from({length: 24}).map((_,i)=>{
          const x = (i % 8) * 75 + 40;
          const y = Math.floor(i/8) * 90 + 40;
          return <rect key={i} x={x} y={y} width="50" height="60" fill="none" stroke="rgba(255,255,255,0.18)"/>;
        })}
      </g>
      <rect x="40" y="40" width="50" height="60" fill="#FFE135" opacity="0.7"/>
      <text x="20" y="280" fontFamily="JetBrains Mono" fontSize="11" fill="rgba(255,225,53,0.7)" letterSpacing="2">PACKAGING · DIE-LINE STUDY</text>
    </svg>
  );
}

function PlaceImgD() {
  return (
    <svg width="100%" height="100%" viewBox="0 0 600 300" preserveAspectRatio="xMidYMid slice" style={{display:'block'}}>
      <rect width="600" height="300" fill="#1c1c24"/>
      <g stroke="rgba(255,255,255,0.2)" fill="none" strokeWidth="1">
        <circle cx="180" cy="150" r="100"/>
        <circle cx="180" cy="150" r="70" strokeDasharray="3 3"/>
        <circle cx="180" cy="150" r="40"/>
        <circle cx="180" cy="150" r="4" fill="#FFE135" stroke="#FFE135"/>
      </g>
      <g stroke="rgba(255,255,255,0.4)" fontFamily="JetBrains Mono" fontSize="9" fill="rgba(255,255,255,0.5)">
        <line x1="320" y1="80" x2="540" y2="80"/>
        <line x1="320" y1="130" x2="540" y2="130"/>
        <line x1="320" y1="180" x2="500" y2="180"/>
        <text x="320" y="74">CYCLE · 04:12</text>
        <text x="320" y="124" fill="#FFE135">TOL · ±0.05 mm</text>
        <text x="320" y="174">QTY · 240 UNITS</text>
      </g>
    </svg>
  );
}

const CASE_IMAGES = [PlaceImgA, PlaceImgB, PlaceImgC, PlaceImgD, PlaceImgA, PlaceImgB, PlaceImgC, PlaceImgD];

const SERVICE_GLYPHS = {
  research: GlyphResearch,
  box: GlyphBox,
  packing: GlyphPacking,
  cnc: GlyphCNC,
  acrylic: GlyphAcrylic,
  laser: GlyphLaser,
  mdf: GlyphMDF,
  eps: GlyphEPS,
  metal: GlyphMetal,
  metallaser: GlyphMetalLaser,
  cncmachine: GlyphCNCMachine,
  carbon: GlyphCarbon,
};

Object.assign(window, {
  Logo, Placeholder, useReveal,
  HeroSchematic, SERVICE_GLYPHS, CASE_IMAGES,
});
