/* global React */
const { useState, useEffect, useRef } = React;

// ============== ICONS (simple linear, Solar-ish) ==============
const Icon = ({ children, size = 18, stroke = 1.6 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor"
    strokeWidth={stroke} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    {children}
  </svg>
);

const IconRuler = (p) => <Icon {...p}><path d="M3 17 17 3l4 4L7 21z"/><path d="M7 13l2 2"/><path d="M10 10l2 2"/><path d="M13 7l2 2"/></Icon>;
const IconBolt = (p) => <Icon {...p}><path d="M13 2 4 14h7l-1 8 9-12h-7z"/></Icon>;
const IconShield = (p) => <Icon {...p}><path d="M12 3 4 6v6c0 5 3.5 8.5 8 9 4.5-.5 8-4 8-9V6z"/><path d="m9 12 2 2 4-4"/></Icon>;
const IconMonitor = (p) => <Icon {...p}><rect x="2" y="4" width="20" height="13" rx="2"/><path d="M8 21h8M12 17v4"/></Icon>;
const IconSpreadsheet = (p) => <Icon {...p}><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18M3 15h18M9 3v18M15 3v18"/></Icon>;
const IconArrow = (p) => <Icon {...p}><path d="M5 12h14M13 5l7 7-7 7"/></Icon>;
const IconPlay = (p) => <Icon {...p}><path d="M8 5v14l11-7z" fill="currentColor"/></Icon>;
const IconCheck = (p) => <Icon {...p}><path d="m4 12 5 5L20 6"/></Icon>;
const IconCount = (p) => <Icon {...p}><circle cx="6" cy="6" r="2.5"/><circle cx="18" cy="6" r="2.5"/><circle cx="6" cy="18" r="2.5"/><circle cx="18" cy="18" r="2.5"/></Icon>;
const IconScissors = (p) => <Icon {...p}><circle cx="6" cy="6" r="3"/><circle cx="6" cy="18" r="3"/><path d="m20 4-12 12M14 14l6 6M14 10 8.5 4.5"/></Icon>;
const IconLayers = (p) => <Icon {...p}><path d="m12 3 9 5-9 5-9-5z"/><path d="m3 13 9 5 9-5"/><path d="m3 18 9 5 9-5"/></Icon>;
const IconGauge = (p) => <Icon {...p}><path d="M12 13l4-4"/><circle cx="12" cy="13" r="9"/><path d="M3 13a9 9 0 0 1 18 0"/></Icon>;
const IconPdf = (p) => <Icon {...p}><path d="M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"/><path d="M14 3v6h6"/><path d="M9 14h6M9 17h4"/></Icon>;
const IconExcel = (p) => <Icon {...p}><rect x="3" y="3" width="18" height="18" rx="2"/><path d="m8 8 8 8M16 8l-8 8"/></Icon>;
const IconCsv = (p) => <Icon {...p}><path d="M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"/><path d="M14 3v6h6"/><path d="M8 14h.01M11 14h.01M14 14h.01"/></Icon>;
const IconChevron = (p) => <Icon {...p}><path d="m6 9 6 6 6-6"/></Icon>;
const IconWindows = (p) => <Icon {...p}><path d="M3 5.5 11 4v8H3zM13 3.7 21 2.5V12h-8zM3 13h8v7L3 18.7zM13 13h8v8.5L13 20z" fill="currentColor" stroke="none"/></Icon>;
const IconApple = (p) => <Icon {...p}><path d="M16.5 12.5c0-2 1.5-3 1.5-3s-1-1.5-3-1.5c-1.5 0-2 .8-3 .8s-1.7-.8-3-.8c-2.5 0-4 2-4 5 0 4 2.5 8 4.5 8 1 0 1.5-.7 2.5-.7s1.5.7 2.5.7c2 0 3.5-2.5 3.5-2.5s-2-1-2-3z" fill="currentColor" stroke="none"/><path d="M13 5c1-1 1.5-2 1.5-3-1 0-2 .5-2.5 1.2-.5.6-1 1.5-.9 2.5 1 .1 2-.5 1.9-.7z" fill="currentColor" stroke="none"/></Icon>;
const IconQuote = (p) => <Icon {...p}><path d="M7 7h4v4c0 3-2 5-4 5M14 7h4v4c0 3-2 5-4 5"/></Icon>;
const IconPlus = (p) => <Icon {...p}><path d="M12 5v14M5 12h14"/></Icon>;
const IconMinus = (p) => <Icon {...p}><path d="M5 12h14"/></Icon>;
const IconTarget = (p) => <Icon {...p}><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="5"/><circle cx="12" cy="12" r="1.5" fill="currentColor"/></Icon>;
const IconKey = (p) => <Icon {...p}><circle cx="8" cy="15" r="3"/><path d="m10.5 12.5 8-8M16 6l2 2M14 8l2 2"/></Icon>;
const IconLock = (p) => <Icon {...p}><rect x="4" y="11" width="16" height="10" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></Icon>;
const IconUsers = (p) => <Icon {...p}><circle cx="9" cy="8" r="3.5"/><path d="M2 21c0-3.5 3-6 7-6s7 2.5 7 6"/><circle cx="17" cy="6" r="3"/><path d="M22 18c0-3-2-5-5-5"/></Icon>;
const IconCalendar = (p) => <Icon {...p}><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 10h18M8 3v4M16 3v4"/></Icon>;
const IconSparkle = (p) => <Icon {...p}><path d="M12 3v6M12 15v6M3 12h6M15 12h6M5 5l4 4M15 15l4 4M19 5l-4 4M9 15l-4 4"/></Icon>;
const IconYoutube = ({ size = 18 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
    <path d="M21.58 7.19a2.5 2.5 0 0 0-1.76-1.76C18.27 5 12 5 12 5s-6.27 0-7.82.43a2.5 2.5 0 0 0-1.76 1.76A26 26 0 0 0 2 12a26 26 0 0 0 .42 4.81 2.5 2.5 0 0 0 1.76 1.76C5.73 19 12 19 12 19s6.27 0 7.82-.43a2.5 2.5 0 0 0 1.76-1.76A26 26 0 0 0 22 12a26 26 0 0 0-.42-4.81ZM10 15V9l5.2 3L10 15Z"/>
  </svg>
);
const IconLinkedin = ({ size = 18 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
    <path d="M4.98 3.5A2.5 2.5 0 1 1 5 8.5a2.5 2.5 0 0 1-.02-5ZM3 10h4v11H3V10Zm6.5 0h3.8v1.5h.05c.53-.95 1.82-1.95 3.75-1.95 4.01 0 4.75 2.64 4.75 6.07V21h-4v-4.78c0-1.14-.02-2.6-1.58-2.6-1.59 0-1.83 1.24-1.83 2.52V21h-3.94V10Z"/>
  </svg>
);
const IconXBrand = ({ size = 18 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
    <path d="M14.18 10.16 22.36 1h-1.94l-7.1 7.94L7.66 1H1.12l8.58 12.01L1.12 23h1.94l7.5-8.38L16.54 23h6.54l-8.9-12.84Zm-2.65 2.96-.87-1.19L3.75 2.4h2.98l5.58 7.69.87 1.19 7.25 9.99h-2.98l-5.92-8.15Z"/>
  </svg>
);

// ============== Eyebrow + small primitives ==============
const Eyebrow = () => null;

const Reveal = ({ children, delay = 0, as = 'div', ...rest }) => {
  const ref = useRef(null);
  const [vis, setVis] = useState(false);
  useEffect(() => {
    if (!ref.current) return;
    const obs = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) { setTimeout(() => setVis(true), delay); obs.disconnect(); }
    }, { threshold: 0.12 });
    obs.observe(ref.current);
    return () => obs.disconnect();
  }, [delay]);
  const Tag = as;
  return <Tag ref={ref} className={`reveal ${vis ? 'in' : ''}`} {...rest}>{children}</Tag>;
};

// Logo wordmark — uses the brand wordmark PNG with theme-aware swap
// On dark theme (default aether) → white wordmark; on cream theme → black wordmark
const Logo = ({ iconOnly = false }) => (
  <a href="/" className={`nav-logo ${iconOnly ? 'is-icon-only' : ''}`} aria-label="ProTakeoff">
    {iconOnly ? (
      <>
        <img className="nav-logo-img nav-logo-img--on-dark" src="assets/logo-icon-light.png" alt="" aria-hidden="true"/>
        <img className="nav-logo-img nav-logo-img--on-light" src="assets/logo-icon-dark.png" alt="" aria-hidden="true"/>
      </>
    ) : (
      <>
        <img className="nav-logo-img nav-logo-wordmark nav-logo-img--on-dark" src="assets/logo-wordmark-dark.png" alt="ProTakeoff"/>
        <img className="nav-logo-img nav-logo-wordmark nav-logo-img--on-light" src="assets/logo-wordmark-light.png" alt="ProTakeoff"/>
      </>
    )}
  </a>
);

Object.assign(window, {
  Icon, IconRuler, IconBolt, IconShield, IconMonitor, IconSpreadsheet, IconArrow, IconPlay,
  IconCheck, IconCount, IconScissors, IconLayers, IconGauge, IconPdf, IconExcel, IconCsv,
  IconChevron, IconWindows, IconApple, IconQuote, IconPlus, IconMinus, IconTarget, IconKey,
  IconLock, IconUsers, IconCalendar, IconSparkle, IconYoutube, IconLinkedin, IconXBrand,
  Eyebrow, Reveal, Logo,
});
