const { useState, useEffect, useRef, useMemo } = React;

/* ───────────────────────── Nav ───────────────────────── */
function Nav() {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const on = () => setScrolled(window.scrollY > 40);
    on();window.addEventListener('scroll', on, { passive: true });
    return () => window.removeEventListener('scroll', on);
  }, []);
  const go = (id) => (e) => {
    e.preventDefault();
    const el = document.getElementById(id);
    if (!el) return;
    const offset = 72; // sticky header clearance
    const y = el.getBoundingClientRect().top + window.scrollY - offset;
    window.scrollTo({ top: y, behavior: 'smooth' });
  };
  const links = [
  ['회사소개', 'about'],
  ['서비스소개', 'services'],
  ['고객승인사례', 'cases'],
  ['상담신청', 'contact']];

  const onDark = !scrolled; // transparent over hero, solid after scroll
  return (
    <header className={`fixed top-0 inset-x-0 z-40 transition-all duration-300 ${
    onDark ? 'bg-transparent border-b border-transparent' : 'bg-white/95 backdrop-blur border-b border-line'}`
    }>
      <div className="max-w-container mx-auto px-6 lg:px-8 h-16 flex items-center justify-between">
        <a href="#top" onClick={go('top')} className="flex items-center gap-2.5">
          <img src="assets/logo.png" alt="운림 로고"
          className="block w-8 h-8 rounded-md object-cover select-none"
          draggable="false" />
          <span className={`font-extrabold text-[22px] tracking-tight transition-colors ${onDark ? 'text-white' : 'text-ink'}`}>
            운림<span className="text-brand">.</span>
          </span>
          <span className={`hidden sm:inline ml-1 text-[11px] font-semibold tracking-[.18em] uppercase transition-colors ${
          onDark ? 'text-white/60' : 'text-mute'}`
          }>UNLIM</span>
        </a>
        <nav className="hidden md:flex items-center gap-8">
          {links.map(([t, id]) =>
          <a key={id} href={`#${id}`} onClick={go(id)}
          className={`text-[15px] font-medium transition-colors ${
          onDark ? 'text-white/85 hover:text-white' : 'text-body hover:text-ink'}`
          }>{t}</a>
          )}
        </nav>
        <div className="flex items-center gap-5">
          <a href="tel:01086264638" className={`hidden sm:inline-flex text-[13px] font-semibold transition-colors ${
          onDark ? 'text-white/80 hover:text-white' : 'text-body hover:text-ink'}`
          }>
            <span className="num">010-8626-4638</span>
          </a>
          <button onClick={go('contact')} className="btn-brand text-[14px] font-semibold px-4 py-2.5 rounded-[10px]">
            상담신청
          </button>
        </div>
      </div>
    </header>);

}

/* ───────────────────────── Hero (video bg) ───────────────────────── */
function Hero() {
  const [idx, setIdx] = useState(0);
  const [vidOk, setVidOk] = useState(true);
  useEffect(() => {
    const t = setInterval(() => setIdx((i) => (i + 1) % HERO_MESSAGES.length), 5500);
    return () => clearInterval(t);
  }, []);
  const msg = HERO_MESSAGES[idx];

  // Hero background video (user-supplied) + still poster fallback.
  const VIDEO_SRC = 'assets/video_hero_woonlim.mp4';
  const POSTER = 'https://picsum.photos/seed/woollim-hero-industrial/1600/900';

  return (
    <section id="top" className="relative isolate min-h-[88vh] lg:min-h-[92vh] flex items-center text-white overflow-hidden bg-ink">
      {/* Background media */}
      {vidOk ?
      <video autoPlay muted loop playsInline preload="auto"
      poster={POSTER}
      onError={() => setVidOk(false)}
      className="absolute inset-0 w-full h-full object-cover"
      style={{ filter: 'brightness(0.62) contrast(1.05) saturate(1.05)' }}>
          <source src={VIDEO_SRC} type="video/mp4" />
        </video> :

      <img src={POSTER} alt="" className="absolute inset-0 w-full h-full object-cover"
      style={{ filter: 'brightness(0.62) contrast(1.05)' }} />
      }

      {/* Slight color-grade tint on top (not a heavy overlay) */}
      <div className="absolute inset-0 pointer-events-none"
      style={{ background: 'linear-gradient(180deg, rgba(11,31,58,0.18) 0%, rgba(11,31,58,0.0) 35%, rgba(11,31,58,0.30) 100%)' }} />
      <div className="absolute inset-0 pointer-events-none"
      style={{ background: 'radial-gradient(ellipse 90% 70% at center, rgba(0,0,0,0) 0%, rgba(0,0,0,0.35) 100%)' }} />

      {/* Content */}
      <div className="relative w-full max-w-container mx-auto px-6 lg:px-8 py-28 lg:py-36 text-center">
        <div key={idx} className="fade-enter fade-in">
          <h1 className="h-hero text-white mx-auto max-w-[1100px]
                         text-[44px] sm:text-[64px] lg:text-[86px]"

          style={{ letterSpacing: '-0.035em', lineHeight: 1.12, fontWeight: 800 }}>
            {msg.title[0]}<br />
            {msg.title[1].replace(/[.]$/, '')}
            <span className="inline-block w-[10px] h-[10px] rounded-full bg-brand ml-1 mb-2 align-baseline"></span>
          </h1>
        </div>

        {/* slide pager — tappable numbered pills */}
        <div className="mt-14 flex items-center justify-center gap-3">
          {HERO_MESSAGES.map((m, i) =>
          <button key={i} onClick={() => setIdx(i)}
          aria-label={`메시지 ${i + 1} - ${m.tag}`}
          className={`group inline-flex items-center gap-2.5 pl-2 pr-4 py-2 rounded-full transition-all duration-300 ${
          i === idx ?
          'bg-white text-ink' :
          'bg-white/10 backdrop-blur-md text-white/80 hover:bg-white/20 ring-1 ring-white/20'}`
          }>
              <span className={`num w-7 h-7 rounded-full text-[12px] font-bold inline-flex items-center justify-center ${
            i === idx ? 'bg-ink text-white' : 'bg-white/15 text-white'}`
            }>
                0{i + 1}
              </span>
              <span className="text-[13px] font-semibold tracking-tight">{m.tag}</span>
            </button>
          )}
        </div>
      </div>

      {/* Scroll hint — bottom right, animated vertical line + label */}
      <div className="absolute bottom-8 right-8 lg:right-10 flex flex-col items-center gap-3 pointer-events-none z-10">
        <div className="scroll-text text-white text-[11px] font-bold tracking-[.32em]">SCROLL</div>
        <div className="relative h-14 w-px bg-white/15 overflow-hidden">
          <span className="scroll-line absolute left-[-1px] top-0 w-[3px] h-7 bg-white/85 rounded-full"></span>
        </div>
      </div>
    </section>);

}

/* ───────────── Trust strip (below hero) ───────────── */
function TrustStrip() {
  return (
    <div className="border-b border-line bg-white">
      <div className="max-w-container mx-auto px-6 lg:px-8 py-12 lg:py-16 grid grid-cols-2 lg:grid-cols-4 gap-y-6 gap-x-4">
        {[
        ['누적 승인액', '320억+', '2024–2026'],
        ['평균 승인율', '92%', '정책자금 기준'],
        ['업종 커버', '23종', '제조 · 서비스 · 의료'],
        ['응대 시간', '24h 이내', '영업일 기준']].
        map(([k, v, s]) =>
        <div key={k} className="flex flex-col gap-1">
            <div className="text-[12.5px] text-mute font-semibold tracking-[.04em]">{k}</div>
            <div className="flex items-baseline gap-2">
              <div className="num text-ink text-[26px] lg:text-[32px]" style={{ fontWeight: 800, letterSpacing: '-0.025em', lineHeight: 1.05 }}>{v}</div>
            </div>
            <div className="text-[12px] text-mute">{s}</div>
          </div>
        )}
      </div>
    </div>);

}

Object.assign(window, { Nav, Hero, TrustStrip });