// sc-home.jsx — ホームページ

function HomePage({ navigate }) {
  /* ── Hero ── */
  const Hero = () => (
    <section style={{
      minHeight: "100vh", background: "var(--dark)", display: "flex", alignItems: "center",
      justifyContent: "center", textAlign: "center", padding: "120px 24px 80px",
      position: "relative", overflow: "hidden",
    }}>
      {/* subtle grid texture */}
      <div style={{
        position: "absolute", inset: 0, opacity: 0.04,
        backgroundImage: "linear-gradient(rgba(255,255,255,0.5) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.5) 1px, transparent 1px)",
        backgroundSize: "60px 60px",
      }} />
      {/* gold glow */}
      <div style={{
        position: "absolute", top: "30%", left: "50%", transform: "translate(-50%,-50%)",
        width: "600px", height: "400px", borderRadius: "50%",
        background: "radial-gradient(ellipse, rgba(196,152,74,0.12) 0%, transparent 70%)",
        pointerEvents: "none",
      }} />
      <div style={{ position: "relative", maxWidth: "800px" }}>
        <div style={{
          fontFamily: "var(--font-sans)", fontSize: "11px", letterSpacing: "0.22em",
          color: "var(--accent)", textTransform: "uppercase", marginBottom: "28px",
          opacity: 0, animation: "fadeUp 0.8s 0.2s ease forwards",
        }}>Entrepreneur Support / Business Coaching</div>
        <h1 style={{
          fontFamily: "var(--font-serif)", fontSize: "clamp(32px,6vw,68px)",
          fontWeight: 600, color: "#fff", lineHeight: 1.35, marginBottom: "20px",
          letterSpacing: "0.02em",
          opacity: 0, animation: "fadeUp 0.9s 0.4s ease forwards",
        }}>
          やるべきことを、<br />
          <span style={{ color: "var(--accent)" }}>やり続ける</span>環境へ。
        </h1>
        <div style={{
          width: "48px", height: "2px", background: "var(--accent)",
          margin: "0 auto 28px",
          opacity: 0, animation: "fadeUp 0.7s 0.65s ease forwards",
        }} />
        <p style={{
          fontFamily: "var(--font-sans)", fontSize: "clamp(14px,2vw,16px)",
          color: "rgba(255,255,255,0.6)", lineHeight: 1.95, marginBottom: "48px",
          opacity: 0, animation: "fadeUp 0.8s 0.8s ease forwards",
        }}>
          起業家・経営者・個人事業主のための、毎日の進捗確認と<br className="br-desktop" />
          週次セッションによる実践継続サポートサービス。
        </p>
        <div style={{
          opacity: 0, animation: "fadeUp 0.8s 1s ease forwards",
          display: "flex", gap: "16px", flexWrap: "wrap", justifyContent: "center",
        }}>
          <LineButton large={true} />
          <button onClick={() => navigate("begin")} style={{
            fontFamily: "var(--font-sans)", fontSize: "14px", fontWeight: 400,
            letterSpacing: "0.08em", color: "rgba(255,255,255,0.7)",
            background: "transparent", border: "1.5px solid rgba(255,255,255,0.25)",
            padding: "17px 32px", borderRadius: "2px", cursor: "pointer",
            transition: "all 0.25s",
          }}
            onMouseEnter={e => { e.currentTarget.style.borderColor = "rgba(255,255,255,0.6)"; e.currentTarget.style.color = "#fff"; }}
            onMouseLeave={e => { e.currentTarget.style.borderColor = "rgba(255,255,255,0.25)"; e.currentTarget.style.color = "rgba(255,255,255,0.7)"; }}
          >初めての方へ →</button>
        </div>
        {/* scroll indicator */}
        <div style={{
          marginTop: "80px", display: "flex", flexDirection: "column", alignItems: "center", gap: "8px",
          opacity: 0, animation: "fadeUp 0.8s 1.3s ease forwards",
        }}>
          <p style={{ fontFamily: "var(--font-sans)", fontSize: "10px", letterSpacing: "0.2em", color: "rgba(255,255,255,0.3)", textTransform: "uppercase" }}>Scroll</p>
          <div style={{ width: "1px", height: "40px", background: "linear-gradient(to bottom, rgba(196,152,74,0.6), transparent)" }} />
        </div>
      </div>
    </section>
  );

  /* ── About strip ── */
  const AboutStrip = () => (
    <section style={{ background: "var(--bg)", padding: "80px 24px" }}>
      <div style={{ maxWidth: "var(--max-w)", margin: "0 auto", textAlign: "center" }}>
        <AnimateIn>
          <p style={{ fontFamily: "var(--font-sans)", fontSize: "10px", letterSpacing: "0.2em", color: "var(--accent)", textTransform: "uppercase", marginBottom: "16px" }}>What We Do</p>
          <h2 style={{ fontFamily: "var(--font-serif)", fontSize: "clamp(18px,3vw,28px)", fontWeight: 600, color: "var(--text)", lineHeight: 1.7, maxWidth: "700px", margin: "0 auto 24px" }}>
            タスクが山積みでも、迷わず前進できる。<br />
            経営者のための「伴走型」実践サポートです。
          </h2>
          <p style={{ fontFamily: "var(--font-sans)", fontSize: "14px", color: "var(--text-muted)", lineHeight: 2, maxWidth: "560px", margin: "0 auto" }}>
            毎日の進捗確認とオンラインセッションを通じて、あなたが目指す事業の姿に向かって、マンツーマンで伴走サポートします。
          </p>
        </AnimateIn>
      </div>
    </section>
  );

  /* ── 4 Pillars ── */
  const pillars = [
    { en: "Goal & Task", ja: "目標・タスク管理", desc: "事業の目標を明確化し、そこへ至るプロセスを整理。行動に落とし込みます。" },
    { en: "Method", ja: "具体的な実現方法", desc: "集客・情報発信・コンテンツ作成など、ビジネスで必要なことをすべてお伝えします。" },
    { en: "Know-how", ja: "ビジネスノウハウ", desc: "BtoC/BtoB両方に豊富な経験を持つプロが個別サポート。遠回りせずに成果を出します。" },
    { en: "Momentum", ja: "スピード感", desc: "毎日のタスク確認で、業務が止まらない。確実に、サクサクと前進します。" },
  ];
  const Pillars = () => (
    <section style={{ background: "var(--bg-alt)", padding: "100px 24px" }}>
      <div style={{ maxWidth: "var(--max-w)", margin: "0 auto" }}>
        <AnimateIn><SectionHeader label="Core Value" title="スポッターコーチングが提供する4つの価値" center={true} /></AnimateIn>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))", gap: "1px", background: "var(--border)" }}>
          {pillars.map((p, i) => (
            <AnimateIn key={p.en} delay={i * 80}>
              <div style={{ background: "var(--bg)", padding: "40px 32px" }}>
                <p style={{ fontFamily: "var(--font-sans)", fontSize: "10px", letterSpacing: "0.18em", color: "var(--accent)", textTransform: "uppercase", marginBottom: "12px" }}>{p.en}</p>
                <GoldLine width="32px" margin="0 0 20px" />
                <h3 style={{ fontFamily: "var(--font-serif)", fontSize: "18px", fontWeight: 600, color: "var(--text)", marginBottom: "12px" }}>{p.ja}</h3>
                <p style={{ fontFamily: "var(--font-sans)", fontSize: "13px", color: "var(--text-muted)", lineHeight: 1.85 }}>{p.desc}</p>
              </div>
            </AnimateIn>
          ))}
        </div>
      </div>
    </section>
  );

  /* ── Features ── */
  const features = [
    { num: "01", title: "毎日の進捗確認", desc: "日々タスクが進んでいるか確認メッセージを送ります。程よい緊張感が、確実な前進を生みます。" },
    { num: "02", title: "着実な目標達成", desc: "ビジネスモデルの最適化・業務フロー改善・効率化の提案により、目標への道筋を常に明確に保ちます。" },
    { num: "03", title: "行うべき業務に集中", desc: "様々なことに気が散っても、軌道修正します。目標を見据えて継続することが可能になります。" },
  ];
  const Features = () => (
    <section style={{ background: "var(--bg)", padding: "100px 24px" }}>
      <div style={{ maxWidth: "var(--max-w)", margin: "0 auto" }}>
        <AnimateIn><SectionHeader label="Features" title="サービスの特徴" /></AnimateIn>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))", gap: "32px" }}>
          {features.map((f, i) => (
            <AnimateIn key={f.num} delay={i * 100}>
              <div style={{ borderTop: "2px solid var(--accent)", paddingTop: "32px" }}>
                <p style={{ fontFamily: "var(--font-sans)", fontSize: "36px", fontWeight: 300, color: "var(--accent)", opacity: 0.4, marginBottom: "8px", letterSpacing: "-0.02em" }}>{f.num}</p>
                <h3 style={{ fontFamily: "var(--font-serif)", fontSize: "20px", fontWeight: 600, color: "var(--text)", marginBottom: "14px" }}>{f.title}</h3>
                <p style={{ fontFamily: "var(--font-sans)", fontSize: "14px", color: "var(--text-muted)", lineHeight: 1.9 }}>{f.desc}</p>
              </div>
            </AnimateIn>
          ))}
        </div>
      </div>
    </section>
  );

  /* ── Target ── */
  const targets = [
    { icon: "💭", title: "頭の中がいつもモヤモヤしている方", desc: "あれもこれもやりたいことがあり、整理がつかない。事業の方向性に自信を失いかけている方。" },
    { icon: "⚡", title: "「早く、確実に」成果を出したい方", desc: "稼ぐ仕組みを作りたいのに、何から手をつけていいかわからない。解決すべき課題を明確にしたい方。" },
    { icon: "🏋️", title: "着手するのに腰が重い方", desc: "「やるべきこと」から目を背けてしまいがち。必要なことに向き合うことが苦手で、放置してしまう方。" },
  ];
  const Target = () => (
    <section style={{ background: "var(--dark)", padding: "100px 24px" }}>
      <div style={{ maxWidth: "var(--max-w)", margin: "0 auto" }}>
        <AnimateIn><SectionHeader label="For You" title={"こんな方のための\nサービスです"} light={true} /></AnimateIn>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(260px, 1fr))", gap: "2px", alignItems: "stretch" }}>
          {targets.map((t, i) => (
            <AnimateIn key={t.title} delay={i * 100} style={{ height: "100%" }}>
              <div style={{ background: "rgba(255,255,255,0.04)", padding: "40px 32px", border: "1px solid rgba(255,255,255,0.08)", height: "100%" }}>
                <div style={{ width: "44px", height: "44px", borderRadius: "50%", background: "rgba(196,152,74,0.15)", display: "flex", alignItems: "center", justifyContent: "center", marginBottom: "20px", fontSize: "20px" }}>{t.icon}</div>
                <h3 style={{ fontFamily: "var(--font-serif)", fontSize: "17px", fontWeight: 600, color: "#fff", marginBottom: "12px", lineHeight: 1.5 }}>{t.title}</h3>
                <p style={{ fontFamily: "var(--font-sans)", fontSize: "13px", color: "rgba(255,255,255,0.5)", lineHeight: 1.9 }}>{t.desc}</p>
              </div>
            </AnimateIn>
          ))}
        </div>
      </div>
    </section>
  );

  /* ── Stats ── */
  const Stats = () => (
    <section style={{ background: "var(--accent)", padding: "72px 24px" }}>
      <div style={{ maxWidth: "var(--max-w)", margin: "0 auto" }}>
        <AnimateIn>
          <div style={{ display: "flex", flexWrap: "wrap", justifyContent: "center", gap: "0" }}>
            {[
              { num: "15+", label: "Running Projects" },
              { num: "365", label: "Days Support" },
              { num: "98.8%", label: "Satisfaction" },
            ].map((s, i) => (
              <div key={s.label} style={{
                flex: "1 1 200px", textAlign: "center", padding: "24px 40px",
                borderRight: i < 2 ? "1px solid rgba(255,255,255,0.25)" : "none",
              }}>
                <p style={{ fontFamily: "var(--font-sans)", fontSize: "clamp(32px,5vw,52px)", fontWeight: 300, color: "#fff", letterSpacing: "-0.02em", marginBottom: "6px" }}>{s.num}</p>
                <p style={{ fontFamily: "var(--font-sans)", fontSize: "11px", letterSpacing: "0.18em", color: "rgba(255,255,255,0.75)", textTransform: "uppercase" }}>{s.label}</p>
              </div>
            ))}
          </div>
        </AnimateIn>
      </div>
    </section>
  );

  /* ── Testimonials preview ── */
  const voices = [
    { result: "1年で月の最高売上が10倍に成長", quote: "何をやればいいかわからない！という辛さがなくなっていき、仕事に集中できるようになった。", name: "起業塾運営・20代男性", img: "images/voice01.jpg" },
    { result: "セッション70名獲得・クロージング率82%・売上総額3,500万規模", quote: "まめに毎日進捗確認のメッセージをくれるので、助かっています。", name: "恋愛系Youtuber・20代男性", img: "images/voice02.png" },
    { result: "独立から3ヶ月で単価50万のクライアント獲得", quote: "自由気ままな私を懲りずに見守っていただきありがとうございます。", name: "起業家・30代女性", img: "images/voice03.png" },
  ];
  const Testimonials = () => (
    <section style={{ background: "var(--bg-alt)", padding: "100px 24px" }}>
      <div style={{ maxWidth: "var(--max-w)", margin: "0 auto" }}>
        <AnimateIn><SectionHeader label="Client Results" title="愚直な実践者の声" sub="継続することで、確実に結果が生まれています。" /></AnimateIn>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(260px, 1fr))", gap: "24px", marginBottom: "40px" }}>
          {voices.map((v, i) => (
            <AnimateIn key={v.name} delay={i * 80}>
              <div style={{ background: "#fff", padding: "32px", border: "1px solid var(--border)", height: "100%" }}>
                <div style={{ background: "rgba(196,152,74,0.08)", border: "1px solid rgba(196,152,74,0.2)", borderRadius: "2px", padding: "10px 14px", marginBottom: "20px" }}>
                  <p style={{ fontFamily: "var(--font-sans)", fontSize: "11px", fontWeight: 600, color: "var(--accent)", letterSpacing: "0.03em" }}>成果：{v.result}</p>
                </div>
                <p style={{ fontFamily: "var(--font-serif)", fontSize: "15px", color: "var(--text)", lineHeight: 1.85, marginBottom: "24px" }}>"{v.quote}"</p>
                <div style={{ display: "flex", alignItems: "center", gap: "12px", borderTop: "1px solid var(--border)", paddingTop: "20px" }}>
                  <img src={v.img} alt={v.name} style={{ width: "40px", height: "40px", borderRadius: "50%", objectFit: "cover" }} />
                  <p style={{ fontFamily: "var(--font-sans)", fontSize: "12px", color: "var(--text-muted)" }}>{v.name}</p>
                </div>
              </div>
            </AnimateIn>
          ))}
        </div>
        <AnimateIn style={{ textAlign: "center" }}>
          <button onClick={() => navigate("voice")} style={{
            fontFamily: "var(--font-sans)", fontSize: "13px", letterSpacing: "0.08em",
            color: "var(--accent)", background: "transparent", border: "1px solid var(--accent)",
            padding: "12px 32px", borderRadius: "2px", cursor: "pointer",
            transition: "all 0.2s",
          }}
            onMouseEnter={e => { e.currentTarget.style.background = "var(--accent)"; e.currentTarget.style.color = "#fff"; }}
            onMouseLeave={e => { e.currentTarget.style.background = "transparent"; e.currentTarget.style.color = "var(--accent)"; }}
          >すべての声を見る →</button>
        </AnimateIn>
      </div>
    </section>
  );

  /* ── Why chosen ── */
  const reasons = [
    { title: "確実に成果を出す", desc: "毎日の進捗確認と実践により、目標に確実に近づきます。1人では進めづらい状況でも、見捨てずに全力でサポートします。" },
    { title: "きめ細やかなサポート", desc: "企業の事業開発に10年、個人事業で7年培った実務スキルで、IT操作の相談まで丁寧にサポートします。" },
    { title: "紹介で広まるサービス", desc: "現在はお客様からの紹介が多数。成果はもちろん、横の繋がりと共に成長できる組織づくりにも貢献します。" },
  ];
  const WhyChosen = () => (
    <section style={{ background: "var(--bg)", padding: "100px 24px" }}>
      <div style={{ maxWidth: "var(--max-w)", margin: "0 auto" }}>
        <AnimateIn><SectionHeader label="Why Spotter" title="選ばれる理由" /></AnimateIn>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(260px,1fr))", gap: "40px" }}>
          {reasons.map((r, i) => (
            <AnimateIn key={r.title} delay={i * 100}>
              <div>
                <div style={{ display: "flex", alignItems: "center", gap: "16px", marginBottom: "16px" }}>
                  <div style={{ width: "36px", height: "36px", background: "var(--dark)", borderRadius: "50%", display: "flex", alignItems: "center", justifyContent: "center" }}>
                    <span style={{ fontFamily: "var(--font-sans)", fontSize: "12px", color: "var(--accent)", fontWeight: 600 }}>{String(i + 1).padStart(2, "0")}</span>
                  </div>
                  <h3 style={{ fontFamily: "var(--font-serif)", fontSize: "18px", fontWeight: 600, color: "var(--text)" }}>{r.title}</h3>
                </div>
                <p style={{ fontFamily: "var(--font-sans)", fontSize: "14px", color: "var(--text-muted)", lineHeight: 1.9, paddingLeft: "52px" }}>{r.desc}</p>
              </div>
            </AnimateIn>
          ))}
        </div>
      </div>
    </section>
  );

  /* ── Message ── */
  const Message = () => (
    <section style={{ background: "var(--bg-alt)", padding: "100px 24px" }}>
      <div style={{ maxWidth: "var(--max-w)", margin: "0 auto" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.6fr", gap: "64px", alignItems: "center" }} className="bio-grid">
          <AnimateIn>
            <div style={{ position: "relative" }}>
              <img
                src="images/profile.jpg"
                alt="中本達也" style={{ width: "100%", aspectRatio: "1/1", objectFit: "cover", display: "block" }}
              />
              <div style={{ position: "absolute", bottom: "-12px", right: "-12px", width: "80px", height: "80px", border: "2px solid var(--accent)", zIndex: -1 }} />
            </div>
          </AnimateIn>
          <AnimateIn delay={100}>
            <p style={{ fontFamily: "var(--font-sans)", fontSize: "10px", letterSpacing: "0.2em", color: "var(--accent)", textTransform: "uppercase", marginBottom: "12px" }}>Message</p>
            <GoldLine width="40px" margin="0 0 24px" />
            <p style={{ fontFamily: "var(--font-sans)", fontSize: "14px", color: "var(--text-muted)", lineHeight: 2.1, marginBottom: "28px" }}>
              ビジネスで特に奇をてらったことをする必要はほとんどありません。しっかりとビジネスの導線を組み立て、そこに至るプロセスを明確にしていくことが成功への道標です。<br /><br />
              常にデータによる事業の分析を怠らず、愚直に実践していくことが大切です。まずは無料トライアルで、あなたの現状をお聞かせください。
            </p>
            <img src="images/signature.png" alt="中本達也" style={{ height: "32px", marginBottom: "24px", display: "block" }} />
            <button onClick={() => navigate("bio")} style={{
              fontFamily: "var(--font-sans)", fontSize: "12px", letterSpacing: "0.08em",
              color: "var(--text-muted)", background: "transparent", border: "none",
              padding: 0, cursor: "pointer", textDecoration: "underline", textUnderlineOffset: "3px",
            }}>運営者プロフィールを見る →</button>
          </AnimateIn>
        </div>
      </div>
    </section>
  );

  return (
    <div>
      <Hero />
      <AboutStrip />
      <Pillars />
      <Features />
      <Target />
      <Stats />
      <Testimonials />
      <WhyChosen />
      <Message />
      <CtaSection />
    </div>
  );
}

window.HomePage = HomePage;
