// Codex visual assets — LPノウハウ準拠の asset-* 素材群
// asset-problem-cards / asset-solution-flow / asset-trust-row / floating-proof-cards

const AssetProblemScenes = () => {
  const scenes = [
    { icon: '☾', title: '恋愛で迷う夜', body: '送る言葉を考えすぎて、気持ちだけがぐるぐるする。', chip: '相性・タロット' },
    { icon: '☁', title: '夢を忘れそうな朝', body: '印象に残った夢の意味を、忘れる前にそっと見ておきたい。', chip: '夢占い' },
    { icon: '☼', title: '出かける前の1分', body: '今日の流れを知って、少し落ち着いて一日を始めたい。', chip: '今日の運勢' },
  ];

  return (
    <section style={{ paddingTop: 34, paddingBottom: 34 }}>
      <div style={{ textAlign: 'center', marginBottom: 22 }}>
        <div className="eyebrow">— Scene Cards —</div>
        <h2 className="section-title">こんな時に、<br/><em>ひらきたくなる。</em></h2>
      </div>
      <div style={{ display: 'grid', gap: 12 }}>
        {scenes.map((s, i) => (
          <article key={s.title} className="card" style={{
            position: 'relative', overflow: 'hidden', padding: '18px 16px 18px 18px',
            minHeight: 138,
            background: i === 0
              ? 'linear-gradient(135deg, rgba(255,250,248,0.9), rgba(232,214,245,0.72))'
              : i === 1
                ? 'linear-gradient(135deg, rgba(255,255,255,0.9), rgba(247,217,234,0.72))'
                : 'linear-gradient(135deg, rgba(255,250,240,0.9), rgba(253,230,230,0.78))',
          }}>
            <div style={{
              position: 'absolute', right: -16, top: -22,
              width: 100, height: 100, borderRadius: '50%',
              background: 'radial-gradient(circle, rgba(255,255,255,0.72), rgba(203,168,104,0.08) 62%, transparent 68%)',
            }}/>
            <div style={{ display: 'grid', gridTemplateColumns: '54px 1fr', gap: 13, alignItems: 'center', position: 'relative' }}>
              <div style={{
                width: 54, height: 54, borderRadius: 20,
                display: 'grid', placeItems: 'center', fontSize: 25,
                color: '#fff',
                background: 'linear-gradient(160deg, var(--accent), var(--accent-deep))',
                boxShadow: '0 16px 30px -18px rgba(194,90,130,0.66)',
              }}>{s.icon}</div>
              <div>
                <div style={{
                  display: 'inline-flex', borderRadius: 999, padding: '3px 9px',
                  background: 'rgba(255,255,255,0.72)', border: '1px solid rgba(203,168,104,0.24)',
                  color: 'var(--accent-deep)', fontSize: 10.5, fontFamily: 'var(--title-font)', letterSpacing: '0.1em',
                  marginBottom: 6,
                }}>{s.chip}</div>
                <h3 style={{ fontSize: 16.5, lineHeight: 1.55, marginBottom: 5 }}>{s.title}</h3>
                <p style={{ margin: 0, color: 'var(--ink-soft)', fontSize: 12.4, lineHeight: 1.85 }}>{s.body}</p>
              </div>
            </div>
          </article>
        ))}
      </div>
    </section>
  );
};

const AssetSolutionFlow = () => {
  const nodes = [
    ['Input', '迷いを選ぶ', '恋愛 / 夢 / 今日'],
    ['Reading', '占いを見る', 'やさしい言葉で整理'],
    ['Next', '保存・相談', '必要な時だけ進む'],
  ];
  return (
    <section style={{ paddingTop: 34, paddingBottom: 34 }}>
      <div className="card" style={{ padding: '22px 18px', overflow: 'hidden', background: 'linear-gradient(160deg, rgba(255,255,255,0.88), rgba(251,238,243,0.82))' }}>
        <div style={{ textAlign: 'center', marginBottom: 18 }}>
          <div className="eyebrow" style={{ fontSize: 11 }}>— Input to Output —</div>
          <h2 style={{ fontSize: 20, lineHeight: 1.65, marginTop: 8 }}>使い方を、<br/>ひと目で。</h2>
        </div>
        <div style={{ display: 'grid', gap: 10 }}>
          {nodes.map(([latin, title, body], i) => (
            <React.Fragment key={latin}>
              <div style={{
                display: 'grid', gridTemplateColumns: '64px 1fr', gap: 12, alignItems: 'center',
                padding: '13px 12px', borderRadius: 18, background: 'rgba(255,255,255,0.72)',
                border: '1px solid rgba(203,168,104,0.22)',
              }}>
                <div style={{
                  width: 64, height: 64, borderRadius: 22,
                  background: i === 1 ? 'linear-gradient(180deg, var(--accent), var(--accent-deep))' : 'linear-gradient(180deg, var(--gold-soft), var(--accent))',
                  color: '#fff', display: 'grid', placeItems: 'center',
                  fontFamily: 'var(--latin)', fontStyle: 'italic', fontSize: 13,
                  textAlign: 'center', boxShadow: '0 14px 28px -18px rgba(150,100,130,0.6)',
                }}>{latin}</div>
                <div>
                  <h3 style={{ fontSize: 15.5, marginBottom: 4 }}>{title}</h3>
                  <p style={{ margin: 0, color: 'var(--ink-soft)', fontSize: 12.2, lineHeight: 1.8 }}>{body}</p>
                </div>
              </div>
              {i < nodes.length - 1 && <div style={{ textAlign: 'center', color: 'var(--gold)', fontSize: 20, lineHeight: 1 }}>↓</div>}
            </React.Fragment>
          ))}
        </div>
      </div>
    </section>
  );
};

const AssetTrustRow = () => {
  const badges = ['無料登録', 'メールだけ', '停止OK', '怖がらせない', 'iOS/Android予定'];
  return (
    <div style={{
      display: 'flex', flexWrap: 'wrap', gap: 8, justifyContent: 'center',
      padding: '14px 10px', margin: '10px 0 0',
    }}>
      {badges.map((b) => (
        <span key={b} style={{
          display: 'inline-flex', alignItems: 'center', gap: 5,
          padding: '7px 10px', borderRadius: 999,
          background: 'rgba(255,255,255,0.74)', border: '1px solid rgba(203,168,104,0.28)',
          color: 'var(--ink)', fontFamily: 'var(--title-font)', fontSize: 10.8, letterSpacing: '0.08em',
          boxShadow: '0 8px 18px -16px rgba(150,100,130,0.35)',
        }}><span style={{ color: 'var(--gold)' }}>✦</span>{b}</span>
      ))}
    </div>
  );
};

const AssetMiniReviews = () => {
  const reviews = [
    ['怖い結果じゃなく、前向きに読めそう', '20代 女性'],
    ['夢占いを朝すぐ見られるのが楽しみ', '30代 女性'],
    ['恋愛と今日の運勢を一つで見たい', '先行登録希望'],
  ];
  return (
    <section style={{ paddingTop: 30, paddingBottom: 20 }}>
      <div className="card" style={{ padding: '20px 16px', background: 'linear-gradient(160deg, rgba(255,255,255,0.9), rgba(255,246,243,0.8))' }}>
        <div style={{ textAlign: 'center', marginBottom: 14 }}>
          <div className="eyebrow" style={{ fontSize: 11 }}>— Voice Image —</div>
          <h2 style={{ fontSize: 19, lineHeight: 1.6, marginTop: 8 }}>登録前の期待が、<br/>見えるカード。</h2>
        </div>
        <div style={{ display: 'grid', gap: 10 }}>
          {reviews.map(([body, who], i) => (
            <div key={body} style={{
              padding: '13px 14px', borderRadius: 18,
              background: 'rgba(255,255,255,0.72)', border: '1px solid rgba(203,168,104,0.22)',
              transform: `rotate(${i === 1 ? 0.4 : i === 2 ? -0.5 : 0}deg)`,
            }}>
              <div style={{ color: 'var(--gold)', letterSpacing: '0.08em', fontSize: 12, marginBottom: 5 }}>★★★★★</div>
              <p style={{ margin: 0, color: 'var(--ink)', fontSize: 12.8, lineHeight: 1.8 }}>“{body}”</p>
              <p style={{ margin: '6px 0 0', color: 'var(--ink-mute)', fontSize: 10.8, textAlign: 'right' }}>{who}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

window.AssetProblemScenes = AssetProblemScenes;
window.AssetSolutionFlow = AssetSolutionFlow;
window.AssetTrustRow = AssetTrustRow;
window.AssetMiniReviews = AssetMiniReviews;

const GeneratedPhoneImage = ({ src, alt = '生成されたミライズアプリ画面', scale = 0.74 }) => (
  <div style={{
    width: 300 * scale,
    height: 520 * scale,
    borderRadius: 36 * scale,
    padding: 10 * scale,
    background: 'linear-gradient(180deg, #fff, #f7eaf2)',
    border: '1px solid rgba(203,168,104,0.34)',
    boxShadow: '0 22px 48px -24px rgba(93,58,100,0.44)',
    overflow: 'hidden',
  }}>
    <div style={{
      width: '100%', height: '100%', borderRadius: 30 * scale,
      overflow: 'hidden', background: '#fff', position: 'relative',
    }}>
      <img src={src} alt={alt} style={{ width: '100%', height: '100%', objectFit: 'contain', display: 'block', background: 'linear-gradient(180deg, #fff7fb, #f8eaf2)' }}/>
    </div>
  </div>
);

const AssetGeneratedUIScreenGallery = () => {
  const screens = [
    ['Home', 'ホーム', 'assets/mirise-ui-home-generated.png'],
    ['Tarot', 'タロット', 'assets/mirise-ui-tarot-generated.png'],
    ['Dream', '夢占い', 'assets/mirise-ui-dream-generated.png'],
    ['Love', '相性占い', 'assets/mirise-ui-compat-generated.png'],
  ];
  return (
    <section style={{ paddingTop: 32, paddingBottom: 36 }}>
      <div style={{ textAlign: 'center', marginBottom: 22 }}>
        <div className="eyebrow">— Generated App Screens —</div>
        <h2 className="section-title">画像生成したUIで、<br/><em>体験を見せる。</em></h2>
        <p style={{ margin: '12px 0 0', fontSize: 12.5, color: 'var(--ink-soft)', lineHeight: 2 }}>
          SVGや仮UIではなく、生成したアプリ画面素材をスマホモックに当て込んでいます。
        </p>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr', gap: 18, justifyItems: 'center', padding: '8px 0 10px' }}>
        {screens.map(([latin, label, src]) => (
          <div key={src} className="card" style={{ width: '100%', maxWidth: 320, padding: '16px 10px 14px', textAlign: 'center', overflow: 'hidden' }}>
            <div style={{ display: 'flex', justifyContent: 'center' }}>
              <GeneratedPhoneImage src={src} alt={`ミライズ ${label} 生成UI画面`} scale={0.86}/>
            </div>
            <div className="latin" style={{ fontSize: 10, color: 'var(--gold)', letterSpacing: '0.28em', marginTop: 12 }}>{latin}</div>
            <div style={{ fontFamily: 'var(--title-font)', color: 'var(--ink)', fontSize: 13, letterSpacing: '0.12em', marginTop: 3 }}>{label}</div>
          </div>
        ))}
      </div>
    </section>
  );
};

window.GeneratedPhoneImage = GeneratedPhoneImage;
window.AssetGeneratedUIScreenGallery = AssetGeneratedUIScreenGallery;