// Variation 2: "Quiet Canopy" — clean, modern, lots of whitespace, photo-first
const V2_SERVICES = [
  { id:'workshop', ja:'イベント／ワークショップ', en:'Workshop', desc:'未就学児〜大人まで、五感を使った親子向け自然あそび。', img:'https://harmas-note.com/wp-content/uploads/2025/10/teddy-bear-797577_1280-320x180.jpg', num:'01' },
  { id:'consultant', ja:'環境コンサルタント', en:'Consulting', desc:'都市ビオトープ整備、自治体支援、企業の環境戦略サポート。', img:'https://harmas-note.com/wp-content/uploads/2025/10/mathematics-1622448_1280-320x180.jpg', num:'02' },
  { id:'seminar', ja:'講演・出張授業', en:'Lecture', desc:'学校や企業向けの環境教育・研修プログラムを提供。', img:'https://harmas-note.com/wp-content/uploads/2025/10/classroom-2104691_1280-320x180.jpg', num:'03' },
  { id:'insect', ja:'昆虫標本', en:'Specimens', desc:'新種多数発見の研究経験にもとづく美しい標本制作。', img:'https://harmas-note.com/wp-content/uploads/2025/10/05501321-2FAF-424E-9556-D99329775C67-320x180.jpg', num:'04' },
];

const V2_POSTS = [
  { title:'身近な自然で"生物多様性"を感じる展示企画', date:'2026.04.12', tag:'展示', img:'https://harmas-note.com/wp-content/uploads/2025/10/teddy-bear-797577_1280-320x180.jpg' },
  { title:'【講演・出張授業】個別依頼による自然体験プログラム', date:'2026.04.03', tag:'講演', img:'https://harmas-note.com/wp-content/uploads/2025/10/classroom-2104691_1280-320x180.jpg' },
  { title:'「応援ナビかわさき」に団体情報が掲載されました', date:'2026.03.28', tag:'お知らせ', img:'https://harmas-note.com/wp-content/uploads/2025/10/mathematics-1622448_1280-320x180.jpg' },
];

function V2Canopy() {
  return (
    <div className="v2">
      <Nav variant="canopy" />

      <section className="v2-hero">
        <div className="v2-hero-bg">
          <img src="https://harmas-note.com/wp-content/uploads/2025/10/Image_fx-14-1024x559.jpg" alt=""/>
          <div className="v2-hero-veil"/>
        </div>
        <div className="container v2-hero-inner">
          <div className="v2-hero-eyebrow">
            <LeafSingle size={16} style={{color:'var(--forest-200)'}}/>
            <span className="mono">URBAN NATURE LAB · 身近な自然体験ラボ</span>
          </div>
          <h1 className="v2-hero-title serif">
            身近な自然を<br/>
            「学び」に変える
          </h1>
          <p className="v2-hero-lede">
            遠くの森へ出かけなくても、都市部や住宅地にも、<br/>
            生き物たちの小さな世界がひろがっています。
          </p>
          <div className="v2-hero-ctas">
            <a href="services.html" className="btn btn-primary">サービスをみる →</a>
            <a href="contact.html" className="btn btn-ghost" style={{color:'var(--paper)', borderColor:'rgba(255,255,255,0.4)'}}>お問い合わせ</a>
          </div>
        </div>
        <div className="v2-hero-scroll mono">SCROLL ↓</div>
      </section>

      {/* Philosophy */}
      <section className="v2-philo">
        <div className="container-narrow">
          <div className="v2-eyebrow">
            <span className="mono">— 01 / PHILOSOPHY</span>
          </div>
          <p className="v2-philo-text serif">
            言葉を発しない生き物たちが<br/>
            教えてくれる
            <span className="v2-em">驚きや感動</span>を、<br/>
            多くの人に届けたい。
          </p>
          <p className="v2-philo-sub">
            未就学児向けの五感を使った自然あそびから、学校や企業向けの環境教育・研修プログラム、
            さらに環境コンサルティングまで——自然に関する豊富な知識と経験をもとに、
            幅広いサービスを提供しています。
          </p>
        </div>
      </section>

      {/* Services */}
      <section className="v2-services">
        <div className="container">
          <div className="v2-head">
            <span className="mono v2-head-mono">— 02 / SERVICES</span>
            <h2 className="v2-h2 serif">ご提供しているサービス</h2>
          </div>
          <div className="v2-svc-grid">
            {V2_SERVICES.map(s => (
              <a key={s.id} href="services.html" className="v2-svc">
                <div className="v2-svc-img">
                  <img src={s.img} alt={s.ja}/>
                </div>
                <div className="v2-svc-body">
                  <div className="v2-svc-row">
                    <span className="mono v2-svc-num">{s.num}</span>
                    <span className="mono v2-svc-en">{s.en}</span>
                  </div>
                  <h3 className="v2-svc-title serif">{s.ja}</h3>
                  <p className="v2-svc-desc">{s.desc}</p>
                  <div className="v2-svc-arrow">
                    <span>詳しくみる</span>
                    <svg width="36" height="10" viewBox="0 0 36 10"><line x1="0" y1="5" x2="34" y2="5" stroke="currentColor" strokeWidth="1"/><path d="M28 1 L34 5 L28 9" stroke="currentColor" strokeWidth="1" fill="none"/></svg>
                  </div>
                </div>
              </a>
            ))}
          </div>
        </div>
      </section>

      {/* Bio / About */}
      <section className="v2-bio">
        <div className="container v2-bio-grid">
          <div className="v2-bio-visual">
            <div className="v2-bio-img">
              <img src="https://harmas-note.com/wp-content/uploads/2025/10/Image_fx-14-1024x559.jpg" alt=""/>
            </div>
            <div className="v2-bio-caption">
              <div className="mono">— KATACHI</div>
              <div className="serif">自然研究者・ネイチャーガイド</div>
            </div>
          </div>
          <div className="v2-bio-copy">
            <span className="mono v2-head-mono">— 03 / ABOUT</span>
            <h2 className="v2-h2 serif">人と自然の関わりから、<br/>社会を考えています。</h2>
            <p className="v2-bio-p">
              マレーシアでの熱帯雨林調査を機に、人と自然の関わりから生まれる課題に向き合ってきました。
              筑波大学で生物学を専攻。中央アルプスで『土砂崩れと動植物』の関係を研究し、
              国立科学博物館・昆虫研究部で標本作成に携わった後、
              関東近郊・北海道・奄美大島などでフィールド活動を重ねてきました。
            </p>
            <div className="v2-bio-timeline">
              <div className="v2-tl-row">
                <div className="v2-tl-year mono">2011–</div>
                <div className="v2-tl-text">筑波大学にて生物学専攻・フィールド調査・昆虫研究</div>
              </div>
              <div className="v2-tl-row">
                <div className="v2-tl-year mono">2015</div>
                <div className="v2-tl-text">新種の昆虫を多数発見・記載</div>
              </div>
              <div className="v2-tl-row">
                <div className="v2-tl-year mono">2018–</div>
                <div className="v2-tl-text">企業研修、環境教育、都市ビオトープ整備、自治体支援</div>
              </div>
            </div>
            <div className="v2-bio-books">
              <div className="v2-books-label mono">— 制作に携わった生き物図鑑</div>
              <ul>
                <li>昆虫 新版 学研の図鑑LIVE（学研）</li>
                <li>ハエハンドブック（文一総合出版）</li>
                <li>ハエトリグモハンドブック（文一総合出版）</li>
              </ul>
            </div>
          </div>
        </div>
      </section>

      {/* Community */}
      <section className="v2-community">
        <div className="container v2-comm-grid">
          <div className="v2-comm-copy">
            <span className="mono v2-head-mono">— 04 / LOCAL</span>
            <h2 className="v2-h2 serif">まちの自然体験ラボ</h2>
            <p className="v2-bio-p">
              川崎市を拠点に、身近な自然を楽しむ体験活動を行っています。
              地域の方と一緒に、あたたかな時間をつくっています。
            </p>
            <a href="#" className="v2-text-link">
              活動をみる
              <svg width="36" height="10" viewBox="0 0 36 10"><line x1="0" y1="5" x2="34" y2="5" stroke="currentColor" strokeWidth="1"/><path d="M28 1 L34 5 L28 9" stroke="currentColor" strokeWidth="1" fill="none"/></svg>
            </a>
          </div>
          <div className="v2-comm-tiles">
            <div className="v2-tile"><img src="https://harmas-note.com/wp-content/uploads/2025/10/teddy-bear-797577_1280-320x180.jpg" alt=""/></div>
            <div className="v2-tile"><img src="https://harmas-note.com/wp-content/uploads/2025/10/classroom-2104691_1280-320x180.jpg" alt=""/></div>
            <div className="v2-tile"><img src="https://harmas-note.com/wp-content/uploads/2025/10/05501321-2FAF-424E-9556-D99329775C67-320x180.jpg" alt=""/></div>
            <div className="v2-tile"><img src="https://harmas-note.com/wp-content/uploads/2025/10/mathematics-1622448_1280-320x180.jpg" alt=""/></div>
          </div>
        </div>
      </section>

      {/* Journal */}
      <section className="v2-journal">
        <div className="container">
          <div className="v2-head v2-head-row">
            <div>
              <span className="mono v2-head-mono">— 05 / JOURNAL</span>
              <h2 className="v2-h2 serif">最近のきろく</h2>
            </div>
            <a href="#" className="v2-text-link">すべてみる →</a>
          </div>
          <div className="v2-journal-grid">
            {V2_POSTS.map((p, i) => (
              <a key={i} href="#" className="v2-post">
                <div className="v2-post-img"><img src={p.img} alt=""/></div>
                <div className="v2-post-body">
                  <div className="v2-post-meta">
                    <span className="mono">{p.date}</span>
                    <span className="v2-post-tag">{p.tag}</span>
                  </div>
                  <h3 className="v2-post-title serif">{p.title}</h3>
                </div>
              </a>
            ))}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="v2-cta">
        <div className="container">
          <div className="v2-cta-inner">
            <h2 className="v2-h2 serif">
              小さなご相談から、<br/>
              どうぞお気軽に。
            </h2>
            <a href="contact.html" className="btn btn-primary v2-cta-btn">お問い合わせへ →</a>
          </div>
        </div>
      </section>

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

window.V2Canopy = V2Canopy;