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

function useCounter(target, { duration = 1800, start = 0, delay = 0 } = {}) {
  const [v, setV] = useState(start);
  useEffect(() => {
    let raf;
    const t0 = performance.now() + delay;
    const step = (now) => {
      const elapsed = Math.max(0, now - t0);
      const p = Math.min(1, elapsed / duration);
      // easeOutExpo
      const eased = p === 1 ? 1 : 1 - Math.pow(2, -10 * p);
      setV(start + (target - start) * eased);
      if (p < 1) raf = requestAnimationFrame(step);
    };
    raf = requestAnimationFrame(step);
    return () => cancelAnimationFrame(raf);
  }, [target, duration, start, delay]);
  return v;
}

function Counter({ to, digits = 0, delay = 0, suffix = "" }) {
  const v = useCounter(to, { delay });
  const n = digits > 0 ? v.toFixed(digits) : Math.round(v).toLocaleString("ja-JP");
  return <span className="mono tabular">{n}{suffix}</span>;
}

function Hero() {
  const [time, setTime] = useState(() => new Date());
  useEffect(() => {
    const id = setInterval(() => setTime(new Date()), 1000);
    return () => clearInterval(id);
  }, []);
  const hh = String(time.getHours()).padStart(2, "0");
  const mm = String(time.getMinutes()).padStart(2, "0");
  const ss = String(time.getSeconds()).padStart(2, "0");
  const ymd = `${time.getFullYear()}.${String(time.getMonth()+1).padStart(2,"0")}.${String(time.getDate()).padStart(2,"0")}`;

  return (
    <section className="hero">
      <div className="hero-grid container">
        {/* Top meta row */}
        <div className="hero-meta">
          <div className="meta-item">
            <span className="meta-k">FUKUOKA</span>
            <span className="meta-v mono">33°31′N / 130°25′E</span>
          </div>
          <div className="meta-item">
            <span className="meta-k">NOW</span>
            <span className="meta-v mono tabular">{ymd} &nbsp; {hh}:{mm}:{ss}</span>
          </div>
          <div className="meta-item">
            <span className="meta-k">STATUS</span>
            <span className="meta-v"><span className="dot-live" /> 本日 受付中</span>
          </div>
        </div>

        {/* Eyebrow */}
        <div className="hero-eyebrow">
          <span className="eyebrow">Unwanted Goods Removal &amp; Reuse — Est. 2026</span>
        </div>

        {/* H1 */}
        <h1 className="hero-h1">
          福岡の、<br />
          <span className="hero-h1-em">ちゃんとした</span><br />
          不用品回収。
        </h1>

        <p className="hero-sub">
          許認可・明朗価格・適正処分。<br />
          那珂川市から、福岡県全域へ。<span className="accent-rule" />
        </p>

        {/* Counters */}
        <div className="hero-counters">
          <div className="ctr">
            <div className="ctr-k">対応市町</div>
            <div className="ctr-n"><Counter to={60} delay={150} /><span className="ctr-u">市町村</span></div>
            <div className="ctr-note">福岡県全域</div>
          </div>
          <div className="ctr">
            <div className="ctr-k">最短対応</div>
            <div className="ctr-n"><Counter to={0} delay={300} /><span className="ctr-u">日</span></div>
            <div className="ctr-note">即日出動可</div>
          </div>
          <div className="ctr">
            <div className="ctr-k">見積り後 追加請求</div>
            <div className="ctr-n"><Counter to={0} delay={450} /><span className="ctr-u">円</span></div>
            <div className="ctr-note">1円も上げません</div>
          </div>
          <div className="ctr">
            <div className="ctr-k">古物商許可 番号</div>
            <div className="ctr-n ctr-n--sm mono">第 901071510030 号</div>
            <div className="ctr-note">福岡県公安委員会</div>
          </div>
        </div>

        {/* CTA */}
        <div className="hero-cta">
          <a className="btn btn-primary" href="https://line.me/R/ti/p/@398wplue?from=page&liff.referrer=https%3A%2F%2Freplanning-fukuoka.studio.site%2F&searchId=398wplue" target="_blank" rel="noopener noreferrer">LINEで無料相談 <span aria-hidden="true">→</span></a>
          <a className="btn btn-ghost mono" href="tel:09077781111">TEL 090-7778-1111</a>
          <span className="hero-cta-note">受付 8:00〜22:00 / 年中無休</span>
        </div>

        {/* Scroll hint */}
        <div className="hero-scroll">
          <span className="mono">SCROLL</span>
          <span className="hero-scroll-line" />
        </div>
      </div>
    </section>
  );
}

window.Hero = Hero;
window.Counter = Counter;