// sections.jsx — サービス、選ばれる理由、流れ、料金、事例、声、スタッフ、FAQ、エリア

const ServiceSection = () => {
  const services = [
    { tag: "MAIN SERVICE", icon: "shield", title: "シロアリ予防工事", desc: "床下に薬剤を散布し、シロアリの侵入を5年間しっかり防ぎます。当社の主力サービスです。", from: "45,000", unit: "円〜（59㎡）", kind: "inspection" },
    { tag: "EMERGENCY", icon: "spray", title: "シロアリ駆除工事", desc: "すでに被害が発生している場合の駆除工事。徹底的に巣を退治し、再発を防ぎます。", from: "1,800", unit: "円/㎡〜", kind: "floor" },
    { tag: "FREE", icon: "search", title: "無料床下点検", desc: "「シロアリかも？」と思ったら、まずは無料点検を。経験豊富な職人が床下を細かくチェックします。", from: "0", unit: "円（完全無料）", kind: "worker" },
  ];
  return (
    <section className="section section-alt" id="service">
      <div className="container">
        <div className="section-head">
          <div className="eyebrow">SERVICE</div>
          <h2>3つの<span className="em">サービス</span>でお家を守る</h2>
          <p>シロアリ予防のプロフェッショナルとして、お客様のご状況に合わせた最適なご提案をいたします。</p>
        </div>
        <div className="service-grid">
          {services.map((s, i) => (
            <div key={i} className="service-card">
              <div className="photo">
                <span className="tag">{s.tag}</span>
                <PhotoPlaceholder kind={s.kind} />
              </div>
              <div className="body">
                <h3><Icon name={s.icon} size={20} color="var(--c-blue)" style={{ verticalAlign: "-3px", marginRight: 8 }} />{s.title}</h3>
                <p>{s.desc}</p>
                <div className="price">
                  <span className="from">料金</span>
                  <b>{s.from}</b>
                  <span className="yen">{s.unit}</span>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const ReasonSection = () => {
  const reasons = [
    { num: "01", icon: "award", tag: "創業15年の信頼", title: "名古屋で15年、地域密着", desc: "創業以来、名古屋市内を中心に3,200件以上の施工実績。地元の気候や住宅事情を熟知した職人が対応します。" },
    { num: "02", icon: "yen", tag: "明朗会計", title: "わかりやすい料金体系", desc: "59㎡まで45,000円の定額制。追加料金は一切いただきません。お見積りも無料、強引な営業も致しません。" },
    { num: "03", icon: "shield", tag: "5年保証", title: "施工後も安心の保証", desc: "予防工事には5年間の保証付き。万が一シロアリが再発した場合は、無償で再施工いたします。" },
    { num: "04", icon: "family", tag: "安全な薬剤", title: "ご家族・ペットに配慮", desc: "人体や環境への影響を最小限に抑えた、低臭・低毒性の薬剤を使用。お子様やペットがいるご家庭でも安心です。" },
  ];
  return (
    <section className="section" id="reason">
      <div className="container">
        <div className="section-head">
          <div className="eyebrow">WHY US</div>
          <h2>名古屋の皆様に<span className="em">選ばれる4つの理由</span></h2>
          <p>「安心して任せられる」と言っていただけるよう、ひとつひとつの工事に誠実に向き合っています。</p>
        </div>
        <div className="reason-grid">
          {reasons.map((r, i) => (
            <div key={i} className="reason-card">
              <div className="number">{r.num}</div>
              <div className="content">
                <span className="icon-tag"><Icon name={r.icon} size={12} />{r.tag}</span>
                <h3>{r.title}</h3>
                <p>{r.desc}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const FlowSection = () => {
  const steps = [
    { icon: "phone", title: "お問い合わせ", desc: "電話・フォームよりお気軽にご連絡ください。" },
    { icon: "calendar", title: "日程調整", desc: "ご都合の良い日時で点検日を決めます。" },
    { icon: "search", title: "無料点検", desc: "床下を点検し、状況をご報告します。" },
    { icon: "note", title: "お見積り", desc: "明確な料金で書面のお見積りを作成。" },
    { icon: "spray", title: "施工・完了", desc: "施工後、保証書をお渡しします。" },
  ];
  return (
    <section className="section section-blue" id="flow">
      <div className="container">
        <div className="section-head">
          <div className="eyebrow">FLOW</div>
          <h2>ご相談から施工までの<span className="em">流れ</span></h2>
          <p>お問い合わせから施工完了まで、すべての工程でていねいにご説明いたします。</p>
        </div>
        <div className="flow">
          {steps.map((s, i) => (
            <div key={i} className="flow-step">
              <div className="num">{String(i + 1).padStart(2, "0")}</div>
              <div className="icon-row"><Icon name={s.icon} size={26} stroke={2} color="var(--c-blue)" /></div>
              <h4>{s.title}</h4>
              <p>{s.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const PriceSection = () => {
  return (
    <section className="section" id="price">
      <div className="container">
        <div className="section-head">
          <div className="eyebrow">PRICE</div>
          <h2>明朗な<span className="em">料金体系</span></h2>
          <p>追加料金は一切いただきません。書面でのお見積りも無料です。</p>
        </div>
        <div className="price-wrap">
          <div className="price-headline">
            <div className="big">45,000<span className="yen">円</span></div>
            <div className="text">
              <h3>シロアリ予防工事 <span style={{ color: "var(--c-blue)" }}>59㎡まで</span></h3>
              <span>5年保証付き / 床下点検・薬剤散布・防蟻処理 / 税込・出張費込み</span>
            </div>
          </div>
          <table className="price-table">
            <thead>
              <tr>
                <th>面積</th>
                <th>予防工事（5年保証）</th>
                <th style={{ textAlign: "right" }}>料金（税込）</th>
              </tr>
            </thead>
            <tbody>
              <tr className="recommend">
                <td>〜59㎡（一般的な戸建て）</td>
                <td>床下全面散布・防蟻処理</td>
                <td className="amt">45,000円</td>
              </tr>
              <tr>
                <td>60㎡〜79㎡</td>
                <td>床下全面散布・防蟻処理</td>
                <td className="amt">58,000円</td>
              </tr>
              <tr>
                <td>80㎡〜99㎡</td>
                <td>床下全面散布・防蟻処理</td>
                <td className="amt">72,000円</td>
              </tr>
              <tr>
                <td>100㎡〜</td>
                <td>床下全面散布・防蟻処理</td>
                <td className="amt">1,200円/㎡</td>
              </tr>
              <tr>
                <td>シロアリ駆除工事</td>
                <td>被害箇所の駆除・薬剤注入</td>
                <td className="amt">1,800円/㎡〜</td>
              </tr>
              <tr>
                <td>無料床下点検</td>
                <td>現地調査・ご報告・お見積り</td>
                <td className="amt" style={{ color: "var(--c-success)" }}>無料</td>
              </tr>
            </tbody>
          </table>
          <div className="price-note">
            <Icon name="info" size={18} color="var(--c-blue)" style={{ flexShrink: 0, marginTop: 2 }} />
            <div>
              <b style={{ color: "var(--c-navy)" }}>料金に関するご注意：</b>
              床下の状況により別途オプション工事が必要な場合は、必ず事前にお見積りをご提示します。お客様の同意なく追加工事を行うことは絶対にございません。
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

const CaseSection = () => {
  const cases = [
    { area: "名古屋市千種区", title: "築25年木造戸建ての予防工事", floor: "1F: 68㎡", year: "2026年3月", desc: "5年に1度の予防工事。床下も乾燥していて良好な状態でした。" },
    { area: "名古屋市天白区", title: "床下からシロアリ発見、駆除施工", floor: "1F: 54㎡", year: "2026年2月", desc: "玄関框に被害を発見。早期発見で被害は最小限に抑えられました。" },
    { area: "名古屋市緑区", title: "新築から5年目の予防工事", floor: "1F: 72㎡", year: "2026年1月", desc: "新築時の保証切れに合わせて予防工事。次回も5年後にお伺いします。" },
  ];
  return (
    <section className="section section-alt" id="case">
      <div className="container">
        <div className="section-head">
          <div className="eyebrow">CASE</div>
          <h2>名古屋市内の<span className="em">施工事例</span></h2>
          <p>地域のお客様にご利用いただいた、最近の施工事例をご紹介します。</p>
        </div>
        <div className="case-grid">
          {cases.map((c, i) => (
            <div key={i} className="case-card">
              <div className="photo">
                <span className="area-tag"><Icon name="pin" size={11} style={{ verticalAlign: "-2px", marginRight: 4 }} />{c.area}</span>
                <PhotoPlaceholder kind={i === 0 ? "house" : i === 1 ? "floor" : "inspection"} />
              </div>
              <div className="body">
                <h4>{c.title}</h4>
                <div className="meta">
                  <span>{c.floor}</span>
                  <span>{c.year}</span>
                </div>
                <p>{c.desc}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const VoiceSection = () => {
  const voices = [
    { name: "T.K", area: "名古屋市昭和区 / 60代 ご夫婦", initial: "T", title: "ていねいな点検に安心しました", body: "築30年の家で初めての予防工事。職人さんが床下の写真を見せながら説明してくれて、とても安心できました。次回も5年後にお願いします。" },
    { name: "M.S", area: "名古屋市中川区 / 40代 ご家族", initial: "M", title: "見積もり通りで安心の料金", body: "他社では追加料金を請求されたと聞いていたので不安でしたが、こちらは最初の見積もり通り。明朗会計で良かったです。" },
    { name: "Y.N", area: "名古屋市北区 / 50代 ご夫婦", initial: "Y", title: "薬剤の臭いも気になりません", body: "ペットがいるので心配でしたが、低臭の薬剤で施工後も問題なく過ごせました。職人さんも丁寧で好印象でした。" },
  ];
  return (
    <section className="section" id="voice">
      <div className="container">
        <div className="section-head">
          <div className="eyebrow">VOICE</div>
          <h2>お客様の<span className="em">声</span></h2>
          <p>ご利用いただいた皆様から、温かいお言葉をたくさん頂戴しております。</p>
        </div>
        <div className="voice-grid">
          {voices.map((v, i) => (
            <div key={i} className="voice-card">
              <div className="stars">
                {[0,1,2,3,4].map(s => <Icon key={s} name="star" size={14} color="var(--c-accent)" stroke={0} style={{ fill: "var(--c-accent)" }} />)}
              </div>
              <h4>{v.title}</h4>
              <p>{v.body}</p>
              <div className="who">
                <div className="avatar">{v.initial}</div>
                <div className="who-text">
                  <b>{v.name} 様</b>
                  <span>{v.area}</span>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const StaffSection = () => {
  const staff = [
    { role: "代表 / 施工管理", name: "山田 太郎", quote: "創業以来15年、地域の皆様の家を守り続けています。", badges: ["しろあり防除施工士", "1級施工管理"] },
    { role: "シニア職人", name: "佐藤 健司", quote: "ご家族に安心していただける施工をお約束します。", badges: ["防除施工士", "10年以上"] },
    { role: "施工担当", name: "鈴木 一郎", quote: "床下のことは私にお任せください！", badges: ["防除施工士"] },
    { role: "受付・サポート", name: "田中 美咲", quote: "お電話でお気軽にご相談くださいね。", badges: ["1級事務担当"] },
  ];
  return (
    <section className="section section-blue" id="staff">
      <div className="container">
        <div className="section-head">
          <div className="eyebrow">STAFF</div>
          <h2>頼れる<span className="em">スタッフたち</span></h2>
          <p>経験豊富な有資格者が、責任を持って対応いたします。</p>
        </div>
        <div className="staff-grid">
          {staff.map((s, i) => (
            <div key={i} className="staff-card">
              <div className="photo"><PhotoPlaceholder kind="portrait" /></div>
              <div className="body">
                <div className="role">{s.role}</div>
                <h4>{s.name}</h4>
                <p className="quote">「{s.quote}」</p>
                <div className="badges">
                  {s.badges.map((b, j) => <span key={j}>{b}</span>)}
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const FaqSection = () => {
  const [open, setOpen] = React.useState(0);
  const faqs = [
    { q: "予防工事は本当に5年ごとに必要ですか？", a: "はい。シロアリ防除に使用する薬剤の効果は、一般的に約5年で薄れていきます。建物を長く守るためには、5年に1度の予防工事をおすすめしております。" },
    { q: "ペットや小さい子どもがいても大丈夫ですか？", a: "当社では人体や環境への影響を最小限に抑えた、低臭・低毒性の薬剤を使用しております。施工後は十分な換気を行いますので、ご家族・ペットへの影響はほとんどございません。ご不安な点はお気軽にご相談ください。" },
    { q: "見積もりは本当に無料ですか？", a: "はい、お見積り・床下点検は完全無料です。点検の結果、施工が必要ない場合はその旨をお伝えします。強引に契約を勧めることは一切ございませんので、ご安心ください。" },
    { q: "対応エリアはどこまでですか？", a: "名古屋市全16区を中心に、愛知県内（一部地域を除く）に対応しております。詳しくは「対応エリア」をご確認いただくか、お気軽にお問い合わせください。" },
    { q: "施工にはどのくらいの時間がかかりますか？", a: "一般的な戸建て住宅（59㎡程度）の予防工事の場合、約3〜4時間で完了いたします。当日中にすべての作業が終わりますので、ご家族の生活への影響も最小限です。" },
    { q: "支払い方法は何がありますか？", a: "現金、銀行振込、各種クレジットカードに対応しております。分割払いをご希望の場合もご相談ください。" },
  ];
  return (
    <section className="section" id="faq">
      <div className="container">
        <div className="section-head">
          <div className="eyebrow">FAQ</div>
          <h2>よくある<span className="em">ご質問</span></h2>
          <p>お客様からよくいただくご質問をまとめました。その他のご質問もお気軽にどうぞ。</p>
        </div>
        <div className="faq-list">
          {faqs.map((f, i) => (
            <div key={i} className={`faq-item ${open === i ? "open" : ""}`}>
              <div className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                <div className="q-mark">Q</div>
                <div className="text">{f.q}</div>
                <Icon name="chevron" size={18} className="chev" stroke={2.5} />
              </div>
              <div className="faq-a"><div><div className="faq-a-inner">{f.a}</div></div></div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const AreaSection = () => {
  const wards = [
    "千種区", "東区", "北区", "西区", "中村区", "中区", "昭和区", "瑞穂区",
    "熱田区", "中川区", "港区", "南区", "守山区", "緑区", "名東区", "天白区"
  ];
  return (
    <section className="section section-alt" id="area">
      <div className="container">
        <div className="section-head">
          <div className="eyebrow">AREA</div>
          <h2>対応<span className="em">エリア</span></h2>
          <p>名古屋市全16区を中心に、愛知県全域へ駆けつけます。</p>
        </div>
        <div className="area-wrap">
          <div>
            <h3 style={{ fontSize: 18, color: "var(--c-navy)", marginTop: 0, marginBottom: 18 }}>
              <Icon name="pin" size={18} color="var(--c-blue)" style={{ verticalAlign: "-3px", marginRight: 6 }} />
              名古屋市内 全16区
            </h3>
            <div className="area-list">
              {wards.map((w, i) => (
                <div key={i} className="area-item">
                  <Icon name="check" size={16} className="check" stroke={3} color="var(--c-blue)" />{w}
                </div>
              ))}
            </div>
            <p style={{ fontSize: 13, color: "var(--c-ink-3)", marginTop: 18 }}>
              ※その他、愛知県内（春日井市・一宮市・小牧市・尾張旭市・日進市・東郷町など）も対応しております。お気軽にお問い合わせください。
            </p>
          </div>
          <div className="area-map">
            <svg viewBox="0 0 400 320">
              {/* 名古屋市の簡略マップ */}
              <defs>
                <linearGradient id="mapBg" x1="0" y1="0" x2="0" y2="1">
                  <stop offset="0" stopColor="#e6f1fb" />
                  <stop offset="1" stopColor="#cfe3f5" />
                </linearGradient>
              </defs>
              <rect width="400" height="320" fill="url(#mapBg)" rx="12" />
              {/* 区を抽象的に表現 */}
              <g fill="#1a6fc4" opacity="0.85" stroke="white" strokeWidth="1.5">
                <path d="M80 60 L160 50 L180 100 L120 130 L70 110 Z" />
                <path d="M160 50 L240 60 L260 110 L180 100 Z" />
                <path d="M240 60 L320 70 L330 130 L260 110 Z" />
                <path d="M70 110 L120 130 L130 180 L60 170 Z" />
                <path d="M120 130 L180 100 L260 110 L240 170 L130 180 Z" />
                <path d="M260 110 L330 130 L320 200 L240 170 Z" />
                <path d="M60 170 L130 180 L120 240 L50 230 Z" />
                <path d="M130 180 L240 170 L240 240 L120 240 Z" />
                <path d="M240 170 L320 200 L310 250 L240 240 Z" />
                <path d="M50 230 L120 240 L100 290 L40 280 Z" />
                <path d="M120 240 L240 240 L230 290 L100 290 Z" />
                <path d="M240 240 L310 250 L300 290 L230 290 Z" />
              </g>
              {/* 中心マーカー（会社の所在地） */}
              <circle cx="200" cy="180" r="12" fill="var(--c-accent)" stroke="white" strokeWidth="3" />
              <circle cx="200" cy="180" r="4" fill="white" />
              <text x="200" y="155" textAnchor="middle" fontSize="11" fontWeight="700" fill="#0a3a6e">本社</text>
              <text x="200" y="305" textAnchor="middle" fontSize="13" fontWeight="700" fill="#0a3a6e">名古屋市</text>
            </svg>
          </div>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { ServiceSection, ReasonSection, FlowSection, PriceSection, CaseSection, VoiceSection, StaffSection, FaqSection, AreaSection });