// OOBOX brand assets — logo, expansion shape, digital lines, icons
const { useEffect, useRef, useState } = React;

// ============== LOGO ==============
// Real logo from brand assets — the official OOBOX wordmark
function OoboxLogo({ size = 1, withTagline = false }) {
  // Logo image is 1800x800; aspect ratio 2.25
  // For "withTagline" we show the full image (which already includes the tagline)
  // For nav/compact use, we crop to just the wordmark by clipping and shifting
  const baseHeight = withTagline ? 56 : 38;
  const height = baseHeight * size;
  const width = height * 2.25;

  return (
    <img
      src="assets/logo-oobox-cropped.png"
      alt="OOBOX — Fora da caixa. Dentro da solução."
      style={{
        height: height + 'px',
        width: 'auto',
        display: 'block',
        objectFit: 'contain',
        // Blend the dark background of the PNG into the dark site background
        mixBlendMode: 'screen',
      }}
    />
  );
}

// ============== EXPANSION SHAPE (trapezoid bracket) ==============
function ExpansionShape({ width = 600, height = 400, opacity = 1, mirror = false, animated = false }) {
  // The brand shape is a 3D-perspective trapezoid bracket — like a frame thrown forward
  return (
    <svg width={width} height={height} viewBox="0 0 600 400" style={{ opacity, transform: mirror ? 'scaleX(-1)' : 'none' }}>
      <defs>
        <linearGradient id={`shapeGrad-${mirror ? 'm' : 'n'}`} x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" stopColor="#7B3FE4" />
          <stop offset="100%" stopColor="#904DFF" />
        </linearGradient>
      </defs>
      {/* Outer trapezoid bracket — front */}
      <path
        d="M 80 60 L 540 60 L 540 340 L 80 340 Z"
        fill="none"
        stroke={`url(#shapeGrad-${mirror ? 'm' : 'n'})`}
        strokeWidth="2"
      />
      {/* Top right depth lines (3D effect) */}
      <line x1="540" y1="60" x2="580" y2="20" stroke={`url(#shapeGrad-${mirror ? 'm' : 'n'})`} strokeWidth="2" />
      <line x1="540" y1="340" x2="580" y2="300" stroke={`url(#shapeGrad-${mirror ? 'm' : 'n'})`} strokeWidth="2" opacity="0.4" />
      <line x1="580" y1="20" x2="580" y2="300" stroke={`url(#shapeGrad-${mirror ? 'm' : 'n'})`} strokeWidth="2" opacity="0.5" />
      {/* Glow accent */}
      <circle cx="580" cy="20" r="3" fill="#904DFF" />
      {/* Digital line escape on the right side */}
      <g stroke={`url(#shapeGrad-${mirror ? 'm' : 'n'})`} strokeWidth="1.5" opacity="0.8">
        <line x1="540" y1="160" x2="595" y2="160" />
        <line x1="540" y1="180" x2="585" y2="180" />
        <line x1="540" y1="200" x2="592" y2="200" />
        <circle cx="595" cy="160" r="1.5" fill="#904DFF" />
        <circle cx="585" cy="180" r="1.5" fill="#904DFF" />
      </g>
    </svg>
  );
}

// ============== DIGITAL LINES (decoration) ==============
function DigitalLines({ width = 300, height = 180, dense = false }) {
  const lines = dense ? [
    { y: 20, w: 0.7 }, { y: 32, w: 0.4 }, { y: 44, w: 0.85 }, { y: 56, w: 0.3 },
    { y: 70, w: 0.6 }, { y: 82, w: 0.9 }, { y: 94, w: 0.45 }, { y: 108, w: 0.7 },
    { y: 120, w: 0.5 }, { y: 132, w: 0.75 }, { y: 144, w: 0.35 }, { y: 156, w: 0.6 },
  ] : [
    { y: 30, w: 0.7 }, { y: 50, w: 0.4 }, { y: 70, w: 0.85 },
    { y: 90, w: 0.5 }, { y: 110, w: 0.7 }, { y: 130, w: 0.45 },
  ];
  return (
    <svg width={width} height={height} viewBox={`0 0 ${width} ${height}`}>
      <defs>
        <linearGradient id="lineGrad" x1="0%" y1="0%" x2="100%" y2="0%">
          <stop offset="0%" stopColor="#7B3FE4" />
          <stop offset="100%" stopColor="#904DFF" />
        </linearGradient>
      </defs>
      {lines.map((l, i) => (
        <g key={i}>
          <line x1="10" y1={l.y} x2={10 + (width - 30) * l.w} y2={l.y} stroke="url(#lineGrad)" strokeWidth="1.2" opacity="0.85" />
          <circle cx={10 + (width - 30) * l.w} cy={l.y} r="1.6" fill="#904DFF" />
        </g>
      ))}
    </svg>
  );
}

// ============== ICONS (minimal line style) ==============
const Icon = ({ name, size = 28, color = 'currentColor', strokeWidth = 1.4 }) => {
  const props = { width: size, height: size, viewBox: '0 0 24 24', fill: 'none', stroke: color, strokeWidth, strokeLinecap: 'round', strokeLinejoin: 'round' };
  switch (name) {
    case 'brain':
      return (
        <svg {...props}>
          <path d="M9 4a3 3 0 0 0-3 3v0a3 3 0 0 0-2 5.5A3 3 0 0 0 6 18a3 3 0 0 0 3 3V4z" />
          <path d="M15 4a3 3 0 0 1 3 3v0a3 3 0 0 1 2 5.5A3 3 0 0 1 18 18a3 3 0 0 1-3 3V4z" />
          <path d="M9 9h2M13 9h2M9 14h2M13 14h2" />
        </svg>
      );
    case 'target':
      return (
        <svg {...props}>
          <circle cx="12" cy="12" r="9" />
          <circle cx="12" cy="12" r="5" />
          <circle cx="12" cy="12" r="1.5" fill={color} />
          <path d="M12 3v3M12 18v3M3 12h3M18 12h3" />
        </svg>
      );
    case 'code':
      return (
        <svg {...props}>
          <path d="M8 7l-5 5 5 5" />
          <path d="M16 7l5 5-5 5" />
          <path d="M14 4l-4 16" />
        </svg>
      );
    case 'rocket':
      return (
        <svg {...props}>
          <path d="M5 13l-2 7 7-2" />
          <path d="M14 6l4 4-9 9-4-4 9-9z" />
          <path d="M14 6c2-2 5-3 8-3-0 3-1 6-3 8" />
          <circle cx="15" cy="9" r="1.4" />
        </svg>
      );
    case 'cube':
      return (
        <svg {...props}>
          <path d="M12 3l8 4.5v9L12 21l-8-4.5v-9L12 3z" />
          <path d="M12 12l8-4.5M12 12L4 7.5M12 12v9" />
        </svg>
      );
    case 'chart':
      return (
        <svg {...props}>
          <path d="M3 18l5-7 4 3 7-9" />
          <path d="M16 5h3v3" />
        </svg>
      );
    case 'people':
      return (
        <svg {...props}>
          <circle cx="9" cy="8" r="3" />
          <path d="M3 20c0-3 3-5 6-5s6 2 6 5" />
          <circle cx="17" cy="9" r="2.5" />
          <path d="M21 19c0-2-2-4-4-4" />
        </svg>
      );
    case 'search':
      return (
        <svg {...props}>
          <circle cx="11" cy="11" r="6" />
          <path d="M16 16l5 5" />
        </svg>
      );
    case 'pie':
      return (
        <svg {...props}>
          <path d="M12 3a9 9 0 1 0 9 9h-9V3z" />
          <path d="M14 3a7 7 0 0 1 7 7h-7V3z" />
        </svg>
      );
    case 'spark':
      return (
        <svg {...props}>
          <path d="M12 3v6M12 15v6M3 12h6M15 12h6M5.6 5.6l4.2 4.2M14.2 14.2l4.2 4.2M5.6 18.4l4.2-4.2M14.2 9.8l4.2-4.2" />
        </svg>
      );
    case 'arrow-right':
      return (
        <svg {...props}>
          <path d="M5 12h14M13 6l6 6-6 6" />
        </svg>
      );
    case 'check':
      return (
        <svg {...props}>
          <path d="M5 12l4 4L19 6" />
        </svg>
      );
    case 'menu':
      return (
        <svg {...props}>
          <path d="M3 6h18M3 12h18M3 18h18" />
        </svg>
      );
    case 'close':
      return (
        <svg {...props}>
          <path d="M6 6l12 12M18 6L6 18" />
        </svg>
      );
    case 'plus':
      return (
        <svg {...props}>
          <path d="M12 5v14M5 12h14" />
        </svg>
      );
    case 'minus':
      return (
        <svg {...props}>
          <path d="M5 12h14" />
        </svg>
      );
    default:
      return null;
  }
};

// Hook: reveal on scroll
function useReveal() {
  useEffect(() => {
    const els = document.querySelectorAll('.reveal');
    const obs = new IntersectionObserver((entries) => {
      entries.forEach((e) => { if (e.isIntersecting) e.target.classList.add('in'); });
    }, { threshold: 0.12 });
    els.forEach((el) => obs.observe(el));
    return () => obs.disconnect();
  }, []);
}

Object.assign(window, { OoboxLogo, ExpansionShape, DigitalLines, Icon, useReveal });