// sc-voice.jsx — 利用者の声

function VoicePage({ navigate }) {
  const voices = [
    {
      result: "1年で月の最高売上が10倍に成長",
      quote: "何をやればいいかわからない！という辛さがなくなっていき、仕事に集中できるようになりました。具体的な行動が明確になることで、毎日迷いなく動けるようになったことが一番の変化です。",
      name: "起業塾運営", gender: "20代男性",
      img: "images/voice01.jpg",
    },
    {
      result: "セッション70名獲得・クロージング率82%・売上総額3,500万規模",
      quote: "まめに毎日進捗確認のメッセージをくれるので、本当に助かっています。1人でやっていると怠けてしまいがちですが、確認があるから「今日もやろう」という気持ちになれます。",
      name: "恋愛系Youtuber", gender: "20代男性",
      img: "images/voice02.png",
    },
    {
      result: "独立から3ヶ月で単価50万のクライアント獲得",
      quote: "自由気ままな私を懲りずに見守っていただきありがとうございます。自分では見えていなかった課題を的確に指摘していただき、行動の優先順位が整理されました。",
      name: "起業家", gender: "30代女性",
      img: "images/voice03.png",
    },
    {
      result: "単価100万/月のクライアントで安定的高収入へ",
      quote: "ビジネスで大切な「選択と集中」が、おかげさまで明確になりました。何に集中すべきかが分かると、行動の質も速度も劇的に変わります。",
      name: "中小企業向けコンサルタント", gender: "50代男性",
      img: "images/voice04.png",
    },
    {
      result: "スムーズなローンチ準備と、見落としていた経営課題を発見",
      quote: "今まで数字を見てこなかったのですが、重要な経営課題を発見することができました。見えていなかったものが見えるようになり、経営への向き合い方が変わりました。",
      name: "協会ビジネス代表理事", gender: "50代女性",
      img: "images/voice05.png",
    },
    {
      result: "タスクが明確になり、事業が着実に前進",
      quote: "やるべきことが明確になってどんどん事業が進んでいます！中本さんがいなければ、タスクにずっと向き合えていませんでした。それだけで本当に嬉しいです。",
      name: "店舗・ECショップ運営、コンサル事業", gender: "40代女性",
      img: "images/voice06.png",
    },
    {
      result: "単月売上1億円を目指してタスクを細分化・管理中",
      quote: "注意力散漫でやることがどんどん増えてきたり、仕事に集中できなかったけど、管理してくれるおかげでしっかり前に進めています。本当に助かっています。",
      name: "Youtubeチャンネル運営事業", gender: "20代男性",
      img: "images/voice07.png",
    },
  ];

  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" }}>Client Results</p>
        <h1 style={{ fontFamily: "var(--font-serif)", fontSize: "clamp(28px,5vw,52px)", fontWeight: 600, color: "#fff", lineHeight: 1.4, marginBottom: "16px" }}>利用者の声</h1>
        <p style={{ fontFamily: "var(--font-sans)", fontSize: "15px", color: "rgba(255,255,255,0.5)", lineHeight: 1.9, marginBottom: "24px" }}>愚直に実践した人は、最短で結果を出しています。</p>
        <GoldLine width="40px" margin="0 auto" />
      </AnimateIn>
    </section>
  );

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

  const VoiceGrid = () => (
    <section style={{ background: "var(--bg)", padding: "100px 24px" }}>
      <div style={{ maxWidth: "var(--max-w)", margin: "0 auto" }}>
        <AnimateIn style={{ marginBottom: "56px" }}>
          <SectionHeader label="Testimonials" title="お客様の声" sub="実際にサービスを利用した方々の声をご紹介します。" />
        </AnimateIn>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(320px,1fr))", gap: "24px" }}>
          {voices.map((v, i) => (
            <AnimateIn key={v.name + v.gender} delay={i * 50}>
              <div style={{
                background: "#fff", border: "1px solid var(--border)",
                display: "flex", flexDirection: "column", height: "100%",
              }}>
                <div style={{ background: "var(--dark)", padding: "20px 24px", borderBottom: "2px solid var(--accent)" }}>
                  <p style={{ fontFamily: "var(--font-sans)", fontSize: "11px", fontWeight: 500, color: "var(--accent)", letterSpacing: "0.04em", lineHeight: 1.5 }}>
                    ✦ 成果：{v.result}
                  </p>
                </div>
                <div style={{ padding: "28px 24px", flex: 1 }}>
                  <p style={{ fontFamily: "var(--font-serif)", fontSize: "14px", color: "var(--text)", lineHeight: 2, marginBottom: "24px" }}>
                    "{v.quote}"
                  </p>
                </div>
                <div style={{ padding: "16px 24px 24px", borderTop: "1px solid var(--border)", display: "flex", alignItems: "center", gap: "12px" }}>
                  <img src={v.img} alt={v.name} style={{ width: "44px", height: "44px", borderRadius: "50%", objectFit: "cover", flexShrink: 0 }} />
                  <div>
                    <p style={{ fontFamily: "var(--font-sans)", fontSize: "13px", fontWeight: 500, color: "var(--text)" }}>{v.name}</p>
                    <p style={{ fontFamily: "var(--font-sans)", fontSize: "11px", color: "var(--text-muted)" }}>{v.gender}</p>
                  </div>
                </div>
              </div>
            </AnimateIn>
          ))}
        </div>
      </div>
    </section>
  );

  return (
    <div>
      <PageHero />
      <Stats />
      <VoiceGrid />
      <CtaSection title="次はあなたの番です。" sub="まずは1週間の無料トライアルから。あなたの現状と目標をお聞かせください。" />
    </div>
  );
}

window.VoicePage = VoicePage;
