// Variant B — "Warm" (balance)
// mosh/Timee-adjacent: softer, more whitespace, rounded corners,
// bigger imagery, lowercase English eyebrows, reassuring tone.

function VariantWarm() {
  const [faqOpen, setFaqOpen] = useState(0);
  return (
    <div className="v-warm">
      <NavWarm />
      <HeroWarm />
      <FeatGrid />
      <UseFlow />
      <Scores />
      <Cover />
      <VoiceSection />
      <FaqWarm faqOpen={faqOpen} setFaqOpen={setFaqOpen} />
      <FinalBand />
      <FooterWarm />
    </div>
  );
}

// ── Nav ──────────────────────────────────────────────────────
function NavWarm() {
  return (
    <header style={{
      position: 'sticky', top: 16, zIndex: 30,
      margin: '0 clamp(12px, 2vw, 24px)',
    }}>
      <div style={{
        maxWidth: 1240, margin: '0 auto',
        padding: '14px 20px',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        background: 'rgba(255, 252, 246, 0.85)',
        backdropFilter: 'saturate(140%) blur(16px)',
        border: '1px solid var(--hairline)',
        borderRadius: 100,
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <div style={{
            width: 28, height: 28, borderRadius: '50%',
            background: 'var(--accent)', color: 'var(--accent-on)',
            display: 'grid', placeItems: 'center',
            fontFamily: 'var(--font-serif)', fontSize: 15, fontWeight: 500,
            fontStyle: 'italic',
          }}>m</div>
          <span style={{ fontSize: 15, fontWeight: 600, letterSpacing: -0.2 }}>
            関東マンショントーク
          </span>
        </div>
        <nav style={{ display: 'flex', alignItems: 'center', gap: 24, fontSize: 13 }} className="nav-links">
          <a href="#features" style={{ color: 'var(--fg)', textDecoration: 'none', opacity: 0.7 }}>特徴</a>
          <a href="#flow" style={{ color: 'var(--fg)', textDecoration: 'none', opacity: 0.7 }}>使い方</a>
          <a href="#scoring" style={{ color: 'var(--fg)', textDecoration: 'none', opacity: 0.7 }}>AIスコア</a>
          <a href="#faq" style={{ color: 'var(--fg)', textDecoration: 'none', opacity: 0.7 }}>FAQ</a>
        </nav>
        <LineCTA label="LINEではじめる" size="sm" />
      </div>
      <style>{`
        @media (max-width: 780px) { .nav-links { display: none !important; } }
      `}</style>
    </header>
  );
}

// ── Hero ─────────────────────────────────────────────────────
function HeroWarm() {
  return (
    <section style={{ padding: 'clamp(64px, 8vw, 120px) 0 60px', position: 'relative' }}>
      <div style={{
        maxWidth: 1200, margin: '0 auto',
        padding: '0 clamp(20px, 4vw, 48px)',
        display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1fr)',
        gap: 'clamp(32px, 5vw, 72px)',
        alignItems: 'center',
      }} className="hero-warm-grid">
        <div>
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 10,
            fontSize: 12, color: 'var(--muted)',
            padding: '8px 14px', background: 'var(--bg-soft)',
            borderRadius: 100, marginBottom: 32,
          }}>
            <span style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', color: 'var(--accent)' }}>new</span>
            関西版につづき、首都圏で提供開始
          </div>
          <h1 style={{
            fontSize: 'clamp(40px, 5.8vw, 72px)',
            lineHeight: 1.14,
            letterSpacing: -0.02,
            fontWeight: 500,
            margin: '0 0 32px',
          }}>
            次の住まいを、<br/>
            <span style={{
              fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontWeight: 400,
              color: 'var(--accent)',
            }}>ゆっくり</span>
            LINEで探す。
          </h1>
          <p style={{
            fontSize: 17, lineHeight: 1.9, color: 'var(--muted)',
            margin: '0 0 40px', maxWidth: 520,
          }}>{COPY.heroLead.warm}</p>
          <div style={{ display: 'flex', alignItems: 'center', gap: 20, flexWrap: 'wrap' }}>
            <LineCTA label={COPY.cta} size="lg" />
          </div>
        </div>
        <div style={{ position: 'relative' }}>
          <HeroCollage />
        </div>
      </div>
      <style>{`
        @media (max-width: 820px) { .hero-warm-grid { grid-template-columns: 1fr !important; } }
      `}</style>
    </section>
  );
}

function HeroCollage() {
  return (
    <div style={{ position: 'relative', aspectRatio: '1/1', maxWidth: 520, marginLeft: 'auto' }}>
      <div style={{
        position: 'absolute', top: 0, right: 0, width: '72%', aspectRatio: '3/4',
        borderRadius: 'var(--radius-card)', overflow: 'hidden',
        transform: 'rotate(2deg)',
      }}>
        <Placeholder label="tokyo skyline / 東京の風景" ratio="3/4" />
      </div>
      <div style={{
        position: 'absolute', bottom: '6%', left: 0, width: '54%', aspectRatio: '4/5',
        borderRadius: 'var(--radius-card)', overflow: 'hidden',
        transform: 'rotate(-3deg)',
        boxShadow: '0 20px 40px -20px rgba(0,0,0,0.15)',
      }}>
        <Placeholder label="living room / 室内写真" ratio="4/5" />
      </div>
      <div style={{
        position: 'absolute', top: '44%', right: '2%', width: 200,
        background: 'var(--bg)', border: '1px solid var(--hairline)',
        padding: 16, borderRadius: 12,
        boxShadow: '0 12px 32px -12px rgba(0,0,0,0.18)',
        transform: 'rotate(4deg)',
      }}>
        <div style={{ fontSize: 11, color: 'var(--muted)', fontFamily: 'var(--font-mono)', marginBottom: 6 }}>資産性スコア</div>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
          <div style={{ fontFamily: 'var(--font-serif)', fontSize: 42, color: 'var(--accent)', lineHeight: 1 }}>A+</div>
          <div style={{ fontSize: 11, color: 'var(--muted)' }}>港区・目黒区平均より上位</div>
        </div>
        <div style={{ marginTop: 12, height: 6, background: '#e8e2d5', borderRadius: 3, overflow: 'hidden' }}>
          <div style={{ width: '82%', height: '100%', background: 'var(--accent)' }}/>
        </div>
      </div>
    </div>
  );
}

// ── Features ────────────────────────────────────────────────
function FeatGrid() {
  return (
    <section id="features" style={{ padding: 'clamp(64px, 8vw, 120px) 0' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto', padding: '0 clamp(20px, 4vw, 48px)' }}>
        <div style={{ maxWidth: 720, marginBottom: 72 }}>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--muted)', letterSpacing: 2, textTransform: 'uppercase', marginBottom: 20 }}>
            — 3つの特徴
          </div>
          <h2 style={{ fontSize: 'clamp(32px, 4vw, 48px)', lineHeight: 1.3, letterSpacing: -0.01, fontWeight: 500, margin: 0 }}>
            <span style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', color: 'var(--accent)', fontWeight: 400 }}>押しつけない</span>、物件提案。
          </h2>
        </div>
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))',
          gap: 24,
        }}>
          {FEATURES.map((f, i) => (
            <div key={i} style={{
              padding: 32, background: 'var(--bg-soft)',
              borderRadius: 'var(--radius-card)',
              display: 'flex', flexDirection: 'column', gap: 16,
              minHeight: 280,
            }}>
              <div style={{
                width: 48, height: 48, borderRadius: '50%',
                background: 'var(--bg)', border: '1px solid var(--hairline)',
                display: 'grid', placeItems: 'center',
                fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 20,
                color: 'var(--accent)',
              }}>{i + 1}</div>
              <h3 style={{ fontSize: 20, fontWeight: 600, margin: '8px 0 0', letterSpacing: -0.2 }}>{f.title}</h3>
              <p style={{ fontSize: 14.5, color: 'var(--muted)', lineHeight: 1.8, margin: 0 }}>{f.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── Flow / Steps ─────────────────────────────────────────────
function UseFlow() {
  return (
    <section id="flow" style={{ padding: 'clamp(64px, 8vw, 120px) 0', background: 'var(--bg-soft)' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto', padding: '0 clamp(20px, 4vw, 48px)' }}>
        <div style={{ marginBottom: 64 }}>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--muted)', letterSpacing: 2, textTransform: 'uppercase', marginBottom: 20 }}>
            — 使い方
          </div>
          <h2 style={{ fontSize: 'clamp(32px, 4vw, 48px)', lineHeight: 1.25, letterSpacing: -0.01, fontWeight: 500, margin: 0 }}>
            登録から提案まで、<br/>
            <span style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontWeight: 400, color: 'var(--accent)' }}>3分</span>。
          </h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr', gap: 16 }}>
          {STEPS.map((s, i) => (
            <div key={i} style={{
              background: 'var(--bg)', borderRadius: 'var(--radius-card)',
              padding: 'clamp(20px, 3vw, 32px)',
              display: 'grid', gridTemplateColumns: '80px 1fr auto', gap: 32,
              alignItems: 'center',
            }} className="flow-row">
              <div style={{
                fontFamily: 'var(--font-serif)', fontStyle: 'italic',
                fontSize: 56, color: 'var(--accent)', lineHeight: 1,
              }}>{s.no}</div>
              <div>
                <h3 style={{ fontSize: 20, fontWeight: 600, margin: '0 0 8px' }}>{s.title}</h3>
                <p style={{ fontSize: 14.5, color: 'var(--muted)', lineHeight: 1.75, margin: 0, maxWidth: 640 }}>{s.body}</p>
              </div>
              <div style={{
                width: 48, height: 48, borderRadius: '50%',
                border: '1px solid var(--hairline)',
                display: 'grid', placeItems: 'center', color: 'var(--muted)',
              }} className="flow-arrow">
                <Ic.Arrow s={16} />
              </div>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 700px) {
          .flow-row { grid-template-columns: 60px 1fr !important; gap: 20px !important; }
          .flow-arrow { display: none !important; }
        }
      `}</style>
    </section>
  );
}

// ── Scoring detail ───────────────────────────────────────────
function Scores() {
  return (
    <section id="scoring" style={{ padding: 'clamp(64px, 8vw, 120px) 0' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto', padding: '0 clamp(20px, 4vw, 48px)' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1fr)', gap: 'clamp(32px, 5vw, 72px)', alignItems: 'start' }} className="scores-grid">
          <div>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--muted)', letterSpacing: 2, textTransform: 'uppercase', marginBottom: 20 }}>
              — AIが見ている情報
            </div>
            <h2 style={{ fontSize: 'clamp(32px, 4vw, 48px)', lineHeight: 1.3, letterSpacing: -0.01, fontWeight: 500, margin: '0 0 32px' }}>
              <span style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontWeight: 400, color: 'var(--accent)' }}>6つの軸</span>で、<br/>
              住まいを数値化する。
            </h2>
            <p style={{ fontSize: 15.5, lineHeight: 1.9, color: 'var(--muted)', margin: '0 0 32px' }}>
              プロが長年重ねてきた判断軸をアルゴリズムに落とし込み、誰もが同じ基準で比較できるようにしました。感覚に頼らず、データで選ぶ。
            </p>
            <div style={{
              background: 'var(--bg-soft)', borderRadius: 'var(--radius-card)',
              padding: 28, fontSize: 14, color: 'var(--muted)', lineHeight: 1.8,
            }}>
              <div style={{ fontSize: 12, fontFamily: 'var(--font-mono)', color: 'var(--accent)', marginBottom: 8 }}>
                SAMPLE SCORE
              </div>
              総合スコアは各軸の加重平均として算出され、A〜Cの6段階で表示されます。詳細は提案カードから確認できます。
            </div>
            <div style={{ marginTop: 32 }}>
              {TRUST_SOURCES.map((t, i) => (
                <div key={i} style={{
                  padding: '16px 0',
                  borderTop: i === 0 ? '1px solid var(--hairline)' : '1px dotted var(--hairline)',
                }}>
                  <div style={{ fontSize: 14, fontWeight: 600, marginBottom: 4 }}>{t.label}</div>
                  <div style={{ fontSize: 13, color: 'var(--muted)', lineHeight: 1.75 }}>{t.body}</div>
                </div>
              ))}
              <div style={{
                marginTop: 16, padding: '16px 20px',
                background: 'var(--bg-soft)', borderRadius: 12,
                fontSize: 12.5, lineHeight: 1.8, color: 'var(--muted)',
              }}>
                <strong style={{ color: 'var(--fg)' }}>ご注意：</strong>{DISCLAIMER}
              </div>
            </div>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
            {SCORING.map((s, i) => (
              <div key={i} style={{
                background: 'var(--bg-soft)',
                borderRadius: 16, padding: '20px 20px 24px',
                display: 'flex', flexDirection: 'column', gap: 6,
                minHeight: 120,
              }}>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--accent)' }}>
                  {String(i + 1).padStart(2, '0')} / {String(SCORING.length).padStart(2, '0')}
                </div>
                <div style={{ fontSize: 15, fontWeight: 600, marginTop: 4 }}>{s.label}</div>
                <div style={{ fontSize: 12.5, color: 'var(--muted)', lineHeight: 1.65 }}>{s.body}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 900px) { .scores-grid { grid-template-columns: 1fr !important; } }
      `}</style>
    </section>
  );
}

// ── Coverage (thin band) ──────────────────────────────────────
function Cover() {
  const prefs = Object.keys(AREAS);
  return (
    <section id="areas" style={{
      padding: '36px 0',
      background: 'var(--bg-soft)',
      borderTop: '1px solid var(--hairline)',
      borderBottom: '1px solid var(--hairline)',
    }}>
      <div style={{
        maxWidth: 1200, margin: '0 auto',
        padding: '0 clamp(20px, 4vw, 48px)',
        display: 'flex', alignItems: 'center', gap: 'clamp(20px, 4vw, 48px)',
        flexWrap: 'wrap',
      }}>
        <div style={{
          fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: 2,
          color: 'var(--muted)', textTransform: 'uppercase',
        }}>
          — 対応エリア
        </div>
        <div style={{ fontSize: 16, fontWeight: 600, letterSpacing: -0.2 }}>
          関東圏 1都6県・全市区町村
        </div>
        <div style={{
          display: 'flex', gap: 6, flexWrap: 'wrap',
          flex: 1, minWidth: 200,
        }}>
          {prefs.map(p => (
            <span key={p} style={{
              fontSize: 12, padding: '4px 12px',
              background: 'var(--bg)',
              borderRadius: 100,
              color: 'var(--fg)',
            }}>{p}</span>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── Voice / Social-proof ────────────────────────────────────
function VoiceSection() {
  const testimonials = [
    { body: 'スコアの理由まで説明してくれるので、自分では気づかなかった観点で比較できた。', meta: '30代・共働き / 目黒区検討' },
    { body: '仕事中でもLINEで少しずつ進められたのが良かった。電話が苦手なので助かった。', meta: '20代・一次取得 / 川崎市検討' },
    { body: '再開発計画まで拾ってくれたのは他では見なかった。判断材料が増えた。', meta: '40代・乗り換え / 千葉市検討' },
  ];
  return (
    <section style={{ padding: 'clamp(64px, 8vw, 120px) 0' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto', padding: '0 clamp(20px, 4vw, 48px)' }}>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--muted)', letterSpacing: 2, textTransform: 'uppercase', marginBottom: 20 }}>— 利用者の声</div>
        <h2 style={{ fontSize: 'clamp(30px, 3.8vw, 44px)', lineHeight: 1.3, fontWeight: 500, letterSpacing: -0.01, margin: '0 0 56px', maxWidth: 640 }}>
          条件が整理される、<br/>
          <span style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontWeight: 400, color: 'var(--accent)' }}>その感覚</span>について。
        </h2>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))', gap: 24 }}>
          {testimonials.map((t, i) => (
            <figure key={i} style={{ margin: 0 }}>
              <div style={{
                fontFamily: 'var(--font-serif)', fontSize: 56, color: 'var(--accent)',
                lineHeight: 0.4, height: 20,
              }}>“</div>
              <blockquote style={{
                margin: '0 0 20px', fontSize: 17, lineHeight: 1.75, letterSpacing: -0.01,
              }}>{t.body}</blockquote>
              <figcaption style={{ fontSize: 12, fontFamily: 'var(--font-mono)', color: 'var(--muted)' }}>
                {t.meta}
              </figcaption>
            </figure>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── FAQ ──────────────────────────────────────────────────────
function FaqWarm({ faqOpen, setFaqOpen }) {
  return (
    <section id="faq" style={{ padding: 'clamp(64px, 8vw, 120px) 0', background: 'var(--bg-soft)' }}>
      <div style={{ maxWidth: 900, margin: '0 auto', padding: '0 clamp(20px, 4vw, 48px)' }}>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--muted)', letterSpacing: 2, textTransform: 'uppercase', marginBottom: 20, textAlign: 'center' }}>— よくある質問</div>
        <h2 style={{ fontSize: 'clamp(30px, 3.8vw, 44px)', lineHeight: 1.3, fontWeight: 500, letterSpacing: -0.01, margin: '0 0 56px', textAlign: 'center' }}>
          疑問は、先に解消を。
        </h2>
        <div style={{ background: 'var(--bg)', borderRadius: 'var(--radius-card)', padding: '8px 32px' }}>
          {FAQS.map((f, i) => (
            <FAQItem key={i} q={f.q} a={f.a} open={faqOpen === i} onToggle={() => setFaqOpen(faqOpen === i ? -1 : i)} />
          ))}
          <div style={{ borderTop: '1px solid var(--hairline)' }}/>
        </div>
      </div>
    </section>
  );
}

// ── Final band ───────────────────────────────────────────────
function FinalBand() {
  return (
    <section style={{ padding: 'clamp(80px, 10vw, 140px) 0' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto', padding: '0 clamp(20px, 4vw, 48px)', textAlign: 'center' }}>
        <h2 style={{
          fontSize: 'clamp(40px, 6vw, 80px)',
          lineHeight: 1.12, letterSpacing: -0.02, fontWeight: 500,
          margin: '0 0 40px',
        }}>
          <span style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontWeight: 400, color: 'var(--accent)' }}>はじめる</span>のは、LINEから。
        </h2>
        <p style={{ fontSize: 17, lineHeight: 1.8, color: 'var(--muted)', maxWidth: 560, margin: '0 auto 40px' }}>
          友だち登録すると、条件ヒアリングが自動で始まります。情報収集段階のご利用でも歓迎です。
        </p>
        <LineCTA label={COPY.cta} size="lg" />
      </div>
    </section>
  );
}

// ── Footer ──────────────────────────────────────────────────
function FooterWarm() {
  return (
    <footer style={{ padding: '48px 0 32px', background: 'var(--bg-soft)' }}>
      <div style={{
        maxWidth: 1200, margin: '0 auto',
        padding: '0 clamp(20px, 4vw, 48px)',
        display: 'grid', gridTemplateColumns: '1fr auto', gap: 24, alignItems: 'start',
      }}>
        <div>
          <div style={{ fontSize: 14, fontWeight: 600 }}>住まいトーク株式会社</div>
          <div style={{ marginTop: 8, fontSize: 12, color: 'var(--muted)', lineHeight: 1.8 }}>
            〒105-0013 東京都港区浜松町2-2-15 浜松町ダイヤビル2F<br/>
            代表取締役CEO 久米 泰弘 / 設立 2018年10月<br/>
            事業内容：不動産テック事業（AIを活用したマンション情報提供サービスの企画・開発・運営）<br/>
            お問い合わせ：<a href="mailto:info@sumaitalk.com" style={{ color: 'inherit' }}>info@sumaitalk.com</a>
          </div>
        </div>
        <div style={{ display: 'flex', gap: 24, fontSize: 12, color: 'var(--muted)' }}>
          <a href="https://corp.sumaitalk.com/" target="_blank" rel="noopener" style={{ color: 'inherit' }}>運営会社</a>
          <a href="terms.html" style={{ color: 'inherit' }}>利用規約</a>
          <a href="privacy.html" style={{ color: 'inherit' }}>プライバシー</a>
        </div>
      </div>
      <div style={{ maxWidth: 1200, margin: '24px auto 0', padding: '0 clamp(20px, 4vw, 48px)', fontSize: 11, color: 'var(--muted)', lineHeight: 1.7 }}>
        本ページは情報提供を目的としており、投資助言ではありません。掲載情報は将来の資産価値や投資成果を保証するものではありません。
      </div>
      <div style={{ maxWidth: 1200, margin: '16px auto 0', padding: '0 clamp(20px, 4vw, 48px)', fontSize: 11, color: 'var(--muted)', fontFamily: 'var(--font-mono)' }}>
        © 2026 Sumaitalk, Inc.
      </div>
    </footer>
  );
}

Object.assign(window, { VariantWarm, NavWarm, HeroWarm, HeroCollage, FeatGrid, UseFlow, Scores, Cover, VoiceSection, FaqWarm, FinalBand, FooterWarm });
