// PricingFlowFaq.jsx — Delvecore pricing, process and FAQ sections
window.PricingFlowFaq = function PricingFlowFaq() {
  const mobile = useIsMobile();

  const pricingPlans = [
    { id: 'A', plan: 'スターター', initial: '¥5〜15万', target: 'まずは最小構成で公開したい方', usecase: 'LP・会社紹介（5ページ以内、テンプレートベース、修正2回まで）', cta: '相談する', featured: false },
    { id: 'B', plan: 'スタンダード', initial: '¥30〜50万', target: '機能とデザインを重視して整えたい方', usecase: '機能付き・デザイン重視・複数ページ', cta: '相談する', featured: true },
    { id: 'C', plan: 'まずはご相談', initial: '要件に応じて見積もり', target: '要件整理から伴走してほしい方', usecase: '要件ヒアリングから見積もりまで段階的に整理', cta: 'まず相談する', featured: false },
  ];

  const flow = [
    { step: '相談', desc: '課題感と現状を短く共有いただきます。' },
    { step: '要件整理', desc: '必要な範囲と優先順位を一緒に整理します。' },
    { step: '見積提示', desc: '初期費用と月額保守を分けてご提示します。' },
    { step: '制作開始', desc: '合意内容に沿って実装を進めます。' },
    { step: '公開', desc: '公開時の確認と最終調整を実施します。' },
    { step: '継続支援', desc: '更新保守と改善提案を継続します。' },
  ];

  const faqs = [
    { q: '相談だけでも可能ですか？', a: 'はい、可能です。検討段階でも問題ありません。まずは現状と希望を共有いただき、必要な進め方を一緒に整理します。' },
    { q: '制作と保守は分けて依頼できますか？', a: 'はい、分けて依頼できます。制作のみ、保守のみ、両方まとめてのいずれにも対応しています。' },
    { q: 'どのプランから始めるべきですか？', a: '公開目的が明確で小さく始めたい場合はスターター、機能やデザインまで重視する場合はスタンダードがおすすめです。迷う場合は「まずはご相談」から要件整理します。' },
    { q: '月額保守には何が含まれますか？', a: '更新代行、軽微修正、バックアップ確認、障害一次対応、改善提案の定例確認を含みます。作業範囲は契約前に明文化します。' },
    { q: '決済方法は何に対応していますか？', a: 'カード決済（Stripe）と銀行振込に対応しています。ご希望の方法を契約時に確認します。' },
    { q: '公開後はどこまで相談できますか？', a: 'ページ更新や導線改善だけでなく、運用上の小さな課題整理まで相談できます。継続契約では優先度をつけて順次対応します。' },
  ];

  return (
    <>
      <section id="pricing" style={{ padding: mobile ? '80px 24px' : '120px 48px' }}>
        <SectionHeader num="03" title="Pricing" ja="料金目安" />
        <p style={{ marginTop: 26, maxWidth: 860, color: '#666662', fontSize: mobile ? 14 : 15, lineHeight: 1.9 }}>
          公開サイトでは料金の目安を提示しています。正式な金額は要件整理後に確定し、初期費用と月額保守を分けてご案内します。
        </p>
        <div style={{ marginTop: 40, display: 'grid', gridTemplateColumns: mobile ? '1fr' : 'repeat(3, minmax(0, 1fr))', gap: mobile ? 16 : 20 }}>
          {pricingPlans.map((row) => (
            <article key={row.plan} style={{ border: row.featured ? '1px solid #0C0C0A' : '1px solid #E0DFD8', background: row.featured ? '#161615' : '#F8F7F5', padding: mobile ? '24px' : '26px 24px', minHeight: mobile ? 'auto' : 420, boxShadow: row.featured ? '0 18px 36px rgba(12, 12, 10, 0.18)' : '0 6px 18px rgba(12, 12, 10, 0.06)', display: 'flex', flexDirection: 'column' }}>
              <p style={{ fontSize: 11, letterSpacing: '0.14em', color: row.featured ? 'rgba(248,247,245,0.75)' : '#888884', lineHeight: 1.6 }}>{row.featured ? 'RECOMMENDED' : `PLAN ${row.id}`}</p>
              <h3 style={{ marginTop: 10, fontFamily: "'Cormorant Garamond',serif", fontSize: mobile ? 28 : 32, fontWeight: 400, lineHeight: 1.25, color: row.featured ? '#F8F7F5' : '#0C0C0A' }}>{row.plan}</h3>
              <p style={{ marginTop: 8, fontSize: 14, color: row.featured ? 'rgba(248,247,245,0.78)' : '#666662', lineHeight: 1.85 }}>{row.usecase}</p>
              <div style={{ marginTop: 16, paddingTop: 14, borderTop: row.featured ? '1px solid rgba(248,247,245,0.2)' : '1px solid #E0DFD8' }}>
                <p style={{ fontSize: 11, letterSpacing: '0.1em', color: row.featured ? 'rgba(248,247,245,0.65)' : '#888884' }}>料金目安</p>
                <p style={{ marginTop: 4, fontSize: 20, color: row.featured ? '#F8F7F5' : '#0C0C0A', lineHeight: 1.6 }}>{row.initial}</p>
              </div>
              <div style={{ marginTop: 16 }}>
                <p style={{ fontSize: 12, color: row.featured ? 'rgba(248,247,245,0.7)' : '#888884', lineHeight: 1.6 }}>対象</p>
                <p style={{ marginTop: 6, fontSize: 13, color: row.featured ? 'rgba(248,247,245,0.85)' : '#666662', lineHeight: 1.8 }}>{row.target}</p>
              </div>
              <a href="#contact" style={{ marginTop: 'auto', display: 'inline-flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, border: row.featured ? '1px solid rgba(248,247,245,0.35)' : '1px solid #0C0C0A', background: row.featured ? 'transparent' : '#0C0C0A', color: '#F8F7F5', textDecoration: 'none', padding: '12px 14px', fontSize: 12, lineHeight: 1.6, letterSpacing: '0.08em' }}>
                <span>{row.cta}</span>
                <span>→</span>
              </a>
            </article>
          ))}
        </div>

        <div style={{ marginTop: 28, display: 'grid', gridTemplateColumns: mobile ? '1fr' : 'repeat(3, minmax(0, 1fr))', gap: 14 }}>
          <article style={{ border: '1px solid #E0DFD8', background: '#F4F2ED', padding: mobile ? '18px 16px' : '20px 18px' }}>
            <p style={{ fontSize: 12, color: '#666662', letterSpacing: '0.08em', lineHeight: 1.6 }}>ライト（1万円/月）</p>
            <p style={{ marginTop: 8, fontSize: 13, color: '#666662', lineHeight: 1.75 }}>更新回数: 月1回まで</p>
            <p style={{ marginTop: 6, fontSize: 13, color: '#666662', lineHeight: 1.75 }}>サポート: メール</p>
            <p style={{ marginTop: 6, fontSize: 13, color: '#666662', lineHeight: 1.75 }}>軽微修正: 月2時間</p>
          </article>
          <article style={{ border: '1px solid #E0DFD8', background: '#F4F2ED', padding: mobile ? '18px 16px' : '20px 18px' }}>
            <p style={{ fontSize: 12, color: '#666662', letterSpacing: '0.08em', lineHeight: 1.6 }}>標準（2万円/月）</p>
            <p style={{ marginTop: 8, fontSize: 13, color: '#666662', lineHeight: 1.75 }}>更新回数: 月2回まで</p>
            <p style={{ marginTop: 6, fontSize: 13, color: '#666662', lineHeight: 1.75 }}>サポート: メール + チャット</p>
            <p style={{ marginTop: 6, fontSize: 13, color: '#666662', lineHeight: 1.75 }}>軽微修正: 月4時間</p>
          </article>
          <article style={{ border: '1px solid #D8D1C3', background: 'linear-gradient(180deg, #F0E7D8 0%, #F4F2ED 100%)', padding: mobile ? '18px 16px' : '20px 18px' }}>
            <p style={{ fontSize: 12, color: '#6B5530', letterSpacing: '0.08em', lineHeight: 1.6 }}>改善伴走（3万円/月）</p>
            <p style={{ marginTop: 8, fontSize: 13, color: '#5B513D', lineHeight: 1.75 }}>更新回数: 月4回 + 定例</p>
            <p style={{ marginTop: 6, fontSize: 13, color: '#5B513D', lineHeight: 1.75 }}>サポート: チャット + 月1回30分のWeb会議（Zoom等）</p>
            <p style={{ marginTop: 6, fontSize: 13, color: '#5B513D', lineHeight: 1.75 }}>軽微修正: 月10時間</p>
          </article>
        </div>

        <div style={{ marginTop: 18, border: '1px solid #D8D1C3', background: 'linear-gradient(90deg, #EEE4D2 0%, #F8F7F5 100%)', padding: mobile ? '18px 16px' : '20px 22px' }}>
          <p style={{ fontSize: 12, letterSpacing: '0.12em', color: '#6B5530', lineHeight: 1.6 }}>支払い方法</p>
          <p style={{ marginTop: 8, fontSize: 13, color: '#5B513D', lineHeight: 1.8 }}>
            見積確定後に Stripe Checkout または請求書でご案内します。公開ページ上での即時購入は行わず、内容確認後に安心して進められる形を採用しています。
          </p>
        </div>
      </section>

      <div className="divider" />

      <section id="flow" style={{ padding: mobile ? '80px 24px' : '120px 48px' }}>
        <SectionHeader num="04" title="Flow" ja="進め方の目安" />
        <p style={{ marginTop: 26, maxWidth: 840, color: '#666662', fontSize: mobile ? 14 : 15, lineHeight: 1.9 }}>
          ご相談から公開後の運用まで、必要な範囲を順に整理して進めます。各工程の詳細は、要件に合わせて個別に調整します。
        </p>
        <div style={{ marginTop: 56, display: 'grid', gridTemplateColumns: mobile ? '1fr' : 'repeat(6, 1fr)', gap: 16 }}>
          {flow.map((item, i) => (
            <div key={item.step} style={{ border: '1px solid #E0DFD8', padding: '20px 16px', background: '#F8F7F5' }}>
              <p style={{ fontSize: 11, letterSpacing: '0.15em', color: '#888884' }}>{String(i + 1).padStart(2, '0')}</p>
              <h3 style={{ marginTop: 8, fontFamily: "'Cormorant Garamond',serif", fontSize: mobile ? 20 : 22, fontWeight: 400, lineHeight: 1.35 }}>{item.step}</h3>
              <p style={{ marginTop: 8, fontSize: 13, color: '#666662', lineHeight: 1.8 }}>{item.desc}</p>
            </div>
          ))}
        </div>
      </section>

      <div className="divider" />

      <section id="faq" style={{ padding: mobile ? '80px 24px' : '120px 48px' }}>
        <SectionHeader num="05" title="FAQ" ja="よくある質問" />
        <div style={{ marginTop: 56, display: 'flex', flexDirection: 'column', gap: 12 }}>
          {faqs.map((f) => (
            <div key={f.q} style={{ border: '1px solid #E0DFD8', padding: mobile ? '18px 16px' : '24px 26px', background: '#F8F7F5' }}>
              <p style={{ fontFamily: "'Cormorant Garamond',serif", fontSize: mobile ? 20 : 24, fontWeight: 400, lineHeight: 1.35 }}>{f.q}</p>
              <p style={{ marginTop: 10, color: '#666662', fontSize: mobile ? 14 : 15, lineHeight: 1.9 }}>{f.a}</p>
            </div>
          ))}
        </div>
      </section>
    </>
  );
};