function Hero({ layout = 'kinetic' }) {
  const now = useClock();
  const [mx, setMx] = useState(50);
  const [my, setMy] = useState(50);

  useEffect(() => {
    const onMove = (e) => {
      setMx((e.clientX / window.innerWidth) * 100);
      setMy((e.clientY / window.innerHeight) * 100);
    };
    window.addEventListener('mousemove', onMove);
    return () => window.removeEventListener('mousemove', onMove);
  }, []);

  const tkyTime = now.toLocaleTimeString('ja-JP', { hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false });
  const tkyDate = now.toLocaleDateString('ja-JP', { year: 'numeric', month: 'long', day: 'numeric', weekday: 'short' });

  return (
    <section className="hero" id="top">
      <div className="hero-canvas" aria-hidden="true">
        <div className="hero-grid" />
        <div className="hero-ink shu" style={{ transform: `translate(${(mx - 50) * -0.4}px, ${(my - 50) * -0.3}px)` }} />
        <div className="hero-ink ai" style={{ transform: `translate(${(mx - 50) * 0.3}px, ${(my - 50) * 0.2}px)` }} />
      </div>

      <div className="hero-vertical">TEAM×CRAFT — EST. 2017 — TOKYO</div>

      <div className="hero-inner">
        {layout === 'kinetic' && <HeroKinetic />}
        {layout === 'split' && <HeroSplit />}
        {layout === 'centered' && <HeroCentered />}

        <div className="hero-meta">
          <p className="hero-lede">
            <span className="ja-line">受託開発を「作業」ではなく「共創」に。</span>
            <span className="ja-line">大企業の基幹業務に耐えるSaaSを、小さな専門家チームで。</span>
            <span className="ja-line">設計から運用まで、8年で150を超えるプロダクトを世に送り出してきました。</span>
          </p>
          <div className="hero-side">
            <div className="hero-clock">
              <div className="big mono">{tkyTime}</div>
              <div>{tkyDate}</div>
              <div style={{ marginTop: 8 }}>TOKYO / JST</div>
            </div>
            <div className="hero-chips">
              <span className="hero-chip"><span className="num">01</span> ENTERPRISE SAAS</span>
              <span className="hero-chip"><span className="num">02</span> PRODUCT STUDIO</span>
              <span className="hero-chip"><span className="num">03</span> TYPESCRIPT FIRST</span>
            </div>
          </div>
        </div>
      </div>

      <div className="hero-scroll-cue">SCROLL ↓</div>

      <div className="ticker" aria-hidden="true">
        <div className="ticker-track">
          {Array.from({ length: 2 }).map((_, k) => (
            <React.Fragment key={k}>
              <span>NOW HIRING <span className="dot">●</span> SENIOR ENGINEER</span>
              <span>NEW CASE <span className="dot">●</span> 三菱地所向け FM-Suite v2 リリース</span>
              <span>SPEAKING <span className="dot">●</span> 5/22 TypeScript Tokyo Meetup</span>
              <span>プロダクト <span className="dot">●</span> KURA Analytics が日経SaaS Award 2026 受賞</span>
              <span>採用 <span className="dot">●</span> 春期インターン募集中</span>
              <span>PARTNERS <span className="dot">●</span> AWS / GCP / Snowflake / Vercel</span>
            </React.Fragment>
          ))}
        </div>
      </div>
    </section>
  );
}

function HeroKinetic() {
  return (
    <div className="hero-kinetic">
      <h1 className="hero-headline">
        <span className="line d1"><span>事業の<span className="shu-ch">芯</span>を、</span></span>
        <span className="line d2"><span>ソフトウェアで</span></span>
        <span className="line d3"><span>編み直す。</span></span>
      </h1>
    </div>
  );
}

function HeroSplit() {
  return (
    <div className="hero-split">
      <h1 className="hero-headline">
        <span className="line d1"><span>事業の<span className="shu-ch">芯</span>を、</span></span>
        <span className="line d2"><span>ソフトウェアで</span></span>
        <span className="line d3"><span>編み直す。</span></span>
      </h1>
      <div className="frame-panel">
        <HeroVisual />
      </div>
    </div>
  );
}

function HeroCentered() {
  return (
    <div className="hero-centered">
      <p className="h-eyebrow"><span className="num">01</span>WHO WE ARE — 私たちについて</p>
      <h1 className="hero-headline" style={{ textAlign: 'center' }}>
        <span className="line d1"><span>事業の<span className="shu-ch">芯</span>を、</span></span>
        <span className="line d2"><span>編み直す。</span></span>
      </h1>
    </div>
  );
}

function HeroVisual() {
  // Abstract moving shapes — circular sun + stripes (enso-inspired)
  return (
    <svg viewBox="0 0 400 500" style={{ width: '100%', height: '100%' }} preserveAspectRatio="xMidYMid slice">
      <defs>
        <clipPath id="vclip"><rect width="400" height="500"/></clipPath>
      </defs>
      <g clipPath="url(#vclip)">
        <rect width="400" height="500" fill="var(--bg-paper)"/>
        {Array.from({ length: 30 }).map((_, i) => (
          <line key={i} x1={i * 14} y1="0" x2={i * 14 - 80} y2="500" stroke="var(--line)" strokeWidth="0.5" opacity="0.6"/>
        ))}
        <circle cx="200" cy="230" r="120" fill="none" stroke="var(--shu)" strokeWidth="2" strokeDasharray="0 10 700"
                style={{ animation: 'enso 4s ease-out forwards' }}/>
        <circle cx="200" cy="230" r="60" fill="var(--shu)" opacity="0.9"/>
        <text x="200" y="430" fontFamily="var(--f-heading)" fontSize="18" fill="var(--ink)" textAnchor="middle" letterSpacing="8">円相 ENSŌ</text>
      </g>
      <style>{`@keyframes enso { from { stroke-dashoffset: 800; } to { stroke-dashoffset: 0; } }`}</style>
    </svg>
  );
}

Object.assign(window, { Hero });