// 見てからweb — Hi-fi Design: Pricing (Section 08)

const DX_PLANS = [
  {
    key: 'light', name: 'LIGHT', headline: 'ライトプラン',
    pageRange: '1〜2ページ',
    desc: '名刺代わりに、最低限の会社案内を整えたい方へ。',
    monthly: 9900, initial: 29700,
    feats: [
      '制作費 0円（別途いただきません）',
      'ページ数：1〜2ページ',
      '1からデザイン／スマホページ対応',
      '月3回までの更新・修正対応',
      'SEO対策・SNS連携',
      'SSL／サーバー・ドメイン管理',
    ],
    pageExamples: '1〜2ページに会社情報を集約',
  },
  {
    key: 'business', name: 'BUSINESS', headline: '企業ページ作成プラン',
    pageRange: '3〜7ページ',
    desc: '企業サイトとして必要な情報を一通り揃えたい中小企業向け。',
    monthly: 14900, initial: 44700, featured: true,
    feats: [
      '制作費 0円（別途いただきません）',
      'ページ数：3〜7ページ',
      '1からデザイン／スマホページ対応',
      '月3回までの更新・修正対応',
      'SEO対策・SNS連携',
      'SSL／サーバー・ドメイン管理',
    ],
    pageExamples: 'トップ／会社概要／事業／採用／お問い合わせ',
  },
  {
    key: 'recruit', name: 'RECRUIT', headline: '採用＋企業ページプラン',
    pageRange: '8〜12ページ',
    desc: '複数事業・採用・実績まで、しっかり情報量を出したい方へ。',
    monthly: 19900, initial: 59700,
    feats: [
      '制作費 0円（別途いただきません）',
      'ページ数：8〜12ページ',
      '1からデザイン／スマホページ対応',
      '月3回までの更新・修正対応',
      'SEO対策・SNS連携',
      'SSL／サーバー・ドメイン管理',
    ],
    pageExamples: 'トップ／会社概要／事業／実績／採用／FAQ ほか',
  },
];

const dxYen = (n) => n.toLocaleString('ja-JP');

// === A. 3カードプラン =========================================================
const DxPricingPlans3 = () => (
  <div className="dx-plans">
    {DX_PLANS.map((p) => (
      <div key={p.key} className={`dx-plan ${p.featured ? 'featured' : ''}`}>
        {p.featured && <div className="ribbon">人気 No.1</div>}
        <div className="pname">{p.name}</div>
        <h3 className="phead">{p.headline}</h3>
        <div className="ppage">対応ページ数：{p.pageRange}</div>
        <p className="pdesc">{p.desc}</p>
        <div className="pprice">
          <span className="yen">¥</span>
          <span className="num">{dxYen(p.monthly)}</span>
          <span className="unit">／月</span>
        </div>
        <div className="pinitial">
          初回3ヶ月分先払い：<strong>¥{dxYen(p.initial)}</strong>
        </div>
        <div className="pinitial-note">
          4ヶ月目以降は月額 ¥{dxYen(p.monthly)} で継続
        </div>
        <ul className="pfeats">
          {p.feats.map((f, i) => <li key={i}>{f}</li>)}
        </ul>
        <div className="pcta">
          <a className={`dx-btn ${p.featured ? 'primary' : ''}`} href="#apply">
            フォームで相談
            <span className="arrow">→</span>
          </a>
        </div>
      </div>
    ))}
  </div>
);

// === B. シングル強調 ==========================================================
const DxPricingSingle = () => {
  const p = DX_PLANS.find((x) => x.featured);
  return (
    <div className="dx-plan-single">
      <div className="ribbon">中小企業に一番選ばれている プラン</div>
      <div>
        <div className="pname" style={{fontFamily: 'var(--font-num)', fontStyle: 'italic', letterSpacing: '0.16em', color: 'var(--vermillion)', marginBottom: 6, fontSize: 14, fontWeight: 600}}>
          {p.name}
        </div>
        <h3 style={{fontFamily: 'var(--font-serif)', fontSize: 32, fontWeight: 700, margin: '0 0 6px', lineHeight: 1.3}}>
          {p.headline}
          <span style={{fontSize: 15, color: 'var(--ink-soft)', marginLeft: 12, fontWeight: 500}}>
            {p.pageRange}
          </span>
        </h3>
        <p style={{fontSize: 14, color: 'var(--ink-soft)', margin: '0 0 24px', lineHeight: 1.8}}>{p.desc}</p>
        <div className="price-row">
          <span className="yen">¥</span>
          <span className="price-big">{dxYen(p.monthly)}</span>
          <span className="unit">／月</span>
        </div>
        <div style={{marginTop: 8, marginBottom: 10, fontSize: 14, color: 'var(--ink-2)'}}>
          初回3ヶ月分先払い：<strong>¥{dxYen(p.initial)}</strong>（4ヶ月目以降は月額のみ）
        </div>
        <div style={{marginBottom: 28, fontSize: 13, color: 'var(--ink-soft)'}}>
          制作費は別途不要。トップページ制作は無料です。
        </div>
        <div style={{display: 'flex', gap: 12, flexWrap: 'wrap'}}>
          <a className="dx-btn primary lg" href={window.MITEKARA_LINE_URL} target="_blank" rel="noopener noreferrer">
            無料相談する
            <span className="arrow">→</span>
          </a>
          <a className="dx-btn lg" href="#pricing">他プランも見る</a>
        </div>
      </div>
      <div>
        <ul className="pfeats" style={{borderTop: 'none', paddingTop: 0, marginTop: 0}}>
          <li><strong>制作費 0円</strong>（別途いただきません）</li>
          <li>ページ例：{p.pageExamples}</li>
          <li>1からデザイン／スマホページ完全対応</li>
          <li>月3回までの更新・修正対応</li>
          <li>SEO対策・SNS連携</li>
          <li>SSL／サーバー・ドメイン管理</li>
          <li>公式LINEで相談受付</li>
        </ul>
      </div>
    </div>
  );
};

// === C. 比較表 ================================================================
const DxPricingCompare = () => (
  <table className="dx-compare-table">
    <thead>
      <tr>
        <th></th>
        <th>{DX_PLANS[0].headline}</th>
        <th className="featured">{DX_PLANS[1].headline}</th>
        <th>{DX_PLANS[2].headline}</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>対応ページ数</td>
        <td>{DX_PLANS[0].pageRange}</td>
        <td className="featured">{DX_PLANS[1].pageRange}</td>
        <td>{DX_PLANS[2].pageRange}</td>
      </tr>
      <tr className="price-row">
        <td>月額（4ヶ月目以降）</td>
        <td>¥{dxYen(DX_PLANS[0].monthly)}<span className="unit">／月</span></td>
        <td className="featured">¥{dxYen(DX_PLANS[1].monthly)}<span className="unit">／月</span></td>
        <td>¥{dxYen(DX_PLANS[2].monthly)}<span className="unit">／月</span></td>
      </tr>
      <tr>
        <td>初回3ヶ月分（先払い）</td>
        <td>¥{dxYen(DX_PLANS[0].initial)}</td>
        <td className="featured">¥{dxYen(DX_PLANS[1].initial)}</td>
        <td>¥{dxYen(DX_PLANS[2].initial)}</td>
      </tr>
      <tr>
        <td>制作費</td>
        <td>0円</td>
        <td className="featured">0円</td>
        <td>0円</td>
      </tr>
      <tr>
        <td>トップページ無料制作</td>
        <td><span className="check">◯</span></td>
        <td className="featured"><span className="check">◯</span></td>
        <td><span className="check">◯</span></td>
      </tr>
      <tr>
        <td>1からデザイン</td>
        <td><span className="check">◯</span></td>
        <td className="featured"><span className="check">◯</span></td>
        <td><span className="check">◯</span></td>
      </tr>
      <tr>
        <td>スマホ対応</td>
        <td><span className="check">◯</span></td>
        <td className="featured"><span className="check">◯</span></td>
        <td><span className="check">◯</span></td>
      </tr>
      <tr>
        <td>月3回までの更新・修正</td>
        <td><span className="check">◯</span></td>
        <td className="featured"><span className="check">◯</span></td>
        <td><span className="check">◯</span></td>
      </tr>
      <tr>
        <td>SEO対策／SNS連携</td>
        <td><span className="check">◯</span></td>
        <td className="featured"><span className="check">◯</span></td>
        <td><span className="check">◯</span></td>
      </tr>
      <tr>
        <td>SSL／サーバー・ドメイン管理</td>
        <td><span className="check">◯</span></td>
        <td className="featured"><span className="check">◯</span></td>
        <td><span className="check">◯</span></td>
      </tr>
      <tr>
        <td>最低契約期間</td>
        <td>6ヶ月</td>
        <td className="featured">6ヶ月</td>
        <td>6ヶ月</td>
      </tr>
      <tr>
        <td></td>
        <td><a className="dx-btn" href={window.MITEKARA_LINE_URL} target="_blank" rel="noopener noreferrer" style={{padding: '10px 18px', fontSize: 12}}>選ぶ</a></td>
        <td className="featured"><a className="dx-btn primary" href={window.MITEKARA_LINE_URL} target="_blank" rel="noopener noreferrer" style={{padding: '10px 18px', fontSize: 12}}>選ぶ</a></td>
        <td><a className="dx-btn" href={window.MITEKARA_LINE_URL} target="_blank" rel="noopener noreferrer" style={{padding: '10px 18px', fontSize: 12}}>選ぶ</a></td>
      </tr>
    </tbody>
  </table>
);

// === Section 08 ==============================================================
const DxPricingSection = ({ variant }) => (
  <section id="pricing" className="dx-section alt">
    <div className="dx-inner">
      <div className="dx-secnum">
        <span className="num">08</span>
        <span>PRICING</span>
        <span className="rule" />
      </div>
      <div className="dx-shead">
        <span className="dx-eyebrow">料金プラン</span>
        <h2 className="dx-h2">
          <span className="accent">シンプルな月額プラン</span>
        </h2>
        <p className="dx-sub">
          必要なページ数に応じて、3つのプランから選べます。<br/>
          どのプランでも、制作後の更新・保守まで月額費用に含まれます。
        </p>
      </div>

      <div className="dx-pricing-pills">
        <span className="dx-pill"><span className="dot"></span>制作費 0円</span>
        <span className="dx-pill red"><span className="dot"></span>トップページ制作 無料</span>
        <span className="dx-pill outline"><span className="dot" style={{background: 'var(--vermillion)'}}></span>更新・保守 月額込み</span>
      </div>

      {variant === '3cards' && <DxPricingPlans3 />}
      {variant === 'single' && <DxPricingSingle />}
      {variant === 'compare' && <DxPricingCompare />}

      <p style={{textAlign: 'center', marginTop: 32, fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--ink-soft)', letterSpacing: '0.06em', lineHeight: 1.9}}>
        ※ 表示価格はすべて税別 ／ 最低契約期間は6ヶ月 ／ 13ページ以上の制作は別途お見積もり ／ 制作開始後のお客様都合によるキャンセルは返金不可
      </p>
    </div>
  </section>
);

Object.assign(window, { DxPricingSection, DX_PLANS, dxYen });