// Variation 3: "Playful Meadow" — pop, cheerful, parent-and-kid friendly
const V3_SERVICES = [
  { id:'workshop', ja:'ワークショップ', en:'Workshop', emoji:'🌱', color:'#7BA05B', desc:'親子で五感を使う自然あそび。', img:'https://harmas-note.com/wp-content/uploads/2025/10/teddy-bear-797577_1280-320x180.jpg' },
  { id:'consultant', ja:'環境コンサル', en:'Consulting', emoji:'🌳', color:'#4A7C59', desc:'都市ビオトープ・自治体支援。', img:'https://harmas-note.com/wp-content/uploads/2025/10/mathematics-1622448_1280-320x180.jpg' },
  { id:'seminar', ja:'講演・出張授業', en:'Lecture', emoji:'📣', color:'#C9A961', desc:'学校・企業向け環境教育。', img:'https://harmas-note.com/wp-content/uploads/2025/10/classroom-2104691_1280-320x180.jpg' },
  { id:'insect', ja:'昆虫標本', en:'Specimens', emoji:'🪲', color:'#6B8E4E', desc:'新種発見の経験に基づく標本制作。', img:'https://harmas-note.com/wp-content/uploads/2025/10/05501321-2FAF-424E-9556-D99329775C67-320x180.jpg' },
];

const V3_POSTS = [
  { title:'"生物多様性"を感じる展示企画', date:'04.12', tag:'展示' },
  { title:'個別依頼による自然体験プログラム', date:'04.03', tag:'講演' },
  { title:'応援ナビかわさきに団体情報掲載', date:'03.28', tag:'お知らせ' },
  { title:'ごえんカフェ・冬にて活動紹介', date:'03.15', tag:'活動' },
];

function V3Meadow() {
  return (
    <div className="v3">
      <Nav variant="meadow" />

      {/* HERO */}
      <section className="v3-hero">
        <div className="v3-hero-blobs">
          <div className="v3-blob v3-blob-1"/>
          <div className="v3-blob v3-blob-2"/>
          <div className="v3-blob v3-blob-3"/>
        </div>
        <div className="v3-hero-stickers" aria-hidden>
          <div className="v3-sticker s1"><LeafSprig size={56} style={{color:'var(--forest-500)'}}/></div>
          <div className="v3-sticker s2"><Butterfly size={64} style={{color:'var(--honey)'}}/></div>
          <div className="v3-sticker s3"><Mushroom size={48} style={{color:'var(--clay)'}}/></div>
          <div className="v3-sticker s4"><Acorn size={40} style={{color:'var(--forest-700)'}}/></div>
          <div className="v3-sticker s5"><Beetle size={48} style={{color:'var(--forest-900)'}}/></div>
          <div className="v3-sticker s6"><Dragonfly size={72} style={{color:'var(--forest-400)'}}/></div>
        </div>
        <div className="container v3-hero-inner">
          <div className="v3-tag-cloud">
            <span className="v3-tag">🌿 親子で</span>
            <span className="v3-tag">🔍 観察</span>
            <span className="v3-tag">🦋 発見</span>
          </div>
          <h1 className="v3-hero-title">
            <span>まちの</span>
            <span className="v3-title-highlight">すきま</span>
            <span>は、</span>
            <br/>
            <span>ちいさな</span>
            <span className="v3-title-leaf">
              森
              <svg width="60" height="24" viewBox="0 0 60 24" className="v3-title-wiggle"><path d="M2 14 Q 10 4, 18 14 T 34 14 T 50 14 T 58 14" stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="round"/></svg>
            </span>
            <span>。</span>
          </h1>
          <p className="v3-hero-lede">
            遠くの森までお出かけしなくても、<br/>
            おうちのそばにも、小さな冒険が待っています。
          </p>
          <div className="v3-hero-ctas">
            <a href="services.html" className="v3-big-btn">
              <span>あそびに行く</span>
              <span className="v3-big-btn-arrow">→</span>
            </a>
            <a href="contact.html" className="v3-ghost-btn">はじめての方へ</a>
          </div>
        </div>
      </section>

      {/* MARQUEE */}
      <div className="v3-marquee">
        <div className="v3-marquee-track">
          {Array.from({length: 3}).map((_, k) => (
            <div key={k} className="v3-marquee-group">
              <span>🌿 まちなか自然体験</span>
              <span>✦</span>
              <span>🦋 親子で五感あそび</span>
              <span>✦</span>
              <span>🌳 都市ビオトープ</span>
              <span>✦</span>
              <span>🪲 昆虫標本づくり</span>
              <span>✦</span>
              <span>🍄 小さな発見</span>
              <span>✦</span>
            </div>
          ))}
        </div>
      </div>

      {/* WHAT WE DO */}
      <section className="v3-what">
        <div className="container">
          <div className="v3-head">
            <span className="v3-label">🌱 できること</span>
            <h2 className="v3-h2">4つの「かたち」。</h2>
            <p className="v3-sub">
              親子の自然あそびから、環境コンサル・講演・標本まで。<br/>
              ぜんぶ、身近な自然への入り口です。
            </p>
          </div>
          <div className="v3-cards">
            {V3_SERVICES.map((s, i) => (
              <a key={s.id} href="services.html" className="v3-card" style={{'--card-c': s.color}}>
                <div className="v3-card-emoji">{s.emoji}</div>
                <div className="v3-card-img">
                  <img src={s.img} alt={s.ja}/>
                </div>
                <div className="v3-card-en">{s.en} · 0{i+1}</div>
                <h3 className="v3-card-title">{s.ja}</h3>
                <p className="v3-card-desc">{s.desc}</p>
                <div className="v3-card-arrow">くわしく →</div>
              </a>
            ))}
          </div>
        </div>
      </section>

      {/* ABOUT */}
      <section className="v3-about">
        <div className="container v3-about-grid">
          <div className="v3-about-visual">
            <div className="v3-about-img">
              <img src="https://harmas-note.com/wp-content/uploads/2025/10/Image_fx-14-1024x559.jpg" alt=""/>
            </div>
            <div className="v3-about-badge">
              <div className="v3-badge-inner">
                <SunBurst size={60} style={{color:'var(--honey)'}}/>
                <div className="v3-badge-text">
                  <div>SINCE</div>
                  <div style={{fontSize:22, fontWeight:700}}>2018</div>
                </div>
              </div>
            </div>
            <div className="v3-about-blob"/>
          </div>
          <div className="v3-about-copy">
            <span className="v3-label">🌳 はじめまして</span>
            <h2 className="v3-h2">
              生きものの世界を<br/>
              <span className="v3-title-highlight">案内するひと</span>、<br/>
              かたちです。
            </h2>
            <p className="v3-p">
              マレーシアの熱帯雨林で調査を重ねたあと、筑波大学で生物学を専攻。
              中央アルプスでは『土砂崩れと動植物』をテーマに研究し、
              国立科学博物館で昆虫標本の制作にも携わりました。
            </p>
            <div className="v3-stats">
              <div className="v3-stat">
                <div className="v3-stat-num">14+</div>
                <div className="v3-stat-label">年の活動</div>
              </div>
              <div className="v3-stat">
                <div className="v3-stat-num">新種</div>
                <div className="v3-stat-label">昆虫を発見</div>
              </div>
              <div className="v3-stat">
                <div className="v3-stat-num">3冊</div>
                <div className="v3-stat-label">生き物図鑑</div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* COMMUNITY */}
      <section className="v3-community">
        <div className="container v3-comm-inner">
          <div className="v3-comm-copy">
            <span className="v3-label">📍 かわさきで</span>
            <h2 className="v3-h2 v3-comm-h">まちの自然体験ラボ。</h2>
            <p className="v3-p">
              川崎市を拠点に、月1〜2回ペースで親子向けの観察会や<br/>
              地域イベントを開催しています。ひとりで参加もOK！
            </p>
            <a href="#" className="v3-big-btn v3-big-btn-alt">
              活動をのぞく <span className="v3-big-btn-arrow">→</span>
            </a>
          </div>
          <div className="v3-comm-grid">
            <div className="v3-comm-tile v3-t1"><img src="https://harmas-note.com/wp-content/uploads/2025/10/teddy-bear-797577_1280-320x180.jpg" alt=""/></div>
            <div className="v3-comm-tile v3-t2"><img src="https://harmas-note.com/wp-content/uploads/2025/10/classroom-2104691_1280-320x180.jpg" alt=""/></div>
            <div className="v3-comm-tile v3-t3"><img src="https://harmas-note.com/wp-content/uploads/2025/10/05501321-2FAF-424E-9556-D99329775C67-320x180.jpg" alt=""/></div>
          </div>
        </div>
      </section>

      {/* POSTS */}
      <section className="v3-posts">
        <div className="container">
          <div className="v3-head v3-head-row">
            <div>
              <span className="v3-label">📝 きろく</span>
              <h2 className="v3-h2">最近のできごと。</h2>
            </div>
            <a href="#" className="v3-ghost-btn">もっと見る</a>
          </div>
          <div className="v3-posts-grid">
            {V3_POSTS.map((p, i) => (
              <a key={i} href="#" className="v3-post">
                <div className="v3-post-tag">{p.tag}</div>
                <div className="v3-post-title">{p.title}</div>
                <div className="v3-post-date">2026.{p.date}</div>
              </a>
            ))}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="v3-cta">
        <div className="container v3-cta-inner">
          <Butterfly size={80} style={{color:'var(--honey)', position:'absolute', top:-20, right:'10%'}}/>
          <LeafSprig size={72} style={{color:'var(--forest-300)', position:'absolute', bottom:-10, left:'8%', transform:'rotate(-20deg)'}}/>
          <h2 className="v3-h2 v3-cta-title">
            気になることが<br/>
            あれば、おきがるに。
          </h2>
          <p className="v3-p" style={{marginTop:16}}>どんな小さな質問でも、大歓迎です。</p>
          <a href="contact.html" className="v3-big-btn v3-cta-btn">
            <span>おといあわせ</span>
            <span className="v3-big-btn-arrow">→</span>
          </a>
        </div>
      </section>

      <Footer variant="meadow" />
    </div>
  );
}

window.V3Meadow = V3Meadow;