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

/* ============== Icons ============== */
const Icon = {
  WhatsApp: ({ size = 18, color = "currentColor" }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill={color} aria-hidden="true">
      <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51l-.57-.01c-.198 0-.52.074-.792.372s-1.04 1.016-1.04 2.479 1.065 2.876 1.213 3.074c.149.198 2.095 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347zM12.05 21.785h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.889-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.886 9.884zm8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413z"/>
    </svg>
  ),
  Arrow: ({ size = 18 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <path d="M5 12h14M13 5l7 7-7 7" />
    </svg>
  ),
  Check: ({ size = 16 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <polyline points="20 6 9 17 4 12" />
    </svg>
  ),
  Plus: ({ size = 18 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" aria-hidden="true">
      <path d="M12 5v14M5 12h14"/>
    </svg>
  ),
  Globe: ({ size = 18 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" aria-hidden="true">
      <circle cx="12" cy="12" r="9" />
      <path d="M3 12h18M12 3a14 14 0 010 18M12 3a14 14 0 000 18" />
    </svg>
  ),
  Heart: ({ size = 18 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" aria-hidden="true">
      <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>
    </svg>
  ),
  Clock: ({ size = 18 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" aria-hidden="true">
      <circle cx="12" cy="12" r="9" />
      <polyline points="12 7 12 12 15 14" />
    </svg>
  ),
  Shield: ({ size = 18 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" aria-hidden="true">
      <path d="M12 2L4 6v6c0 5 3.5 9 8 10 4.5-1 8-5 8-10V6l-8-4z"/>
    </svg>
  ),
  Stethoscope: ({ size = 18 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" aria-hidden="true">
      <path d="M6 3v6a4 4 0 008 0V3M10 3H4M14 3h-2M10 17a4 4 0 008 0v-2"/>
      <circle cx="18" cy="13" r="2"/>
    </svg>
  ),
  Translate: ({ size = 18 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" aria-hidden="true">
      <path d="M4 5h12M10 3v2c0 4-3 7-6 7M7 8c0 3 3 5 7 5M14 21l4-10 4 10M16 17h6"/>
    </svg>
  ),
  Wave: ({ size = 18 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" aria-hidden="true">
      <path d="M2 12c2 0 2-4 4-4s2 8 4 8 2-12 4-12 2 16 4 16 2-4 4-4"/>
    </svg>
  ),
};

/* ============== Reveal hook ============== */
function useReveal() {
  useEffect(() => {
    const els = document.querySelectorAll('.reveal');
    let io;
    try {
      io = new IntersectionObserver((entries) => {
        entries.forEach(e => {
          if (e.isIntersecting) {
            e.target.classList.add('in');
            io.unobserve(e.target);
          }
        });
      }, { threshold: 0.08, rootMargin: '0px 0px -4% 0px' });
      els.forEach(el => io.observe(el));
    } catch (_) {}
    // Fallback: ensure everything becomes visible even if IO never fires
    const fallback = setTimeout(() => {
      document.querySelectorAll('.reveal').forEach(el => el.classList.add('in'));
    }, 400);
    // Also reveal anything already in viewport on mount
    requestAnimationFrame(() => {
      const vh = window.innerHeight || 800;
      els.forEach(el => {
        const r = el.getBoundingClientRect();
        if (r.top < vh * 1.1) el.classList.add('in');
      });
    });
    return () => { try { io && io.disconnect(); } catch(_){} clearTimeout(fallback); };
  }, []);
}

/* ============== Header / Nav ============== */
function Nav() {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <header style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 50,
      padding: scrolled ? '14px 0' : '24px 0',
      transition: 'padding 0.3s ease, backdrop-filter 0.3s ease, background 0.3s ease',
      background: scrolled ? 'rgba(250,251,252,0.78)' : 'transparent',
      backdropFilter: scrolled ? 'blur(16px) saturate(140%)' : 'none',
      WebkitBackdropFilter: scrolled ? 'blur(16px) saturate(140%)' : 'none',
      borderBottom: scrolled ? '1px solid var(--line)' : '1px solid transparent',
    }}>
      <div className="container" style={{ display:'flex', alignItems:'center', justifyContent:'space-between' }}>
        <a href="#top" style={{ display:'flex', alignItems:'center', gap: 10, textDecoration:'none', color:'var(--ink)' }}>
          <div style={{
            width: 32, height: 32, borderRadius: 8,
            background: 'linear-gradient(135deg, var(--accent-cyan), var(--accent-navy))',
            display:'grid', placeItems:'center', color:'white'
          }}>
            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M12 21s-7-4.35-7-10a5 5 0 019-3 5 5 0 019 3c0 5.65-7 10-7 10z" opacity=".25"/><path d="M3 12h4l2-4 3 8 2-4h7" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" fill="none"/></svg>
          </div>
          <div style={{ lineHeight: 1.1 }}>
            <div className="serif" style={{ fontSize: 20, letterSpacing:'-0.01em' }}>Kameda</div>
            <div className="mono" style={{ fontSize: 9, letterSpacing:'0.18em', textTransform:'uppercase', color:'var(--ink-3)' }}>Medical · Japan</div>
          </div>
        </a>
        <nav style={{ display:'flex', alignItems:'center', gap: 36 }}>
          {[
            ['Why Kameda', '#why'],
            ['Heart Screening', '#screening'],
            ['Process', '#process'],
            ['Explore', '#stay'],
          ].map(([label, href]) => (
            <a key={href} href={href} style={{
              fontSize: 14, color:'var(--ink-2)', textDecoration:'none', fontWeight:500,
              letterSpacing:'-0.005em',
            }} className="nav-link">{label}</a>
          ))}
        </nav>
        <div style={{ display:'flex', alignItems:'center', gap: 12 }}>
          <button className="btn btn-ghost" style={{ padding:'10px 16px', fontSize:13, display:'none' }}>
            <Icon.Globe size={14}/> EN
          </button>
          <a href="https://wa.me/817073815194?text=Hi%20Kameda%2C%20I%20would%20like%20to%20learn%20more%20about%20the%20Heart%20Screening%20program." target="_blank" rel="noopener" className="btn btn-wa" style={{ padding:'10px 18px', fontSize:13 }}>
            <Icon.WhatsApp size={14} /> WhatsApp
          </a>
        </div>
      </div>
      <style>{`
        .nav-link { position: relative; }
        .nav-link::after { content:''; position:absolute; left:0; bottom:-6px; height:1px; width:0; background: var(--accent-cyan); transition: width .3s; }
        .nav-link:hover::after { width: 100%; }
        @media (max-width: 900px) { header nav { display: none !important; } }
      `}</style>
    </header>
  );
}

Object.assign(window, { Icon, useReveal, Nav });
