function HeroVisual() {
  // Precision-drawn Mt. Fuji as a technical diagram
  return (
    <svg viewBox="0 0 520 520" preserveAspectRatio="xMidYMid meet">
      <defs>
        <pattern id="dots" width="14" height="14" patternUnits="userSpaceOnUse">
          <circle cx="1" cy="1" r="0.8" fill="rgba(17,17,17,0.18)" />
        </pattern>
        <linearGradient id="snow" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor="#FFFFFF" />
          <stop offset="1" stopColor="#E9E5DC" />
        </linearGradient>
      </defs>

      {/* outer guides */}
      <rect x="20" y="20" width="480" height="480" fill="none"
            stroke="rgba(17,17,17,0.18)" strokeDasharray="2 4" />

      {/* corner crosses */}
      {[[20,20],[500,20],[20,500],[500,500]].map(([x,y], i) => (
        <g key={i} stroke="var(--ink)" strokeWidth="1">
          <line x1={x-6} y1={y} x2={x+6} y2={y} />
          <line x1={x} y1={y-6} x2={x} y2={y+6} />
        </g>
      ))}

      {/* circle frame */}
      <circle cx="260" cy="260" r="200" fill="url(#dots)" />
      <circle cx="260" cy="260" r="200" fill="none"
              stroke="rgba(17,17,17,0.22)" />
      <circle cx="260" cy="260" r="160" fill="none"
              stroke="rgba(17,17,17,0.10)" strokeDasharray="3 5" />

      {/* horizon */}
      <line x1="60" y1="340" x2="460" y2="340"
            stroke="rgba(17,17,17,0.3)" strokeDasharray="2 4" />

      {/* Mt. Fuji silhouette */}
      <g>
        <path d="M 90 380 L 200 200 L 230 230 L 250 210 L 270 240 L 295 215 L 430 380 Z"
              fill="var(--ink)" />
        {/* snow cap */}
        <path d="M 200 200 L 230 230 L 250 210 L 270 240 L 295 215 L 320 240
                 L 305 245 L 295 250 L 280 245 L 270 252 L 255 244 L 240 250 L 225 244 Z"
              fill="url(#snow)" />
      </g>

      {/* ground line */}
      <line x1="0" y1="380" x2="520" y2="380" stroke="var(--ink)" strokeWidth="1" />

      {/* tick marks below ground */}
      {Array.from({length: 26}).map((_, i) => (
        <line key={i} x1={20 + i*19.2} y1="380" x2={20 + i*19.2} y2={i%5===0?390:385}
              stroke="var(--ink)" strokeWidth="0.6" />
      ))}

      {/* annotations */}
      <g fontFamily="var(--font-mono)" fontSize="9" fill="rgba(17,17,17,0.55)" letterSpacing="0.8">
        <text x="30" y="40">FIG. 01 — FUJI</text>
        <text x="430" y="40" textAnchor="end">3776 M</text>
        <text x="30" y="500">35.66°N</text>
        <text x="430" y="500" textAnchor="end">138.72°E</text>

        {/* peak label */}
        <line x1="247" y1="200" x2="247" y2="120" stroke="var(--accent)" strokeWidth="1" />
        <circle cx="247" cy="200" r="2.5" fill="var(--accent)" />
        <text x="252" y="115" fontSize="10" fill="var(--accent)" fontWeight="500">PEAK</text>
        <text x="252" y="128">SUMMIT POINT</text>

        {/* base measure */}
        <line x1="90" y1="400" x2="430" y2="400" stroke="rgba(17,17,17,0.4)" />
        <line x1="90" y1="396" x2="90" y2="404" stroke="rgba(17,17,17,0.4)" />
        <line x1="430" y1="396" x2="430" y2="404" stroke="rgba(17,17,17,0.4)" />
        <text x="260" y="415" textAnchor="middle">W = 340</text>
      </g>

      {/* accent dot — like a sun */}
      <circle cx="360" cy="170" r="22" fill="var(--accent)" opacity="0.16" />
      <circle cx="360" cy="170" r="10" fill="var(--accent)" />
    </svg>
  );
}

function Hero() {
  return (
    <section className="hero" id="top">
      <div className="hero__grid"></div>

      <div className="hero__top">
        <div className="hero__meta">
          <span><b>EST.</b> 2024</span>
          <span><b>NARA</b> JAPAN</span>
          <span><b>v</b> 2026.05</span>
        </div>
        <div className="hero__coords">
          <span className="pulse"></span>
          <span>34.6851°N&nbsp;&nbsp;135.8048°E&nbsp;&nbsp;/&nbsp;&nbsp;AVAILABLE FOR WORK</span>
        </div>
      </div>

      <div className="hero__inner">
        <div>
          <span className="eyebrow">Independent web studio — Nara</span>
          <h1 className="hero__headline">
            あなたの仕事を、<br/>
            <span className="accent">もっと多くの人に。</span>
            <span className="small">— Connecting your work with the people who need it.</span>
          </h1>
          <p className="hero__sub">
            奈良市拠点。中小事業者・士業・個人店主・門下生のための
            ホームページ制作スタジオ。明朗な料金、丁寧な対話、長く使える設計で、
            あなたの仕事を正しく伝えるサイトをつくります。
          </p>
          <div className="hero__ctas">
            <a href="#contact" className="btn btn--primary">
              お問い合わせフォームへ
              <span className="arrow">↗</span>
            </a>
            <a href="#works" className="btn btn--ghost">
              制作実績を見る
              <span className="arrow">→</span>
            </a>
          </div>
        </div>

        <div className="hero__visual">
          <HeroVisual />
        </div>
      </div>

      <div className="hero__bottom">
        <div className="hero__stat">
          <span className="num">10<span style={{fontSize: '0.5em', color: 'var(--sub)', marginLeft: 4}}>+ Cases</span></span>
          <span className="label">制作実績 / DELIVERED</span>
        </div>
        <div className="hero__stat">
          <span className="num">14<span style={{fontSize: '0.5em', color: 'var(--sub)', marginLeft: 4}}>days~</span></span>
          <span className="label">最短納期 / LEAD TIME</span>
        </div>
        <div className="hero__stat">
          <span className="num">1:1</span>
          <span className="label">完全担当制 / DIRECT</span>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Hero, HeroVisual });