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

const AlertBar = () => {
  const items = [
    "おかげさまで 創業159年!!",
    "群馬・関東一円の総合屋根工事",
    "明治元年（1868年）創業",
    "KMEW・ROOF TOSTEM 取扱",
    "屋根・雨樋・外装・太陽光発電工事",
  ];
  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>
      </div>
    </div>
  </div>
);

const Header = () => (
  <header className="header">
    <div className="wrap">
      <div className="logo">
        <div className="mark">屋根</div>
        <div className="text">
          <div className="sub">創業159年 / 関東一円</div>
          <div className="name">株式会社 中川</div>
          <div className="en">NAKAGAWA</div>
        </div>
      </div>
      <div className="header-claims">
        <div className="claim-chip">
          <span className="big">159年</span>
          <span>明治元年<br/>創業</span>
        </div>
        <div className="claim-chip">
          <span className="big">4拠点</span>
          <span>関東<br/>広域対応</span>
        </div>
        <div className="claim-chip">
          <span className="big">総合</span>
          <span>屋根工事<br/>一式</span>
        </div>
      </div>
      <div className="header-cta">
        <div className="tel-block">
          <span className="lbl">お電話受付</span>
          <div className="num">0270-25-2259</div>
          <div className="hrs">受付：9:00〜18:00 / 日・祝休</div>
        </div>
        <button className="cta-btn green">
          <span>無料見積</span>
          <span className="big">▶ FORM</span>
        </button>
      </div>
    </div>
  </header>
);

const GNav = () => (
  <nav className="gnav">
    <div className="wrap">
      <a href="/" className="home-link">
        ホーム
        <span className="en">HOME</span>
      </a>
      {NAV.map((n, i) => (
        <a key={i} href={n.path || n.anchor || "#"}>
          {n.jp}
          <span className="en">{n.en}</span>
        </a>
      ))}
    </div>
  </nav>
);

const Hero = () => (
  <section className="hero" style={{backgroundImage: "linear-gradient(rgba(247,241,230,0.55), rgba(247,241,230,0.55)), url(/assets/hero_bg.jpg)", backgroundSize: "cover", backgroundPosition: "center"}}>
    <div className="wrap">
      <div className="hero-main">
        <span className="hero-tag">創業159年<span className="y"> / 関東一円・4拠点</span></span>
        <h1>
          <span className="yellow">おかげさまで</span><br/>
          <span className="red">創業159年!!</span>
        </h1>
        <p style={{fontSize:18,fontWeight:900,color:"#fff",background:"#2C3E5F",padding:"14px 18px",margin:"16px 0",lineHeight:1.5}}>
          強く、美しく、施工が確実！<br/>
          創業159年の伝統技術と信頼でお届けする総合屋根工事。
        </p>
        <div className="hero-bullets">
          {HERO_BULLETS.map((b, i) => (
            <div key={i} className={"hero-bullet" + (i === 1 ? " alt" : "")}>{b}</div>
          ))}
        </div>
      </div>

      <div className="hero-side">
        <div className="hero-photo" style={{backgroundImage: "url(/assets/hero.jpg)", backgroundSize: "cover", backgroundPosition: "center"}}>
        </div>
        <div className="hero-form-mini">
          <div>
            <h3>
              まずはお電話で<br/>
              <span className="sm">9:00〜18:00 / 日・祝休</span>
            </h3>
            <a href="tel:0270252259" className="phone-bold">
              <span className="ic">📞</span>
              <span>
                <span className="num">0270-25-2259</span>
                <span className="lbl">お気軽にご相談ください</span>
              </span>
            </a>
          </div>
          <button className="b">無料<br/>お見積<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">159<span className="u">年</span></div>
        <div className="sub">明治元年（1868年）〜</div>
      </div>
      <div className="trust-cell">
        <span className="lbl">取扱メーカー</span>
        <div className="big" style={{fontSize:20}}>KMEW<br/>ROOF TOSTEM</div>
        <div className="sub">主要メーカー</div>
      </div>
      <div className="trust-cell">
        <span className="lbl">営業所</span>
        <div className="big">4<span className="u">拠点</span></div>
        <div className="sub">伊勢崎/波志江/赤堀/前橋</div>
      </div>
      <div className="trust-cell">
        <span className="lbl">業務範囲</span>
        <div className="big" style={{fontSize:20}}>総合<br/>屋根工事</div>
        <div className="sub">屋根・雨樋・外装・太陽光</div>
      </div>
      <div className="trust-cell">
        <span className="lbl">対応エリア</span>
        <div className="big" style={{fontSize:22}}>関東一円</div>
        <div className="sub">資本金1000万円</div>
      </div>
    </div>
  </div>
);

const StatBand = () => (
  <div className="stat-band">
    <div className="wrap">
      <div className="worries-head">
        <span className="kicker-white">CHECK</span>
        <h3>こんな <span className="y">お悩み</span> ありませんか？</h3>
        <p>1つでも当てはまったら、まずはお電話でご相談ください。</p>
      </div>
      <div className="worries-grid">
        <div className="worry-item">
          <span className="check">✔</span>
          <div className="txt">
            <b>天井にシミ・雨漏り</b>
            <small>放置すると下地まで腐食します</small>
          </div>
        </div>
        <div className="worry-item">
          <span className="check">✔</span>
          <div className="txt">
            <b>瓦のズレ・棟板金の浮き</b>
            <small>台風前にチェックが必要です</small>
          </div>
        </div>
        <div className="worry-item">
          <span className="check">✔</span>
          <div className="txt">
            <b>屋根材の色あせ・劣化</b>
            <small>葺き替え・カバー工法 / 雨樋・外装まで総合対応</small>
          </div>
        </div>
        <div className="worry-item">
          <span className="check">✔</span>
          <div className="txt">
            <b>築20年以上・点検したことがない</b>
            <small>点検・メンテナンスをお勧めします</small>
          </div>
        </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">[ 季節キャンペーン ]</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}
            style={c.bg ? {
              backgroundImage: `linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.65)), url(${c.bg})`,
              backgroundSize: "cover",
              backgroundPosition: "center",
              color: "#fff",
              textShadow: "0 1px 4px rgba(0,0,0,0.5)",
            } : {}}
          >
            <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,
});