const PLANS = [
  {
    id: "P-01",
    name: "LP",
    nameEn: "ランディングページ",
    price: "8万円台",
    desc: "縦長1ページのシンプル構成。キャンペーン告知や体験申込ページに。",
    features: [
      "1ページ構成（スクロール型）",
      "スマホ／PC レスポンシブ",
      "お問い合わせ・申込フォーム",
      "SSL（https://）対応",
    ],
  },
  {
    id: "P-02",
    name: "Standard",
    nameEn: "スタンダードサイト",
    price: "11万円台",
    desc: "情報量が多く、ブログ・お知らせ機能まで。本格的に集客に使いたい方に。",
    featured: true,
    features: [
      "7ページ前後の構成",
      "スタッフ・FAQ・お知らせページ",
      "お知らせ／ブログ機能（自分で更新）",
      "SNS連携（Instagram等）",
      "スマホ／PC レスポンシブ",
    ],
  },
  {
    id: "P-03",
    name: "Custom",
    nameEn: "本格カスタムサイト",
    price: "14万円台",
    desc: "予約システム連携など、要件に合わせて設計するプラン。",
    features: [
      "Standard の全機能",
      "予約システムの連携・埋め込み",
      "スマートフォンから予約管理",
      "アクセス解析設定",
    ],
  },
];

const MAINTENANCE = [
  ["スタンダード（更新＋バックアップ＋セキュリティ対応）", "9,800円/月"],
];

function Services() {
  return (
    <section className="section services" id="services">
      <div className="section__inner">
        <div className="section__head">
          <div className="section__index">
            <span>SECTION</span><b>/ 02</b>
          </div>
          <h2 className="section__title">
            あなたの仕事に、ちょうどよい一枚を。
            <span className="en">Services / 3 Plans &amp; Add-ons</span>
          </h2>
        </div>

        <div className="services__plans">
          {PLANS.map(p => (
            <div key={p.id} className={`plan ${p.featured ? 'plan--featured' : ''}`}>
              <div className="plan__head">
                <span className="plan__id">{p.id}</span>
                {p.featured && <span className="plan__badge">MOST CHOSEN</span>}
              </div>
              <h3>{p.name}<small>{p.nameEn}</small></h3>
              <div className="plan__price">
                <span className="num" style={{fontSize: '0.55em'}}>{p.price}</span>
                <span className="from">〜（税込・目安）</span>
              </div>
              <p className="desc">{p.desc}</p>
              <ul>
                {p.features.map((f, i) => <li key={i}>{f}</li>)}
              </ul>
              <a href="#contact" className="plan__cta">
                <span>このプランで相談する</span>
                <span className="arrow">→</span>
              </a>
            </div>
          ))}
        </div>

        <div className="services__addons">
          <h4>＋ 月額保守プラン（任意）</h4>
          <div className="addons__list">
            <div className="addon">
              <span>更新・バックアップ・セキュリティ対応</span>
              <span className="price">月額 ご相談</span>
            </div>
          </div>
          <p style={{marginTop: 24, fontSize: 13, color: 'var(--sub)', textAlign: 'center'}}>
            ※ 正確な金額はご要件に応じてお見積もりいたします。お気軽にお問い合わせください。
          </p>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Services });