/* global React */

const LINE_URL = "https://line.me/R/ti/p/@398wplue?from=page&liff.referrer=https%3A%2F%2Freplanning-fukuoka.studio.site%2F&searchId=398wplue";

function Header() {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 20);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const links = [
    ["サービス", "#service"],
    ["料金", "#price"],
    ["比較", "#compare"],
    ["エリア", "#area"],
    ["流れ", "#flow"],
    ["FAQ", "#faq"],
    ["会社", "#company"],
  ];

  return (
    <header className={`site-header ${scrolled ? "is-scrolled" : ""}`}>
      <div className="site-header-inner container">
        <a href="#top" className="logo">
          <span className="logo-mark" aria-hidden="true">
            <svg viewBox="0 0 40 40" width="28" height="28">
              <rect x="0.5" y="0.5" width="39" height="39" fill="none" stroke="currentColor" strokeWidth="1" />
              <path d="M10 28 L10 12 L20 12 Q26 12 26 18 Q26 23 20 23 L14 23 L26 28" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="square" />
            </svg>
          </span>
          <span className="logo-word">
            <span className="logo-word-1">RE</span>
            <span className="logo-word-2">PLANNING</span>
          </span>
        </a>
        <nav className="site-nav">
          {links.map(([label, href]) => (
            <a key={href} href={href}>{label}</a>
          ))}
        </nav>
        <a className="site-header-cta mono" href="tel:09077781111">
          <span className="pulse-dot" /> 090-7778-1111
        </a>
      </div>
    </header>
  );
}

function Footer() {
  return (
    <footer className="site-footer">
      <div className="container">
        <div className="footer-top">
          <div className="footer-brand">
            <div className="logo-word" style={{color: "#fff"}}>
              <span className="logo-word-1">RE</span>
              <span className="logo-word-2">PLANNING</span>
            </div>
            <p className="footer-tag">福岡の、ちゃんとした不用品回収。</p>
            <p className="mono footer-lic">福岡県公安委員会許可 第901071510030号</p>
          </div>
          <div className="footer-cols">
            <div>
              <h4>サービス</h4>
              <ul>
                <li><a href="#service">不用品回収・買取</a></li>
                <li><a href="#service">エアコン無料回収</a></li>
                <li><a href="#service">遺品整理・生前整理</a></li>
                <li><a href="#service">ゴミ屋敷片付け</a></li>
                <li><a href="#service">海外輸出・貿易</a></li>
              </ul>
            </div>
            <div>
              <h4>情報</h4>
              <ul>
                <li><a href="#price">料金表</a></li>
                <li><a href="#flow">ご依頼の流れ</a></li>
                <li><a href="#faq">よくあるご質問</a></li>
                <li><a href="#company">会社概要</a></li>
                <li><a href="#legal">プライバシー/特商法</a></li>
              </ul>
            </div>
            <div>
              <h4>お問い合わせ</h4>
              <ul>
                <li className="mono">TEL 090-7778-1111</li>
                <li>受付 8:00–22:00</li>
                <li>年中無休</li>
                <li><a href={LINE_URL} target="_blank" rel="noopener noreferrer">LINEで相談</a></li>
              </ul>
            </div>
          </div>
        </div>
        <div className="footer-bottom mono">
          <span>© 2026 RE PLANNING</span>
          <span>〒811-1232 福岡県那珂川市大字埋金68-277</span>
          <span>代表 髙下 啓</span>
        </div>
      </div>
    </footer>
  );
}

function MobileStickyCTA() {
  return (
    <div className="sticky-cta" role="navigation" aria-label="お問い合わせ">
      <a href="tel:09077781111" className="scta scta-tel">
        <span className="scta-icon" aria-hidden="true">
          <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M5 4h4l2 5-3 2a12 12 0 0 0 5 5l2-3 5 2v4a2 2 0 0 1-2 2A17 17 0 0 1 3 6a2 2 0 0 1 2-2z"/></svg>
        </span>
        <span>お電話</span>
      </a>
      <a href={LINE_URL} target="_blank" rel="noopener noreferrer" className="scta scta-line">
        <span className="scta-icon" aria-hidden="true">
          <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M21 11c0 4.4-4 8-9 8-1 0-2-.1-2.9-.4L5 20l1-3.2A7.3 7.3 0 0 1 3 11c0-4.4 4-8 9-8s9 3.6 9 8z"/></svg>
        </span>
        <span>LINEで相談</span>
      </a>
    </div>
  );
}

window.Header = Header;
window.Footer = Footer;
window.MobileStickyCTA = MobileStickyCTA;