// Top banners: alert bar, header, hero, trust bar, stat band

const AlertBar = () => {
  const items = [
    "雨漏り119番",
    "5月限定キャンペーン実施中",
    "ドローン点検 無料 即日対応",
    "火災保険申請サポート 無料",
    "創業30年 累計施工 8,200件突破",
  ];
  return (
    <div className="alert-bar">
      <div className="scroll">
        {[...items, ...items].map((t, i) => (
          <span key={i}>★ <span className="pop">{t}</span></span>
        ))}
      </div>
    </div>
  );
};

const TopInfo = () => (
  <div className="top-info">
    <div className="wrap">
      <div className="crumbs">HOME ＞ 屋根修理・雨漏り専門店</div>
      <div className="badges">
        <span className="badge">建設業許可</span>
        <span className="badge">瓦屋根診断技士</span>
        <span className="badge">雨漏り診断士</span>
        <span className="badge">ISO 9001</span>
      </div>
    </div>
  </div>
);

const Header = () => (
  <header className="header">
    <div className="wrap">
      <div className="logo">
        <div className="mark">屋根</div>
        <div className="text">
          <div className="sub">創業30年 / 地域密着</div>
          <div className="name">屋根修理レスキュー本舗</div>
          <div className="en">YANE REPAIR RESCUE HONPO</div>
        </div>
      </div>
      <div className="header-claims">
        <div className="claim-chip">
          <span className="big">★4.92</span>
          <span>Google<br/>口コミ評価</span>
        </div>
        <div className="claim-chip">
          <span className="big">8,200</span>
          <span>件以上<br/>累計実績</span>
        </div>
        <div className="claim-chip">
          <span className="big">10年</span>
          <span>自社<br/>保証</span>
        </div>
      </div>
      <div className="header-cta">
        <div className="tel-block">
          <span className="lbl">通話無料 24時間受付</span>
          <div className="num">0120-XXX-XXX</div>
          <div className="hrs">受付：8:00〜20:00 / 年中無休</div>
        </div>
        <button className="cta-btn green">
          <span>無料見積</span>
          <span className="big">▶ FORM</span>
        </button>
        <button className="cta-btn orange">
          <span>LINEで</span>
          <span className="big">▶ 相談</span>
        </button>
      </div>
    </div>
  </header>
);

const GNav = () => (
  <nav className="gnav">
    <div className="wrap">
      {NAV.map((n, i) => (
        <a key={i} href="#">
          {n.jp}
          <span className="en">{n.en}</span>
        </a>
      ))}
    </div>
  </nav>
);

const Hero = () => (
  <section className="hero">
    <div className="wrap">
      <div className="hero-main">
        <span className="hero-tag">創業30年・地域密着<span className="y"> / 累計8,200件</span></span>
        <h1>
          <span className="red">雨漏り</span>から<br/>
          おうちを守る<br/>
          <span className="yellow">屋根の専門店</span>
        </h1>
        <div className="hero-bullets">
          {HERO_BULLETS.map((b, i) => (
            <div key={i} className={"hero-bullet" + (i === 1 ? " alt" : "")}>{b}</div>
          ))}
        </div>

        <div className="hero-price">
          <div className="price-card">
            <div className="ttl"><span>屋根カバー工法</span><span>30坪目安</span></div>
            <div className="price">
              <span className="strike">¥980,000</span>
              <span className="tilde">税込 </span>¥<span style={{fontSize:"54px"}}>580,000</span><span className="yen">〜</span>
            </div>
            <div className="note">既存屋根の上から新しい屋根材を被せる工法。下地はそのまま、工期短縮＆コスト圧縮。</div>
          </div>
          <div className="price-card">
            <div className="ttl"><span>雨漏り応急処置</span><span>1ヶ所</span></div>
            <div className="price">
              <span className="strike">¥58,000</span>
              <span className="tilde">税込 </span>¥<span style={{fontSize:"54px"}}>30,000</span><span className="yen">〜</span>
            </div>
            <div className="note">原因箇所を特定し、シーリング／ブルーシート等で即日応急対応します。</div>
          </div>
        </div>
      </div>

      <div className="hero-side">
        <div className="hero-photo" style={{backgroundImage: "url(./assets/hero.jpg)", backgroundSize: "cover", backgroundPosition: "center"}}>
          <div className="stamp">
            <span className="big">最短</span>
            即日<br/>調査
          </div>
        </div>
        <div className="review-card">
          <div className="num">4.92<span className="small">/5.0</span></div>
          <div>
            <h3>Google口コミ高評価</h3>
            <div className="stars">★★★★★</div>
            <div style={{fontSize:11,color:"#555"}}>口コミ件数 312件（2026.05.10時点）</div>
          </div>
        </div>
        <div className="hero-form-mini">
          <h3>
            まずは無料診断！<br/>
            <span className="sm">電話／フォーム／LINEで受付中</span>
          </h3>
          <button className="b">最短<br/>即日対応</button>
        </div>
      </div>
    </div>
  </section>
);

const TrustBar = () => (
  <div className="trust-bar">
    <div className="wrap">
      <div className="trust-cell">
        <span className="lbl">創業</span>
        <div className="big">30<span className="u">年</span></div>
        <div className="sub">地域密着・自社施工</div>
      </div>
      <div className="trust-cell">
        <span className="lbl">累計実績</span>
        <div className="big">8,200<span className="u">件＋</span></div>
        <div className="sub">2026年5月時点</div>
      </div>
      <div className="trust-cell">
        <span className="lbl">口コミ評価</span>
        <div className="big">4.92<span className="u">/5.0</span></div>
        <div className="sub">Google レビュー</div>
      </div>
      <div className="trust-cell">
        <span className="lbl">保証期間</span>
        <div className="big">最長10<span className="u">年</span></div>
        <div className="sub">自社＋メーカー</div>
      </div>
      <div className="trust-cell">
        <span className="lbl">対応スピード</span>
        <div className="big">即日<span className="u">対応</span></div>
        <div className="sub">8:00〜20:00 年中無休</div>
      </div>
    </div>
  </div>
);

const StatBand = () => (
  <div className="stat-band">
    <div className="wrap">
      <div className="item">
        <span className="lbl">こんなお悩みありませんか？</span>
        <div className="num">No.<span className="u">1</span></div>
        <div className="sub">天井にシミ・雨漏り</div>
      </div>
      <div className="item">
        <span className="lbl">屋根劣化サイン</span>
        <div className="num">No.<span className="u">2</span></div>
        <div className="sub">瓦のズレ・棟板金浮き</div>
      </div>
      <div className="item">
        <span className="lbl">よくある相談</span>
        <div className="num">No.<span className="u">3</span></div>
        <div className="sub">外壁の色あせ・カビ</div>
      </div>
      <div className="item">
        <span className="lbl">放置のリスク</span>
        <div className="num">No.<span className="u">4</span></div>
        <div className="sub">家全体の構造劣化</div>
      </div>
    </div>
  </div>
);

const CampaignRow = () => (
  <section className="section">
    <div className="wrap">
      <div className="sec-head">
        <span className="kicker">CAMPAIGN</span>
        <h2><span className="red">5月限定</span> <span className="yellow">３大特典</span> 実施中</h2>
        <p className="sub">この機会にぜひご利用ください。終了間近につき早めのお問合せを推奨します。</p>
      </div>
      <div className="campaign-row">
        {CAMPAIGNS.map((c, i) => (
          <div key={i} className={"cbanner " + c.tone}>
            <span className="stamp-tag">{c.stamp}</span>
            <h3>
              {c.title[0]}<span className="y huge">{c.title[1]}</span>{c.title[2]}
            </h3>
            <div style={{fontWeight:900,fontSize:18,marginTop:4}}>{c.big}</div>
            <small>{c.desc}</small>
            <span className="due">{c.due}</span>
            <span className="ribbon">{c.ribbon}</span>
          </div>
        ))}
      </div>
    </div>
  </section>
);

Object.assign(window, {
  AlertBar, TopInfo, Header, GNav, Hero, TrustBar, StatBand, CampaignRow,
});