/* セクション: 許認可、お客様の声、FAQ、CTA */

function Licenses() {
  return (
    <section className="licenses" id="licenses" data-screen-label="06 Licenses">
      <div className="container">
        <div className="licenses__inner">
          <div className="licenses__copy">
            <span className="eyebrow">Licenses & Permits</span>
            <h2 className="section-title">
              建設業に関わる<br />
              <span className="accent">主要な許認可</span>を網羅。
            </h2>
            <p className="section-lead">
              新規取得から更新・変更届、入札参加に必要な経営事項審査まで、建設業の事業フェーズに応じた許認可手続きをワンストップでお引き受けいたします。一覧にない手続きもまずはご相談ください。
            </p>
          </div>
          <div className="licenses__list">
            {window.TREE_DATA.licenses.map((lic, i) => (
              <div className="license-item" key={i}>
                <div className="license-item__cat">— {lic.cat}</div>
                <div className="license-item__name">{lic.name}</div>
                <div className="license-item__desc">{lic.desc}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function Voices() {
  return (
    <section className="voices" data-screen-label="07 Voices">
      <div className="container">
        <span className="eyebrow">Customer Voices</span>
        <h2 className="section-title">
          お客様から頂戴した<br />
          <span className="accent">確かなお声</span>。
        </h2>
        <p className="section-lead">
          実際にご依頼いただいた建設業のお客様より頂戴した、ご感想の一部をご紹介させていただきます。
        </p>
        <div className="voices__grid">
          {window.TREE_DATA.voices.map((v, i) => (
            <div className="voice-card" key={i}>
              <div className="voice-card__quote">"</div>
              <h4 className="voice-card__title">{v.title}</h4>
              <p className="voice-card__text">{v.text}</p>
              <div className="voice-card__person">
                <div className="voice-card__avatar">{v.avatar}</div>
                <div>
                  <div className="voice-card__name">{v.name}</div>
                  <div className="voice-card__meta">{v.meta}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function FAQ() {
  const [open, setOpen] = useState(0);
  return (
    <section className="faq" id="faq" data-screen-label="08 FAQ">
      <div className="container">
        <div className="faq__inner">
          <div>
            <span className="eyebrow">FAQ</span>
            <h2 className="section-title">
              よくいただく<br />
              <span className="accent">ご質問</span>。
            </h2>
            <p className="section-lead">
              ご相談前に多くのお客様からお寄せいただくご質問をまとめております。掲載のないご不明点はお気軽にお問い合わせくださいませ。
            </p>
          </div>
          <div className="faq__list">
            {window.TREE_DATA.faq.map((item, i) => (
              <div className={`faq-item ${open === i ? "open" : ""}`} key={i}>
                <button className="faq-item__question" onClick={() => setOpen(open === i ? -1 : i)}>
                  <span className="faq-item__q-mark">Q</span>
                  <span className="faq-item__q-text">{item.q}</span>
                  <span className="faq-item__toggle"></span>
                </button>
                <div className="faq-item__answer">
                  <div className="faq-item__answer-inner">
                    <div className="faq-item__answer-content">
                      <span className="faq-item__a-mark">A</span>
                      <span className="faq-item__a-text">{item.a}</span>
                    </div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function CTASection() {
  return (
    <section className="cta-section">
      <div className="cta-section__inner">
        <span className="cta-section__eyebrow">— FREE CONSULTATION —</span>
        <h2 className="cta-section__title">
          ご相談は、何度でも無料。<br />
          まずはお気軽にお問い合わせください。
        </h2>
        <p className="cta-section__lead">
          初回も2回目以降も、ご相談料は一切いただきません。建設業の法人設立・許可取得に関する不明点を、ご納得いくまで何度でもご相談くださいませ。
        </p>
        <div className="cta-section__buttons">
          <a href="#contact" className="btn-gold">無料相談を予約する <Icons.arrow /></a>
          <a href="tel:0424042927" className="btn-outline">042-404-2927 へ電話する</a>
          <a href="https://lin.ee/Pc4iSRJ" target="_blank" rel="noopener noreferrer" className="btn-outline">LINEで相談する</a>
        </div>
      </div>
    </section>
  );
}

function Related() {
  return (
    <section className="related" id="related" data-screen-label="06.5 Related">
      <div className="container">
        <div className="related__head">
          <span className="eyebrow">Related</span>
          <h2 className="section-title">
            関連する<span className="accent">許認可</span>。
          </h2>
          <p className="section-lead">
            建設業の事業フェーズに応じて、あわせて取得されることの多い許認可手続きをご紹介いたします。各サービスの詳細・料金は、それぞれの専門ページをご覧ください。
          </p>
        </div>
        <div className="related__grid">
          {window.TREE_DATA.related.map((item) => (
            <a className="related-card" href={item.url} key={item.num}>
              <div className="related-card__num">{item.num}</div>
              <h3 className="related-card__title">{item.title}</h3>
              <p className="related-card__desc">{item.desc}</p>
              <span className="related-card__arrow" aria-hidden="true">→</span>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Licenses = Licenses;
window.Related = Related;
window.Voices = Voices;
window.FAQ = FAQ;
window.CTASection = CTASection;