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

const ReasonsSection = () => (
  <section 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>
      </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">{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>
            {c[1]}
          </div>
        ))}
      </div>
    </div>
  </section>
);

const ServicesSection = () => (
  <section className="section">
    <div className="wrap">
      <div className="sec-head">
        <span className="kicker">SERVICE & PRICE</span>
        <h2>サービス・<span className="red">明朗</span><span className="yellow">価格表</span></h2>
        <p className="sub">表示価格は税込／30坪目安。詳細は無料現地調査にて算出します。</p>
      </div>
      <div className="svc-grid">
        {SERVICES.map((s, i) => (
          <div key={i} className="svc">
            <div className="img">
              <span className="label">{s.tag}</span>
              [ {s.name}の写真 ]
            </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>
          </div>
        ))}
      </div>
    </div>
  </section>
);

const WorksSection = () => (
  <section 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>
      </div>
      <div className="ba-row">
        {WORKS.map((w, i) => (
          <div key={i} className="ba-card">
            <h4>
              {w.addr} <span className="tag">{w.type}</span>
            </h4>
            <div className="ba-pair">
              <div className="ba-img">
                <span className="corner">BEFORE</span>
                [ 施工前 ]
              </div>
              <div className="arrow">▶</div>
              <div className="ba-img after">
                <span className="corner">AFTER</span>
                [ 施工後 ]
              </div>
            </div>
            <div className="ba-meta">
              <span>築年数：{w.age}</span>
              <span>工期：{w.days}</span>
              <span>費用：{w.cost}</span>
            </div>
            <p style={{fontSize:12,color:"#555",margin:"6px 0 0"}}>{w.note}</p>
          </div>
        ))}
      </div>
    </div>
  </section>
);

const FlowSection = () => (
  <section 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>
      </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.ic}</div>
            <h4>{f.h}</h4>
            <div>担当者がご対応します。</div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

const ReviewsSection = () => (
  <section 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 = () => (
  <section 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>
      </div>

      <div className="ceo-block">
        <div className="ceo-photo">
          [ 代表 高橋健一の現場写真 ]<br/>
          [ 縦長ポートレート 760×1100 推奨 ]
          <div className="seal">
            <span className="big">30</span>
            年職人<br/>歴
          </div>
        </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 StaffSection = () => {
  const [tab, setTab] = React.useState("ALL");
  const tabs = [
    { k: "ALL", label: "全員", count: STAFF.length },
    { k: "職人", label: "職人・棟梁", count: STAFF.filter(s => /職人|棟梁/.test(s.role)).length },
    { k: "管理", label: "現場監督・診断", count: STAFF.filter(s => /監督|診断/.test(s.role)).length },
    { k: "受付", label: "受付・保険", count: STAFF.filter(s => /受付|保険/.test(s.role)).length },
  ];
  const visible = STAFF.filter(s => {
    if (tab === "ALL") return true;
    if (tab === "職人") return /職人|棟梁/.test(s.role);
    if (tab === "管理") return /監督|診断/.test(s.role);
    if (tab === "受付") return /受付|保険/.test(s.role);
    return true;
  });
  return (
    <section className="section">
      <div className="wrap">
        <div className="sec-head">
          <span className="kicker">OUR STAFF</span>
          <h2><span className="red">スタッフ</span>・<span className="yellow">職人紹介</span></h2>
          <p className="sub">お宅にお伺いするのは、こちらの顔ぶれです。</p>
        </div>

        <div className="staff-tabs">
          {tabs.map(t => (
            <button key={t.k} className={tab === t.k ? "on" : ""} onClick={() => setTab(t.k)}>
              {t.label}<span className="c">{t.count}</span>
            </button>
          ))}
        </div>

        <div className="staff-grid">
          {visible.map((s, i) => (
            <div key={i} className="staff-card">
              <div className="pic">
                <span className="role-tag">{s.role}</span>
                [ {s.name}の<br/>顔写真 ]
                <span className="years">職人歴<b> {s.years} </b>年</span>
              </div>
              <div className="body">
                <h4 className="name">
                  {s.name}
                  <span className="en">{s.en}</span>
                </h4>
                <div className="specs">
                  {s.specs.map((sp, j) => <span key={j}>{sp}</span>)}
                </div>
                <p className="quote">{s.msg}</p>
                <dl className="meta">
                  <dt>年齢</dt><dd>{s.age}</dd>
                  <dt>出身</dt><dd>{s.from}</dd>
                </dl>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const FAQSection = () => {
  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>
        </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 className="area-block">
        <div className="area-map">
          <span className="pin" style={{left:"30%",top:"55%"}}>東京本社</span>
          <span className="pin" style={{left:"22%",top:"68%"}}>横浜支店</span>
          <span className="pin" style={{left:"50%",top:"38%"}}>埼玉支店</span>
          <span className="pin" style={{left:"62%",top:"58%"}}>千葉支店</span>
        </div>
        <div className="area-info">
          <h3>東京23区＋首都圏4県</h3>
          <div className="areas">
            {AREAS.map((a, i) => (
              <span key={i} className={i % 5 === 0 ? "featured" : ""}>{a}</span>
            ))}
          </div>
          <div className="callout">
            「うちのエリアは対象？」とお迷いの方は<br/>
            まずは <b>0120-810-XXX</b> へお気軽に！
          </div>
        </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 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">810</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>気になる箇所の写真を送ると、最短当日にお見積りをお返しします。</p>
            </div>
            <div className="arrow">▶</div>
          </div>
          <div className="doc">
            <h4>📄 資料ダウンロード（無料）</h4>
            <p style={{margin:0}}>「失敗しない屋根リフォーム業者の選び方」「火災保険活用ガイド」などPDF配布中。</p>
          </div>
          <div className="doc" style={{background:"#fff8d6",borderColor:"var(--orange)"}}>
            <h4 style={{color:"var(--red)"}}>🚨 緊急の雨漏りはお電話で！</h4>
            <p style={{margin:0}}>応急処置のみのご依頼も承ります。深夜・早朝は留守番電話へ。</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-810-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="#">{l}</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-810-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>
);

Object.assign(window, {
  ReasonsSection, ServicesSection, WorksSection, FlowSection,
  ReviewsSection, FAQSection, AreaSection, ContactSection,
  CEOSection, StaffSection,
  Footer, StickyCTA, FloatSide,
});