/* sections-top.jsx — Header, Hero, Problems */

const NAV = [
  { label: "特徴", href: "#features" },
  { label: "料金プラン", href: "#pricing" },
  { label: "よくある質問", href: "#faq" },
];

function Logo() {
  return (
    <a className="logo" href="#top" aria-label="OOH Sim">
      <span className="logo__mark"><Icon name="monitor" size={17} stroke={2} /></span>
      <span>OOH Sim</span>
    </a>
  );
}

function Header() {
  const [scrolled, setScrolled] = React.useState(false);
  const [open, setOpen] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <header className={"header" + (scrolled ? " is-scrolled" : "")}>
      <div className="container header__inner">
        <Logo />
        <nav className="nav" aria-label="メインナビゲーション">
          <div className="nav__links">
            {NAV.map((n) => <a key={n.href} className="nav__link" href={n.href}>{n.label}</a>)}
          </div>
          <a className="nav__login" href="contact.html">ログイン</a>
          <a className="btn btn--cta nav__cta" href="contact.html">無料で試してみる</a>
        </nav>
        <button className="menu-btn" aria-label="メニュー" aria-expanded={open} onClick={() => setOpen(v => !v)}>
          <span></span><span></span><span></span>
        </button>
      </div>
      <div className={"mobile-nav" + (open ? " is-open" : "")}>
        {NAV.map((n) => <a key={n.href} href={n.href} onClick={() => setOpen(false)}>{n.label}</a>)}
        <a href="contact.html" onClick={() => setOpen(false)}>ログイン</a>
        <a className="btn btn--cta" href="contact.html">無料で試してみる</a>
      </div>
    </header>
  );
}

/* ---------------- Before/After Slider ---------------- */
function BeforeAfterSlider() {
  const [pos, setPos] = React.useState(5);
  const rafRef = React.useRef(null);
  const startTimeRef = React.useRef(null);

  React.useEffect(() => {
    // Phase 1: 0→100 over 2.5s, pause 0.8s, 100→0 over 2.5s, pause 0.8s, repeat
    const totalCycle = 6600; // ms for full cycle
    const sweepDuration = 2500;
    const pause = 800;

    const animate = (timestamp) => {
      if (!startTimeRef.current) startTimeRef.current = timestamp;
      const elapsed = (timestamp - startTimeRef.current) % totalCycle;

      let p;
      if (elapsed < sweepDuration) {
        // sweep 0→100
        p = (elapsed / sweepDuration) * 100;
      } else if (elapsed < sweepDuration + pause) {
        // pause at 100
        p = 100;
      } else if (elapsed < sweepDuration * 2 + pause) {
        // sweep 100→0
        p = 100 - ((elapsed - sweepDuration - pause) / sweepDuration) * 100;
      } else {
        // pause at 0
        p = 0;
      }
      setPos(p);
      rafRef.current = requestAnimationFrame(animate);
    };

    rafRef.current = requestAnimationFrame(animate);
    return () => cancelAnimationFrame(rafRef.current);
  }, []);

  return (
    <div className="bas">
      {/* Before layer (bottom) */}
      <div className="bas__layer">
        <img src="before.png" alt="空き枠ビルボード" className="bas__img" draggable="false" />
      </div>
      {/* After layer (clipped) */}
      <div className="bas__layer bas__layer--after"
           style={{ clipPath: `inset(0 ${100 - pos}% 0 0)` }}>
        <img src="after.png" alt="広告合成イメージ" className="bas__img" draggable="false" />
      </div>
      {/* Divider line */}
      <div className="bas__line" style={{ left: `${pos}%` }}>
        <div className="bas__handle">
          <svg width="20" height="20" viewBox="0 0 20 20" fill="none" aria-hidden="true">
            <circle cx="10" cy="10" r="10" fill="white" />
            <path d="M7 10l-3 0M7 10l-2-2M7 10l-2 2M13 10l3 0M13 10l2-2M13 10l2 2" stroke="#3B82F6" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
        </div>
      </div>
      {/* Labels */}
      <div className="bas__badge bas__badge--before" style={{ opacity: pos > 15 ? 1 : 0 }}>
        <span className="dot"></span>Before｜空き枠
      </div>
      <div className="bas__badge bas__badge--after" style={{ opacity: pos < 85 ? 1 : 0 }}>
        <span className="dot"></span>After｜合成イメージ
        <span className="bas__ai-tag"><Icon name="sparkle" size={11} />AI作成</span>
      </div>
    </div>
  );
}

/* ---------------- Hero ---------------- */
function HeroMock() {
  return (
    <div className="win" role="img" aria-label="OOH Sim のシミュレーション画面">
      <div className="win__bar">
        <div className="win__dots"><i></i><i></i><i></i></div>
        <div className="win__url"><Icon name="shield" size={13} /> app.oohsim.jp / simulation</div>
      </div>
      <div className="win__body">
        <div className="sim__field">
          <div className="sim__input">
            <Icon name="link" size={16} />
            <span>https://hakata-akaboshi.com/</span>
            <span className="caret"></span>
          </div>
          <button className="btn btn--cta sim__go"><Icon name="sparkle" size={15} />シミュレーションを作成</button>
        </div>
        <BeforeAfterSlider />
      </div>
    </div>
  );
}

function Hero() {
  return (
    <section className="hero" id="top">
      <div className="container hero__grid">
        <div className="hero__copy reveal">
          <div className="eyebrow">OOH × AI シミュレーション</div>
          <h1>掲載イメージ、その場で。<br /><span className="accent">検討が、すぐ動く。</span></h1>
          <p className="hero__sub">
            URLを入れるだけで、AIが掲載イメージを自動作成。<br />
            「こんな感じになります」をその場で見せられるから、<br />
            広告主の「なんとなく」が「具体的に」変わる。
          </p>
          <div className="hero__cta-row">
            <a className="btn btn--cta btn--lg" href="contact.html">無料で試してみる</a>
          </div>
          <div className="hint"><Icon name="check" size={15} style={{ color: "var(--cta)" }} />クレジットカード不要・最短1分で登録</div>
          <div className="hero__badges">
            <div className="hero__badge"><Icon name="edit" size={17} />作成後に修正可</div>
            <div className="hero__badge"><Icon name="image" size={17} />画像登録対応</div>
          </div>
        </div>
        <div className="hero__visual reveal">
          <HeroMock />
        </div>
      </div>
    </section>
  );
}

/* ---------------- Problems ---------------- */
const PROBLEMS = [
  {
    icon: "clock",
    before: "イメージ作成に数時間",
    after: "URLを入れたら数秒で完成",
    body: "画像編集ソフトも、デザイナーへの依頼も不要。叩き台イメージがその場でできあがります。",
  },
  {
    icon: "eye",
    before: "「こんな感じになります」が口頭だけ",
    after: "実際の掲載枠に合成した画像で見せられる",
    body: "駅・屋外・デジタルサイネージのリアルな見え方を、商談の場でそのまま共有できます。",
  },
  {
    icon: "cursor",
    before: "「検討します」で止まる",
    after: "イメージがあるから、決断が早い",
    body: "具体的なビジュアルが目の前にあると、広告主は判断しやすくなります。商談のスピードが変わります。",
  },
];

function Problems() {
  return (
    <section className="section section--gray reveal">
      <div className="container">
        <div className="section-head section-head--center">
          <div className="eyebrow" style={{ justifyContent: "center" }}>OOH Simを使うと</div>
          <h2 className="section-title">提案の「見せ方」が変わると、<br />商談の「進み方」が変わる。</h2>
        </div>
        <div className="cards-3">
          {PROBLEMS.map((p) => (
            <div className="pcard" key={p.before}>
              <div className="pcard__icon"><Icon name={p.icon} size={24} /></div>
              <div className="pcard__ba">
                <div className="pcard__before"><span>今まで</span>{p.before}</div>
                <div className="pcard__arrow"><Icon name="arrowDown" size={15} /></div>
                <div className="pcard__after"><span>OOH Simなら</span>{p.after}</div>
              </div>
              <p>{p.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Header, Hero, Problems, Logo });