/* global React */
const { useEffect, useState } = React;

function Hero() {
  const [time, setTime] = useState("");
  useEffect(() => {
    const tick = () => {
      const d = new Date();
      const t = d.toLocaleTimeString("ja-JP", { hour: "2-digit", minute: "2-digit", second: "2-digit", hour12: false, timeZone: "Asia/Tokyo" });
      setTime(t);
    };
    tick();
    const id = setInterval(tick, 1000);
    return () => clearInterval(id);
  }, []);

  return (
    <section id="top" className="hero hero--solo" data-screen-label="01 Hero">
      {/* Top meta strip */}
      <div className="hero__meta">
        <span className="label">TOKYO</span>
        <span className="label hero__meta-time">JST {time}</span>
        <span className="label">LEGAL AGENT — LAW FIRM</span>
      </div>

      <div className="hero__solo container">
        <div className="hero__brand-mark">
          <span className="hero__brand-mark-rule" aria-hidden="true" />
          <span className="hero__brand-mark-name" style={{ fontFamily: "\"Times New Roman\"" }}>LegalAgent</span>
          <span className="hero__brand-mark-rule" aria-hidden="true" />
        </div>
        <h1 className="hero__solo-headline">
          <span className="hero__line"><span>生成<em>AI</em>時代の</span></span>
          <span className="hero__line"><span>法律事務所</span></span>
        </h1>

        <p className="hero__solo-sub">
          <span className="hero__solo-sub-rule" aria-hidden="true" />
          AI Native Law Firm for Modern Enterprises
        </p>

        <div className="hero__solo-rule" />

        <div className="hero__solo-foot">
          <div className="hero__ctas">
            <a href="#contact" className="btn btn--gold">
              ご相談・お問い合わせ
              <svg className="arrow" width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 7h10M8 3l4 4-4 4" stroke="currentColor" strokeWidth="1.2" /></svg>
            </a>
            <a href="#services" className="btn btn--ghost-dark">
              サービスを見る
            </a>
          </div>
        </div>

        {/* Floating monogram — removed */}
      </div>

      {/* Scroll cue */}
      <div className="hero__scroll-cue" aria-hidden="true">
        <span className="kicker-en">Scroll</span>
        <span className="hero__scroll-line" />
      </div>
    </section>);

}

window.Hero = Hero;