/* Primitives.jsx — shared building blocks for the Kigips site */

/* ---- Lucide icon, robust under React re-renders ---- */
function Icon({ name, size = 20, color, strokeWidth = 1.9, style }) {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const host = ref.current;
    if (!host || !window.lucide) return;
    host.innerHTML = '';
    const i = document.createElement('i');
    i.setAttribute('data-lucide', name);
    host.appendChild(i);
    window.lucide.createIcons();
    const svg = host.querySelector('svg');
    if (svg) {
      svg.style.width = size + 'px';
      svg.style.height = size + 'px';
      svg.setAttribute('stroke-width', strokeWidth);
      if (color) svg.style.color = color;
    }
  }, [name, size, color, strokeWidth]);
  return <span ref={ref} style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', ...style }} />;
}

/* ---- Scroll reveal wrapper ---- */
function Reveal({ children, delay = 0, y = 26, once = true, style, className }) {
  const ref = React.useRef(null);
  const [vis, setVis] = React.useState(false);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) { setVis(true); if (once) io.disconnect(); }
      else if (!once) setVis(false);
    }, { threshold: 0.12, rootMargin: '0px 0px -6% 0px' });
    io.observe(el);
    return () => io.disconnect();
  }, [once]);
  return (
    <div ref={ref} className={className} style={{
      ...style,
      opacity: vis ? 1 : 0,
      transform: vis ? 'none' : `translateY(${y}px)`,
      transition: `opacity .8s var(--kg-ease) ${delay}ms, transform .8s var(--kg-ease) ${delay}ms`,
      willChange: 'opacity, transform'
    }}>{children}</div>
  );
}

/* ---- Button ---- */
function Button({ children, variant = 'primary', onClick, icon, iconLeft, size = 'md', full }) {
  const [h, setH] = React.useState(false);
  const [p, setP] = React.useState(false);
  const pad = size === 'lg' ? '17px 30px' : '13px 24px';
  const base = {
    display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 9, cursor: 'pointer',
    fontFamily: 'var(--kg-font-body)', fontWeight: 700, fontSize: size === 'lg' ? 16 : 15,
    padding: pad, borderRadius: 'var(--kg-radius)', border: 'none', width: full ? '100%' : 'auto',
    transition: 'all var(--kg-dur) var(--kg-ease)', transform: p ? 'scale(0.975)' : 'none',
    letterSpacing: '0.005em', whiteSpace: 'nowrap'
  };
  const skin = variant === 'primary'
    ? { ...base, background: p ? 'var(--kg-blue-700)' : h ? 'var(--kg-blue-600)' : 'var(--kg-blue)', color: '#fff', boxShadow: h ? 'var(--kg-shadow-blue)' : 'none' }
    : variant === 'ghost'
    ? { ...base, background: h ? 'var(--kg-blue-tint)' : 'transparent', color: 'var(--kg-blue)', border: '1.5px solid var(--kg-blue)', padding: size === 'lg' ? '15.5px 28.5px' : '11.5px 22.5px' }
    : variant === 'white'
    ? { ...base, background: h ? '#eef4fb' : '#fff', color: 'var(--kg-blue)', boxShadow: h ? 'var(--kg-shadow-lg)' : 'var(--kg-shadow)' }
    : /* outline-white on photo */ { ...base, background: h ? 'rgba(255,255,255,0.16)' : 'rgba(255,255,255,0.06)', color: '#fff', border: '1.5px solid rgba(255,255,255,0.55)', backdropFilter: 'blur(4px)', padding: size === 'lg' ? '15.5px 28.5px' : '11.5px 22.5px' };
  return (
    <button style={skin} onClick={onClick}
      onMouseEnter={() => setH(true)} onMouseLeave={() => { setH(false); setP(false); }}
      onMouseDown={() => setP(true)} onMouseUp={() => setP(false)}>
      {iconLeft && <Icon name={iconLeft} size={size === 'lg' ? 19 : 17} />}
      {children}
      {icon && <Icon name={icon} size={size === 'lg' ? 19 : 17} />}
    </button>
  );
}

/* ---- Eyebrow ---- */
function Eyebrow({ children, light, center }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: center ? 'center' : 'flex-start', gap: 12, marginBottom: 16 }}>
      <span className="kg-eyebrow" style={{ color: light ? 'rgba(255,255,255,0.85)' : 'var(--kg-blue)' }}>{children}</span>
      <span style={{ width: 46, height: 3, borderRadius: 2, background: light ? 'rgba(255,255,255,0.7)' : 'var(--kg-blue)' }} />
    </div>
  );
}

function SectionTitle({ eyebrow, title, lead, center, light }) {
  return (
    <div style={{ textAlign: center ? 'center' : 'left', maxWidth: center ? 760 : 'none', margin: center ? '0 auto' : 0 }}>
      {eyebrow && (center
        ? <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 12, marginBottom: 16 }}>
            <span className="kg-eyebrow" style={{ color: light ? 'rgba(255,255,255,0.85)' : 'var(--kg-blue)' }}>{eyebrow}</span>
            <span style={{ width: 46, height: 3, borderRadius: 2, background: light ? 'rgba(255,255,255,0.7)' : 'var(--kg-blue)' }} />
          </div>
        : <Eyebrow light={light}>{eyebrow}</Eyebrow>)}
      <h2 className="kg-h2" style={{ margin: 0, color: light ? '#fff' : 'var(--kg-fg1)' }}>{title}</h2>
      {lead && <p className="kg-lead" style={{ margin: center ? '16px auto 0' : '16px 0 0', maxWidth: center ? 640 : 580, color: light ? 'rgba(255,255,255,0.85)' : 'var(--kg-fg2)' }}>{lead}</p>}
    </div>
  );
}

/* ---- Section wrapper ---- */
function Section({ children, bg, pad = 104, id, narrow }) {
  return (
    <section id={id} style={{ background: bg || 'transparent', padding: `${pad}px 0` }}>
      <div style={{ maxWidth: narrow ? 920 : 1200, margin: '0 auto', padding: '0 28px' }}>{children}</div>
    </section>
  );
}

/* ---- Footer ---- */
function Footer({ onNav }) {
  const navItems = ['Home', 'Dienstleistungen', 'Unternehmen', 'Umbauten', 'Kontakt'];
  const linkHover = e => { e.currentTarget.style.color = '#fff'; e.currentTarget.style.transform = 'translateX(3px)'; };
  const linkOut = e => { e.currentTarget.style.color = 'rgba(255,255,255,0.78)'; e.currentTarget.style.transform = 'none'; };
  return (
    <footer style={{ background: 'var(--kg-blue-800)', color: 'rgba(255,255,255,0.92)' }}>
      <Section pad={0}>
        <div style={{ padding: '72px 0 40px', display: 'grid', gridTemplateColumns: '1.5fr 1fr 1.2fr', gap: 48 }} className="kg-footer-grid">
          <div>
            <img src="assets/logo-kigips-transparent.png" alt="Kigips GmbH" style={{ height: 42, marginBottom: 20 }} />
            <p style={{ fontSize: 16, lineHeight: 1.7, color: 'rgba(255,255,255,0.78)', maxWidth: 320, margin: 0 }}>
              Für makellose Wände und eine Fassade, die beeindruckt. Ihr Garant für Qualität und Perfektion.
            </p>
          </div>
          <div>
            <h4 style={{ fontFamily: 'var(--kg-font-display)', fontSize: 14, letterSpacing: '.12em', textTransform: 'uppercase', margin: '0 0 18px', color: 'rgba(255,255,255,0.6)' }}>Navigation</h4>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 9 }}>
              {navItems.map(i => (
                <span key={i} onClick={() => onNav && onNav(i)} onMouseEnter={linkHover} onMouseLeave={linkOut}
                  style={{ fontSize: 16, color: 'rgba(255,255,255,0.78)', cursor: 'pointer', width: 'fit-content', transition: 'all var(--kg-dur) var(--kg-ease)' }}>{i}</span>
              ))}
            </div>
          </div>
          <div>
            <h4 style={{ fontFamily: 'var(--kg-font-display)', fontSize: 14, letterSpacing: '.12em', textTransform: 'uppercase', margin: '0 0 18px', color: 'rgba(255,255,255,0.6)' }}>Kontakt</h4>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 11, fontSize: 16, color: 'rgba(255,255,255,0.78)' }}>
              <span style={{ display: 'flex', gap: 11, alignItems: 'flex-start' }}><Icon name="map-pin" size={18} color="var(--kg-blue)" style={{ marginTop: 3, flexShrink: 0 }} />Lindenwiesstrasse 10, 9200 Gossau</span>
              <span style={{ display: 'flex', gap: 11, alignItems: 'center' }}><Icon name="phone" size={18} color="var(--kg-blue)" style={{ flexShrink: 0 }} />071 525 08 08</span>
              <span style={{ display: 'flex', gap: 11, alignItems: 'center' }}><Icon name="mail" size={18} color="var(--kg-blue)" style={{ flexShrink: 0 }} />info@kigips.ch</span>
            </div>
          </div>
        </div>
        <div style={{ borderTop: '1px solid rgba(255,255,255,0.14)', padding: '22px 0', display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 10, fontSize: 13.5, color: 'rgba(255,255,255,0.6)' }}>
          <span>© 2024 Kigips GmbH — All rights reserved</span>
          <span>Made with ♥ by <a href="https://dlm-digital.ch" target="_blank" rel="noopener noreferrer" style={{ color: 'rgba(255,255,255,0.6)', textDecoration: 'underline', textUnderlineOffset: 2 }}>DLM Digital</a></span>
        </div>
      </Section>
    </footer>
  );
}

Object.assign(window, { Icon, Reveal, Button, Eyebrow, SectionTitle, Section, Footer });