// ブログ・お知らせ
function Thumb({ label = '', tint = 'var(--green-100)', ratio = '16 / 9' }) {
  return (
    <div style={{
      aspectRatio: ratio, width: '100%', borderRadius: 0, overflow: 'hidden',
      background: `repeating-linear-gradient(135deg, ${tint}, ${tint} 12px, rgba(255,255,255,0.55) 12px, rgba(255,255,255,0.55) 24px)`,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      color: 'var(--green-700)', fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 12,
    }}>
      <span style={{ background: 'rgba(255,255,255,0.85)', padding: '3px 10px', borderRadius: 'var(--radius-pill)' }}>📷 {label}</span>
    </div>
  );
}

const SF_POSTS = [
  { id: 1, cat: 'お知らせ', catV: 'accent', date: '2025.06.10', title: 'AIで多言語音声動画を作成『おもてなしQRメーカー』提供開始', excerpt: 'QRコードを一度設置するだけで、常に最新の多言語音声動画を提供できるサービスの提供を開始しました。', tint: 'var(--sun-100)' },
  { id: 2, cat: 'リユース', catV: 'brand', date: '2025.05.28', title: 'ワンピース1枚で、昨日のランチ代を取り戻す', excerpt: '眠っている洋服が、思わぬ報酬に。実際のお渡し事例をご紹介します。', tint: 'var(--green-100)' },
  { id: 3, cat: '地域貢献', catV: 'info', date: '2025.05.14', title: '高津区の地域活動に協賛しました', excerpt: '溝の口・高津地区で行われた地域イベントに今年も協賛しました。', tint: 'var(--teal-50)' },
  { id: 4, cat: 'リユース', catV: 'brand', date: '2025.04.30', title: '婦人服の販売力に自信があります', excerpt: 'なぜ大手より高くお渡しできるのか。わたしたちの販売の工夫について。', tint: 'var(--green-100)' },
  { id: 5, cat: 'お知らせ', catV: 'accent', date: '2025.04.12', title: '無料AIツールを活用した業務効率化サポート開始', excerpt: '成果報酬型・初期費用なしの安心プラン。初回面談1時間無料です。', tint: 'var(--sun-100)' },
  { id: 6, cat: '社会貢献', catV: 'info', date: '2025.03.20', title: '利益の一部を社会貢献団体へ寄付しました', excerpt: '社会問題の解決を目指して活動する団体へ、今期も寄付を行いました。', tint: 'var(--teal-50)' },
];

function BlogIndex({ onOpen }) {
  const { Card, SectionHeading, Badge, Tabs, Tag } = window.DesignSystem_36acde;
  const [cat, setCat] = React.useState('all');
  const cats = [
    { id: 'all', label: 'すべて' },
    { id: 'お知らせ', label: 'お知らせ' },
    { id: 'リユース', label: 'リユース' },
    { id: '地域貢献', label: '地域・社会貢献' },
  ];
  const filtered = SF_POSTS.filter((p) => cat === 'all' || p.cat === cat || (cat === '地域貢献' && (p.cat === '地域貢献' || p.cat === '社会貢献')));
  const [featured, ...rest] = SF_POSTS;

  return (
    <main>
      <section style={{ background: 'var(--green-50)', borderBottom: '1px solid var(--green-100)' }}>
        <div style={{ maxWidth: 'var(--container-wide)', margin: '0 auto', padding: '56px 24px' }}>
          <Badge variant="brand">BLOG &amp; NEWS</Badge>
          <h1 style={{ margin: '14px 0 0', fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 40, color: 'var(--text-primary)' }}>ブログ・お知らせ</h1>
          <p style={{ margin: '12px 0 0', fontSize: 17, color: 'var(--text-secondary)' }}>リユースの話、地域の活動、サービスの最新情報をお届けします。</p>
        </div>
      </section>

      <section style={{ maxWidth: 'var(--container-wide)', margin: '0 auto', padding: '56px 24px 96px' }}>
        {/* Featured */}
        <Card variant="elevated" interactive padding="none" onClick={() => onOpen(featured)} style={{ overflow: 'hidden', display: 'grid', gridTemplateColumns: '1.2fr 1fr', marginBottom: 48 }}>
          <Thumb label="特集記事" tint={featured.tint} ratio="16 / 10" />
          <div style={{ padding: 36, display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
              <Badge variant={featured.catV}>{featured.cat}</Badge>
              <span style={{ fontSize: 13, color: 'var(--text-muted)' }}>{featured.date}</span>
            </div>
            <h2 style={{ margin: '0 0 12px', fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 26, lineHeight: 1.45, color: 'var(--text-primary)' }}>{featured.title}</h2>
            <p style={{ margin: 0, fontSize: 15, lineHeight: 1.8, color: 'var(--text-secondary)' }}>{featured.excerpt}</p>
          </div>
        </Card>

        <div style={{ marginBottom: 28 }}>
          <Tabs items={cats} value={cat} onChange={setCat} />
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
          {filtered.map((p) => (
            <Card key={p.id} variant="elevated" interactive padding="none" onClick={() => onOpen(p)} style={{ overflow: 'hidden' }}>
              <Thumb label={p.cat} tint={p.tint} />
              <div style={{ padding: 22 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 10 }}>
                  <Badge variant={p.catV} size="sm">{p.cat}</Badge>
                  <span style={{ fontSize: 12, color: 'var(--text-muted)' }}>{p.date}</span>
                </div>
                <h3 style={{ margin: '0 0 8px', fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 17, lineHeight: 1.5, color: 'var(--text-primary)' }}>{p.title}</h3>
                <p style={{ margin: 0, fontSize: 13, lineHeight: 1.75, color: 'var(--text-secondary)' }}>{p.excerpt}</p>
              </div>
            </Card>
          ))}
        </div>
      </section>
    </main>
  );
}

function BlogArticle({ post, onBack }) {
  const { Button, Badge, Card } = window.DesignSystem_36acde;
  return (
    <main style={{ maxWidth: 'var(--container-text)', margin: '0 auto', padding: '48px 24px 96px' }}>
      <Button variant="ghost" size="sm" iconLeft="←" onClick={onBack}>一覧へ戻る</Button>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12, margin: '24px 0 14px' }}>
        <Badge variant={post.catV}>{post.cat}</Badge>
        <span style={{ fontSize: 14, color: 'var(--text-muted)' }}>{post.date}</span>
      </div>
      <h1 style={{ margin: '0 0 24px', fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 36, lineHeight: 1.4, color: 'var(--text-primary)', textWrap: 'balance' }}>{post.title}</h1>
      <Thumb label="記事のメイン写真" tint={post.tint} ratio="16 / 9" />
      <div style={{ marginTop: 32, fontSize: 17, lineHeight: 1.95, color: 'var(--text-primary)' }}>
        <p>{post.excerpt}</p>
        <p>わたしたちスマイルファクトリーは、「リユースで地域と社会に貢献する」を合言葉に活動しています。地域の皆様からお預かりしたリユース品を日本全国に販売し、その対価を報酬として還元しています。</p>
        <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 24, margin: '36px 0 14px', color: 'var(--text-primary)' }}>顔が見える、安心のお取引</h2>
        <p>大量の古着を重量による一律料金で買い取る大手とは一線を画し、一点一点ていねいに販売します。だからこそ、お渡しできる金額の桁が違うことも珍しくありません。</p>
        <Card variant="soft" style={{ margin: '28px 0' }}>
          <p style={{ margin: 0, fontSize: 15, lineHeight: 1.85, color: 'var(--green-800)' }}>💡 対応エリアは溝の口・高津区周辺に限定しています。まずはお気軽にご相談ください。</p>
        </Card>
        <p>いらない洋服を処分する前に、ぜひ一度わたしたちにご相談ください。想像よりもずっと多くの報酬に、きっと驚かれると思います。</p>
      </div>
    </main>
  );
}
window.BlogIndex = BlogIndex;
window.BlogArticle = BlogArticle;