// 写真プレースホルダー（実写真の差し替え前提）
function Photo({ label = '写真', ratio = '4 / 3', radius = 'var(--radius-lg)', tint = 'var(--green-100)', style }) {
  return (
    <div style={{
      aspectRatio: ratio, width: '100%', borderRadius: radius, overflow: 'hidden',
      background: `repeating-linear-gradient(135deg, ${tint}, ${tint} 14px, rgba(255,255,255,0.5) 14px, rgba(255,255,255,0.5) 28px)`,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      color: 'var(--green-700)', fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 13,
      border: '1px solid var(--green-200)', ...style,
    }}>
      <span style={{ background: 'rgba(255,255,255,0.85)', padding: '4px 12px', borderRadius: 'var(--radius-pill)' }}>📷 {label}</span>
    </div>
  );
}
window.Photo = Photo;

function HomePage({ onNavigate }) {
  const { Button, Card, SectionHeading, Badge } = window.DesignSystem_36acde;
  const services = [
    { tag: 'STEP 01', t: 'リユース品をあずける', d: 'ご自宅に眠っている未使用の洋服・古着をお預かりします。婦人服の販売力には特に自信があります。', cta: '預ける', tint: 'var(--green-100)' },
    { tag: 'STEP 02', t: '報酬をうけとる', d: '販売実績は1万点以上。売上の50〜80%が依頼者様への報酬になります。', cta: '受け取る', tint: 'var(--sun-100)' },
    { tag: 'STEP 03', t: '実績をみる', d: '大手リサイクルショップとはお渡し金額の桁が違うことも。喜びの声もご紹介しています。', cta: '実績を見る', tint: 'var(--ink-100)' },
  ];
  return (
    <main>
      {/* Hero */}
      <section style={{ background: 'linear-gradient(180deg, var(--green-50), var(--color-bg))' }}>
        <div style={{ maxWidth: 'var(--container-wide)', margin: '0 auto', padding: '72px 24px 80px', display: 'grid', gridTemplateColumns: '1.05fr 0.95fr', gap: 56, alignItems: 'center' }}>
          <div>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '7px 16px', background: 'var(--white)', border: '1px solid var(--green-200)', borderRadius: 'var(--radius-pill)', fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 13, color: 'var(--green-700)', boxShadow: 'var(--shadow-xs)' }}>
              <span style={{ width: 7, height: 7, borderRadius: '50%', background: 'var(--brand-accent)' }} />川崎・溝の口のリユース集団
            </span>
            <h1 style={{ margin: '20px 0 0', fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 52, lineHeight: 1.22, letterSpacing: '-0.02em', color: 'var(--text-primary)', textWrap: 'balance' }}>
              もったいない、を<br /><span style={{ color: 'var(--brand-primary)' }}>笑顔</span>に変えていく。
            </h1>
            <p style={{ margin: '22px 0 0', maxWidth: 520, fontSize: 19, lineHeight: 1.8, color: 'var(--text-secondary)' }}>
              眠っているワンピース1枚で、昨日のランチ代が取り戻せます。平均11品をお預けいただき、お渡しは <strong style={{ color: 'var(--green-700)' }}>9,453円</strong>。地域の皆様とつくりあげるリユースのかたち。
            </p>
            <div style={{ display: 'flex', gap: 14, marginTop: 32, flexWrap: 'wrap' }}>
              <Button variant="primary" size="lg" onClick={() => onNavigate('contact')}>無料で相談する</Button>
              <Button variant="secondary" size="lg" onClick={() => onNavigate('service')}>サービスを見る</Button>
            </div>
            <div style={{ display: 'flex', gap: 28, marginTop: 36 }}>
              {[['1万点+', '販売実績'], ['50〜80%', '報酬還元率'], ['9,453円', '平均お渡し額']].map(([n, l]) => (
                <div key={l}>
                  <div style={{ fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 26, color: 'var(--green-700)' }}>{n}</div>
                  <div style={{ fontSize: 13, color: 'var(--text-muted)' }}>{l}</div>
                </div>
              ))}
            </div>
          </div>
          <div style={{ position: 'relative' }}>
            <Photo label="お預かりした洋服" ratio="4 / 5" tint="var(--green-100)" />
            <div style={{ position: 'absolute', bottom: -22, left: -22, width: 180 }}>
              <Card variant="elevated" padding="sm" style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                <span style={{ width: 40, height: 40, borderRadius: '50%', background: 'var(--sun-100)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 20 }}>😊</span>
                <div>
                  <div style={{ fontWeight: 700, fontSize: 14, color: 'var(--text-primary)' }}>顔が見える</div>
                  <div style={{ fontSize: 12, color: 'var(--text-muted)' }}>安心・丁寧な取引</div>
                </div>
              </Card>
            </div>
          </div>
        </div>
      </section>

      {/* Services */}
      <section style={{ maxWidth: 'var(--container-wide)', margin: '0 auto', padding: '96px 24px' }}>
        <SectionHeading eyebrow="サービス内容" title="3ステップで、かんたん・安心" lead="預けて、受け取るだけ。あとはわたしたちが一点一点ていねいに販売します。" align="center" />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24, marginTop: 48 }}>
          {services.map((s) => (
            <Card key={s.t} variant="elevated" interactive padding="none" style={{ overflow: 'hidden' }}>
              <Photo label={s.t} ratio="16 / 10" radius="0" tint={s.tint} />
              <div style={{ padding: 24 }}>
                <Badge variant="brand">{s.tag}</Badge>
                <h3 style={{ margin: '12px 0 8px', fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 20, color: 'var(--text-primary)' }}>{s.t}</h3>
                <p style={{ margin: '0 0 18px', fontSize: 14, lineHeight: 1.8, color: 'var(--text-secondary)' }}>{s.d}</p>
                <Button variant="ghost" size="sm" iconRight="→" onClick={() => onNavigate('service')}>{s.cta}</Button>
              </div>
            </Card>
          ))}
        </div>
      </section>

      {/* Mission band */}
      <section id="mission" style={{ background: 'var(--green-700)', color: '#fff', scrollMarginTop: 76 }}>
        <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: '88px 24px', textAlign: 'center' }}>
          <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 14, letterSpacing: '0.08em', color: 'var(--sun-300)' }}>OUR MISSION</span>
          <p style={{ margin: '20px auto 0', maxWidth: 760, fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 30, lineHeight: 1.6, color: '#fff', textWrap: 'balance' }}>
            「もったいない」の心を一つにし、<br />社会貢献を実現するシステムを、<br />ここ溝の口から日本全国へ。
          </p>
          <div style={{ marginTop: 36 }}>
            <Button variant="accent" size="lg" onClick={() => onNavigate('mission')}>わたしたちの役割を見る</Button>
          </div>
        </div>
      </section>

      {/* Contribution */}
      <section id="kouken" style={{ maxWidth: 'var(--container-wide)', margin: '0 auto', padding: '96px 24px', scrollMarginTop: 76 }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 56, alignItems: 'center' }}>
          <Photo label="地域活動の様子" ratio="3 / 2" tint="var(--sun-100)" />
          <div>
            <SectionHeading eyebrow="地域・社会貢献" title="利益の一部を、地域と未来へ" lead="地域雇用の創出や高津地区の地域活動への協賛、社会問題の解決を目指す団体への寄付を行っています。" />
            <ul style={{ listStyle: 'none', margin: '24px 0 0', padding: 0, display: 'flex', flexDirection: 'column', gap: 14 }}>
              {['地域雇用の創出', '溝の口・高津地区の地域活動に協賛', '社会貢献団体へ利益の一部を寄付'].map((t) => (
                <li key={t} style={{ display: 'flex', alignItems: 'center', gap: 12, fontSize: 16, color: 'var(--text-primary)' }}>
                  <span style={{ width: 26, height: 26, flexShrink: 0, borderRadius: '50%', background: 'var(--green-100)', color: 'var(--green-700)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 700, fontSize: 14 }}>✓</span>{t}
                </li>
              ))}
            </ul>
          </div>
        </div>
      </section>
    </main>
  );
}
window.HomePage = HomePage;