// Hero.jsx — Delvecore Website UI Kit (responsive)
window.Hero = function Hero() {
  const mobile = useIsMobile();
  return (
    <section id="hero" style={{
      minHeight: '100vh', display: 'flex', flexDirection: 'column',
      justifyContent: 'flex-end',
      padding: mobile ? '0 24px 60px' : '0 48px 80px',
      position: 'relative', overflow: 'hidden',
    }}>
      <div style={{
        position: 'absolute', top: '-8%', right: '-4%',
        fontFamily: "'Cormorant Garamond', Georgia, serif",
        fontSize: mobile ? '56vw' : 'clamp(280px, 48vw, 580px)',
        fontWeight: 300, color: 'transparent',
        WebkitTextStroke: '1px #E0DFD8',
        lineHeight: 1, userSelect: 'none', pointerEvents: 'none',
        animation: 'float 9s ease-in-out infinite',
      }}>D</div>

      <p style={{ fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase', color: '#888884', marginBottom: 24, animation: 'fadeUp 0.8s ease 0.3s both' }}>
        Web Production / Maintenance / Small Workflow Support
      </p>

      <h1 style={{
        fontFamily: "'Cormorant Garamond', Georgia, serif",
        fontSize: mobile ? 'clamp(44px, 12vw, 72px)' : 'clamp(52px, 8vw, 108px)',
        fontWeight: 300, lineHeight: 1.05, letterSpacing: '-0.02em', marginBottom: 40,
        animation: 'fadeUp 0.8s ease 0.5s both',
      }}>
        仕事の流れを、<br />
        <em style={{ fontStyle: 'italic', color: '#888884' }}>静かに整える。</em>
      </h1>

      <p style={{
        maxWidth: mobile ? '100%' : 680,
        marginBottom: 0,
        fontSize: mobile ? 14 : 15,
        lineHeight: 1.9,
        color: '#666662',
        animation: 'fadeUp 0.8s ease 0.62s both',
      }}>
        中小企業のWebサイト制作、更新保守、業務の小さな仕組み化まで。見た目だけでなく、公開後の扱いやすさまで含めて整えます。
      </p>

      <div style={{
        display: 'flex',
        flexDirection: mobile ? 'column' : 'row',
        alignItems: mobile ? 'stretch' : 'center',
        gap: mobile ? 12 : 14,
        marginTop: mobile ? 28 : 36,
        animation: 'fadeUp 0.8s ease 0.7s both',
      }}>
        <a
          href="#works"
          style={{
            display: 'inline-flex',
            justifyContent: 'center',
            alignItems: 'center',
            minHeight: 46,
            padding: mobile ? '12px 18px' : '12px 24px',
            border: '1px solid #0C0C0A',
            background: '#0C0C0A',
            color: '#F8F7F5',
            textDecoration: 'none',
            fontSize: 12,
            letterSpacing: '0.12em',
            textTransform: 'uppercase',
            width: mobile ? '100%' : 'auto',
          }}
        >
          制作事例を見る
        </a>
        <a
          href="#pricing"
          style={{
            display: 'inline-flex',
            justifyContent: 'center',
            alignItems: 'center',
            minHeight: 46,
            padding: mobile ? '12px 18px' : '12px 24px',
            border: '1px solid #E0DFD8',
            color: '#0C0C0A',
            textDecoration: 'none',
            fontSize: 12,
            letterSpacing: '0.12em',
            textTransform: 'uppercase',
            width: mobile ? '100%' : 'auto',
          }}
        >
          料金の目安を見る
        </a>
      </div>

      <div style={{ display: 'flex', alignItems: 'center', gap: 24, animation: 'fadeUp 0.8s ease 0.8s both', marginTop: mobile ? 42 : 60 }}>
        <div style={{ width: 60, height: 1, background: '#C8C8C4', flexShrink: 0 }} />
        <span style={{ fontSize: 14, fontWeight: 300, letterSpacing: '0.06em', color: '#888884' }}>
          {mobile ? 'Digging deeper, building core value.' : 'Delvecore — Digging deeper, building core value.'}
        </span>
      </div>

      {!mobile && (
        <div style={{ position: 'absolute', bottom: 40, right: 48, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 12, animation: 'fadeUp 0.8s ease 1s both' }}>
          <div style={{ width: 1, height: 60, background: '#C8C8C4', animation: 'scrollDrop 2.2s ease-in-out 1.5s infinite' }} />
          <span style={{ fontSize: 10, letterSpacing: '0.2em', textTransform: 'uppercase', color: '#888884', writingMode: 'vertical-rl' }}>Scroll</span>
        </div>
      )}
    </section>
  );
};