// 히어로 섹션 — 서류들이 둥둥 떠다니다 간편인증 한 번에 사라지는 효과

function Hero({ tweaks, onCtaClick }) {
  const { primary, primaryDark, primaryLight, heroCopy, animIntensity, dark } = tweaks;
  const [authed, setAuthed] = React.useState(false);
  const [pulseKey, setPulseKey] = React.useState(0);

  // 자동으로 7초마다 사이클: 4초 떠다님 → 인증 → 1초 정리 → 2초 대기 → 리셋
  React.useEffect(() => {
    const cycle = () => {
      setAuthed(false);
      setTimeout(() => setAuthed(true), 4500);
    };
    cycle();
    const id = setInterval(cycle, 8000);
    return () => clearInterval(id);
  }, []);

  const handleAuthClick = () => {
    setAuthed(true);
    setPulseKey((k) => k + 1);
  };

  // 떠다니는 서류 정의 — 각자 다른 위치, 회전, 딜레이
  const docs = [
  { id: 1, label: '가족관계증명서', x: '6%', y: '8%', rot: -12, delay: 0, accent: '#2563EB', stamp: '인증' },
  { id: 2, label: '주민등록등본', x: '78%', y: '6%', rot: 8, delay: 0.4, accent: '#0EA5E9' },
  { id: 3, label: '지방세 납부', x: '2%', y: '52%', rot: 14, delay: 0.8, accent: '#7C3AED', stamp: '완납' },
  { id: 4, label: '연말정산 자료', x: '82%', y: '46%', rot: -10, delay: 1.2, accent: '#0891B2' },
  { id: 5, label: '소득금액증명', x: '14%', y: '74%', rot: 6, delay: 1.6, accent: '#2563EB', stamp: '국세' },
  { id: 6, label: '원천징수영수증', x: '70%', y: '76%', rot: -7, delay: 2.0, accent: '#0EA5E9' }];


  const intensity = animIntensity / 100; // 0~1.5

  return (
    <section className="hero" style={{ '--primary': primary, '--primary-dark': primaryDark, '--primary-light': primaryLight }}>
      <DotGrid color={primary} opacity={dark ? 0.12 : 0.07} />
      {/* 큰 배경 블롭 */}
      <div className="hero-blob hero-blob-1" />
      <div className="hero-blob hero-blob-2" />

      <div className="hero-inner">
        <div className="hero-copy">
          <div className="hero-eyebrow">
            <span className="dot" /> 2025년 귀속 종합소득세 신고대행 서비스
          </div>
          <h1 className="hero-title">
            아직도 <s>서류 한 장 한 장</s><br />
            모아서 제출하세요?
          </h1>
          <p className="hero-sub">
            {heroCopy}
          </p>
          <div className="hero-cta-row">
            <button className="cta-primary" onClick={handleAuthClick}>
              <span className="cta-icon">
                <svg viewBox="0 0 24 24" width="20" height="20" fill="none">
                  <rect x="4" y="2" width="16" height="20" rx="3" stroke="#fff" strokeWidth="2" />
                  <circle cx="12" cy="17" r="1.5" fill="#fff" />
                  <path d="M9 8 L12 11 L15 8" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                </svg>
              </span>
              간편인증으로 시작하기
              <span className="cta-arrow">→</span>
            </button>
            <a className="cta-ghost" href="#process">업무 프로세스 보기</a>
          </div>
          <div className="hero-trust">
            <div className="trust-avatars">
              <div className="avatar" style={{ background: '#FCD34D' }}>김</div>
              <div className="avatar" style={{ background: '#FBCFE8' }}>이</div>
              <div className="avatar" style={{ background: '#A7F3D0' }}>박</div>
              <div className="avatar" style={{ background: '#BFDBFE' }}>+</div>
            </div>
            <div className="trust-text">
              <div className="trust-stars">
                {[1, 2, 3, 4, 5].map((i) => <Star key={i} size={14} />)}
                <span style={{ marginLeft: 6, fontWeight: 600 }}>4.9 / 5.0</span>
              </div>
              <div className="trust-sub">종합소득세 신고대행 서비스</div>
            </div>
          </div>
        </div>

        {/* 우측 비주얼 */}
        <div className={`hero-visual ${authed ? 'authed' : ''}`}>
          {/* 떠다니는 서류들 */}
          <div className="docs-stage">
            {docs.map((d, i) =>
            <div key={d.id}
            className="floating-doc"
            style={{
              left: d.x,
              top: d.y,
              '--rot': `${d.rot}deg`,
              '--delay': `${d.delay}s`,
              '--intensity': intensity,
              '--target-x': '50%',
              '--target-y': '50%'
            }}>
                <PaperDoc label={d.label} accent={d.accent} stamp={d.stamp} rotate={0} scale={0.85} />
              </div>
            )}

            {/* 폰 */}
            <div className="phone-wrap" key={pulseKey}>
              <div className="phone-pulse" />
              <div className="phone-pulse phone-pulse-2" />
              <PhoneAuth scale={0.85} glow />
            </div>

            {/* 흡수 효과 — 인증 후 폰에서 빛이 퍼짐 */}
            <div className="suction-flash" />
          </div>

          {/* 손가락 포인터 */}
          <div className="finger-pointer">
            <FingerTap size={56} />
          </div>
        </div>
      </div>

      {/* 스크롤 힌트 */}
      <div className="scroll-hint">
        <span>아래로 스크롤</span>
        <div className="scroll-line" />
      </div>
    </section>);

}

window.Hero = Hero;