// sc-course.jsx — サービス内容

function CoursePage({ navigate }) {
  const PageHero = () => (
    <section style={{ background: "var(--dark)", padding: "160px 24px 100px", textAlign: "center" }}>
      <AnimateIn>
        <p style={{ fontFamily: "var(--font-sans)", fontSize: "11px", letterSpacing: "0.2em", color: "var(--accent)", textTransform: "uppercase", marginBottom: "20px" }}>Services</p>
        <h1 style={{ fontFamily: "var(--font-serif)", fontSize: "clamp(28px,5vw,52px)", fontWeight: 600, color: "#fff", lineHeight: 1.4, marginBottom: "20px" }}>サービス内容</h1>
        <GoldLine width="40px" margin="0 auto" />
      </AnimateIn>
    </section>
  );

  const baseServices = [
    {
      num: "01",
      en: "Task Structuring",
      title: "タスク洗い出し・構造化・スケジュール化",
      desc: "初回セッションにて、達成すべき目標に対するタスクをリアルタイムで洗い出します。その後、タスクを重要性・緊急性で分類・構造化し、実行可能なスケジュールへ落とし込みます。最初のセッション終了時には、すでにアクションプランが明確になっています。",
    },
    {
      num: "02",
      en: "Daily Progress",
      title: "日々の進捗管理",
      desc: "コミットした目標に対して、メッセージによる毎日の進捗確認を行います。確認は定量化（数値化）した形で、原則毎日、進捗状況を報告していただきます。この「強制力のある環境」が、継続を可能にします。",
    },
    {
      num: "03",
      en: "Weekly Session",
      title: "オンラインセッション",
      desc: "原則週に1回、進捗状況を確認し、タスクの達成状況をアップデートします。このセッションで抜け漏れや重要な項目の再発見を行い、次の1週間の方向性を明確にします。",
    },
  ];

  const BaseServices = () => (
    <section style={{ background: "var(--bg)", padding: "100px 24px" }}>
      <div style={{ maxWidth: "var(--max-w)", margin: "0 auto" }}>
        <AnimateIn><SectionHeader label="Core Services" title="基本サービス" sub="3つの仕組みで、あなたの実践を毎日サポートします。" /></AnimateIn>
        <div style={{ display: "flex", flexDirection: "column", gap: "2px" }}>
          {baseServices.map((s, i) => (
            <AnimateIn key={s.num} delay={i * 80}>
              <div style={{
                display: "grid", gridTemplateColumns: "80px 1fr",
                background: i % 2 === 0 ? "#fff" : "var(--bg-alt)",
                border: "1px solid var(--border)", overflow: "hidden",
              }} className="service-row">
                <div style={{ background: "var(--dark)", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", padding: "32px 16px", gap: "8px" }}>
                  <p style={{ fontFamily: "var(--font-sans)", fontSize: "11px", color: "var(--accent)", letterSpacing: "0.1em" }}>{s.num}</p>
                  <div style={{ width: "1px", height: "24px", background: "rgba(255,255,255,0.15)" }} />
                  <p style={{ fontFamily: "var(--font-sans)", fontSize: "9px", letterSpacing: "0.12em", color: "rgba(255,255,255,0.4)", textTransform: "uppercase", writingMode: "vertical-rl" }}>{s.en}</p>
                </div>
                <div style={{ padding: "36px 40px" }}>
                  <h3 style={{ fontFamily: "var(--font-serif)", fontSize: "20px", fontWeight: 600, color: "var(--text)", marginBottom: "14px" }}>{s.title}</h3>
                  <p style={{ fontFamily: "var(--font-sans)", fontSize: "14px", color: "var(--text-muted)", lineHeight: 2 }}>{s.desc}</p>
                </div>
              </div>
            </AnimateIn>
          ))}
        </div>
      </div>
    </section>
  );

  const areas = [
    { title: "ビジネスモデルの構築・事業化サポート", desc: "どんなビジネスを行い、どう稼いで、どのような人生を送っていきたいか。あなたの想いを形にする方法を示します。" },
    { title: "集客と実践", desc: "様々な集客方法の中から、リソースに合わせた最適な方法を選定し、実践まで伴走します。" },
    { title: "コンテンツ作成と実践", desc: "一度作ってしまえば資産になるコンテンツを、できるだけ早く形にします。作成の裏側もすべてお伝えします。" },
    { title: "管理体制の強化", desc: "決済周りから顧客サポート・管理まで、バックオフィスの仕組みを構築。管理しやすい体制を整えます。" },
    { title: "プライベートなスケジュール管理", desc: "日常の生活が事業活動を妨げるリスクを未然に防ぎます。ご希望に応じて踏み込んだサポートも行います。" },
    { title: "各種作業代行", desc: "慣れないデスクワークの代行を承っています。経営者が行うべき行動に集中できる環境を作ります。" },
  ];

  const Areas = () => (
    <section style={{ background: "var(--bg-alt)", padding: "100px 24px" }}>
      <div style={{ maxWidth: "var(--max-w)", margin: "0 auto" }}>
        <AnimateIn><SectionHeader label="Service Areas" title="主なサービス領域" sub="あなたのビジネスに必要なことを、幅広くサポートします。" /></AnimateIn>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(280px,1fr))", gap: "2px" }}>
          {areas.map((a, i) => (
            <AnimateIn key={a.title} delay={i * 60}>
              <div style={{ background: "#fff", padding: "32px", border: "1px solid var(--border)", height: "100%" }}>
                <GoldLine width="28px" margin="0 0 16px" />
                <h3 style={{ fontFamily: "var(--font-serif)", fontSize: "16px", fontWeight: 600, color: "var(--text)", marginBottom: "12px", lineHeight: 1.5 }}>{a.title}</h3>
                <p style={{ fontFamily: "var(--font-sans)", fontSize: "13px", color: "var(--text-muted)", lineHeight: 1.9 }}>{a.desc}</p>
              </div>
            </AnimateIn>
          ))}
        </div>
      </div>
    </section>
  );

  const plans = [
    { duration: "1W", label: "1週間", sub: "スポット利用", desc: "まずは短期間で試したい方。無料トライアルからそのまま継続も可能です。" },
    { duration: "1M", label: "1ヶ月", sub: "集中プラン", desc: "1ヶ月間、集中して取り組みたい方に。目標を明確にしてスタートします。" },
    { duration: "3M", label: "3ヶ月", sub: "標準プラン", desc: "満足のいく結果を出したい方に。定着するまでしっかりサポートします。", recommended: true },
    { duration: "6M", label: "6ヶ月", sub: "飛躍プラン", desc: "飛躍的な成果を目指す方に。事業の基盤から仕組みまで徹底的に構築します。" },
  ];

  const Plans = () => (
    <section style={{ background: "var(--bg)", padding: "100px 24px" }}>
      <div style={{ maxWidth: "var(--max-w)", margin: "0 auto" }}>
        <AnimateIn><SectionHeader label="Usage Plans" title="利用イメージ" sub="プロジェクトの規模やスケジュールに合わせて、柔軟に利用期間を設定できます。" /></AnimateIn>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(200px,1fr))", gap: "2px" }}>
          {plans.map((p, i) => (
            <AnimateIn key={p.duration} delay={i * 70}>
              <div style={{
                background: p.recommended ? "var(--dark)" : "#fff",
                border: p.recommended ? "2px solid var(--accent)" : "1px solid var(--border)",
                padding: "36px 28px", position: "relative",
              }}>
                {p.recommended && (
                  <div style={{ position: "absolute", top: "-1px", right: "20px", background: "var(--accent)", padding: "4px 12px" }}>
                    <p style={{ fontFamily: "var(--font-sans)", fontSize: "10px", letterSpacing: "0.1em", color: "#fff" }}>POPULAR</p>
                  </div>
                )}
                <p style={{ fontFamily: "var(--font-sans)", fontSize: "40px", fontWeight: 300, color: p.recommended ? "var(--accent)" : "var(--accent)", letterSpacing: "-0.02em", marginBottom: "4px" }}>{p.label}</p>
                <p style={{ fontFamily: "var(--font-sans)", fontSize: "11px", letterSpacing: "0.1em", color: p.recommended ? "rgba(255,255,255,0.5)" : "var(--text-muted)", marginBottom: "16px" }}>{p.sub}</p>
                <div style={{ width: "28px", height: "1px", background: "var(--accent)", marginBottom: "16px" }} />
                <p style={{ fontFamily: "var(--font-sans)", fontSize: "13px", color: p.recommended ? "rgba(255,255,255,0.65)" : "var(--text-muted)", lineHeight: 1.85 }}>{p.desc}</p>
              </div>
            </AnimateIn>
          ))}
        </div>
      </div>
    </section>
  );

  const Flow = () => (
    <section style={{ background: "var(--dark)", padding: "100px 24px" }}>
      <div style={{ maxWidth: "760px", margin: "0 auto" }}>
        <AnimateIn style={{ textAlign: "center", marginBottom: "64px" }}>
          <p style={{ fontFamily: "var(--font-sans)", fontSize: "11px", letterSpacing: "0.2em", color: "var(--accent)", textTransform: "uppercase", marginBottom: "16px" }}>How To Start</p>
          <h2 style={{ fontFamily: "var(--font-serif)", fontSize: "clamp(22px,3.5vw,36px)", fontWeight: 600, color: "#fff", lineHeight: 1.5 }}>無料トライアルの流れ</h2>
        </AnimateIn>
        {[
          { step: "STEP 01", title: "公式LINEに登録", desc: "下のボタンから公式LINEを友達追加してください。自動でメッセージが届きます。" },
          { step: "STEP 02", title: "「無料トライアル希望」と返信", desc: "届いたメッセージに返信するだけ。コーチとの初回セッション日程を調整します。" },
          { step: "STEP 03", title: "初回セッション（無料）", desc: "現在の状況と課題をヒアリング。タスクの洗い出しとアクションプランを設定します。" },
          { step: "STEP 04", title: "1週間の無料トライアル開始", desc: "毎日の進捗確認がスタート。まずは1週間、体感してください。" },
        ].map((s, i) => (
          <AnimateIn key={s.step} delay={i * 80}>
            <div style={{ display: "flex", gap: "24px", marginBottom: "2px" }}>
              <div style={{ display: "flex", flexDirection: "column", alignItems: "center", flexShrink: 0 }}>
                <div style={{ width: "44px", height: "44px", border: "1.5px solid var(--accent)", display: "flex", alignItems: "center", justifyContent: "center" }}>
                  <p style={{ fontFamily: "var(--font-sans)", fontSize: "10px", letterSpacing: "0.08em", color: "var(--accent)", textAlign: "center", lineHeight: 1.2 }}>{s.step.split(" ")[0]}<br />{s.step.split(" ")[1]}</p>
                </div>
                {i < 3 && <div style={{ width: "1px", flex: 1, minHeight: "32px", background: "rgba(196,152,74,0.25)", margin: "4px 0" }} />}
              </div>
              <div style={{ paddingBottom: "32px", flex: 1 }}>
                <h3 style={{ fontFamily: "var(--font-serif)", fontSize: "18px", fontWeight: 600, color: "#fff", marginBottom: "10px" }}>{s.title}</h3>
                <p style={{ fontFamily: "var(--font-sans)", fontSize: "14px", color: "rgba(255,255,255,0.55)", lineHeight: 1.9 }}>{s.desc}</p>
              </div>
            </div>
          </AnimateIn>
        ))}
        <AnimateIn style={{ marginTop: "16px", textAlign: "center" }}>
          <LineButton large={true} />
        </AnimateIn>
      </div>
    </section>
  );

  return (
    <div>
      <PageHero />
      <BaseServices />
      <Areas />
      <Plans />
      <Flow />
      <CtaSection />
    </div>
  );
}

window.CoursePage = CoursePage;