// sc-bio.jsx — 運営者プロフィール

function BioPage({ 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" }}>About</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 Profile = () => (
    <section style={{ background: "var(--bg)", padding: "100px 24px" }}>
      <div style={{ maxWidth: "var(--max-w)", margin: "0 auto" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.8fr", gap: "72px", alignItems: "start" }} className="bio-grid">
          <AnimateIn>
            <div style={{ position: "relative", display: "inline-block", width: "100%" }}>
              <img
                src="images/profile.jpg"
                alt="中本達也"
                style={{ width: "100%", aspectRatio: "1/1", objectFit: "cover", display: "block" }}
              />
              <div style={{ position: "absolute", bottom: "-14px", right: "-14px", width: "90px", height: "90px", border: "2px solid var(--accent)", zIndex: 0, pointerEvents: "none" }} />
            </div>
            <div style={{ marginTop: "32px", padding: "24px", background: "var(--bg-alt)", border: "1px solid var(--border)" }}>
              <p style={{ fontFamily: "var(--font-serif)", fontSize: "22px", fontWeight: 600, color: "var(--text)", marginBottom: "4px" }}>中本 達也</p>
              <p style={{ fontFamily: "var(--font-sans)", fontSize: "12px", letterSpacing: "0.08em", color: "var(--text-muted)", marginBottom: "16px" }}>Tatsuya Nakamoto</p>
              <GoldLine width="32px" margin="0 0 16px" />
              <p style={{ fontFamily: "var(--font-sans)", fontSize: "12px", color: "var(--text-muted)", lineHeight: 1.8 }}>スポッターコーチング 代表</p>
            </div>
          </AnimateIn>

          <AnimateIn delay={100}>
            <p style={{ fontFamily: "var(--font-sans)", fontSize: "10px", letterSpacing: "0.2em", color: "var(--accent)", textTransform: "uppercase", marginBottom: "16px" }}>Profile</p>
            <GoldLine width="40px" margin="0 0 28px" />

            <div style={{ fontFamily: "var(--font-sans)", fontSize: "15px", color: "var(--text-muted)", lineHeight: 2.2 }}>
              <p style={{ marginBottom: "24px" }}>
                企業の事業開発に<strong style={{ color: "var(--text)" }}>10年</strong>、個人事業で<strong style={{ color: "var(--text)" }}>7年</strong>の実務経験を持つビジネスコーチ。
                BtoC・BtoB両領域での豊富な経験を基に、起業家・経営者・個人事業主のための実践継続サポートを提供しています。
              </p>
              <p style={{ marginBottom: "24px" }}>
                ビジネスで特に奇をてらったことをする必要はほとんどありません。しっかりとビジネスの導線を組み立て、そこに至るプロセスを明確にしていくことが成功への道標です。
              </p>
              <p style={{ marginBottom: "24px" }}>
                常にデータによる事業の分析を怠らず、愚直に実践していくことが大切です。長年の経験を経て培った情報は、惜しみなく提供させていただきます。
              </p>
              <p>
                おかげさまで現在は、お客様からの紹介が主な入口となっています。Win-Winの関係で、共に成長できる環境をご提供することを使命としています。
              </p>
            </div>

            <div style={{ marginTop: "40px" }}>
              <img src="images/signature.png" alt="中本達也 署名" style={{ height: "36px", display: "block", marginBottom: "32px" }} />
              <LineButton />
            </div>
          </AnimateIn>
        </div>
      </div>
    </section>
  );

  const expertise = [
    { label: "事業開発（企業）", years: "10年+" },
    { label: "個人事業・起業支援", years: "7年+" },
    { label: "BtoB / BtoC 両対応", years: "✓" },
    { label: "タスク・プロジェクト管理", years: "✓" },
    { label: "集客・マーケティング支援", years: "✓" },
    { label: "コンテンツ作成サポート", years: "✓" },
  ];

  const Expertise = () => (
    <section style={{ background: "var(--bg-alt)", padding: "100px 24px" }}>
      <div style={{ maxWidth: "var(--max-w)", margin: "0 auto" }}>
        <AnimateIn><SectionHeader label="Expertise" title="専門領域" /></AnimateIn>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(240px,1fr))", gap: "2px" }}>
          {expertise.map((e, i) => (
            <AnimateIn key={e.label} delay={i * 60}>
              <div style={{ background: "#fff", padding: "24px 28px", border: "1px solid var(--border)", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                <div style={{ display: "flex", alignItems: "center", gap: "12px" }}>
                  <GoldLine width="20px" />
                  <p style={{ fontFamily: "var(--font-sans)", fontSize: "14px", color: "var(--text)" }}>{e.label}</p>
                </div>
                <p style={{ fontFamily: "var(--font-sans)", fontSize: "13px", fontWeight: 600, color: "var(--accent)" }}>{e.years}</p>
              </div>
            </AnimateIn>
          ))}
        </div>
      </div>
    </section>
  );

  const Philosophy = () => (
    <section style={{ background: "var(--dark)", padding: "100px 24px", textAlign: "center" }}>
      <div style={{ maxWidth: "640px", margin: "0 auto" }}>
        <AnimateIn>
          <p style={{ fontFamily: "var(--font-sans)", fontSize: "11px", letterSpacing: "0.2em", color: "var(--accent)", textTransform: "uppercase", marginBottom: "24px" }}>Philosophy</p>
          <GoldLine width="40px" margin="0 auto 32px" />
          <p style={{ fontFamily: "var(--font-serif)", fontSize: "clamp(20px,3.5vw,32px)", fontWeight: 300, color: "#fff", lineHeight: 1.8, marginBottom: "32px", letterSpacing: "0.04em" }}>
            「愚直な実践こそ、<br />
            <span style={{ fontWeight: 600, color: "var(--accent)" }}>成功への王道</span>である。」
          </p>
          <p style={{ fontFamily: "var(--font-sans)", fontSize: "14px", color: "rgba(255,255,255,0.5)", lineHeight: 2 }}>
            派手な近道も、魔法のような方法も存在しません。<br />
            日々の小さな積み重ねが、確実に未来を変えます。
          </p>
        </AnimateIn>
      </div>
    </section>
  );

  return (
    <div>
      <PageHero />
      <Profile />
      <Expertise />
      <Philosophy />
      <CtaSection title="まずは中本と話してみてください。" sub="無料トライアルで、あなたの現状と目標をじっくりお伺いします。" />
    </div>
  );
}

window.BioPage = BioPage;