/* セクション: フロー、司法書士連携、料金 */

function Flow() {
  return (
    <section className="flow" id="flow" data-screen-label="03 Flow">
      <div className="container">
        <span className="eyebrow">One-Stop Service</span>
        <h2 className="section-title">
          5つのステップで、<br />
          設立から<span className="accent">許可取得</span>まで。
        </h2>
        <p className="section-lead">
          一般的に複数の士業を渡り歩く必要がある建設業の法人設立を、当事務所では一本の流れで完結いたします。情報の引き継ぎや再ヒアリングのお手間は一切ございません。
        </p>
        <div className="flow__diagram">
          <div className="flow__steps">
            <div className="flow__line"></div>
            {window.TREE_DATA.flow.map((step) => (
              <div className="flow-step" key={step.num}>
                <div className="flow-step__circle">{step.num}</div>
                <h4 className="flow-step__title">{step.title}</h4>
                <p className="flow-step__desc">{step.desc}</p>
                <span className="flow-step__time">{step.time}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function Collab() {
  return (
    <section className="collab" data-screen-label="04 Collaboration">
      <div className="container">
        <div className="collab__inner">
          <div className="collab__diagram">
            <div className="collab__title">— ONE-STOP STRUCTURE —</div>
            <div className="collab__customer">お客様<br />（建設業）</div>
            <div className="collab__connectors">
              <div className="collab__line collab__line-l"></div>
              <div className="collab__line collab__line-r"></div>
            </div>
            <div className="collab__pros">
              <div className="collab__pro">
                <div className="collab__pro-icon"><Icons.proAdmin /></div>
                <div className="collab__pro-name">行政書士法人 Tree</div>
                <div className="collab__pro-role">ADMINISTRATIVE SCRIVENER</div>
                <ul className="collab__pro-tasks">
                  <li>定款作成・認証</li>
                  <li>建設業許可申請</li>
                  <li>経営事項審査</li>
                  <li>各種変更届</li>
                </ul>
              </div>
              <div className="collab__pro">
                <div className="collab__pro-icon"><Icons.proLegal /></div>
                <div className="collab__pro-name">提携司法書士事務所</div>
                <div className="collab__pro-role">JUDICIAL SCRIVENER</div>
                <ul className="collab__pro-tasks">
                  <li>設立登記申請</li>
                  <li>役員変更登記</li>
                  <li>本店移転登記</li>
                  <li>商業登記全般</li>
                </ul>
              </div>
            </div>
          </div>
          <div className="collab__copy">
            <span className="eyebrow">Collaboration</span>
            <h3>
              二つの士業が、<br />
              緊密に連携いたします。
            </h3>
            <p className="section-lead">
              法人設立登記は提携司法書士事務所、許認可は行政書士法人 Tree。本来別々の専門領域である両者が、提携体制下で密に情報を共有することで、お客様の手続きが滞ることなく進行いたします。
            </p>
            <ul className="collab__points">
              <li><strong>窓口は一つ。</strong>初回ヒアリング情報を提携先と共有いたします。</li>
              <li><strong>同席相談。</strong>設立と許認可をまとめてご相談いただけます。</li>
              <li><strong>登記簿の連携。</strong>許可申請に必要な登記情報をスムーズに取得。</li>
              <li><strong>ワンタイム見積り。</strong>設立費用と許認可費用を一括ご提示。</li>
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

function Pricing() {
  return (
    <section className="pricing" id="pricing" data-screen-label="05 Pricing">
      <div className="container">
        <div className="pricing__head">
          <span className="eyebrow">Pricing Plans</span>
          <h2 className="section-title">
            ご状況に合わせて選べる、<br />
            <span className="accent">3つの料金プラン</span>。
          </h2>
          <p className="section-lead">
            すべて報酬・実費を分離した明朗会計。<br />
            事前のお見積りから追加料金が発生する場面は、必ず事前にご説明・ご相談いたします。
          </p>
        </div>
        <div className="pricing__grid">
          {window.TREE_DATA.plans.map((plan, idx) => (
            <div className={`plan-card ${plan.featured ? "featured" : ""}`} key={idx}>
              {plan.badge && <div className="plan-card__badge">{plan.badge}</div>}
              <div className="plan-card__name-jp">— {plan.nameJp}</div>
              <h3 className="plan-card__name">{plan.name}</h3>
              <p className="plan-card__tagline">{plan.tagline}</p>
              <div className="plan-card__price">
                <div className="plan-card__price-label">REPORT FEE / 報酬額</div>
                <div className="plan-card__price-num">¥{plan.price}<small>（税抜）</small></div>
                <div className="plan-card__price-sub">{plan.priceSub}</div>
              </div>
              <ul className="plan-card__features">
                {plan.features.map((f, i) => <li key={i}>{f}</li>)}
                {plan.muted.map((f, i) => <li key={`m${i}`} className="muted">{f}</li>)}
              </ul>
              <a href="#contact" className={`btn ${plan.featured ? "btn-gold" : "btn-outline"}`}>
                {plan.cta}
              </a>
            </div>
          ))}
        </div>
        <p className="pricing__note">
          ※ 上記金額はすべて税抜表示です。登録免許税・収入印紙代等の実費は別途必要となります。<br />
          ※ 業務範囲のカスタマイズも承っておりますので、お気軽にご相談くださいませ。
        </p>
      </div>
    </section>
  );
}

window.Flow = Flow;
window.Collab = Collab;
window.Pricing = Pricing;