// サービス紹介LP — 「リユース品をあずける」
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 ServiceLP({ onNavigate }) {
  const { Button, Card, SectionHeading, Badge, Tag } = window.DesignSystem_36acde;
  const [faqOpen, setFaqOpen] = React.useState(0);

  const steps = [
    { n: '01', t: 'お問い合わせ', d: 'フォームまたはLINEからご連絡ください。対応エリアか確認します。' },
    { n: '02', t: 'お預かり', d: 'ご自宅までお伺いし、洋服などをお預かりします。点数を確認。' },
    { n: '03', t: '販売', d: '一点一点ていねいに、日本全国に向けて販売します。' },
    { n: '04', t: '報酬のお渡し', d: '売上の50〜80%を報酬としてお渡しします。' },
  ];
  const items = ['婦人服・ワンピース', '紳士服', '子供服', 'バッグ・小物', 'ブランド古着', '未使用品'];
  const faqs = [
    { q: 'どのエリアが対象ですか？', a: '川崎市高津区の溝口1丁目・久本1〜3丁目・坂戸1丁目・坂戸3丁目にお住まい、またはお勤めの方が対象です。顔が見える安心丁寧なお取引のため、エリアを限定しています。' },
    { q: '報酬はどのくらいになりますか？', a: '販売額の50〜80%が依頼者様への報酬です。平均で11品お預かりし、お渡しは平均9,453円。大手リサイクルショップとは桁が違うことも珍しくありません。' },
    { q: '値段がつかなかった場合はどうなりますか？', a: 'お預かり品の状態によっては販売できない場合もございます。その際の取り扱いは事前にご相談のうえ決定します。' },
  ];

  return (
    <main>
      {/* Hero */}
      <section style={{ background: 'linear-gradient(180deg, var(--sun-100), var(--color-bg))' }}>
        <div style={{ maxWidth: 'var(--container-wide)', margin: '0 auto', padding: '72px 24px 80px', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 56, alignItems: 'center' }}>
          <div>
            <Badge variant="accent" dot>リユース品をあずける</Badge>
            <h1 style={{ margin: '18px 0 0', fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 50, lineHeight: 1.24, letterSpacing: '-0.02em', color: 'var(--text-primary)', textWrap: 'balance' }}>
              眠っている洋服が、<br /><span style={{ color: 'var(--green-600)' }}>ランチ代</span>に変わる。
            </h1>
            <p style={{ margin: '22px 0 0', maxWidth: 500, fontSize: 19, lineHeight: 1.8, color: 'var(--text-secondary)' }}>
              捨てる前に、まずご相談を。あなたの「もったいない」を、わたしたちが丁寧に次の人へつなぎます。
            </p>
            <div style={{ display: 'flex', gap: 14, marginTop: 32, flexWrap: 'wrap' }}>
              <Button variant="primary" size="lg" onClick={() => onNavigate('contact')}>無料で査定を相談</Button>
              <Button variant="ghost" size="lg" iconRight="→" onClick={() => onNavigate('mission')}>仕組みを知る</Button>
            </div>
          </div>
          <Photo label="お預かりした洋服" ratio="1 / 1" tint="var(--green-100)" />
        </div>
      </section>

      {/* Steps */}
      <section style={{ maxWidth: 'var(--container-wide)', margin: '0 auto', padding: '96px 24px' }}>
        <SectionHeading eyebrow="ご利用の流れ" title="預けてから報酬まで、4ステップ" align="center" />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 20, marginTop: 48 }}>
          {steps.map((s) => (
            <Card key={s.n} variant="elevated" padding="md">
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 36, color: 'var(--green-200)', lineHeight: 1 }}>{s.n}</div>
              <h3 style={{ margin: '12px 0 8px', fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 18, color: 'var(--text-primary)' }}>{s.t}</h3>
              <p style={{ margin: 0, fontSize: 14, lineHeight: 1.8, color: 'var(--text-secondary)' }}>{s.d}</p>
            </Card>
          ))}
        </div>
      </section>

      {/* What we accept */}
      <section style={{ background: 'var(--green-50)' }}>
        <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: '88px 24px', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 56, alignItems: 'center' }}>
          <div>
            <SectionHeading eyebrow="お預かりできる品物" title="婦人服の販売力に自信があります" lead="多岐にわたる品物をお預かりできます。特に婦人服は得意分野です。" />
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10, marginTop: 24 }}>
              {items.map((it) => <Tag key={it} selected>{it}</Tag>)}
            </div>
          </div>
          <Photo label="取扱いアイテム" ratio="4 / 3" tint="var(--sun-100)" />
        </div>
      </section>

      {/* Reward highlight */}
      <section style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: '96px 24px' }}>
        <Card variant="elevated" padding="lg" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24, textAlign: 'center' }}>
          {[['9,453円', '平均お渡し額'], ['11品', '平均お預かり点数'], ['50〜80%', '報酬還元率']].map(([n, l]) => (
            <div key={l}>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 40, color: 'var(--green-600)' }}>{n}</div>
              <div style={{ fontSize: 14, color: 'var(--text-muted)', marginTop: 4 }}>{l}</div>
            </div>
          ))}
        </Card>
      </section>

      {/* FAQ */}
      <section style={{ maxWidth: 'var(--container-text)', margin: '0 auto', padding: '32px 24px 96px' }}>
        <SectionHeading eyebrow="よくある質問" title="ご相談前に、よくいただく質問" align="center" />
        <div style={{ marginTop: 36, display: 'flex', flexDirection: 'column', gap: 12 }}>
          {faqs.map((f, i) => {
            const open = faqOpen === i;
            return (
              <Card key={i} variant="outlined" padding="none">
                <button onClick={() => setFaqOpen(open ? -1 : i)} style={{ width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16, padding: '18px 22px', background: 'transparent', border: 'none', cursor: 'pointer', textAlign: 'left' }}>
                  <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 16, color: 'var(--text-primary)' }}>{f.q}</span>
                  <span style={{ flexShrink: 0, width: 28, height: 28, borderRadius: '50%', background: 'var(--green-100)', color: 'var(--green-700)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 700, transform: open ? 'rotate(45deg)' : 'none', transition: 'transform 200ms' }}>＋</span>
                </button>
                {open && <p style={{ margin: 0, padding: '0 22px 20px', fontSize: 15, lineHeight: 1.85, color: 'var(--text-secondary)' }}>{f.a}</p>}
              </Card>
            );
          })}
        </div>
      </section>

      {/* CTA */}
      <section style={{ background: 'var(--green-700)' }}>
        <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: '80px 24px', textAlign: 'center' }}>
          <h2 style={{ margin: 0, fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 34, color: '#fff', textWrap: 'balance' }}>まずは無料でご相談ください</h2>
          <p style={{ margin: '14px auto 0', maxWidth: 540, fontSize: 17, lineHeight: 1.8, color: 'rgba(255,255,255,0.82)' }}>想像よりずっと多くの報酬に、きっと驚かれます。</p>
          <div style={{ marginTop: 30, display: 'flex', gap: 14, justifyContent: 'center', flexWrap: 'wrap' }}>
            <Button variant="accent" size="lg" onClick={() => onNavigate('contact')}>査定を相談する</Button>
            <Button variant="secondary" size="lg" onClick={() => onNavigate('contact')}>LINEで相談</Button>
          </div>
        </div>
      </section>
    </main>
  );
}
window.ServiceLP = ServiceLP;
