// Body sections: reasons, services, works, reviews, flow, faq, area, contact, footer

const ReasonsSection = ({ linkTo }) => (
  <section id="reason" className="section cream">
    <div className="wrap">
      <div className="sec-head">
        <span className="kicker">REASON</span>
        <h2>レスキュー本舗が <span className="red">選ばれる</span> <span className="yellow">3つの理由</span></h2>
        <p className="sub">創業30年、地域に根差した職人集団だからできること。</p>
        {linkTo && <a href={linkTo} className="section-more-pill">詳しく見る →</a>}
      </div>
      <div className="reasons-grid">
        {REASONS.map((r, i) => (
          <div key={i} className="reason">
            <div className="num">REASON <b>0{i+1}</b></div>
            <div
              className="icon"
              style={r.img ? {
                backgroundImage: `url(${r.img})`,
                backgroundSize: "cover",
                backgroundPosition: "center",
                color: "transparent",
                border: "none",
                height: 160,
              } : {}}
            >{r.icon}</div>
            <h3>{r.head[0]} <span className="mk">{r.head[1]}</span></h3>
            <p>{r.body}</p>
            <div className="check">
              {r.checks.map((c, j) => <span key={j}>✓ {c}</span>)}
            </div>
          </div>
        ))}
      </div>
      <div className="cert-row">
        {CERTS.map((c, i) => (
          <div key={i} className="cert">
            <div className="seal">{c[0]}</div>
            <div className="label">{c[1]}</div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

const ServicesSection = ({ linkTo }) => (
  <section id="service" className="section">
    <div className="wrap">
      <div className="sec-head">
        <span className="kicker">SERVICE & PRICE</span>
        <h2>
          {linkTo ? (
            <a href={linkTo} className="sec-title-link">
              サービス・<span className="red">わかりやすい</span><span className="yellow">料金表</span>
              <span className="sec-title-arrow">→</span>
            </a>
          ) : (
            <>サービス・<span className="red">わかりやすい</span><span className="yellow">料金表</span></>
          )}
        </h2>
        <p className="sub">表示価格は税込／30坪目安。詳細は無料現地調査にて算出します。</p>
      </div>
      <div className="svc-grid">
        {SERVICES.map((s, i) => (
          <a key={i} href={`/service/#svc-${i + 1}`} className="svc">
            <div className="img" style={s.img ? {backgroundImage: `url(${s.img})`, backgroundSize: "cover", backgroundPosition: "center"} : {}}>
              <span className="label">{s.tag}</span>
              <span className="more">詳細を見る →</span>
            </div>
            <div className="body">
              <h4>{s.name}</h4>
              <p>{s.desc}</p>
              <div className="price">
                <span className="lbl">税込</span>
                <span className="val">¥{s.price}<span className="y">{s.unit}</span></span>
              </div>
            </div>
          </a>
        ))}
      </div>
    </div>
  </section>
);

const WorksSection = ({ linkTo }) => (
  <section id="works" className="section stripe">
    <div className="wrap">
      <div className="sec-head">
        <span className="kicker">WORKS</span>
        <h2><span className="red">施工事例</span> <span className="yellow">ビフォーアフター</span></h2>
        <p className="sub">最新の現場から、リアルなお見積金額と工期を公開しています。</p>
        {linkTo && <a href={linkTo} className="section-more-pill">詳しく見る →</a>}
      </div>
      <div className="ba-row">
        {WORKS.map((w, i) => (
          <div key={i} className="ba-card">
            <h4>
              <span className="case-num">CASE {String(i + 1).padStart(2, "0")}</span>
              {w.addr} <span className="tag">{w.type}</span>
            </h4>
            <div className="ba-pair">
              <div className="ba-img" style={{backgroundImage: `url(${w.img_before})`, backgroundSize: "cover", backgroundPosition: "center"}}>
                <span className="corner">BEFORE</span>
              </div>
              <div className="arrow">▶</div>
              <div className="ba-img after" style={{backgroundImage: `url(${w.img_after})`, backgroundSize: "cover", backgroundPosition: "center"}}>
                <span className="corner">AFTER</span>
              </div>
            </div>
            <div className="ba-meta">
              <span>築年数：{w.age}</span>
              <span>工期：{w.days}</span>
              <span>費用：{w.cost}</span>
            </div>
            {w.story ? (
              <div className="ba-story">
                <div className="story-row">
                  <span className="story-label bg">背景</span>
                  <p>{w.story.background}</p>
                </div>
                <div className="story-row">
                  <span className="story-label fd">発見</span>
                  <p>{w.story.finding}</p>
                </div>
                <div className="story-row">
                  <span className="story-label wk">施工</span>
                  <p>{w.story.work}</p>
                </div>
                <div className="story-row voice">
                  <span className="story-label vc">お客様の声</span>
                  <p>{w.story.voice}</p>
                </div>
              </div>
            ) : (
              <p style={{fontSize:12,color:"#555",margin:"6px 0 0"}}>{w.note}</p>
            )}
          </div>
        ))}
      </div>
    </div>
  </section>
);

const FlowSection = ({ linkTo }) => (
  <section id="flow" className="section">
    <div className="wrap">
      <div className="sec-head">
        <span className="kicker">FLOW</span>
        <h2>お問合せから <span className="red">アフター</span> までの <span className="yellow">流れ</span></h2>
        <p className="sub">最短即日対応。お電話なら3分でご相談完了。</p>
        {linkTo && <a href={linkTo} className="section-more-pill">詳しく見る →</a>}
      </div>
      <div className="flow-row">
        {FLOW.map((f, i) => (
          <div key={i} className="flow-step">
            <span className="step-n">STEP {f.n}</span>
            <div
              className={"ic " + (f.img ? "ic-img" : "ic-emoji")}
              style={f.img ? {
                backgroundImage: `url(${f.img})`,
                backgroundSize: "cover",
                backgroundPosition: "center",
              } : {}}
            >{f.img ? "" : f.ic}</div>
            <h4>{f.h}</h4>
            <div className="sub">{f.sub || "担当者がご対応します。"}</div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

const ReviewsSection = () => (
  <section id="voice" className="section cream">
    <div className="wrap">
      <div className="sec-head">
        <span className="kicker">CUSTOMER VOICE</span>
        <h2><span className="red">お客様の声</span> <span className="yellow">312件</span> いただきました</h2>
        <p className="sub">アンケート回答そのまま掲載（一部抜粋）。</p>
      </div>
      <div className="review-row">
        {REVIEWS.map((r, i) => (
          <div key={i} className="review">
            <div className="head">
              <div className="avatar">{r.initial}</div>
              <div className="meta">
                <b>{r.name}</b><br/>
                {r.area}<br/>
                <span className="stars">{r.stars}</span>
              </div>
            </div>
            <div>
              {r.pills.map((p, j) => <span key={j} className="pill">{p}</span>)}
            </div>
            <h4>「{r.head}」</h4>
            <p>{r.body}</p>
          </div>
        ))}
      </div>
    </div>
  </section>
);

const CEOSection = ({ linkTo }) => (
  <section id="company" className="section cream">
    <div className="wrap">
      <div className="sec-head">
        <span className="kicker">CEO MESSAGE</span>
        <h2><span className="red">代表挨拶</span> 屋根の上から、ご挨拶</h2>
        <p className="sub">創業30年・3代目当主から、お客様へのお約束。</p>
        {linkTo && <a href={linkTo} className="section-more-pill">会社案内を見る →</a>}
      </div>

      <div className="ceo-block">
        <div className="ceo-photo" style={{backgroundImage: "url(/assets/ceo.jpg)", backgroundSize: "cover", backgroundPosition: "center"}}>
        </div>
        <div className="ceo-text">
          <span className="title-tag">代表取締役｜一級瓦屋根葺き技能士</span>
          <h3>「<span className="red">屋根</span>は、家族の暮らしを守る<br/><span className="yellow">最後の砦。</span>」</h3>
          {CEO.paragraphs.map((p, i) => <p key={i}>{p}</p>)}
          <div className="quote">
            {CEO.quote[0]}<span className="mk">{CEO.quote[1]}</span>
          </div>
          <div className="ceo-sign">
            <div>
              <div className="role">{CEO.role}</div>
              <div className="name">
                {CEO.name}
                <span className="en">{CEO.en}</span>
              </div>
            </div>
            <div className="hanko">高橋</div>
          </div>
        </div>
      </div>

      <div className="ceo-values">
        {CEO.values.map((v, i) => (
          <div key={i} className="v">
            <span className="n">{v.n}</span>
            <h4>{v.h}</h4>
            <p>{v.p}</p>
          </div>
        ))}
      </div>
    </div>
  </section>
);

const FAQSection = ({ linkTo }) => {
  const [open, setOpen] = React.useState(0);
  return (
    <section className="section">
      <div className="wrap">
        <div className="sec-head">
          <span className="kicker">FAQ</span>
          <h2><span className="red">よくある</span> <span className="yellow">ご質問</span></h2>
          {linkTo && <a href={linkTo} className="section-more-pill">21問すべて見る →</a>}
        </div>
        <div className="faq-list">
          {FAQS.map((f, i) => (
            <div key={i} className={"faq" + (open === i ? " open" : "")}>
              <div className="q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span className="mk">Q</span>
                <span>{f.q}</span>
                <span className="tg">＋</span>
              </div>
              <div className="a">
                <span className="mk">A</span>{f.a}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const AreaSection = () => (
  <section className="section stripe">
    <div className="wrap">
      <div className="sec-head">
        <span className="kicker">SERVICE AREA</span>
        <h2><span className="red">対応エリア</span> 首都圏 <span className="yellow">全域</span></h2>
        <p className="sub">エリア外の方もまずはお問合せください。</p>
      </div>

      <div
        style={{
          position: "relative",
          height: 460,
          borderRadius: 14,
          overflow: "hidden",
          marginBottom: 18,
          boxShadow: "0 8px 24px rgba(0,0,0,0.18)",
          backgroundColor: "#1a2333",
        }}
      >
        <div style={{
          position: "absolute", inset: 0,
          backgroundImage: "url(/assets/team.jpg)",
          backgroundSize: "cover",
          backgroundPosition: "center 28%",
        }}/>
        <div style={{
          position: "absolute", inset: 0,
          background: "linear-gradient(to bottom, rgba(10,20,40,0.05) 0%, rgba(10,20,40,0.10) 45%, rgba(10,20,40,0.78) 75%, rgba(10,20,40,0.92) 100%)",
        }}/>
        <div style={{
          position: "absolute", left: 0, right: 0, bottom: 0,
          padding: "0 32px 28px",
          color: "#fff",
          textAlign: "center",
          fontFamily: '"Zen Kaku Gothic New","Noto Sans JP",sans-serif',
        }}>
          <span style={{
            display: "inline-block",
            background: "rgba(255,255,255,0.12)",
            border: "1px solid rgba(255,255,255,0.55)",
            color: "#fff",
            fontWeight: 700,
            fontSize: 12,
            letterSpacing: "0.22em",
            padding: "5px 14px",
            borderRadius: 2,
            marginBottom: 14,
          }}>
            SERVICE AREA ／ 自社職人による直接施工
          </span>
          <h3 style={{
            margin: 0,
            fontFamily: '"Zen Kaku Gothic New","Noto Sans JP",sans-serif',
            fontWeight: 900,
            fontSize: 36,
            lineHeight: 1.35,
            letterSpacing: "0.04em",
            textShadow: "0 2px 12px rgba(0,0,0,0.55)",
          }}>
            東京23区と<span style={{color:"#ffd86b"}}>首都圏4県</span>、<br/>
            すべて自社職人が責任を持ってお伺いします。
          </h3>
          <p style={{
            marginTop: 14,
            fontSize: 13,
            fontWeight: 500,
            letterSpacing: "0.08em",
            color: "rgba(255,255,255,0.92)",
          }}>
            東京 ／ 神奈川 ／ 埼玉 ／ 千葉　— 創業30年・累計8,200件の施工実績
          </p>
        </div>
      </div>

      <div className="area-block-v2">
        <div className="area-tokyo">
          <div className="head">
            <span className="ribbon">本拠地</span>
            <h3>東京都</h3>
            <p>23区＋多摩地域 全域対応</p>
          </div>
          <div className="city-list">
            {AREAS.map((a, i) => (
              <span key={i} className="city">{a}</span>
            ))}
          </div>
        </div>
        <div className="area-other-row">
          <div className="prefecture">
            <div className="pref-head">
              <h4>神奈川県</h4>
              <span className="pref-en">KANAGAWA</span>
            </div>
            <p>横浜市・川崎市・相模原市・湘南エリア 他</p>
          </div>
          <div className="prefecture">
            <div className="pref-head">
              <h4>埼玉県</h4>
              <span className="pref-en">SAITAMA</span>
            </div>
            <p>さいたま市・川越市・所沢市・川口市 他</p>
          </div>
          <div className="prefecture">
            <div className="pref-head">
              <h4>千葉県</h4>
              <span className="pref-en">CHIBA</span>
            </div>
            <p>千葉市・船橋市・市川市・松戸市 他</p>
          </div>
        </div>
        <div className="area-callout">
          <div>
            <span className="kicker">SERVICE AREA</span>
            <p>「うちのエリアは対象？」とお迷いの方は、まずはお気軽にお電話ください。</p>
          </div>
          <a href="tel:0120-XXX-XXX" className="tel-cta">
            <span className="lbl">通話無料・24時間受付</span>
            <span className="num">0120-XXX-XXX</span>
          </a>
        </div>
      </div>
      <div style={{marginTop:14}}>
        <div className="news-block">
          <h3>📰 お知らせ・施工レポート</h3>
          <ul className="news-list">
            {NEWS.map((n, i) => (
              <li key={i}>
                <span className="date">{n.date}</span>
                <span className={"cat " + n.catClass}>{n.cat}</span>
                <span>{n.text}</span>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </div>
  </section>
);

const ContactSection = () => (
  <section id="contact" className="section dark">
    <div className="wrap">
      <div className="sec-head">
        <span className="kicker">CONTACT</span>
        <h2>まずは <span className="red">無料診断</span> をご依頼ください</h2>
        <p className="sub">電話・LINE・フォーム、ご都合のよい方法で受付中。</p>
      </div>
      <div className="form-grid">
        <div className="form-left">
          <h3>無料お見積りフォーム</h3>
          <p style={{fontSize:12,color:"#555",margin:"0 0 10px"}}>原則1営業日以内にご返信します。</p>
          <div className="row"><label>お名前<span className="req">必須</span></label><input placeholder="山田 太郎"/></div>
          <div className="row"><label>電話番号<span className="req">必須</span></label><input placeholder="03-1234-5678"/></div>
          <div className="row"><label>メール</label><input placeholder="example@mail.com"/></div>
          <div className="row"><label>ご住所<span className="req">必須</span></label><input placeholder="東京都〇〇区〇〇1-2-3"/></div>
          <div className="row"><label>ご相談内容<span className="req">必須</span></label>
            <select>
              <option>雨漏り修理</option>
              <option>屋根葺き替え</option>
              <option>カバー工法</option>
              <option>屋根塗装</option>
              <option>その他</option>
            </select>
          </div>
          <div className="row"><label>ご質問</label><textarea placeholder="気になる症状などをご記入ください"/></div>
          <button className="submit">無料で見積もりを依頼する</button>
        </div>

        <div className="form-right">
          <div className="big-tel">
            <span className="lbl">通話無料 / 24時間受付</span>
            <div className="num">0120-<span className="y">XXX</span>-XXX</div>
            <div className="hrs">受付：8:00〜20:00 / 年中無休</div>
          </div>
          <div className="line-cta">
            <div className="lg">LINE</div>
            <div>
              <h4>LINEで写真を送るだけ</h4>
              <p style={{margin:"2px 0 0",fontSize:12,lineHeight:1.5}}>気になる箇所の写真を送ると、最短当日にお見積りをお返しします。お友達登録だけでもOK。</p>
            </div>
            <div className="arrow">▶</div>
          </div>
          <div className="doc">
            <h4>📄 資料ダウンロード（無料）</h4>
            <p style={{margin:"2px 0 0",fontSize:12,lineHeight:1.55}}>
              「失敗しない屋根リフォーム業者の選び方」<br/>
              「火災保険活用ガイド〜給付金で修理〜」<br/>
              「カバー工法 vs 葺き替え 損しない判断軸」<br/>
              <span style={{color:"#555",fontSize:11}}>※フォームご記入後にダウンロードURLを送付</span>
            </p>
          </div>
          <div className="doc" style={{background:"#fff8d6",borderColor:"var(--orange)"}}>
            <h4 style={{color:"var(--red)"}}>🚨 緊急の雨漏りはお電話で！</h4>
            <p style={{margin:"2px 0 8px",fontSize:12,lineHeight:1.55}}>
              応急処置のみのご依頼も承ります。台風後の漏水・割れた瓦・剥がれた棟板金など、まずはご一報を。
            </p>
            <a href="tel:0120-XXX-XXX" className="phone-bold emergency">
              <span className="ic">📞</span>
              <span>
                <span className="num">0120-XXX-XXX</span>
                <span className="lbl">24時間受付 ／ 通話無料</span>
              </span>
            </a>
            <p style={{margin:"6px 0 0",color:"#555",fontSize:11}}>
              ※深夜・早朝は留守番電話へ。折返しご連絡します。
            </p>
          </div>
        </div>
      </div>
    </div>
  </section>
);

const Footer = () => (
  <footer className="footer">
    <div className="wrap">
      <div className="info">
        <h4>屋根修理レスキュー本舗</h4>
        <p><b>本社：</b>東京都板橋区〇〇1-2-3 レスキュービル4F</p>
        <p><b>営業時間：</b>8:00〜20:00 / <b>定休日：</b>年中無休</p>
        <p><b>TEL：</b>0120-XXX-XXX / 03-1234-5678</p>
        <p><b>許可番号：</b>東京都知事許可（般-3）第12345号</p>
        <p style={{marginTop:10,fontSize:11,opacity:.7}}>
          ※本サイトはダミーのデモ用デザインです。実在の事業者ではありません。
        </p>
      </div>
      <div>
        <div className="foot-links">
          {FOOT_LINKS.map((col, i) => (
            <div key={i}>
              <h4>{["サービス一覧","メニュー","コンテンツ","会社情報"][i]}</h4>
              <ul>
                {col.map((l, j) => (
                  <li key={j}>
                    <a href={typeof l === "string" ? "#" : (l.path || "#")}>
                      {typeof l === "string" ? l : l.label}
                    </a>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </div>
    </div>
    <div className="wrap copy">
      © 2026 屋根修理レスキュー本舗（架空のデザインデモ） All Rights Reserved.
    </div>
  </footer>
);

const StickyCTA = () => (
  <div className="sticky-cta">
    <div className="wrap">
      <div className="msg">
        <span className="y">★ 今だけ </span>5月限定 総額20%OFF キャンペーン実施中！<br/>
        <span className="small">無料調査・無料見積り・無料保険サポート</span>
      </div>
      <div className="tel">
        <div>
          <div style={{fontSize:10,fontWeight:700}}>通話無料</div>
          <div className="num">0120-XXX-XXX</div>
        </div>
      </div>
      <button className="btn green">▶ 無料見積フォーム</button>
      <button className="btn orange">▶ LINEで相談</button>
    </div>
  </div>
);

const FloatSide = () => (
  <div className="float-side">
    <a href="#" className="red">📞 電話相談</a>
    <a href="#" className="green">💬 LINE</a>
    <a href="#" className="navy">📝 無料見積</a>
  </div>
);

// ============================================================================
// FAQ Detail (categorized FAQ for /faq/ page)
// ============================================================================

const FAQDetailSection = () => {
  const [openItems, setOpenItems] = React.useState({});
  const toggle = (key) => setOpenItems(o => ({ ...o, [key]: !o[key] }));
  const totalItems = FAQ_DETAIL.reduce((sum, cat) => sum + cat.items.length, 0);
  return (
    <section className="section">
      <div className="wrap">
        <div className="sec-head">
          <span className="kicker">FAQ</span>
          <h2><span className="red">よくある</span> <span className="yellow">ご質問</span> {totalItems}件</h2>
          <p className="sub">5つのカテゴリで合計{totalItems}問のご質問にお答えしています。クリックすると詳しい回答が開きます。</p>
        </div>

        <div className="faq-cat-nav">
          {FAQ_DETAIL.map((cat, i) => (
            <a
              key={i}
              href={`#faq-cat-${i + 1}`}
              className={"faq-cat-btn cat-" + cat.catColor}
            >
              <span className="icon">{cat.icon}</span>
              <span className="lbl">{cat.cat}</span>
              <span className="count">{cat.items.length}</span>
            </a>
          ))}
        </div>

        {FAQ_DETAIL.map((cat, ci) => (
          <div key={ci} id={`faq-cat-${ci + 1}`} className={"faq-cat-block cat-" + cat.catColor}>
            <div className="faq-cat-header">
              <span className="icon">{cat.icon}</span>
              <h3>{cat.cat}</h3>
              <span className="cat-count">{cat.items.length}問</span>
            </div>
            <div className="faq-cat-items">
              {cat.items.map((item, ii) => {
                const key = `${ci}-${ii}`;
                const isOpen = openItems[key];
                return (
                  <div key={ii} className={"faq-d-item" + (isOpen ? " open" : "")}>
                    <button
                      className="faq-d-q"
                      onClick={() => toggle(key)}
                      aria-expanded={isOpen}
                    >
                      <span className="mark">Q</span>
                      <span className="text">{item.q}</span>
                      <span className="toggle">{isOpen ? "−" : "+"}</span>
                    </button>
                    {isOpen && (
                      <div className="faq-d-a">
                        <span className="mark">A</span>
                        <p>{item.a}</p>
                      </div>
                    )}
                  </div>
                );
              })}
            </div>
          </div>
        ))}

        <div className="faq-bottom-cta">
          <p>このページに載っていないご質問もお気軽に。</p>
          <a href="/contact/" className="faq-bottom-link">お問合せフォームへ →</a>
        </div>
      </div>
    </section>
  );
};

// ============================================================================
// Company Leader (CEO profile + Q&A for /company/ page)
// ============================================================================

const CompanyLeaderSection = () => (
  <section className="section">
    <div className="wrap">
      <div className="sec-head">
        <span className="kicker">LEADER</span>
        <h2><span className="red">代表者</span> プロフィール</h2>
        <p className="sub">3代目当主・高橋健一のこれまでの歩み、職人としての哲学、お客様への想いを公開しています。</p>
      </div>

      <div className="leader-profile">
        <div className="leader-photo" style={{backgroundImage: "url(/assets/ceo.jpg)", backgroundSize: "cover", backgroundPosition: "center"}}>
        </div>
        <div className="leader-info">
          <span className="leader-role">{CEO_PROFILE.role}</span>
          <h3 className="leader-name">
            {CEO_PROFILE.name}
            <span className="leader-en">{CEO_PROFILE.en}</span>
          </h3>
          <div className="leader-motto">「{CEO_PROFILE.motto}」</div>
          <dl className="leader-meta">
            <dt>年齢</dt><dd>{CEO_PROFILE.age}</dd>
            <dt>出身</dt><dd>{CEO_PROFILE.hometown}</dd>
            <dt>資格</dt>
            <dd>
              {CEO_PROFILE.qualifications.map((q, i) => (
                <span key={i} className="leader-qual">{q}</span>
              ))}
            </dd>
          </dl>
        </div>
      </div>

      <div className="leader-career">
        <h3 className="leader-section-title">経歴</h3>
        <div className="leader-career-list">
          {CEO_PROFILE.career.map((c, i) => (
            <div key={i} className="leader-career-item">
              <span className="year">{c.year}年</span>
              <p>{c.body}</p>
            </div>
          ))}
        </div>
      </div>

      <div className="leader-qa">
        <h3 className="leader-section-title">代表へのインタビュー</h3>
        <div className="leader-qa-list">
          {CEO_PROFILE.qa.map((qa, i) => (
            <div key={i} className="leader-qa-item">
              <div className="qa-q">
                <span className="qa-mark">Q</span>
                <p>{qa.q}</p>
              </div>
              <div className="qa-a">
                <span className="qa-mark">A</span>
                <p>{qa.a}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  </section>
);

// ============================================================================
// Company Info + History (for /company/ page)
// ============================================================================

const CompanyInfoSection = () => (
  <section className="section">
    <div className="wrap">
      <div className="sec-head">
        <span className="kicker">COMPANY PROFILE</span>
        <h2><span className="red">会社</span><span className="yellow">概要</span></h2>
        <p className="sub">創業30年、地域に根差した自社施工チーム。許認可・保険・所属団体まで全て公開しています。</p>
      </div>
      <div className="company-info-grid">
        <table className="company-info-table">
          <tbody>
            {COMPANY_INFO.map((c, i) => (
              <tr key={i}>
                <th>{c.lbl}</th>
                <td>{c.val}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  </section>
);

const HistorySection = () => (
  <section className="section cream">
    <div className="wrap">
      <div className="sec-head">
        <span className="kicker">HISTORY</span>
        <h2><span className="red">沿革</span> 30年の歩み</h2>
        <p className="sub">創業1996年、初代・勝雄から現在の3代目・健一まで。地域の屋根を守り続けてきた30年の物語。</p>
      </div>
      <div className="history-timeline">
        {HISTORY.map((h, i) => (
          <div key={i} className="history-item">
            <div className="history-year">{h.year}</div>
            <div className="history-line">
              <span className="dot" />
            </div>
            <div className="history-body">
              <h3>{h.h}</h3>
              <p>{h.body}</p>
            </div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

// ============================================================================
// Flow details (vertical timeline with full info per step)
// ============================================================================

const FlowDetailSection = () => (
  <section className="section">
    <div className="wrap">
      <div className="sec-head">
        <span className="kicker">FLOW DETAIL</span>
        <h2><span className="red">6ステップ</span> で安心の <span className="yellow">施工フロー</span></h2>
        <p className="sub">お問合せから施工完了、そしてアフターまで。各ステップで「お客様にしていただくこと」「弊社が行うこと」を明確にしています。</p>
      </div>

      <div className="flow-timeline">
        {FLOW.map((f, i) => (
          <div key={i} className="flow-tl-step">
            <div className="flow-tl-marker">
              <span className="flow-tl-num">STEP {f.n}</span>
              <div
                className={"flow-tl-icon" + (f.img ? " has-img" : "")}
                style={f.img ? {
                  backgroundImage: `url(${f.img})`,
                  backgroundSize: "cover",
                  backgroundPosition: "center",
                } : {}}
              >{f.img ? "" : f.ic}</div>
              {i < FLOW.length - 1 && <div className="flow-tl-line" />}
            </div>
            <div className="flow-tl-body">
              <div className="flow-tl-head">
                <h3>{f.h}</h3>
                <span className="flow-tl-sub">{f.sub}</span>
                <span className="flow-tl-duration">⏱ {f.duration}</span>
              </div>
              <p className="flow-tl-detail">{f.detail}</p>
              <div className="flow-tl-actions">
                <div className="flow-tl-action customer">
                  <span className="lbl">お客様にしていただくこと</span>
                  <p>{f.customer}</p>
                </div>
                <div className="flow-tl-action staff">
                  <span className="lbl">レスキュー本舗が行うこと</span>
                  <p>{f.staff}</p>
                </div>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

// ============================================================================
// Works details (detailed expansion with filter + large cards)
// ============================================================================

const WorksDetailSection = () => {
  const [filter, setFilter] = React.useState("all");
  const visible = WORKS.filter(w => filter === "all" || w.type_key === filter);
  const totalCost = WORKS.reduce((sum, w) => sum + parseInt(w.cost.replace(/[^\d]/g, ""), 10), 0);
  const avgRating = (WORKS.reduce((s, w) => s + (w.rating || 5), 0) / WORKS.length).toFixed(1);
  return (
    <section className="section">
      <div className="wrap">
        <div className="sec-head">
          <span className="kicker">PORTFOLIO</span>
          <h2><span className="red">施工事例</span> 詳細レポート</h2>
          <p className="sub">実際の現場で起きていたこと、お客様のご要望、職人の判断、工事完了後の変化まで。リアルなプロセスを写真とストーリーでご紹介します。</p>
        </div>

        <div className="works-stats">
          <div className="works-stat">
            <span className="lbl">公開事例数</span>
            <span className="val">{WORKS.length}<span className="u">件</span></span>
          </div>
          <div className="works-stat">
            <span className="lbl">累計実績</span>
            <span className="val">8,200<span className="u">件＋</span></span>
          </div>
          <div className="works-stat">
            <span className="lbl">平均評価</span>
            <span className="val">{avgRating}<span className="u">/5.0</span></span>
          </div>
          <div className="works-stat">
            <span className="lbl">対応エリア</span>
            <span className="val">首都圏<span className="u">全域</span></span>
          </div>
        </div>

        <div className="works-filter">
          {WORK_FILTERS.map(f => (
            <button
              key={f.key}
              className={"works-filter-btn" + (filter === f.key ? " active" : "")}
              onClick={() => setFilter(f.key)}
            >
              {f.label}
              <span className="count">{f.key === "all" ? WORKS.length : WORKS.filter(w => w.type_key === f.key).length}</span>
            </button>
          ))}
        </div>

        {visible.length === 0 && (
          <div className="works-empty">該当する事例は現在ありません。他のフィルターをお試しください。</div>
        )}

        <div className="works-detail-list">
          {visible.map((w, i) => {
            const idx = WORKS.indexOf(w);
            return (
              <div key={i} className="works-detail-card">
                <div className="works-detail-head">
                  <span className="case-num">CASE {String(idx + 1).padStart(2, "0")}</span>
                  <h3>{w.addr}</h3>
                  <span className="type-tag">{w.type}</span>
                  <span className="rating">
                    <span className="stars">{"★".repeat(w.rating || 5)}</span>
                    <span className="rate-text">{w.rating_text}</span>
                  </span>
                </div>

                <div className="works-detail-grid">
                  <div className="works-detail-photos">
                    <div className="photo-row">
                      <div className="photo before" style={{backgroundImage: `url(${w.img_before})`, backgroundSize: "cover", backgroundPosition: "center"}}>
                        <span className="ph-label">BEFORE</span>
                      </div>
                      <div className="photo after" style={{backgroundImage: `url(${w.img_after})`, backgroundSize: "cover", backgroundPosition: "center"}}>
                        <span className="ph-label">AFTER</span>
                      </div>
                    </div>
                  </div>

                  <div className="works-detail-info">
                    <dl className="meta-table">
                      <dt>築年数</dt><dd>{w.age}</dd>
                      <dt>家族構成</dt><dd>{w.family || "ー"}</dd>
                      <dt>工期</dt><dd>{w.days}</dd>
                      <dt>費用（税込）</dt><dd className="cost">{w.cost}</dd>
                      <dt>担当</dt><dd>{w.staff || "ー"}</dd>
                      <dt>関連サービス</dt>
                      <dd>
                        {w.related_service ? (
                          <a href={w.related_service.path} className="rel-link">{w.related_service.name} →</a>
                        ) : "ー"}
                      </dd>
                    </dl>
                  </div>
                </div>

                {w.story && (
                  <div className="works-detail-story">
                    <div className="story-step">
                      <div className="step-mark bg">01</div>
                      <div className="step-body">
                        <h4>ご相談の背景</h4>
                        <p>{w.story.background}</p>
                      </div>
                    </div>
                    <div className="story-step">
                      <div className="step-mark fd">02</div>
                      <div className="step-body">
                        <h4>現地調査での発見</h4>
                        <p>{w.story.finding}</p>
                      </div>
                    </div>
                    <div className="story-step">
                      <div className="step-mark wk">03</div>
                      <div className="step-body">
                        <h4>施工内容</h4>
                        <p>{w.story.work}</p>
                      </div>
                    </div>
                    {w.episode && (
                      <div className="story-step">
                        <div className="step-mark ep">04</div>
                        <div className="step-body">
                          <h4>現場エピソード</h4>
                          <p>{w.episode}</p>
                        </div>
                      </div>
                    )}
                    <div className="story-voice">
                      <span className="voice-mark">お客様の声</span>
                      <p>{w.story.voice}</p>
                    </div>
                  </div>
                )}
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
};

// ============================================================================
// Service details (detailed expansion of each SERVICES item)
// ============================================================================

const ServiceDetailsSection = () => (
  <section className="section">
    <div className="wrap">
      <div className="sec-head">
        <span className="kicker">SERVICE DETAILS</span>
        <h2><span className="red">各サービス</span> の <span className="yellow">詳細</span></h2>
        <p className="sub">8つの工事メニューを、症状例・工法・工期・メリット・注意点まで丁寧にご説明します。</p>
      </div>
      {SERVICES.map((s, i) => (
        <div key={i} id={`svc-${i + 1}`} className="svc-detail">
          <div className="svc-detail-head">
            <div className="svc-detail-icon" style={s.img ? {
              backgroundImage: `url(${s.img})`,
              backgroundSize: "cover",
              backgroundPosition: "center",
            } : {}}>
              <span className="label">{s.tag}</span>
            </div>
            <div className="svc-detail-title">
              <span className="num">SERVICE {String(i + 1).padStart(2, "0")}</span>
              <h3>{s.name}</h3>
              <p className="desc">{s.desc}</p>
            </div>
            <div className="price">
              <span className="lbl">税込</span>
              <span className="val">¥{s.price}<span className="y">{s.unit}</span></span>
            </div>
          </div>
          {s.detail && (
            <div className="svc-detail-body">
              <p className="lead">{s.detail.lead}</p>
              <div className="svc-detail-grid">
                <div className="block symptoms">
                  <h4>✔ こんな症状の方に</h4>
                  <ul>
                    {s.detail.symptoms.map((sym, j) => <li key={j}>{sym}</li>)}
                  </ul>
                </div>
                <div className="block methods">
                  <h4>🛠 工法・工程</h4>
                  <ul>
                    {s.detail.methods.map((m, j) => <li key={j}>{m}</li>)}
                  </ul>
                </div>
                <div className="block duration">
                  <h4>⏱ 工期目安</h4>
                  <p>{s.detail.duration}</p>
                </div>
                <div className="block pros">
                  <h4>👍 メリット</h4>
                  <ul>
                    {s.detail.pros.map((p, j) => <li key={j}>{p}</li>)}
                  </ul>
                </div>
              </div>
            </div>
          )}
        </div>
      ))}
    </div>
  </section>
);

// ============================================================================
// Section-bottom "See more" CTA (for home page, links to detail pages)
// ============================================================================

const SectionMore = ({ href, label, sublabel, en }) => (
  <div className="section-more">
    <div className="wrap">
      <a href={href} className="section-more-link">
        <div className="section-more-text">
          <span className="lbl">{label}</span>
          {sublabel && <span className="sub">{sublabel}</span>}
        </div>
        <span className="section-more-arrow">
          <span className="en">{en || "READ MORE"}</span>
          <span className="arr">→</span>
        </span>
      </a>
    </div>
  </div>
);

// ============================================================================
// Page-level layouts (for multi-page HP build)
// ============================================================================

const PageHero = ({ title, en, sub, breadcrumbs }) => (
  <section className="page-hero">
    <div className="wrap">
      {breadcrumbs && (
        <div className="page-hero-crumbs">
          <a href="/">HOME</a>
          {breadcrumbs.map((b, i) => (
            <React.Fragment key={i}>
              <span className="sep">＞</span>
              {b.path ? <a href={b.path}>{b.label}</a> : <span>{b.label}</span>}
            </React.Fragment>
          ))}
        </div>
      )}
      <span className="kicker">{en}</span>
      <h1>{title}</h1>
      {sub && <p className="page-hero-sub">{sub}</p>}
    </div>
  </section>
);

const PageLayout = ({ pageLabel, children, showAlertBar = true, showStickyCTA = true, showFloatSide = true }) => {
  React.useEffect(() => {
    if (window.location.hash) {
      const target = window.location.hash;
      const tryScroll = (attempts = 0) => {
        const el = document.querySelector(target);
        if (el) {
          el.scrollIntoView({ behavior: "smooth", block: "start" });
        } else if (attempts < 10) {
          setTimeout(() => tryScroll(attempts + 1), 100);
        }
      };
      setTimeout(() => tryScroll(0), 150);
    }
  }, []);
  return (
    <div data-screen-label={pageLabel}>
      {showAlertBar && <AlertBar />}
      <TopInfo />
      <Header />
      <GNav />
      <main>{children}</main>
      <Footer />
      {showStickyCTA && <StickyCTA />}
      {showFloatSide && <FloatSide />}
    </div>
  );
};

Object.assign(window, {
  ReasonsSection, ServicesSection, ServiceDetailsSection, WorksSection, WorksDetailSection, FlowSection, FlowDetailSection,
  ReviewsSection, FAQSection, FAQDetailSection, AreaSection, ContactSection,
  CEOSection, CompanyLeaderSection, CompanyInfoSection, HistorySection,
  Footer, StickyCTA, FloatSide,
  PageLayout, PageHero, SectionMore,
});