// sc-begin.jsx — 初めての方へ

function BeginPage({ 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" }}>For Beginners</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 pains = [
    "目標は持っているけど、いつも中途半端に終わってしまう",
    "やる気は人一倍あるのに、行動（アクション）できていない",
    "強制力がないので、継続して実践することができない",
    "計画は立てたけど、気づけば後回しにしてしまっている",
    "1人でやろうとすると、想像以上に時間と労力がかかる",
  ];

  const Pain = () => (
    <section style={{ background: "var(--bg)", padding: "100px 24px" }}>
      <div style={{ maxWidth: "var(--max-w)", margin: "0 auto" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "80px", alignItems: "center" }} className="begin-grid">
          <AnimateIn>
            <p style={{ fontFamily: "var(--font-sans)", fontSize: "11px", letterSpacing: "0.18em", color: "var(--accent)", textTransform: "uppercase", marginBottom: "16px" }}>Sound Familiar?</p>
            <h2 style={{ fontFamily: "var(--font-serif)", fontSize: "clamp(22px,3vw,32px)", fontWeight: 600, color: "var(--text)", lineHeight: 1.55, marginBottom: "32px" }}>
              こんな経験、<br />ありませんか？
            </h2>
            <p style={{ fontFamily: "var(--font-sans)", fontSize: "14px", color: "var(--text-muted)", lineHeight: 2 }}>
              高い志を持っていても、それが達成できなければ絵に描いた餅。<br />
              世の中の<strong style={{ color: "var(--text)", fontWeight: 600 }}>95%の人が継続できない</strong>のは、仕方なかったことなのです。
            </p>
          </AnimateIn>
          <AnimateIn delay={100}>
            <div style={{ display: "flex", flexDirection: "column", gap: "2px" }}>
              {pains.map((p, i) => (
                <div key={i} style={{
                  display: "flex", alignItems: "flex-start", gap: "14px",
                  padding: "18px 20px", background: i % 2 === 0 ? "var(--bg-alt)" : "#fff",
                  border: "1px solid var(--border)",
                }}>
                  <span style={{ color: "var(--accent)", fontSize: "14px", flexShrink: 0, marginTop: "1px" }}>✓</span>
                  <p style={{ fontFamily: "var(--font-sans)", fontSize: "14px", color: "var(--text)", lineHeight: 1.7 }}>{p}</p>
                </div>
              ))}
            </div>
          </AnimateIn>
        </div>
      </div>
    </section>
  );

  const Solution = () => (
    <section style={{ background: "var(--bg-alt)", padding: "100px 24px" }}>
      <div style={{ maxWidth: "720px", margin: "0 auto" }}>
        <AnimateIn style={{ textAlign: "center" }}>
          <p style={{ fontFamily: "var(--font-sans)", fontSize: "11px", letterSpacing: "0.18em", color: "var(--accent)", textTransform: "uppercase", marginBottom: "16px" }}>The Answer</p>
          <h2 style={{ fontFamily: "var(--font-serif)", fontSize: "clamp(22px,3.5vw,36px)", fontWeight: 600, color: "var(--text)", lineHeight: 1.55, marginBottom: "32px" }}>
            目標を達成するために<br />
            最も大切なこと
          </h2>
          <GoldLine width="40px" margin="0 auto 32px" />
          <p style={{ fontFamily: "var(--font-sans)", fontSize: "15px", color: "var(--text-muted)", lineHeight: 2.1, marginBottom: "32px" }}>
            答えはシンプルです。それは、<strong style={{ color: "var(--text)", fontWeight: 600 }}>「愚直な実践」</strong>です。<br /><br />
            継続的に実践し続けなければ、積み上げたものが水の泡になってしまいます。
            しかし、1人でやろうとすると想像以上に時間と労力がかかります。
          </p>
          <div style={{ background: "var(--dark)", padding: "40px", borderLeft: "3px solid var(--accent)", textAlign: "left" }}>
            <p style={{ fontFamily: "var(--font-serif)", fontSize: "clamp(16px,2.5vw,22px)", color: "#fff", lineHeight: 1.8, fontWeight: 400 }}>
              だからこそ、あなたの目標達成に必要な道標となり、<br />
              <strong style={{ color: "var(--accent)", fontWeight: 600 }}>進捗状況を適切に「管理する人」が必要</strong>になるのです。<br />
              それが、スポッターコーチングの役割です。
            </p>
          </div>
        </AnimateIn>
      </div>
    </section>
  );

  const Vision = () => (
    <section style={{ background: "var(--bg)", padding: "100px 24px" }}>
      <div style={{ maxWidth: "var(--max-w)", margin: "0 auto" }}>
        <AnimateIn style={{ textAlign: "center", marginBottom: "64px" }}>
          <p style={{ fontFamily: "var(--font-sans)", fontSize: "11px", letterSpacing: "0.18em", color: "var(--accent)", textTransform: "uppercase", marginBottom: "16px" }}>Your Future</p>
          <h2 style={{ fontFamily: "var(--font-serif)", fontSize: "clamp(22px,3.5vw,36px)", fontWeight: 600, color: "var(--text)", lineHeight: 1.55 }}>
            1ヶ月後のあなたを<br />想像してください
          </h2>
        </AnimateIn>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "2px" }} className="vision-grid">
          <AnimateIn>
            <div style={{ background: "var(--bg-alt)", padding: "48px 40px", borderTop: "3px solid var(--border)" }}>
              <p style={{ fontFamily: "var(--font-sans)", fontSize: "11px", letterSpacing: "0.15em", color: "var(--text-muted)", textTransform: "uppercase", marginBottom: "16px" }}>Without Spotter</p>
              <h3 style={{ fontFamily: "var(--font-serif)", fontSize: "18px", color: "var(--text-muted)", marginBottom: "16px", fontWeight: 400 }}>これまでと同じ1ヶ月</h3>
              <p style={{ fontFamily: "var(--font-sans)", fontSize: "14px", color: "var(--text-muted)", lineHeight: 1.9 }}>
                タスクは山積みのまま。やろうと思っていても、気づけば後回しに。1ヶ月後もほとんど変わらない現実が続きます。
              </p>
            </div>
          </AnimateIn>
          <AnimateIn delay={80}>
            <div style={{ background: "var(--dark)", padding: "48px 40px", borderTop: "3px solid var(--accent)" }}>
              <p style={{ fontFamily: "var(--font-sans)", fontSize: "11px", letterSpacing: "0.15em", color: "var(--accent)", textTransform: "uppercase", marginBottom: "16px" }}>With Spotter</p>
              <h3 style={{ fontFamily: "var(--font-serif)", fontSize: "18px", color: "#fff", marginBottom: "16px", fontWeight: 600 }}>1日1日、確実に前進する1ヶ月</h3>
              <p style={{ fontFamily: "var(--font-sans)", fontSize: "14px", color: "rgba(255,255,255,0.6)", lineHeight: 1.9 }}>
                毎日の確認と週次セッションで、タスクが着実に進む。あなたを認め、背中を押してくれるパートナーと共に、目標に近づき続けます。
              </p>
            </div>
          </AnimateIn>
        </div>
      </div>
    </section>
  );

  const Goals = () => {
    const items = ["早く、確実に目標を達成したい", "いろんなことに挑戦したい", "どんどんスキルを上げていきたい", "夢や目標を達成して人生を変えていきたい"];
    return (
      <section style={{ background: "var(--accent)", padding: "80px 24px", textAlign: "center" }}>
        <AnimateIn>
          <p style={{ fontFamily: "var(--font-serif)", fontSize: "clamp(18px,3vw,26px)", color: "#fff", fontWeight: 600, marginBottom: "32px", lineHeight: 1.6 }}>
            もしあなたが…
          </p>
          <div style={{ display: "flex", flexWrap: "wrap", gap: "12px", justifyContent: "center", marginBottom: "40px" }}>
            {items.map(item => (
              <span key={item} style={{
                fontFamily: "var(--font-sans)", fontSize: "14px", color: "#fff",
                background: "rgba(255,255,255,0.2)", padding: "10px 20px", borderRadius: "100px",
              }}>✦ {item}</span>
            ))}
          </div>
          <p style={{ fontFamily: "var(--font-serif)", fontSize: "clamp(18px,3vw,26px)", color: "#fff", fontWeight: 600, marginBottom: "40px" }}>
            ぜひ一緒に実現させましょう。
          </p>
          <div style={{ display: "flex", gap: "16px", flexWrap: "wrap", justifyContent: "center" }}>
            <LineButton large={true} />
            <button onClick={() => navigate("course")} style={{
              fontFamily: "var(--font-sans)", fontSize: "14px", fontWeight: 500,
              color: "#fff", background: "transparent", border: "1.5px solid rgba(255,255,255,0.5)",
              padding: "17px 32px", borderRadius: "2px", cursor: "pointer",
              letterSpacing: "0.06em", transition: "all 0.2s",
            }}
              onMouseEnter={e => { e.currentTarget.style.borderColor = "#fff"; }}
              onMouseLeave={e => { e.currentTarget.style.borderColor = "rgba(255,255,255,0.5)"; }}
            >サービス内容を見る →</button>
          </div>
        </AnimateIn>
      </section>
    );
  };

  return (
    <div>
      <PageHero />
      <Pain />
      <Solution />
      <Vision />
      <Goals />
      <CtaSection />
    </div>
  );
}

window.BeginPage = BeginPage;
