// Icon — thin wrapper around Lucide for safety + size control.
function Icon({ name, size = 20, color, style, ...rest }) {
  const ref = React.useRef(null);
  React.useEffect(() => {
    if (window.lucide && ref.current) {
      ref.current.setAttribute('data-lucide', name);
      window.lucide.createIcons({ icons: window.lucide.icons, nameAttr: 'data-lucide' });
    }
  }, [name]);
  return (
    <i
      ref={ref}
      data-lucide={name}
      style={{ width: size, height: size, color, display: 'inline-flex', alignItems: 'center', ...style }}
      {...rest}
    />
  );
}

// Logo — reads the brand SVGs from assets/.
function Logo({ onDark = false, height = 32 }) {
  const src = onDark ? '../../assets/logo-wordmark-on-dark.svg' : '../../assets/logo-wordmark.svg';
  return <img src={src} alt="Kin-Guard" style={{ height, display: 'block' }} />;
}

// Reveal — lightweight intersection-observer fade.
function Reveal({ children, delay = 0, as: Tag = 'div', ...rest }) {
  const ref = React.useRef(null);
  const [visible, setVisible] = React.useState(false);
  React.useEffect(() => {
    if (!ref.current) return;
    const obs = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          setTimeout(() => setVisible(true), delay);
          obs.disconnect();
        }
      });
    }, { threshold: 0.15 });
    obs.observe(ref.current);
    return () => obs.disconnect();
  }, [delay]);
  return (
    <Tag ref={ref} className={`reveal${visible ? ' is-visible' : ''}`} {...rest}>
      {children}
    </Tag>
  );
}

// Section — common wrapper.
function Section({ tone = 'default', tight = false, id, children, style }) {
  const klass = [
    'section',
    tight ? 'section--tight' : '',
    tone === 'dark' ? 'section--dark' : '',
    tone === 'wash' ? 'section--wash' : '',
    tone === 'surface' ? 'section--surface' : '',
  ].filter(Boolean).join(' ');
  return (
    <section id={id} className={klass} style={style}>
      <div className="container">{children}</div>
    </section>
  );
}

function SectionHead({ eyebrow, title, lead, align = 'left' }) {
  return (
    <div className="section-head" style={{ marginInline: align === 'center' ? 'auto' : undefined, textAlign: align }}>
      {eyebrow && <div className="eyebrow">{eyebrow}</div>}
      <h2>{title}</h2>
      {lead && <p className="lead" style={{ marginInline: align === 'center' ? 'auto' : undefined }}>{lead}</p>}
    </div>
  );
}

Object.assign(window, { Icon, Logo, Reveal, Section, SectionHead });