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

/* ===========================================================
   Wordmark — SLF Energía
   - Full variant: "SLF Energía" with mini solar accent
   - Compact: "SLF" monogram
   - Light + dark surfaces
   =========================================================== */

function Wordmark({ variant = 'full', tone = 'dark', size = 22 }) {
  // tone = 'dark'  => for light backgrounds  (text dark)
  // tone = 'light' => for dark backgrounds   (text white)
  const inkColor = tone === 'dark' ? '#0B2545' : '#FFFFFF';
  const accent = '#FFB800';

  // Mini mark: an "S" rendered as 3 horizontal solar bars (S = SLF)
  const Mark = () => (
    <svg viewBox="0 0 28 28" width={size + 6} height={size + 6} aria-hidden="true" style={{ flex: '0 0 auto' }}>
      <rect x="3" y="4"  width="22" height="4.5" rx="1.2" fill={inkColor} />
      <rect x="3" y="11.75" width="22" height="4.5" rx="1.2" fill={accent} />
      <rect x="3" y="19.5" width="22" height="4.5" rx="1.2" fill={inkColor} />
    </svg>
  );

  if (variant === 'compact') {
    return (
      <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, color: inkColor }}>
        <Mark />
        <span style={{
          fontFamily: 'Inter, sans-serif',
          fontWeight: 700,
          fontSize: size,
          letterSpacing: '-0.02em',
          lineHeight: 1
        }}>SLF</span>
      </span>
    );
  }

  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 10, color: inkColor }}>
      <Mark />
      <span style={{
        fontFamily: 'Inter, sans-serif',
        fontWeight: 700,
        fontSize: size,
        letterSpacing: '-0.02em',
        lineHeight: 1,
        display: 'inline-flex',
        alignItems: 'baseline',
        gap: 6,
      }}>
        SLF
        <span style={{
          fontWeight: 400,
          fontSize: size * 0.95,
          color: tone === 'dark' ? '#1A1D23' : 'rgba(255,255,255,.85)',
          letterSpacing: '-0.015em',
        }}>Energía</span>
      </span>
    </span>
  );
}

/* ===========================================================
   Reveal-on-scroll wrapper
   =========================================================== */
function Reveal({ children, delay = 0, as: Tag = 'div', className = '', style }) {
  const ref = useRef(null);
  const [shown, setShown] = useState(false);
  useEffect(() => {
    const node = ref.current;
    if (!node) return;
    const io = new IntersectionObserver(
      (entries) => entries.forEach((e) => {
        if (e.isIntersecting) {
          setTimeout(() => setShown(true), delay);
          io.disconnect();
        }
      }),
      { threshold: 0.12 }
    );
    io.observe(node);
    return () => io.disconnect();
  }, [delay]);
  return (
    <Tag ref={ref} className={`reveal ${shown ? 'is-in' : ''} ${className}`} style={style}>
      {children}
    </Tag>
  );
}

/* ===========================================================
   Animated number that counts up when in viewport
   =========================================================== */
function CountUp({ to, suffix = '', prefix = '', decimals = 0, duration = 1400, format }) {
  const ref = useRef(null);
  const [val, setVal] = useState(0);
  const started = useRef(false);
  useEffect(() => {
    const node = ref.current;
    if (!node) return;
    const io = new IntersectionObserver(
      (entries) => entries.forEach((e) => {
        if (e.isIntersecting && !started.current) {
          started.current = true;
          const start = performance.now();
          const tick = (now) => {
            const t = Math.min(1, (now - start) / duration);
            const eased = 1 - Math.pow(1 - t, 3);
            setVal(to * eased);
            if (t < 1) requestAnimationFrame(tick);
          };
          requestAnimationFrame(tick);
          io.disconnect();
        }
      }),
      { threshold: 0.3 }
    );
    io.observe(node);
    return () => io.disconnect();
  }, [to, duration]);
  const display = format
    ? format(val)
    : `${prefix}${val.toLocaleString('es-CL', { minimumFractionDigits: decimals, maximumFractionDigits: decimals })}${suffix}`;
  return <span ref={ref} className="tnum">{display}</span>;
}

/* ===========================================================
   Icons
   =========================================================== */
const Icon = {
  Arrow: () => <svg className="icon" viewBox="0 0 24 24"><path d="M5 12h14M13 5l7 7-7 7"/></svg>,
  ArrowSmall: ({ size=14 }) => <svg className="icon" viewBox="0 0 24 24" style={{ width: size, height: size }}><path d="M5 12h14M13 5l7 7-7 7"/></svg>,
  Whatsapp: ({ size=20 }) => (
    <svg viewBox="0 0 24 24" width={size} height={size} fill="currentColor" aria-hidden="true">
      <path d="M19.05 4.91A9.82 9.82 0 0 0 12 2C6.5 2 2 6.5 2 12c0 1.74.46 3.43 1.33 4.92L2 22l5.27-1.38A9.91 9.91 0 0 0 12 22c5.5 0 10-4.5 10-10 0-2.67-1.04-5.18-2.95-7.09zM12 20.13c-1.55 0-3.06-.41-4.39-1.2l-.31-.18-3.12.82.83-3.04-.2-.31A8.13 8.13 0 0 1 3.87 12C3.87 7.53 7.53 3.87 12 3.87c2.18 0 4.22.85 5.76 2.39A8.13 8.13 0 0 1 20.13 12c0 4.48-3.65 8.13-8.13 8.13zm4.46-6.09c-.25-.12-1.45-.71-1.67-.79-.22-.08-.39-.12-.55.12-.16.25-.63.79-.77.95-.14.16-.28.18-.53.06-.25-.12-1.04-.38-1.98-1.22-.73-.65-1.23-1.46-1.37-1.71-.14-.25-.02-.39.11-.51.11-.11.25-.28.37-.42.12-.14.16-.25.25-.41.08-.16.04-.31-.02-.43-.06-.12-.55-1.34-.76-1.83-.2-.48-.4-.42-.55-.42-.14-.01-.31-.01-.47-.01-.16 0-.43.06-.65.31-.22.25-.85.83-.85 2.03 0 1.2.88 2.36 1 2.52.12.16 1.73 2.64 4.2 3.7.59.25 1.04.4 1.4.51.59.19 1.12.16 1.55.1.47-.07 1.45-.59 1.66-1.16.2-.57.2-1.06.14-1.16-.06-.1-.22-.16-.47-.28z"/>
    </svg>
  ),
  Phone: () => <svg className="icon" viewBox="0 0 24 24"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>,
  Mail: () => <svg className="icon" viewBox="0 0 24 24"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>,
  Map: () => <svg className="icon" viewBox="0 0 24 24"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>,
  Clock: () => <svg className="icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><polyline points="12,6 12,12 16,14"/></svg>,
  Check: () => <svg className="icon" viewBox="0 0 24 24"><polyline points="20,6 9,17 4,12"/></svg>,
  Shield: () => <svg className="icon" viewBox="0 0 24 24"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>,
  Bolt: () => <svg className="icon" viewBox="0 0 24 24"><polygon points="13,2 3,14 12,14 11,22 21,10 12,10 13,2"/></svg>,
  Solar: () => <svg className="icon" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="14" rx="1"/><line x1="3" y1="9" x2="21" y2="9"/><line x1="3" y1="14" x2="21" y2="14"/><line x1="9" y1="4" x2="9" y2="18"/><line x1="15" y1="4" x2="15" y2="18"/></svg>,
  Factory: () => <svg className="icon" viewBox="0 0 24 24"><path d="M2 20h20V8l-6 4V8l-6 4V4H4l-2 4z"/><path d="M6 20v-4M10 20v-4M14 20v-4M18 20v-4"/></svg>,
  Mountain: () => <svg className="icon" viewBox="0 0 24 24"><path d="M3 20l5-9 4 6 3-4 6 7H3z"/><circle cx="17" cy="6" r="2"/></svg>,
  Cart: () => <svg className="icon" viewBox="0 0 24 24"><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.7 13.4a2 2 0 0 0 2 1.6h9.7a2 2 0 0 0 2-1.6L23 6H6"/></svg>,
  Leaf: () => <svg className="icon" viewBox="0 0 24 24"><path d="M11 20A7 7 0 0 1 4 13C4 8 9 4 20 4c0 11-4 16-9 16zM2 22c0-6 6-7 11-7"/></svg>,
  Chart: () => <svg className="icon" viewBox="0 0 24 24"><path d="M3 3v18h18"/><path d="M7 14l4-4 4 3 5-6"/></svg>,
  Doc: () => <svg className="icon" viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14,2 14,8 20,8"/></svg>,
  Calendar: () => <svg className="icon" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>,
  Download: () => <svg className="icon" viewBox="0 0 24 24"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7,10 12,15 17,10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>,
  Play: () => <svg className="icon" viewBox="0 0 24 24" fill="currentColor"><polygon points="6,4 20,12 6,20" stroke="none"/></svg>,
  Wrench: () => <svg className="icon" viewBox="0 0 24 24"><path d="M14.7 6.3a4 4 0 0 0-5.4 5.4L3 18l3 3 6.3-6.3a4 4 0 0 0 5.4-5.4l-2.7 2.7L13 10l1-3z"/></svg>,
  Compass: () => <svg className="icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><polygon points="16,8 14,14 8,16 10,10"/></svg>,
  Eye: () => <svg className="icon" viewBox="0 0 24 24"><path d="M1 12s4-7 11-7 11 7 11 7-4 7-11 7S1 12 1 12z"/><circle cx="12" cy="12" r="3"/></svg>,
  X: () => <svg className="icon" viewBox="0 0 24 24"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>,
  Linkedin: () => <svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor"><path d="M4.98 3.5C4.98 4.88 3.87 6 2.5 6S0 4.88 0 3.5 1.12 1 2.5 1s2.48 1.12 2.48 2.5zM.22 8h4.56v12H.22V8zm7.3 0h4.37v1.65h.06c.61-1.15 2.1-2.36 4.32-2.36 4.62 0 5.48 3.04 5.48 7v6.71h-4.56v-5.95c0-1.42-.03-3.25-1.98-3.25-1.98 0-2.29 1.55-2.29 3.15V20H7.52V8z"/></svg>,
  Facebook: () => <svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor"><path d="M22 12a10 10 0 1 0-11.56 9.88V14.9H7.9V12h2.54V9.8c0-2.51 1.49-3.9 3.78-3.9 1.09 0 2.24.2 2.24.2v2.46h-1.26c-1.24 0-1.63.77-1.63 1.56V12h2.77l-.44 2.9h-2.33v6.98A10 10 0 0 0 22 12z"/></svg>,
  Instagram: () => <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="1.6"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="1" fill="currentColor"/></svg>,
  Youtube: () => <svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor"><path d="M23.5 6.2a3 3 0 0 0-2.1-2.1C19.6 3.5 12 3.5 12 3.5s-7.6 0-9.4.6A3 3 0 0 0 .5 6.2C0 8 0 12 0 12s0 4 .5 5.8a3 3 0 0 0 2.1 2.1c1.8.6 9.4.6 9.4.6s7.6 0 9.4-.6a3 3 0 0 0 2.1-2.1c.5-1.8.5-5.8.5-5.8s0-4-.5-5.8zM9.6 15.6V8.4l6.3 3.6-6.3 3.6z"/></svg>,
  Menu: () => <svg className="icon" viewBox="0 0 24 24"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg>,
};

/* ===========================================================
   Constants
   =========================================================== */
const PHONE = '+56953730208';
const PHONE_FMT = '+56 9 5373 0208';
const WA_URL = 'https://api.whatsapp.com/send?phone=56953730208&text=Hola%20SLF%20Energ%C3%ADa%2C%20quiero%20coordinar%20un%20diagn%C3%B3stico%20t%C3%A9cnico';
const EMAIL = 'contacto@slf.cl';

Object.assign(window, { Wordmark, Reveal, CountUp, Icon, PHONE, PHONE_FMT, WA_URL, EMAIL });
