/* GA-Coach — shared atoms & helpers */
const { useState, useEffect, useRef, useCallback } = React;

/* Re-render Lucide icons after mount/update */
function useLucide(deps = []) {
  useEffect(() => {
    if (window.lucide) window.lucide.createIcons();
  }, deps); // eslint-disable-line
}

function Icon({ name, size = 20, style = {}, strokeWidth = 2 }) {
  return <i data-lucide={name} style={{ width: size, height: size, strokeWidth, display: 'inline-flex', ...style }}></i>;
}

/* IntersectionObserver reveal — adds .in when scrolled into view */
function useReveal() {
  useEffect(() => {
    const els = document.querySelectorAll('.reveal:not(.in)');
    if (!('IntersectionObserver' in window)) {
      els.forEach(e => e.classList.add('in'));
      return;
    }
    const io = new IntersectionObserver((entries) => {
      entries.forEach(en => {
        if (en.isIntersecting) { en.target.classList.add('in'); io.unobserve(en.target); }
      });
    }, { threshold: 0.12, rootMargin: '0px 0px -8% 0px' });
    els.forEach(e => io.observe(e));
    return () => io.disconnect();
  });
}

/* Subtle PCB / circuit-board pattern background (brand decorative motif) */
function circuitDataUri(stroke = '%2390BAE5', strokeOp = '.18', node = '%234FC3D9') {
  const svg = `<svg xmlns='http://www.w3.org/2000/svg' width='340' height='340' viewBox='0 0 340 340'>
    <g fill='none' stroke='${stroke}' stroke-opacity='${strokeOp}' stroke-width='1'>
      <path d='M12 46 L84 46 L84 110 L168 110 L168 196 L252 196 L252 286 L330 286'/>
      <path d='M44 214 L128 214 L128 300'/>
      <path d='M210 30 L210 96 L296 96'/>
      <path d='M30 150 L96 150 L96 90'/>
      <circle cx='84' cy='46' r='3' fill='${node}' fill-opacity='.7' stroke='none'/>
      <circle cx='168' cy='110' r='3' fill='${node}' fill-opacity='.7' stroke='none'/>
      <circle cx='252' cy='196' r='3' fill='${node}' fill-opacity='.7' stroke='none'/>
      <circle cx='128' cy='214' r='3' fill='${node}' fill-opacity='.7' stroke='none'/>
      <circle cx='96' cy='150' r='3' fill='${node}' fill-opacity='.7' stroke='none'/>
      <rect x='252' y='44' width='44' height='26' rx='2'/>
      <rect x='22' y='262' width='44' height='26' rx='2'/>
      <rect x='150' y='148' width='30' height='18' rx='2'/>
    </g>
  </svg>`;
  return `url("data:image/svg+xml,${svg.replace(/\n\s*/g, '').replace(/#/g, '%23').replace(/'/g, '%27')}")`;
}

/* Section header — eyebrow + H2 + optional intro */
function SectionHead({ eyebrow, title, intro, align = 'left', light = false, max = 640 }) {
  const ta = align === 'center' ? 'center' : 'left';
  return (
    <div className="reveal" style={{ textAlign: ta, maxWidth: align === 'center' ? max : 'none', margin: align === 'center' ? '0 auto' : 0, marginBottom: 40 }}>
      {eyebrow && <div className="eyebrow" style={light ? { color: 'var(--ga-secondary)' } : null}>{eyebrow}</div>}
      <h2 style={{
        fontSize: 'clamp(28px, 4vw, 38px)', fontWeight: 800, lineHeight: 1.15,
        letterSpacing: '-.01em', margin: '12px 0 0',
        color: light ? '#fff' : 'var(--ga-text)', maxWidth: align === 'center' ? '100%' : max,
        textWrap: 'balance'
      }}>{title}</h2>
      {intro && <p style={{
        fontSize: 17, lineHeight: 1.6, margin: '14px 0 0',
        color: light ? 'rgba(255,255,255,.82)' : 'var(--ga-muted)',
        maxWidth: max, marginLeft: align === 'center' ? 'auto' : 0, marginRight: align === 'center' ? 'auto' : 0
      }}>{intro}</p>}
    </div>
  );
}

/* Brand logo lockup (white plate so the white-bg JPG always sits clean) */
function LogoPlate({ height = 38, onClick }) {
  return (
    <a href="#top" onClick={onClick} style={{ display: 'inline-flex', alignItems: 'center', textDecoration: 'none' }}>
      <span style={{
        display: 'inline-flex', background: '#fff', borderRadius: 10,
        padding: '5px 9px', boxShadow: 'var(--ga-shadow-1)', border: '1px solid var(--ga-line)'
      }}>
        <img src="assets/ga-coach-logo.jpg" alt="GA-Coach — Gebäudeautomation nach VDI 3814" style={{ height, display: 'block' }} />
      </span>
    </a>
  );
}

/* Round badge icon on a tinted plate (brand iconography pattern) */
function BadgeIcon({ name, size = 52, tint = 'var(--ga-primary-050)', color = 'var(--ga-primary)' }) {
  return (
    <div style={{
      width: size, height: size, borderRadius: 14, background: tint, color,
      display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0
    }}>
      <Icon name={name} size={Math.round(size * 0.46)} strokeWidth={2} />
    </div>
  );
}

Object.assign(window, { useLucide, Icon, useReveal, circuitDataUri, SectionHead, LogoPlate, BadgeIcon });