/* sections.jsx — サービス・強み・流れ・FAQ・CTA・フッター */

const SERVICES = [
  { img: "images/svc-permit.jpg",   icon: "doc",       name: "許認可申請",          desc: "建設業許可・産業廃棄物収集運搬許可など各種申請をサポート。" },
  { img: "images/svc-corp.jpg",     icon: "users",     name: "法人設立・運営サポート", desc: "会社設立から定款作成、各種届出までワンストップで対応。" },
  { img: "images/svc-souzoku.jpg",  icon: "home",      name: "相続・遺言サポート",     desc: "相続手続きや遺言書作成を丁寧にサポートし、安心をお届けします。" },
  { img: "images/svc-car.jpg",      icon: "car",       name: "車庫証明・自動車登録",   desc: "車庫証明の申請や名義変更など、お車に関する手続きを代行。" },
  { img: "images/svc-contract.jpg", icon: "clipboard", name: "契約書・内容証明",       desc: "各種契約書の作成や内容証明の作成をサポートします。" },
];

const Services = () => (
  <section className="section section-soft" id="services">
    <div className="container">
      <Reveal className="section-head">
        <h2 className="section-title">サービス案内</h2>
      </Reveal>
      <div className="svc-grid">
        {SERVICES.map((s, i) => (
          <Reveal key={s.name} delay={i * 80}>
            <div className="card svc-card">
              <div className="svc-icon-wrap">
                <Icon name={s.icon} size={28} />
              </div>
              <div className="svc-name">{s.name}</div>
              <div className="svc-desc">{s.desc}</div>
              <div className="svc-arrow"><Icon name="chevron-right" size={16} /></div>
            </div>
          </Reveal>
        ))}
      </div>
    </div>
  </section>
);

const REASONS = [
  { no: "01", name: "丁寧でわかりやすい対応", desc: "専門用語をかみ砕いて、丁寧にご説明。初めての方でも安心してご相談いただけます。" },
  { no: "02", name: "迅速・確実な手続き",     desc: "お客様の大切な時間を無駄にしないよう、スピーディーかつ確実に対応します。" },
  { no: "03", name: "身近で信頼できるパートナー", desc: "ご依頼後も長くお付き合いできるよう、誠実・親身なサポートをお約束します。" },
];

const Reasons = () => (
  <section className="section">
    <div className="container">
      <Reveal className="section-head">
        <h2 className="section-title">選ばれる3つの強み</h2>
      </Reveal>
      <div className="reasons-grid">
        {REASONS.map((r, i) => (
          <Reveal key={r.no} delay={i * 100}>
            <div className="card reason-card">
              <div className="reason-no">{r.no}</div>
              <div>
                <div className="reason-name">{r.name}</div>
                <div className="reason-desc">{r.desc}</div>
              </div>
            </div>
          </Reveal>
        ))}
      </div>
    </div>
  </section>
);

const FLOW = [
  { no: "01", icon: "mail",  name: "お問い合わせ",   desc: "お電話またはフォームよりお気軽にご連絡ください。" },
  { no: "02", icon: "chat",  name: "無料相談",      desc: "お悩みやご希望をお伺いし、最適な解決方法をご提案。" },
  { no: "03", icon: "doc",   name: "お見積り・ご契約", desc: "内容と費用にご納得いただいた上で、正式にご依頼。" },
  { no: "04", icon: "edit",  name: "書類作成・申請代行", desc: "必要書類の作成・収集を行い、申請手続きを代行します。" },
  { no: "05", icon: "check", name: "完了・アフターフォロー", desc: "手続き完了後もご不明点にも丁寧に対応いたします。" },
];

const Flow = () => (
  <section className="section section-section" id="flow">
    <div className="container">
      <Reveal className="section-head">
        <h2 className="section-title">ご相談から解決までの流れ</h2>
      </Reveal>
      <div className="flow-grid">
        {FLOW.map((f, i) => (
          <div className="flow-item-wrap" key={f.no}>
            <Reveal delay={i * 80} style={{ flex: 1, display: "flex" }}>
              <div className="card flow-card" style={{flex: 1}}>
                <div className="flow-no">{f.no}</div>
                <div className="flow-icon"><Icon name={f.icon} size={28} /></div>
                <div className="flow-name">{f.name}</div>
                <div className="flow-desc">{f.desc}</div>
              </div>
            </Reveal>
            {i < FLOW.length - 1 && (
              <div className="flow-arrow">▶</div>
            )}
          </div>
        ))}
      </div>
    </div>
  </section>
);

const FAQS = [
  { q: "相談は無料ですか？", a: "はい、初回のご相談は無料です。お気軽にご利用ください。" },
  { q: "どのくらいの期間がかかりますか？", a: "手続きの内容により異なりますので、目安を事前にご案内いたします。" },
  { q: "土日や夜間の相談は可能ですか？", a: "事前予約で対応可能です。ご希望の日時をご相談ください。" },
];

const FAQItem = ({ item, idx }) => {
  const [open, setOpen] = React.useState(false);
  return (
    <Reveal delay={idx * 80}>
      <div
        className={`card faq-item ${open ? "is-open" : ""}`}
        onClick={() => setOpen((v) => !v)}
      >
        <div className="faq-q">
          <span><span className="faq-q-mark">Q.</span>{item.q}</span>
          <span className="faq-toggle"><Icon name="chevron-down" size={18} /></span>
        </div>
        <div className={open ? "faq-a" : "faq-a faq-a-collapsed"}>{item.a}</div>
      </div>
    </Reveal>
  );
};

const FAQ = () => (
  <section className="section" id="faq">
    <div className="container">
      <div className="faq-head">
        <h2 className="section-title" style={{margin: 0}}>よくあるご質問</h2>
        <a href="#faq" className="faq-link">一覧を見る →</a>
      </div>
      <div className="faq-grid">
        {FAQS.map((f, i) => <FAQItem key={f.q} item={f} idx={i} />)}
      </div>
    </div>
  </section>
);

const FinalCTA = () => (
  <section className="cta-section" id="contact-top">
    <div className="cta-bg">
      <img src="images/cta-bg.jpg" alt="" style={{width:"100%",height:"100%",objectFit:"cover",display:"block"}} />
    </div>
    <div className="container">
      <div className="cta-inner">
        <div>
          <Reveal>
            <h2 className="cta-title">まずはお気軽にご相談ください</h2>
            <div className="cta-contacts">
              <div className="cta-contact">
                <span className="cta-contact-ico"><Icon name="phone" size={28} /></span>
                <div>
                  <div className="cta-tel-num">03-1234-5678</div>
                  <div className="cta-tel-sub">平日 9:00〜18:00</div>
                </div>
              </div>
              <div className="cta-contact">
                <span className="cta-contact-ico"><Icon name="mail" size={28} /></span>
                <div>
                  <div className="cta-form-name">お問い合わせフォーム</div>
                  <div className="cta-form-sub">24時間受付中</div>
                </div>
              </div>
            </div>
          </Reveal>
        </div>
        <Reveal delay={120}>
          <div className="cta-card">
            <div className="cta-card-h">ご相談・お見積りは無料です</div>
            <p className="cta-card-p">お悩みやご不明点など、どんなことでもお気軽にご相談ください。</p>
            <a href="#contact" className="btn btn-cta btn-lg">お問い合わせはこちら →</a>
          </div>
        </Reveal>
      </div>
    </div>
  </section>
);

const Footer = () => (
  <footer className="site-footer">
    <div className="container footer-inner">
      <nav className="footer-nav">
        <a href="#home">ホーム</a>
        <a href="#services">サービス案内</a>
        <a href="#about">事務所について</a>
        <a href="#pricing">料金案内</a>
        <a href="#flow">ご相談の流れ</a>
        <a href="#faq">よくあるご質問</a>
        <a href="#privacy">プライバシーポリシー</a>
      </nav>
      <div>© 2025 みなと行政書士事務所</div>
    </div>
  </footer>
);

Object.assign(window, { Services, Reasons, Flow, FAQ, FinalCTA, Footer });