// COVIA Hero Section
function CoviaHero() {
  const [loaded, setLoaded] = React.useState(false);
  React.useEffect(() => { requestAnimationFrame(() => setLoaded(true)); }, []);

  const delay = (ms) => ({ transitionDelay: ms + 'ms' });
  const fadeUp = (d) => ({
    opacity: loaded ? 1 : 0,
    transform: loaded ? 'translateY(0)' : 'translateY(30px)',
    transition: 'opacity 0.9s cubic-bezier(0.16,1,0.3,1), transform 0.9s cubic-bezier(0.16,1,0.3,1)',
    ...delay(d),
  });

  return React.createElement('section', {
    id: 'hero',
    style: {
      minHeight: '100vh', display: 'flex', flexDirection: 'column',
      justifyContent: 'center', alignItems: 'center',
      padding: 'clamp(80px, 15vh, 160px) clamp(20px, 5vw, 80px) clamp(40px, 8vh, 80px)',
      position: 'relative', overflow: 'hidden',
    }
  },
    // Radial glow behind logo
    React.createElement('div', {
      style: {
        position: 'absolute',
        width: 600, height: 600,
        background: 'radial-gradient(circle, oklch(0.78 0.16 75 / 0.08) 0%, transparent 70%)',
        top: '30%', left: '50%', transform: 'translate(-50%, -50%)',
        pointerEvents: 'none',
      }
    }),

    // COVIA SVG Wordmark
    React.createElement('div', { style: { ...fadeUp(100), marginBottom: 32 } },
      React.createElement('svg', {
        xmlns: 'http://www.w3.org/2000/svg', viewBox: '0 0 933.33 389.69',
        style: { width: 'clamp(280px, 40vw, 520px)', height: 'auto' },
        'aria-label': 'COVIA',
      },
        React.createElement('path', {
          d: 'M92.2 389.69c-27.69 0-49.98-8.63-66.87-25.88C8.44 346.56 0 322.42 0 291.39V114.82C0 77.7 7.36 49.29 22.07 29.57 36.78 9.86 60.74 0 93.94 0c18.12 0 34.25 3.34 48.39 10 14.13 6.67 25.26 16.64 33.38 29.9 8.12 13.26 12.18 29.97 12.18 50.12v66.11h-76.11V99.59c0-11.45-1.45-19.17-4.35-23.16-2.9-3.98-7.39-5.98-13.48-5.98-7.11 0-11.89 2.58-14.35 7.72-2.47 5.15-3.7 12-3.7 20.55V290.3c0 10.58 1.56 18.05 4.67 22.4 3.12 4.35 7.57 6.52 13.37 6.52 6.52 0 11.13-2.68 13.81-8.05 2.68-5.36 4.02-12.32 4.02-20.87v-68.94h76.98v72.42c0 33.63-8.48 58.03-25.44 73.18s-40.67 22.72-71.11 22.72ZM305.53 389.69c-30.59 0-53.97-9.24-70.13-27.73-16.17-18.48-24.25-45.19-24.25-80.14V100.03c0-32.76 8.01-57.63 24.03-74.59S274.65 0 305.53 0s54.33 8.48 70.35 25.44c16.02 16.96 24.03 41.83 24.03 74.59v181.79c0 34.94-8.08 61.65-24.25 80.14-16.17 18.48-39.54 27.73-70.13 27.73Zm.65-70.46c11.6 0 17.39-11.23 17.39-33.7V98.73c0-18.85-5.65-28.27-16.96-28.27-12.76 0-19.13 9.64-19.13 28.92v186.58c0 11.89 1.45 20.41 4.35 25.55 2.9 5.15 7.68 7.72 14.35 7.72ZM466.02 386.21 418.82 3.26h72.85l28.05 260.52L544.73 3.26h72.85l-47.19 382.95H466.01ZM636.28 386.21V3.48h73.94v382.73h-73.94ZM730.23 386.21 767.19 3.48h129.82l36.32 382.73h-72.41l-5.44-61.76h-46.1l-4.78 61.76h-74.37Zm84.59-122.86h34.79L832.87 68.72h-3.48l-14.57 194.63Z',
          style: { fill: 'var(--text-0)' }
        })
      )
    ),

    // Tagline
    React.createElement('p', {
      style: {
        ...fadeUp(350),
        fontFamily: 'var(--font-body)', fontSize: 'clamp(15px, 1.6vw, 20px)',
        color: 'var(--text-2)', letterSpacing: '0.04em',
        fontWeight: 400, textAlign: 'center',
        maxWidth: 560,
      }
    }, '_ 現在開始，每個挑戰都將成為你的實力 ;'),

    // Subtitle
    React.createElement('p', {
      style: {
        ...fadeUp(500),
        fontFamily: 'var(--font-mono)', fontSize: 'clamp(11px, 1vw, 13px)',
        color: 'var(--text-2)', letterSpacing: '0.06em',
        marginTop: 16, textAlign: 'center', opacity: loaded ? 0.5 : 0,
        textTransform: 'uppercase',
      }
    }, 'Personal Hub · Portfolio · Knowledge Base'),

    // CTA buttons
    React.createElement('div', {
      style: {
        ...fadeUp(650),
        display: 'flex', gap: 16, marginTop: 48, flexWrap: 'wrap', justifyContent: 'center',
      }
    },
      React.createElement('a', {
        href: '#works',
        style: {
          padding: '12px 28px', borderRadius: 'var(--radius-sm)',
          background: 'var(--gold)', color: 'var(--surface-0)',
          fontSize: 14, fontWeight: 600, letterSpacing: '0.02em',
          transition: 'all 0.25s',
          border: 'none', cursor: 'pointer',
        },
        onMouseEnter: e => { e.target.style.background = 'var(--gold-bright)'; e.target.style.transform = 'translateY(-1px)'; },
        onMouseLeave: e => { e.target.style.background = 'var(--gold)'; e.target.style.transform = 'translateY(0)'; },
      }, '瀏覽作品集'),
      React.createElement('a', {
        href: '#knowledge',
        style: {
          padding: '12px 28px', borderRadius: 'var(--radius-sm)',
          background: 'transparent', color: 'var(--text-1)',
          fontSize: 14, fontWeight: 500, letterSpacing: '0.02em',
          border: '1px solid var(--border)',
          transition: 'all 0.25s', cursor: 'pointer',
        },
        onMouseEnter: e => { e.target.style.borderColor = 'var(--text-2)'; e.target.style.color = 'var(--text-0)'; },
        onMouseLeave: e => { e.target.style.borderColor = 'var(--border)'; e.target.style.color = 'var(--text-1)'; },
      }, '進入知識庫 →'),
    ),

    // Scroll indicator
    React.createElement('div', {
      style: {
        ...fadeUp(900),
        position: 'absolute', bottom: 40, left: '50%', transform: 'translateX(-50%)',
        display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8,
      }
    },
      React.createElement('div', {
        style: {
          width: 1, height: 40,
          background: 'linear-gradient(to bottom, var(--text-2), transparent)',
          animation: 'scrollPulse 2s ease-in-out infinite',
        }
      }),
    ),
  );
}

// Add scroll pulse keyframe
const heroKeyframes = document.createElement('style');
heroKeyframes.textContent = `
  @keyframes scrollPulse {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.8; }
  }
`;
document.head.appendChild(heroKeyframes);

window.CoviaHero = CoviaHero;