// Variation E — もっとやさしいFP感
// Softer, warmer, friendlier than D. Dusty peach + sage + warm cream.
// More rounded everything, hand-drawn-feel accents, speech-bubble cards,
// gentle shadows, breathing room. Reads more like a personal blog / kind
// neighbour FP than a fintech site.

const VariationE = () => {
  // ★ お問い合わせ・お申し込みフォームの URL — ここを差し替えてください
  const FORM_URL = 'https://docs.google.com/forms/d/e/1FAIpQLSdAvNQ8IHHCRSgVzkicPB46FlKpmWhAxRVBt3Rnqkaxs92tvQ/viewform?usp=dialog';

  const palette = {
    bg: '#fbf6ef',
    paper: '#f5ece0',
    cream: '#fef9f2',
    card: '#ffffff',
    primary: '#e5a896',          // dusty peach
    primaryDeep: '#c8826d',
    primarySoft: '#fae2d6',
    sage: '#a8baa0',
    sageDeep: '#7a9670',
    sageSoft: '#e6ede0',
    gold: '#d4ac6e',
    goldSoft: '#f3e6cf',
    ink: '#4a3d30',
    inkSoft: '#80705e',
    inkFaint: '#b8a995',
    line: '#ebe0cd',
  };
  const t = {
    display: '"Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif',
    serif: '"Shippori Mincho", "Noto Serif JP", serif',
    sans: '"Noto Sans JP", sans-serif',
    mono: '"DM Mono", ui-monospace, monospace',
  };

  const [openFaq, setOpenFaq] = React.useState(0);

  // Watercolor-feel scattered dots background
  const dots = Array.from({ length: 20 }, (_, i) => ({
    cx: (i * 73) % 100,
    cy: (i * 47) % 100,
    r: 0.6 + (i % 3) * 0.4,
    o: 0.05 + (i % 4) * 0.04,
  }));

  return (
    <div style={{ background: palette.bg, color: palette.ink, fontFamily: t.sans, lineHeight: 1.85, fontSize: 15 }}>
      {/* ─────── Header ─────── */}
      <header style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        padding: '20px 56px',
        background: palette.bg + 'ee', backdropFilter: 'blur(10px)',
        position: 'sticky', top: 0, zIndex: 50,
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
          <div style={{
            width: 44, height: 44, borderRadius: '50%',
            background: `radial-gradient(circle at 30% 30%, ${palette.primarySoft}, ${palette.primary})`,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            boxShadow: `inset 0 -3px 8px rgba(200,130,109,0.2)`,
          }}>
            <Icon name="leaf" size={22} color="#fff" stroke={1.8} />
          </div>
          <div>
            <div style={{ fontFamily: t.display, fontSize: 16, fontWeight: 700, letterSpacing: 0.5 }}>{OFFICE_NAME}</div>
            <div style={{ fontSize: 10, color: palette.inkSoft, marginTop: 2 }}>あなたに寄り添う、独立系FP</div>
          </div>
        </div>
        <nav style={{ display: 'flex', gap: 28, fontSize: 13 }}>
          {['TOP', 'プロフィール', 'ご相談メニュー', 'お客様の声', 'よくある質問'].map(n => (
            <a key={n} href="#" style={{ color: palette.ink, textDecoration: 'none', fontWeight: 500 }}>{n}</a>
          ))}
        </nav>
        <a href={FORM_URL} target="_blank" rel="noopener noreferrer" style={{
          padding: '12px 22px', borderRadius: 999, border: 'none',
          background: palette.primary, color: '#fff', fontSize: 13, fontWeight: 700, fontFamily: 'inherit',
          display: 'flex', alignItems: 'center', gap: 8, textDecoration: 'none',
          boxShadow: `0 6px 16px ${palette.primary}55`,
        }}>お問い合わせ <Icon name="arrow" size={14} /></a>
      </header>

      {/* ─────── Hero ─────── */}
      <section style={{ padding: '60px 56px 80px', position: 'relative', overflow: 'hidden' }}>
        {/* watercolor blobs */}
        <div style={{
          position: 'absolute', top: -60, left: -80, width: 380, height: 380,
          borderRadius: '50%', background: `radial-gradient(circle, ${palette.primarySoft}, transparent 70%)`,
          opacity: 0.7,
        }} />
        <div style={{
          position: 'absolute', top: 80, right: -100, width: 320, height: 320,
          borderRadius: '50%', background: `radial-gradient(circle, ${palette.sageSoft}, transparent 70%)`,
          opacity: 0.8,
        }} />
        {/* sprinkled leaves */}
        {[{ t: 60, l: 50, r: 0, s: 24, c: palette.sage }, { t: 120, r: 80, s: 18, c: palette.gold }, { b: 100, l: 30, s: 20, c: palette.primary }].map((d, i) => (
          <div key={i} style={{ position: 'absolute', top: d.t, left: d.l, right: d.r, bottom: d.b, opacity: 0.4, transform: `rotate(${i * 35}deg)` }}>
            <Icon name="leaf" size={d.s} color={d.c} stroke={1.2} />
          </div>
        ))}

        <div style={{ display: 'grid', gridTemplateColumns: '1.05fr 0.95fr', gap: 56, alignItems: 'center', position: 'relative' }}>
          <div>
            {/* gentle pill badge */}
            <div style={{
              display: 'inline-flex', alignItems: 'center', gap: 10,
              padding: '8px 16px', borderRadius: 999,
              background: palette.card, color: palette.primaryDeep,
              fontSize: 12, fontWeight: 700, marginBottom: 32,
              boxShadow: '0 4px 16px rgba(200,130,109,0.12)',
            }}>
              <span style={{ width: 7, height: 7, borderRadius: '50%', background: palette.primary }} />
              保険・投資商品の販売なし／独立系FP
            </div>

            <h1 style={{
              fontFamily: t.display, fontSize: 60, lineHeight: 1.45, fontWeight: 700,
              margin: 0, letterSpacing: 0.5, textWrap: 'pretty', color: palette.ink,
            }}>
              お金のはなしを、<br />
              <span style={{ position: 'relative', display: 'inline-block' }}>
                ゆっくりとどうぞ。
                <svg width="100%" height="20" viewBox="0 0 460 20" preserveAspectRatio="none" style={{ position: 'absolute', left: 0, bottom: -10 }}>
                  <path d="M2 12 Q80 4, 160 11 T320 8 T458 10" stroke={palette.primary} strokeWidth="4" fill="none" strokeLinecap="round" opacity="0.6" />
                </svg>
              </span>
            </h1>
            <p style={{ marginTop: 36, fontSize: 16, color: palette.inkSoft, maxWidth: 460, textWrap: 'pretty', lineHeight: 2 }}>
              ぎゅっとした不安も、<br />
              ふんわりした「気になる」も。<br />
              あなたのペースで、ことばにしていきませんか。
            </p>
            <div style={{ display: 'flex', gap: 14, marginTop: 40, flexWrap: 'wrap' }}>
              <a href={FORM_URL} target="_blank" rel="noopener noreferrer" style={{
                padding: '18px 32px', borderRadius: 999, border: 'none',
                background: palette.primary, color: '#fff', fontSize: 15, fontWeight: 700, fontFamily: 'inherit',
                display: 'flex', alignItems: 'center', gap: 10, textDecoration: 'none',
                boxShadow: `0 12px 28px ${palette.primary}55`,
              }}>
                <Icon name="mail" size={18} /> お問い合わせ・お申し込み
              </a>
              <a href="#service" style={{
                padding: '18px 28px', borderRadius: 999,
                background: 'transparent', color: palette.ink, fontSize: 15, fontWeight: 600, fontFamily: 'inherit',
                display: 'flex', alignItems: 'center', gap: 8, textDecoration: 'none',
                border: `1.5px solid ${palette.line}`,
              }}>
                メニューを見る →
              </a>
            </div>

            {/* gentle stats with leaf bullets */}
            <div style={{ marginTop: 56, display: 'flex', gap: 36 }}>
              {[
                { num: '500', unit: '名+', label: 'のべご相談' },
                { num: '50', unit: '回+', label: '勉強会・イベント' },
                { num: '10', unit: '年+', label: '家計と向き合った歩み' },
              ].map(s => (
                <div key={s.label} style={{ display: 'flex', gap: 10, alignItems: 'flex-start' }}>
                  <Icon name="leaf" size={14} color={palette.sage} stroke={1.8} />
                  <div>
                    <div style={{ display: 'flex', alignItems: 'baseline', gap: 2 }}>
                      <span style={{ fontFamily: t.display, fontSize: 24, fontWeight: 700, color: palette.primaryDeep }}>{s.num}</span>
                      <span style={{ fontSize: 11, color: palette.inkSoft, fontWeight: 600 }}>{s.unit}</span>
                    </div>
                    <div style={{ fontSize: 11, color: palette.inkSoft, marginTop: 1 }}>{s.label}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>

          {/* portrait — soft cloud-shape backdrop */}
          <div style={{ position: 'relative', height: 580, display: 'flex', alignItems: 'flex-end', justifyContent: 'center' }}>
            {/* soft cloud / scallop backdrop */}
            <svg viewBox="0 0 480 520" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
              <defs>
                <radialGradient id="cloudE" cx="50%" cy="55%">
                  <stop offset="0%" stopColor={palette.primarySoft} />
                  <stop offset="100%" stopColor={palette.primarySoft} stopOpacity="0.3" />
                </radialGradient>
              </defs>
              <path
                d="M 240 60 C 340 60, 420 130, 420 250 C 420 370, 360 460, 240 480 C 120 460, 60 370, 60 250 C 60 130, 140 60, 240 60 Z"
                fill="url(#cloudE)"
              />
              {/* scattered dots */}
              {dots.map((d, i) => (
                <circle key={i} cx={d.cx * 4.8} cy={d.cy * 5.2} r={d.r * 3} fill={palette.primaryDeep} opacity={d.o} />
              ))}
            </svg>

            {/* the image */}
            <img src="assets/yurimama-small.png" alt="ゆりママ" style={{
              position: 'relative', height: '95%', objectFit: 'contain', objectPosition: 'bottom',
              filter: 'drop-shadow(0 12px 24px rgba(74,61,48,0.12))',
            }} />

            {/* speech bubble */}
            <div style={{
              position: 'absolute', top: 50, left: 0,
              background: palette.card, padding: '16px 22px', borderRadius: 24,
              borderBottomLeftRadius: 6,
              boxShadow: '0 12px 32px rgba(74,61,48,0.10)',
              maxWidth: 220,
            }}>
              <div style={{ fontSize: 13, fontWeight: 700, color: palette.ink, lineHeight: 1.7 }}>
                売らない・押しつけない。<br />それが私の約束です🌿
              </div>
            </div>

            {/* soft heart chip */}
            <div style={{
              position: 'absolute', bottom: 80, right: 0,
              background: palette.sageSoft, padding: '12px 18px', borderRadius: 999,
              display: 'flex', alignItems: 'center', gap: 10,
              boxShadow: '0 8px 20px rgba(122,150,112,0.18)',
            }}>
              <Icon name="heart" size={18} color={palette.sageDeep} />
              <span style={{ fontSize: 12, fontWeight: 700, color: palette.sageDeep }}>2児ママFP</span>
            </div>
          </div>
        </div>
      </section>

      {/* ─────── PROMISE — soft cards on cream ─────── */}
      <section style={{ padding: '120px 56px', background: palette.cream, position: 'relative' }}>
        <div style={{ maxWidth: 1100, margin: '0 auto', position: 'relative' }}>
          <div style={{ textAlign: 'center', marginBottom: 72 }}>
            <div style={{ display: 'inline-flex', alignItems: 'center', gap: 12, padding: '6px 16px', borderRadius: 999, background: palette.sageSoft, color: palette.sageDeep, fontSize: 11, fontWeight: 700, marginBottom: 20 }}>
              <Icon name="leaf" size={14} stroke={1.8} />
              わたしの約束
            </div>
            <h2 style={{ fontFamily: t.display, fontSize: 44, fontWeight: 700, margin: 0, lineHeight: 1.5 }}>
              「売らない・押しつけない」<br />
              <span style={{ color: palette.primaryDeep }}>それが、一番の約束。</span>
            </h2>
            <p style={{ fontSize: 14, color: palette.inkSoft, marginTop: 20, maxWidth: 540, margin: '20px auto 0', lineHeight: 2 }}>
              保険・金融商品の販売から完全に独立しているからこそ、<br />
              あなたの利益だけを考えたアドバイスができます。
            </p>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
            {PROMISE_POINTS.map((p, i) => {
              const accents = [
                { bg: palette.primarySoft, icon: palette.primaryDeep },
                { bg: palette.sageSoft, icon: palette.sageDeep },
                { bg: palette.goldSoft, icon: palette.gold },
              ];
              const a = accents[i];
              return (
                <div key={p.title} style={{
                  background: palette.card, borderRadius: 32, padding: 36,
                  boxShadow: '0 8px 24px rgba(74,61,48,0.06)',
                  position: 'relative',
                  border: `1px solid ${palette.bg}`,
                }}>
                  {/* large soft icon */}
                  <div style={{
                    width: 72, height: 72, borderRadius: '50%', background: a.bg,
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    marginBottom: 24,
                    boxShadow: `inset 0 -4px 10px ${a.icon}22`,
                  }}>
                    <Icon name={p.icon} size={32} color={a.icon} stroke={1.8} />
                  </div>
                  <h3 style={{ fontFamily: t.display, fontSize: 22, fontWeight: 700, margin: 0, lineHeight: 1.5 }}>{p.title}</h3>
                  <p style={{ fontSize: 14, color: palette.inkSoft, marginTop: 14, lineHeight: 2 }}>{p.desc}</p>

                  {/* hand-drawn corner accent */}
                  <svg width="40" height="40" viewBox="0 0 40 40" style={{ position: 'absolute', top: 20, right: 20, opacity: 0.3 }}>
                    <path d={`M 10 ${i * 6 + 8} Q 20 ${i * 4 + 2}, 30 ${i * 6 + 10}`} stroke={a.icon} strokeWidth="2" fill="none" strokeLinecap="round" />
                  </svg>
                </div>
              );
            })}
          </div>
        </div>
      </section>

      {/* ─────── Profile — soft circular composition ─────── */}
      <section style={{ padding: '140px 56px', position: 'relative', overflow: 'hidden' }}>
        <div style={{
          position: 'absolute', top: 80, left: -120, width: 360, height: 360,
          borderRadius: '50%', background: `radial-gradient(circle, ${palette.sageSoft}, transparent 70%)`,
        }} />

        <div style={{ maxWidth: 1100, margin: '0 auto', display: 'grid', gridTemplateColumns: '0.85fr 1fr', gap: 80, alignItems: 'center', position: 'relative' }}>
          {/* portrait composition */}
          <div style={{ position: 'relative', paddingBottom: 60, paddingRight: 40 }}>
            <div style={{
              position: 'relative', borderRadius: '50%', overflow: 'hidden',
              aspectRatio: '1', width: 'calc(100% - 40px)',
              background: `radial-gradient(circle at 30% 30%, ${palette.cream}, ${palette.primarySoft})`,
              display: 'flex', alignItems: 'flex-end', justifyContent: 'center',
              boxShadow: '0 20px 50px -20px rgba(74,61,48,0.2)',
            }}>
              <img src="assets/yurimama-small.png" alt="ゆりママ" style={{ width: '95%', objectFit: 'contain', objectPosition: 'bottom', marginBottom: '-2%' }} />
            </div>

            {/* secondary photo: with children */}
            <div style={{
              position: 'absolute', bottom: 0, right: 0,
              width: '54%', aspectRatio: '4 / 3',
              borderRadius: 24, overflow: 'hidden',
              border: `6px solid ${palette.cream}`,
              boxShadow: '0 20px 40px rgba(74,61,48,0.18)',
              transform: 'rotate(4deg)',
            }}>
              <img src="assets/yurimama-family.jpg" alt="ゆりママとお子さま" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
            </div>

            {/* tape detail */}
            <div style={{
              position: 'absolute', bottom: '32%', right: '38%',
              width: 56, height: 16, background: `${palette.primary}40`,
              transform: 'rotate(-12deg)',
              borderRadius: 2,
            }} />

            {/* leaf decoration */}
            <div style={{ position: 'absolute', top: '5%', left: '-5%', opacity: 0.5, transform: 'rotate(-20deg)' }}>
              <Icon name="leaf" size={48} color={palette.sage} stroke={1.5} />
            </div>
          </div>

          <div>
            <div style={{ display: 'inline-flex', alignItems: 'center', gap: 10, padding: '6px 14px', borderRadius: 999, background: palette.primarySoft, color: palette.primaryDeep, fontSize: 11, fontWeight: 700, marginBottom: 20 }}>
              <Icon name="user" size={14} stroke={1.8} />
              プロフィール
            </div>
            <h2 style={{ fontFamily: t.display, fontSize: 56, fontWeight: 700, margin: 0, lineHeight: 1.3 }}>
              {FP_NAME}
            </h2>
            <div style={{ fontSize: 14, color: palette.primaryDeep, marginTop: 12, fontWeight: 700 }}>
              独立系ファイナンシャルプランナー ／ 2児のワーママ
            </div>

            <div style={{
              marginTop: 32, padding: '24px 28px',
              background: palette.card, borderRadius: 24,
              borderLeft: `4px solid ${palette.primary}`,
              boxShadow: '0 6px 20px rgba(74,61,48,0.06)',
            }}>
              <div style={{ fontFamily: t.serif, fontSize: 17, color: palette.ink, lineHeight: 2.2, textWrap: 'pretty' }}>
                「お金のはなしを、もっと、ゆっくり。」<br />
                ことばにできない不安も、一緒に解きほぐしていきます。
              </div>
            </div>

            <p style={{ fontSize: 15, color: palette.inkSoft, marginTop: 28, textWrap: 'pretty', lineHeight: 2.1 }}>
              地方公務員として勤務しながら、第二子の出産・育休復帰を経て<strong style={{ color: palette.primaryDeep, fontWeight: 700 }}>FP2級</strong>を取得。<strong style={{ color: palette.primaryDeep, fontWeight: 700 }}>保育士資格</strong>もあり、教育費や子育て期の働き方まで、ママの視点で一緒に考えます。「自分も家計と本気で向き合いたい」その体験を、同じ立場のワーママに届けたいと思い、独立しました。
            </p>

            {/* differentiator badge */}
            <div style={{
              display: 'inline-flex', alignItems: 'center', gap: 12,
              padding: '10px 18px', borderRadius: 999,
              background: `linear-gradient(135deg, ${palette.sageSoft}, ${palette.primarySoft})`,
              marginTop: 24,
              boxShadow: '0 4px 12px rgba(74,61,48,0.08)',
            }}>
              <Icon name="sparkle" size={16} color={palette.primaryDeep} stroke={2} />
              <span style={{ fontSize: 13, fontWeight: 700, color: palette.ink }}>
                <span style={{ color: palette.sageDeep }}>保育士</span> × <span style={{ color: palette.primaryDeep }}>FP</span> の二刀流
              </span>
            </div>

            {/* career chips */}
            <div style={{ marginTop: 24, display: 'flex', flexWrap: 'wrap', gap: 8, alignItems: 'center' }}>
              {['地方公務員', '出産・育休', 'FP2級＋保育士', '独立・開業'].map((label, i, arr) => (
                <React.Fragment key={label}>
                  <span style={{
                    padding: '8px 16px', borderRadius: 999, fontSize: 12, fontWeight: 600,
                    background: i === arr.length - 1 ? palette.primary : palette.card,
                    color: i === arr.length - 1 ? '#fff' : palette.ink,
                    boxShadow: i === arr.length - 1 ? `0 4px 12px ${palette.primary}55` : '0 2px 6px rgba(74,61,48,0.06)',
                  }}>{label}</span>
                  {i < arr.length - 1 && <span style={{ color: palette.inkFaint, fontSize: 14 }}>→</span>}
                </React.Fragment>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* ─────── Service Menu — soft pillow cards ─────── */}
      <section id="service" style={{ padding: '120px 56px', background: palette.paper, position: 'relative' }}>
        <div style={{ maxWidth: 1100, margin: '0 auto' }}>
          <div style={{ textAlign: 'center', marginBottom: 64 }}>
            <div style={{ display: 'inline-flex', alignItems: 'center', gap: 10, padding: '6px 14px', borderRadius: 999, background: palette.card, color: palette.primaryDeep, fontSize: 11, fontWeight: 700, marginBottom: 20, boxShadow: '0 4px 12px rgba(74,61,48,0.06)' }}>
              <Icon name="book" size={14} stroke={1.8} />
              ご相談メニュー
            </div>
            <h2 style={{ fontFamily: t.display, fontSize: 44, fontWeight: 700, margin: 0 }}>
              あなたの「今」に合わせて、<br />
              3つご用意しています。
            </h2>
          </div>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 28 }}>
            {PRICING.map((p, i) => {
              const num = String(i + 1).padStart(2, '0');
              const isRecommend = p.recommend;
              const cardBg = isRecommend ? palette.primary : palette.card;
              const cardText = isRecommend ? '#fff' : palette.ink;

              return (
                <article key={p.name} style={{
                  background: cardBg,
                  color: cardText,
                  borderRadius: 36, padding: 40,
                  position: 'relative',
                  boxShadow: isRecommend
                    ? '0 24px 50px -12px rgba(200,130,109,0.45)'
                    : '0 12px 32px rgba(74,61,48,0.07)',
                  display: 'grid', gridTemplateColumns: '90px 1fr', gap: 36, alignItems: 'flex-start',
                }}>
                  {/* big rounded number bubble */}
                  <div style={{
                    width: 80, height: 80, borderRadius: '50%',
                    background: isRecommend ? 'rgba(255,255,255,0.22)' : palette.primarySoft,
                    color: isRecommend ? '#fff' : palette.primaryDeep,
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    fontFamily: t.display, fontSize: 24, fontWeight: 700,
                  }}>{num}</div>

                  <div>
                    {isRecommend && (
                      <div style={{
                        display: 'inline-flex', alignItems: 'center', gap: 6,
                        padding: '5px 14px', borderRadius: 999,
                        background: '#fff', color: palette.primaryDeep,
                        fontSize: 11, fontWeight: 700, marginBottom: 16,
                      }}>
                        <Icon name="sparkle" size={12} stroke={2} />
                        主力・おすすめ
                      </div>
                    )}
                    <h3 style={{ fontFamily: t.display, fontSize: 26, fontWeight: 700, margin: 0, lineHeight: 1.5 }}>{p.name}</h3>
                    <div style={{ fontSize: 13, color: isRecommend ? 'rgba(255,255,255,0.95)' : palette.primaryDeep, fontWeight: 700, marginTop: 8 }}>
                      🌿 {p.tag}
                    </div>
                    <p style={{ fontSize: 14, opacity: isRecommend ? 0.95 : 1, color: isRecommend ? '#fff' : palette.inkSoft, marginTop: 16, lineHeight: 2, textWrap: 'pretty' }}>
                      {p.desc}
                    </p>

                    {/* pricing tiers as gentle pills */}
                    <div style={{ marginTop: 24, paddingTop: 24, borderTop: `1px dashed ${isRecommend ? 'rgba(255,255,255,0.4)' : palette.line}`, display: 'flex', flexWrap: 'wrap', gap: 12 }}>
                      {p.tiers.map((tier) => (
                        <div key={tier.label} style={{
                          padding: '12px 18px', borderRadius: 16,
                          background: isRecommend ? 'rgba(255,255,255,0.15)' : palette.bg,
                          display: 'flex', flexDirection: 'column', gap: 2,
                        }}>
                          <div style={{ fontSize: 10, opacity: 0.75, fontWeight: 600 }}>{tier.label}</div>
                          <div style={{ fontFamily: t.display, fontSize: 22, fontWeight: 700 }}>{tier.price}</div>
                          {tier.sub && <div style={{ fontSize: 10, opacity: 0.7 }}>{tier.sub}</div>}
                        </div>
                      ))}
                    </div>

                    <a href={FORM_URL} target="_blank" rel="noopener noreferrer" style={{
                      display: 'inline-flex', alignItems: 'center', gap: 8, marginTop: 28,
                      padding: '14px 26px', borderRadius: 999,
                      background: isRecommend ? '#fff' : palette.ink,
                      color: isRecommend ? palette.primaryDeep : '#fff',
                      fontSize: 13, fontWeight: 700, textDecoration: 'none',
                    }}>
                      このメニューで申し込む <Icon name="arrow" size={14} />
                    </a>
                  </div>
                </article>
              );
            })}
          </div>

          <p style={{ textAlign: 'center', marginTop: 36, fontSize: 13, color: palette.inkSoft }}>
            💌 どのメニューが合うかわからない場合も、お気軽にお問い合わせください。
          </p>
        </div>
      </section>

      {/* ─────── Process — gentle stepped path ─────── */}
      <section style={{ padding: '120px 56px', position: 'relative', overflow: 'hidden' }}>
        <div style={{
          position: 'absolute', top: 60, right: -100, width: 360, height: 360,
          borderRadius: '50%', background: `radial-gradient(circle, ${palette.sageSoft}, transparent 70%)`,
        }} />
        <div style={{ maxWidth: 1100, margin: '0 auto', position: 'relative' }}>
          <div style={{ marginBottom: 56 }}>
            <div style={{ display: 'inline-flex', alignItems: 'center', gap: 10, padding: '6px 14px', borderRadius: 999, background: palette.sageSoft, color: palette.sageDeep, fontSize: 11, fontWeight: 700, marginBottom: 16 }}>
              <Icon name="seed" size={14} stroke={1.8} />
              ご相談の流れ
            </div>
            <h2 style={{ fontFamily: t.display, fontSize: 40, fontWeight: 700, margin: 0 }}>
              4ステップで、はじめられます。
            </h2>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16, position: 'relative' }}>
            {/* connecting wavy line */}
            <svg viewBox="0 0 1000 30" preserveAspectRatio="none" style={{ position: 'absolute', top: 38, left: '7%', width: '86%', height: 30, zIndex: 0 }}>
              <path d="M 0 15 Q 125 0, 250 15 T 500 15 T 750 15 T 1000 15" stroke={palette.primary} strokeWidth="2.5" fill="none" strokeLinecap="round" strokeDasharray="4 6" opacity="0.5" />
            </svg>

            {PROCESS_STEPS.map((p, i) => (
              <div key={p.step} style={{ position: 'relative', textAlign: 'center', zIndex: 1 }}>
                <div style={{
                  width: 76, height: 76, borderRadius: '50%',
                  background: i % 2 === 0 ? palette.primarySoft : palette.sageSoft,
                  color: i % 2 === 0 ? palette.primaryDeep : palette.sageDeep,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontFamily: t.display, fontSize: 22, fontWeight: 700,
                  margin: '0 auto 24px',
                  border: `5px solid ${palette.bg}`,
                  boxShadow: '0 6px 16px rgba(74,61,48,0.08)',
                }}>{p.step}</div>
                <h4 style={{ fontFamily: t.display, fontSize: 17, fontWeight: 700, margin: '0 0 10px' }}>{p.title}</h4>
                <p style={{ fontSize: 13, color: palette.inkSoft, lineHeight: 2 }}>{p.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ─────── Testimonials — soft hand-cards ─────── */}
      <section style={{ padding: '120px 56px', position: 'relative', overflow: 'hidden' }}>
        <div style={{
          position: 'absolute', top: 80, right: -100, width: 360, height: 360,
          borderRadius: '50%', background: `radial-gradient(circle, ${palette.primarySoft}, transparent 70%)`,
          opacity: 0.6,
        }} />

        <div style={{ maxWidth: 1180, margin: '0 auto', position: 'relative' }}>
          <div style={{ textAlign: 'center', marginBottom: 64 }}>
            <div style={{ display: 'inline-flex', alignItems: 'center', gap: 10, padding: '6px 14px', borderRadius: 999, background: palette.goldSoft, color: palette.gold, fontSize: 11, fontWeight: 700, marginBottom: 20 }}>
              <Icon name="heart" size={14} stroke={1.8} />
              お客様の声
            </div>
            <h2 style={{ fontFamily: t.display, fontSize: 44, fontWeight: 700, margin: 0, lineHeight: 1.5 }}>
              ご相談くださった、<br />
              <span style={{ color: palette.primaryDeep }}>みなさまのことば。</span>
            </h2>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
            {TESTIMONIALS.map((tt, i) => {
              const tones = [
                { bg: palette.card, accent: palette.primarySoft, deep: palette.primaryDeep, rotate: -1.5 },
                { bg: palette.cream, accent: palette.sageSoft, deep: palette.sageDeep, rotate: 1 },
                { bg: palette.card, accent: palette.goldSoft, deep: palette.gold, rotate: -0.5 },
              ];
              const tn = tones[i];
              return (
                <div key={i} style={{
                  background: tn.bg, borderRadius: 32, padding: 32,
                  boxShadow: '0 12px 28px rgba(74,61,48,0.07)',
                  transform: `rotate(${tn.rotate}deg)`,
                  position: 'relative',
                  display: 'flex', flexDirection: 'column',
                }}>
                  {/* quote mark */}
                  <div style={{
                    width: 48, height: 48, borderRadius: '50%', background: tn.accent,
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    marginBottom: 20,
                  }}>
                    <Icon name="quote" size={22} color={tn.deep} stroke={2} />
                  </div>

                  {/* 5 stars (soft) */}
                  <div style={{ display: 'flex', gap: 4, marginBottom: 16 }}>
                    {[0,1,2,3,4].map(s => <Icon key={s} name="star" size={14} color={palette.gold} stroke={0} />)}
                  </div>

                  <p style={{ fontFamily: t.serif, fontSize: 15, lineHeight: 2, margin: 0, color: palette.ink, textWrap: 'pretty', flex: 1 }}>
                    「{tt.text}」
                  </p>

                  {/* who */}
                  <div style={{ marginTop: 28, paddingTop: 20, borderTop: `1px dashed ${palette.line}`, display: 'flex', alignItems: 'center', gap: 14 }}>
                    <div style={{
                      width: 44, height: 44, borderRadius: '50%', background: tn.accent,
                      color: tn.deep, display: 'flex', alignItems: 'center', justifyContent: 'center',
                      fontFamily: t.display, fontSize: 16, fontWeight: 700,
                    }}>{['M', 'K', 'T'][i]}</div>
                    <div>
                      <div style={{ fontSize: 13, fontWeight: 700 }}>{tt.who}</div>
                      <div style={{ fontSize: 11, color: palette.inkSoft, marginTop: 2 }}>{tt.area}</div>
                    </div>
                  </div>
                </div>
              );
            })}
          </div>

          <div style={{ textAlign: 'center', marginTop: 40 }}>
            <a href="#" style={{
              display: 'inline-flex', alignItems: 'center', gap: 8,
              padding: '12px 24px', borderRadius: 999,
              background: 'transparent', color: palette.ink, fontSize: 13, fontWeight: 600,
              textDecoration: 'none', border: `1.5px solid ${palette.line}`,
            }}>
              もっと見る →
            </a>
          </div>
        </div>
      </section>

      {/* ─────── FAQ — speech bubble style ─────── */}
      <section style={{ padding: '120px 56px', background: palette.cream }}>
        <div style={{ maxWidth: 880, margin: '0 auto' }}>
          <div style={{ textAlign: 'center', marginBottom: 56 }}>
            <div style={{ display: 'inline-flex', alignItems: 'center', gap: 10, padding: '6px 14px', borderRadius: 999, background: palette.primarySoft, color: palette.primaryDeep, fontSize: 11, fontWeight: 700, marginBottom: 16 }}>
              <Icon name="quote" size={14} stroke={1.8} />
              よくあるご質問
            </div>
            <h2 style={{ fontFamily: t.display, fontSize: 40, fontWeight: 700, margin: 0 }}>
              気になること、ありませんか？
            </h2>
          </div>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            {FAQS.map((f, i) => (
              <div key={i} style={{
                background: palette.card, borderRadius: 28, overflow: 'hidden',
                boxShadow: '0 6px 18px rgba(74,61,48,0.05)',
              }}>
                <button onClick={() => setOpenFaq(openFaq === i ? -1 : i)} style={{
                  width: '100%', padding: '24px 28px',
                  display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start',
                  background: 'transparent', border: 'none', cursor: 'pointer', textAlign: 'left',
                  fontSize: 16, fontWeight: 700, color: palette.ink, fontFamily: 'inherit', gap: 16,
                }}>
                  <span style={{ display: 'flex', alignItems: 'flex-start', gap: 16, flex: 1 }}>
                    <span style={{
                      width: 36, height: 36, borderRadius: '50%', background: palette.primarySoft,
                      color: palette.primaryDeep, fontFamily: t.display, fontSize: 16, fontWeight: 700,
                      display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
                    }}>Q</span>
                    <span style={{ lineHeight: 1.7, paddingTop: 5 }}>{f.q}</span>
                  </span>
                  <div style={{
                    width: 32, height: 32, borderRadius: '50%', flexShrink: 0,
                    background: openFaq === i ? palette.primary : palette.bg,
                    color: openFaq === i ? '#fff' : palette.ink,
                    display: 'flex', alignItems: 'center', justifyContent: 'center', transition: 'all .2s',
                    marginTop: 2,
                  }}>
                    <Icon name={openFaq === i ? 'minus' : 'plus'} size={14} />
                  </div>
                </button>
                {openFaq === i && (
                  <div style={{ padding: '0 28px 28px 80px', display: 'flex', gap: 16, alignItems: 'flex-start' }}>
                    <span style={{
                      width: 36, height: 36, borderRadius: '50%', background: palette.sageSoft,
                      color: palette.sageDeep, fontFamily: t.display, fontSize: 16, fontWeight: 700,
                      display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
                      marginLeft: -52,
                    }}>A</span>
                    <div style={{ fontSize: 14, color: palette.inkSoft, lineHeight: 2.1, paddingTop: 6 }}>
                      {f.a}
                    </div>
                  </div>
                )}
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ─────── Social — note / Instagram / X ─────── */}
      <section style={{ padding: '100px 56px', background: palette.cream, position: 'relative', overflow: 'hidden' }}>
        <div style={{ maxWidth: 1100, margin: '0 auto', position: 'relative' }}>
          <div style={{ textAlign: 'center', marginBottom: 56 }}>
            <div style={{ display: 'inline-flex', alignItems: 'center', gap: 10, padding: '6px 14px', borderRadius: 999, background: palette.primarySoft, color: palette.primaryDeep, fontSize: 11, fontWeight: 700, marginBottom: 20 }}>
              <Icon name="sparkle" size={14} stroke={1.8} />
              SNS で発信中
            </div>
            <h2 style={{ fontFamily: t.display, fontSize: 40, fontWeight: 700, margin: 0, lineHeight: 1.5 }}>
              ふだんの発信も、<br />
              <span style={{ color: palette.primaryDeep }}>のぞいてみてください。</span>
            </h2>
            <p style={{ fontSize: 14, color: palette.inkSoft, marginTop: 16, maxWidth: 480, margin: '16px auto 0', lineHeight: 2 }}>
              note ではコラム、Instagramでは日々の気づき、Xでは小さなお金のヒントを発信しています。
            </p>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
            {[
              {
                name: 'note',
                handle: '@yuri_lifeplan',
                desc: 'お金のコラム・ライフプランの話を、じっくり書いています。',
                href: 'https://note.com/yuri_lifeplan',
                color: '#41C9B4',
                bg: '#e8faf6',
                logo: (
                  <svg viewBox="0 0 60 60" width="32" height="32">
                    <rect width="60" height="60" rx="14" fill="#41C9B4" />
                    <text x="30" y="42" textAnchor="middle" fontSize="32" fontWeight="800" fill="#fff" fontFamily="sans-serif">n</text>
                  </svg>
                ),
              },
              {
                name: 'Instagram',
                handle: '@yurimama.money',
                desc: '日々の発信と、相談の現場のリアル。フォローお気軽に🌿',
                href: 'https://www.instagram.com/yurimama.money/',
                color: '#E1306C',
                bg: '#fce4ed',
                logo: (
                  <svg viewBox="0 0 60 60" width="32" height="32">
                    <defs>
                      <linearGradient id="igGrad" x1="0%" y1="100%" x2="100%" y2="0%">
                        <stop offset="0%" stopColor="#FED576" />
                        <stop offset="35%" stopColor="#F47133" />
                        <stop offset="70%" stopColor="#BC3081" />
                        <stop offset="100%" stopColor="#4C63D2" />
                      </linearGradient>
                    </defs>
                    <rect width="60" height="60" rx="14" fill="url(#igGrad)" />
                    <rect x="14" y="14" width="32" height="32" rx="9" fill="none" stroke="#fff" strokeWidth="2.5" />
                    <circle cx="30" cy="30" r="7" fill="none" stroke="#fff" strokeWidth="2.5" />
                    <circle cx="41" cy="19" r="2" fill="#fff" />
                  </svg>
                ),
              },
              {
                name: 'X (Twitter)',
                handle: '@lifeplan_yuri',
                desc: 'ちいさな気づきや、お金のヒントを短く呟いています。',
                href: 'https://x.com/lifeplan_yuri',
                color: '#000',
                bg: '#f0ede8',
                logo: (
                  <svg viewBox="0 0 60 60" width="32" height="32">
                    <rect width="60" height="60" rx="14" fill="#000" />
                    <path d="M 16 16 L 26 30 L 16 44 L 21 44 L 28 35 L 35 44 L 44 44 L 33 29 L 43 16 L 38 16 L 32 24 L 25 16 Z" fill="#fff" />
                  </svg>
                ),
              },
            ].map(s => (
              <a key={s.name} href={s.href} target="_blank" rel="noopener noreferrer" style={{
                background: palette.card, borderRadius: 28, padding: 28,
                boxShadow: '0 8px 24px rgba(74,61,48,0.06)',
                display: 'flex', flexDirection: 'column', gap: 16,
                textDecoration: 'none', color: palette.ink,
                transition: 'transform .15s, box-shadow .15s',
                position: 'relative',
              }}
              onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-4px)'; e.currentTarget.style.boxShadow = '0 16px 36px rgba(74,61,48,0.10)'; }}
              onMouseLeave={e => { e.currentTarget.style.transform = ''; e.currentTarget.style.boxShadow = '0 8px 24px rgba(74,61,48,0.06)'; }}
              >
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                  {s.logo}
                  <div style={{
                    width: 36, height: 36, borderRadius: '50%', background: palette.bg,
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                  }}>
                    <Icon name="arrow" size={14} color={palette.ink} />
                  </div>
                </div>
                <div>
                  <div style={{ fontFamily: t.display, fontSize: 20, fontWeight: 700 }}>{s.name}</div>
                  <div style={{ fontSize: 12, color: palette.inkSoft, marginTop: 2, fontFamily: t.mono }}>{s.handle}</div>
                </div>
                <p style={{ fontSize: 13, color: palette.inkSoft, margin: 0, lineHeight: 1.9 }}>{s.desc}</p>
                <div style={{
                  marginTop: 'auto', paddingTop: 12,
                  fontSize: 12, fontWeight: 700, color: s.color,
                  display: 'flex', alignItems: 'center', gap: 6,
                }}>
                  フォローする →
                </div>
              </a>
            ))}
          </div>
        </div>
      </section>

      {/* ─────── Contact CTA — warm closer ─────── */}
      <section style={{ padding: '140px 56px', background: `linear-gradient(180deg, ${palette.primarySoft} 0%, ${palette.cream} 100%)`, position: 'relative', overflow: 'hidden' }}>
        <div style={{ position: 'absolute', top: 40, right: 60, opacity: 0.4 }}>
          <Icon name="leaf" size={120} color={palette.sage} stroke={1} />
        </div>
        <div style={{ position: 'absolute', bottom: 40, left: 80, opacity: 0.3, transform: 'rotate(180deg)' }}>
          <Icon name="seed" size={100} color={palette.primaryDeep} stroke={1} />
        </div>

        <div style={{ maxWidth: 820, margin: '0 auto', position: 'relative', textAlign: 'center' }}>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 10, padding: '6px 14px', borderRadius: 999, background: palette.card, color: palette.primaryDeep, fontSize: 11, fontWeight: 700, marginBottom: 24, boxShadow: '0 4px 12px rgba(74,61,48,0.08)' }}>
            <Icon name="mail" size={14} stroke={1.8} />
            お問い合わせ
          </div>
          <h2 style={{ fontFamily: t.display, fontSize: 52, fontWeight: 700, margin: 0, lineHeight: 1.5, color: palette.ink }}>
            「ちょっと話してみようかな」<br />
            <span style={{ color: palette.primaryDeep }}>その一歩から、はじめましょう。</span>
          </h2>
          <p style={{ fontSize: 15, color: palette.inkSoft, marginTop: 28, maxWidth: 560, margin: '28px auto 0', lineHeight: 2.1 }}>
            お問い合わせ・お申し込みは、フォームから 24時間 受付中です。<br />
            ご返信は 平日 9:30〜15:00 を基本としています。
          </p>

          <div style={{ marginTop: 56 }}>
            <a
              href={FORM_URL}
              target="_blank"
              rel="noopener noreferrer"
              style={{
                display: 'inline-flex', alignItems: 'center', gap: 14,
                padding: '22px 48px', borderRadius: 999, background: palette.primary,
                color: '#fff', fontSize: 17, fontWeight: 700, fontFamily: 'inherit',
                textDecoration: 'none',
                boxShadow: `0 16px 40px ${palette.primary}66`,
              }}
            >
              <Icon name="mail" size={22} color="#fff" />
              お問い合わせ・お申し込みフォーム
              <Icon name="arrow" size={20} color="#fff" />
            </a>
            <div style={{ fontSize: 12, color: palette.inkSoft, marginTop: 16 }}>
              ↗ 新しいタブでフォームが開きます
            </div>
          </div>

          <div style={{ marginTop: 64, display: 'flex', justifyContent: 'center', gap: 28, flexWrap: 'wrap' }}>
            {[
              { icon: 'calendar', label: '平日 9:30〜15:00 ご返信' },
              { icon: 'house', label: 'オンライン中心' },
              { icon: 'check', label: '迷ったままでもOK' },
            ].map(c => (
              <div key={c.label} style={{
                display: 'flex', alignItems: 'center', gap: 10,
                padding: '12px 20px', borderRadius: 999,
                background: palette.card,
                boxShadow: '0 4px 12px rgba(74,61,48,0.05)',
              }}>
                <Icon name={c.icon} size={16} color={palette.primaryDeep} />
                <span style={{ fontSize: 13, fontWeight: 600, color: palette.ink }}>{c.label}</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ─────── Footer ─────── */}
      <footer style={{ padding: '56px 56px 32px', background: palette.ink, color: palette.cream }}>
        <div style={{ maxWidth: 1180, margin: '0 auto' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', flexWrap: 'wrap', gap: 32, paddingBottom: 32, borderBottom: '1px solid rgba(255,255,255,0.1)' }}>
            <div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 16 }}>
                <div style={{
                  width: 44, height: 44, borderRadius: '50%',
                  background: palette.primary,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                }}>
                  <Icon name="leaf" size={22} color="#fff" stroke={1.8} />
                </div>
                <div>
                  <div style={{ fontFamily: t.display, fontSize: 17, fontWeight: 700 }}>{OFFICE_NAME}</div>
                  <div style={{ fontSize: 11, opacity: 0.6, marginTop: 2 }}>あなたに寄り添う、独立系FP</div>
                </div>
              </div>
              <p style={{ fontSize: 12, opacity: 0.55, maxWidth: 320, lineHeight: 1.9, margin: 0 }}>
                保険・投資商品の販売を一切行わない独立系FP。お問い合わせはフォームから24時間受付中です。
              </p>
            </div>

            {/* social row (compact footer version) */}
            <div>
              <div style={{ fontSize: 11, opacity: 0.55, fontWeight: 600, marginBottom: 12, letterSpacing: 1, fontFamily: t.mono }}>FOLLOW</div>
              <div style={{ display: 'flex', gap: 10 }}>
                {[
                  { name: 'note', href: 'https://note.com/yuri_lifeplan', color: '#41C9B4',
                    inner: <text x="20" y="27" textAnchor="middle" fontSize="22" fontWeight="800" fill="#fff" fontFamily="sans-serif">n</text> },
                  { name: 'Instagram', href: 'https://www.instagram.com/yurimama.money/', color: '#E1306C',
                    inner: <g>
                      <rect x="10" y="10" width="20" height="20" rx="5" fill="none" stroke="#fff" strokeWidth="2" />
                      <circle cx="20" cy="20" r="4.5" fill="none" stroke="#fff" strokeWidth="2" />
                      <circle cx="26.5" cy="13.5" r="1.4" fill="#fff" />
                    </g> },
                  { name: 'X', href: 'https://x.com/lifeplan_yuri', color: '#fff',
                    inner: <path d="M 11 11 L 18 20 L 11 29 L 14 29 L 19.5 23 L 24 29 L 29 29 L 22 20 L 28.5 11 L 25.5 11 L 21 17 L 16 11 Z" fill="#fff" /> },
                ].map(s => (
                  <a key={s.name} href={s.href} target="_blank" rel="noopener noreferrer" aria-label={s.name} style={{
                    width: 40, height: 40, borderRadius: '50%', background: 'rgba(255,255,255,0.08)',
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    textDecoration: 'none', transition: 'background .15s',
                  }}
                  onMouseEnter={e => e.currentTarget.style.background = s.color === '#fff' ? 'rgba(255,255,255,0.18)' : s.color}
                  onMouseLeave={e => e.currentTarget.style.background = 'rgba(255,255,255,0.08)'}
                  >
                    <svg viewBox="0 0 40 40" width="22" height="22">
                      {s.inner}
                    </svg>
                  </a>
                ))}
              </div>
            </div>

            <div>
              <div style={{ fontSize: 11, opacity: 0.55, fontWeight: 600, marginBottom: 12, letterSpacing: 1, fontFamily: t.mono }}>MENU</div>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '8px 24px', fontSize: 13 }}>
                {['TOP', 'プロフィール', 'ご相談メニュー', 'お客様の声', 'よくある質問'].map(n => (
                  <a key={n} href="#" style={{ color: palette.cream, opacity: 0.7, textDecoration: 'none' }}>{n}</a>
                ))}
              </div>
            </div>
          </div>

          <div style={{ paddingTop: 24, display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontSize: 11, opacity: 0.5, flexWrap: 'wrap', gap: 12 }}>
            <div>© 2026 {OFFICE_NAME}</div>
            <div>Privacy  ·  Terms</div>
          </div>
        </div>
      </footer>
    </div>
  );
};

window.VariationE = VariationE;