// ─── WordPress Maintenance detail page ──────────────────────────

function WPMaint({ go }) {
  return (
    <div className="page">
      <PageHeader
        eyebrow="SERVICE DETAIL / 01"
        num="→"
        title={<>WordPress 保守は、<br /><span style={{ color: "var(--accent-strong)" }}>「事故が起きない運用」</span>へ</>}
        lead="公開後のWebサイトは、放置するほど確実に劣化します。プラグインの脆弱性、サーバー設定の老朽化、PHPバージョンの非互換。見えない劣化を、見える運用に変えるのが私たちの仕事です。" />

      <WPPainPoints />
      <WPPlans go={go} />
      <WPDashboard />
      <WPFAQ />
      <BigCTA go={go} />
    </div>);

}

function WPPainPoints() {
  const pains = [
  { n: "01", t: "気がついたら、更新が止まっている", d: "コアバージョンの乖離、プラグイン競合、PHP非互換。小さな見落としが積み重なり、ある日突然サイトが動かなくなる。" },
  { n: "02", t: "障害時、連絡先が分からない", d: "制作会社は「運用は別契約」で取り合ってくれず、保守業者は「制作に触れない」と言う。復旧が遅れる原因の多くは、窓口分断です。" },
  { n: "03", t: "レポートがなく、運用が見えない", d: "月額を払っているが、何が行われているか分からない。脆弱性の有無も、稼働率も、改善提案もないまま契約だけ続いている状態。" }];

  return (
    <section className="section" style={{ background: "var(--bg-alt)" }}>
      <div className="wrap">
        <SectionHeader eyebrowNum="01" eyebrow="PAIN POINTS" title={<>こんなお悩み、<br />ありませんか？</>} />
        <div className="pain-points-grid">
          {pains.map((p, i) =>
          <div key={i} className="pain-card">
              <div className="en pain-card__num">CASE {p.n}</div>
              <h3 className="h3 pain-card__title">{p.t}</h3>
              <p className="pain-card__desc">{p.d}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

}

function WPPlans({ go }) {
  return (
    <section className="section">
      <div className="wrap">
        <SectionHeader
          eyebrowNum="02"
          eyebrow="PLANS"
          title="3つの保守プラン。"
          lead="月次で明瞭な料金体系。途中でのプラン変更・ダウングレードも可能です。" />

        <div className="plans-grid">
          {WP_PLANS.map((plan) =>
          <div key={plan.name} className={`plan-card ${plan.popular ? "plan-card--popular" : "plan-card--standard"}`}>
              {plan.popular &&
            <div className="plan-card__badge">RECOMMENDED</div>
            }
              <div className="en plan-card__name">{plan.name.toUpperCase()}</div>
              <div className="plan-card__tag">{plan.tag}</div>
              <div className="plan-card__price-row">
                <span className="serif plan-card__price">{plan.price}</span>
                <span className="plan-card__unit">{plan.unit}</span>
              </div>
              <ul className="plan-card__features">
                {plan.features.map((f, i) =>
              <li key={i} className="plan-card__feature">
                    <span className="plan-card__feature-icon"><Check size={14} /></span>
                    <span>{f}</span>
                  </li>
              )}
              </ul>
              <button onClick={() => go("contact", { tab: "form" })} className={`btn plan-card__cta ${plan.popular ? "btn-accent" : "btn-ghost"}`}>
                相談する <Arrow />
              </button>
            </div>
          )}
        </div>

        <div className="plan-note">
          <span className="plan-note__mark">※</span>
          <span>他社で制作されたサイトの保守も承ります。まず現状のコード・サーバー構成を<strong>無償調査</strong>のうえ、引き継ぎ可否と適切なプランをご提案します。</span>
        </div>
      </div>
    </section>);

}

function WPDashboard() {
  return (
    <section className="section" style={{ background: "var(--bg-dark)", color: "#fff" }}>
      <div className="wrap">
        <div className="stack-mobile monitoring__grid">
          <div>
            <Eyebrow num="03"><span style={{ color: "var(--accent)" }}>MONITORING</span></Eyebrow>
            <h2 className="h1 monitoring__title">
              「動いている」を<br />数値で確認する
            </h2>
            <p className="lead monitoring__lead">
              稼働率・脆弱性・Core Web Vitals・バックアップ状況を、月次レポートで可視化。異常はリアルタイムにエスカレーション。
            </p>
            <div className="monitoring__stats">
              {[
              { l: "稼働率 (12ヶ月)", v: "99.97%" },
              { l: "月次アップデート", v: "12.4件" },
              { l: "脆弱性検出数", v: "3件 / 全対応済" },
              { l: "平均 LCP", v: "1.8s" }].
              map((m, i) =>
              <div key={i} className="monitoring-stat">
                  <div className="monitoring-stat__label">{m.l}</div>
                  <div className="serif monitoring-stat__val">{m.v}</div>
                </div>
              )}
            </div>
          </div>
          <MockDashboard />
        </div>
      </div>
    </section>);

}

function MockDashboard() {
  return (
    <div className="mock-dashboard">
      <div className="mock-dashboard__titlebar">
        <div className="mock-dashboard__title-row">
          <span className="mock-dashboard__status-dot" />
          <span className="mock-dashboard__name">uiarb.monitor / dashboard</span>
        </div>
        <span className="mock-dashboard__time">live · 04/24 15:22 JST</span>
      </div>

      <div className="mock-dashboard__body">
        <div className="mock-dashboard__section-label">[ uptime last 60 days ]</div>
        <div className="mock-dashboard__uptime-grid">
          {Array.from({ length: 60 }).map((_, i) => {
            const isInc = i === 23 || i === 42;
            return (
              <div key={i} className="mock-dashboard__uptime-bar" style={{
                background: isInc ? "#f0b429" : "oklch(0.58 0.22 var(--accent-h))",
                opacity: isInc ? 1 : 0.8 - i % 3 * 0.08,
              }} />);
          })}
        </div>

        <div className="mock-dashboard__section-label">[ event log ]</div>
        <div className="mock-dashboard__log">
          {[
          { t: "15:18", s: "ok", m: "backup · full snapshot stored to S3 · 2.1 GB" },
          { t: "14:02", s: "ok", m: "plugin update · Yoast SEO 22.8 → 22.9" },
          { t: "11:47", s: "warn", m: "slow query detected · wp_postmeta · 1.2s · resolved" },
          { t: "09:00", s: "ok", m: "security scan · 0 threats · CVE feed synced" },
          { t: "02:00", s: "ok", m: "core update · WordPress 6.8.1 applied (staging → prod)" }].
          map((l, i) =>
          <div key={i} className="mock-dashboard__log-row">
              <span className="mock-dashboard__log-time">{l.t}</span>
              <span className={`mock-dashboard__log-status--${l.s}`}>{l.s}</span>
              <span>{l.m}</span>
            </div>
          )}
        </div>
      </div>
    </div>);

}

function WPFAQ() {
  const wpfaqs = [
  { q: "現在のサイトのサーバーはそのままで大丈夫ですか？", a: "はい、原則現行サーバーのままで保守契約に移行できます。ただし、サポート切れOS・PHP5系などの場合は、移設をご提案することがあります。" },
  { q: "バックアップからの復旧時間は？", a: "Standardプラン: 当日中。Business以降: 4時間以内目標。Enterpriseプラン: 1時間以内SLA。" },
  { q: "カスタムプラグインも保守対象に入りますか？", a: "ソースをご提供いただければ可能です。ただし、他社製で難読化されているものは、リバースエンジニアリングが必要な場合があり、その際は別途お見積りとなります。" },
  { q: "プラン内のスポット改修時間は繰り越せますか？", a: "最大2ヶ月繰り越し可能です。ただしプラン変更・解約時には消滅します。" }];

  return (
    <section className="section">
      <div className="wrap" style={{ maxWidth: 960 }}>
        <SectionHeader eyebrowNum="04" eyebrow="FAQ" title={<>保守についての、<br />よくあるご質問。</>} />
        <Accordion items={wpfaqs} />
      </div>
    </section>);

}

Object.assign(window, { WPMaint });