const Price = () => {
  const steps = [
    {
      no: "01",
      en: "Free Consultation",
      ja: "無料相談",
      duration: "30分・オンライン可",
      desc: "まずはお気軽にご連絡ください。現状の課題、やりたいこと、ご予算感をうかがいます。この段階で費用は一切いただきません。",
      points: ["現状ヒアリング", "課題の整理", "進め方のご説明"],
    },
    {
      no: "02",
      en: "Rough Estimate",
      ja: "概算お見積り",
      duration: "3営業日以内・無料",
      desc: "ヒアリング内容をもとに、想定スコープと概算金額をご提示します。複数プランや段階導入のご提案も、この段階で柔軟に組み立てます。",
      points: ["スコープ整理", "概算金額の提示", "進め方のご提案"],
      featured: true,
    },
    {
      no: "03",
      en: "Formal Quote",
      ja: "正式お見積り",
      duration: "要件確定後にご提出",
      desc: "進めることがお決まりになれば、要件を細かく詰めたうえで正式なお見積りをお出しします。ご契約後にキックオフし、制作を開始します。",
      points: ["要件定義", "正式見積の提示", "ご契約・キックオフ"],
    },
  ];

  return (
    <section className="section price" id="process">
      <div className="container">
        <div className="section-head">
          <div>
            <span className="eyebrow">Process</span>
            <h2 className="section-title">ご相談の<span style={{color:"#5b9bd5"}}>流れ</span>。</h2>
          </div>
          <p className="section-lead">
            費用は、内容・規模・ご要望によって大きく変わります。<br/>
            だからこそ、いきなり価格表をお見せするのではなく、お話をうかがってから
            <span className="note-em">概算 → 正式見積</span>と段階的にご提示しています。
          </p>
        </div>

        <div className="process-stack">
          {steps.map((s) => (
            <div className={`process-step ${s.featured ? "featured" : ""}`} key={s.no}>
              <div className="process-step-no">
                <span className="process-no-num">{s.no}</span>
                <span className="process-no-line" aria-hidden="true"></span>
              </div>
              <div className="process-step-body">
                <div className="process-step-head">
                  <span className="process-en">{s.en}</span>
                  <h3 className="process-ja">{s.ja}</h3>
                  <span className="process-duration">{s.duration}</span>
                </div>
                <p className="process-desc">{s.desc}</p>
                <ul className="process-points">
                  {s.points.map((pt) => (
                    <li key={pt}>{pt}</li>
                  ))}
                </ul>
              </div>
            </div>
          ))}
        </div>

        <p className="price-note">
          ※ ご相談・概算お見積りまでは<span className="note-em">無料</span>です。守秘義務は厳守し、いただいた情報を他に使うことはありません。お気軽にどうぞ。
        </p>
      </div>
    </section>
  );
};

window.Price = Price;