// Variation 1: "Field Notebook" — hand-drawn × natural magazine feel
// Warm paper, deep forest greens, golden accents, illustrated decorations.

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


const V1_POSTS = [
{ title: '身近な自然で"生物多様性"を感じる展示企画', date: '2026.04.12', tag: '展示' },
{ title: '【講演・出張授業】個別依頼による自然体験プログラム', date: '2026.04.03', tag: '講演' },
{ title: '「応援ナビかわさき」に団体情報が掲載されました', date: '2026.03.28', tag: 'お知らせ' },
{ title: 'ごえんカフェ・冬にて活動紹介を行いました', date: '2026.03.15', tag: '活動報告' }];


function V1Notebook() {
  return (
    <div className="v1">
      <Nav variant="notebook" />

      {/* HERO */}
      <section className="v1-hero">
        <div className="v1-hero-deco">
          <LeafSprig size={120} style={{ color: 'var(--forest-400)', position: 'absolute', top: '8%', left: '4%', opacity: .5, transform: 'rotate(-20deg)' }} />
          <Butterfly size={80} style={{ color: 'var(--honey)', position: 'absolute', top: '18%', right: '8%', opacity: .8 }} />
          <Mushroom size={64} style={{ color: 'var(--clay)', position: 'absolute', bottom: '12%', left: '7%', opacity: .7 }} />
          <Acorn size={48} style={{ color: 'var(--forest-500)', position: 'absolute', bottom: '22%', right: '4%', opacity: .6 }} />
          <Dragonfly size={96} style={{ color: 'var(--forest-300)', position: 'absolute', top: '55%', right: '12%', opacity: .4 }} />
        </div>
        <div className="container v1-hero-grid">
          <div className="v1-hero-copy">
            <h1 className="v1-title">
              身近な自然を<br />
              <span className="v1-title-em">「学び」に変える</span>
            </h1>
            <p className="v1-lede">
              自然豊かな森まで遠出しなくても、都市部や住宅地にも、
              生き物たちの小さな世界が広がっています。
              言葉を発しない生き物たちが教えてくれる
              <em>"驚き"</em>や<em>"感動"</em>を、多くの人に伝えたい。
            </p>
            <div className="v1-cta-row">
              <a href="services.html" className="btn btn-primary">
                サービスをみる
                <span aria-hidden>→</span>
              </a>
              <a href="contact.html" className="btn btn-ghost">はじめてのご相談</a>
            </div>
            <div className="v1-meta-row">
              <div className="v1-meta">
                <div className="v1-meta-num serif">100+</div>
                <div className="v1-meta-label">イベント参加者述べ人数</div>
              </div>
              <div className="v1-meta">
                <div className="v1-meta-num serif">新種</div>
                <div className="v1-meta-label">の昆虫を多数発見</div>
              </div>
              <div className="v1-meta">
                <div className="v1-meta-num serif">3冊</div>
                <div className="v1-meta-label">の生き物図鑑に携わる</div>
              </div>
            </div>
          </div>
          <div className="v1-hero-visual">
            <div className="v1-hero-img-wrap">
              <img src="https://harmas-note.com/wp-content/uploads/2025/10/Image_fx-14-1024x559.jpg" alt="身近な自然" style={{ width: "539.32px" }} />
              <div className="v1-hero-stamp">
                <div className="v1-stamp-inner">
                  <div className="serif">Urban</div>
                  <div className="serif" style={{ fontSize: '1.6em' }}>Nature</div>
                  <div className="serif">Lab</div>
                  <div className="mono" style={{ fontSize: '9px', marginTop: 4, letterSpacing: '0.2em' }}>SINCE 2018</div>
                </div>
              </div>
            </div>

          </div>
        </div>
      </section>

      {/* INTRO — letter-like */}
      <section className="v1-intro">
        <div className="container-narrow v1-intro-inner">
          <div className="v1-intro-mark">
            <SunBurst size={48} style={{ color: 'var(--honey)' }} />
          </div>
          <h2 className="v1-h2">
            はじめまして、<br /><span className="v1-signature serif">"かたち"</span>と申します。
          </h2>
          <DashedLeafDivider width={140} style={{ color: 'var(--forest-300)', margin: '16px auto', opacity: 0.6 }} />
          <p className="v1-intro-p">
            マレーシアでの熱帯雨林調査を機に、人と自然の関わりから生まれる課題に向き合ってきました。
            筑波大学で生物学を専攻し、中央アルプスで土砂崩れと動植物の関係を研究。
            国立科学博物館・昆虫研究部での標本作成、関東近郊での親子向け自然観察会、
            北海道・奄美大島でのネイチャーガイドなど——
            国内外のフィールドを歩きながら、新種の昆虫も多数発見してきました。
          </p>
          <p className="v1-intro-p">
            いまは企業研修や環境教育、都市ビオトープ整備、自治体支援などを通して、
            <em>「人と自然が共に生きる社会づくり」</em>に取り組んでいます。
            どうぞお気軽にご相談くださいね。
          </p>
          <div className="v1-signed mono">— Katachi</div>
        </div>
      </section>

      {/* SERVICES */}
      <section className="v1-services" id="services">
        <div className="container">
          <div className="v1-sec-head">
            <div className="chip v1-chip">
              <LeafSingle size={14} style={{ color: 'var(--forest-700)' }} />
              <span>SERVICE</span>
            </div>
            <h2 className="v1-h2">ご提供している4つのこと。</h2>
            <p className="v1-sec-sub">
              未就学児向けの自然あそびから、企業・自治体向けの環境コンサルまで。
              自然に関する豊富な知識と経験をもとに、幅広いサービスを提供しています。
            </p>
          </div>
          <div className="v1-service-grid">
            {V1_SERVICES.map((s, i) =>
            <a key={s.id} href="services.html" className="v1-card">
                <div className="v1-card-num serif">0{i + 1}</div>
                <div className="v1-card-img">
                  <img src={s.img} alt={s.ja} />
                  <div className="v1-card-icon">
                    {s.icon === 'leaf' && <LeafSprig size={40} style={{ color: 'var(--paper)' }} />}
                    {s.icon === 'mushroom' && <Mushroom size={40} style={{ color: 'var(--paper)' }} />}
                    {s.icon === 'butterfly' && <Butterfly size={48} style={{ color: 'var(--paper)' }} />}
                    {s.icon === 'beetle' && <Beetle size={40} style={{ color: 'var(--paper)' }} />}
                  </div>
                </div>
                <div className="v1-card-body">
                  <div className="v1-card-sub mono">{s.en}</div>
                  <h3 className="v1-card-title">{s.ja}</h3>
                  <p className="v1-card-desc">{s.desc}</p>
                  <div className="v1-card-more">詳しくみる →</div>
                </div>
              </a>
            )}
          </div>
        </div>
      </section>

      {/* COMMUNITY */}
      <section className="v1-community" id="community">
        <div className="container v1-comm-grid">
          <div className="v1-comm-visual">
            <div className="v1-comm-polaroid">
              <img src="https://harmas-note.com/wp-content/uploads/2025/10/Image_fx-14-1024x559.jpg" alt="川崎の自然" />
              <div className="v1-comm-caption mono">Kawasaki, 2026</div>
            </div>
            <div className="v1-comm-tape" />
          </div>
          <div className="v1-comm-copy">
            <div className="chip v1-chip">
              <span>📍 LOCAL</span>
            </div>
            <h2 className="v1-h2">まちの自然体験ラボ。</h2>
            <p className="v1-sec-sub">
              川崎市を拠点に、身近な自然を楽しむ体験活動を行っています。
              誰もが参加できる、小さくてあたたかな集まりです。
            </p>
            <ul className="v1-comm-list">
              <li><span className="mono">▹</span>月に1〜2回の親子向け自然観察会</li>
              <li><span className="mono">▹</span>河川・公園の生き物調査</li>
              <li><span className="mono">▹</span>昆虫標本づくりワークショップ</li>
              <li><span className="mono">▹</span>地域イベントでの展示・ブース出展</li>
            </ul>
            <a href="#" className="btn btn-honey">地域活動をみる →</a>
          </div>
        </div>
      </section>

      {/* BLOG / NEWS */}
      <section className="v1-blog" id="blog">
        <div className="container">
          <div className="v1-sec-head v1-sec-head-row">
            <div>
              <div className="chip v1-chip">
                <span>JOURNAL</span>
              </div>
              <h2 className="v1-h2">最近のきろく。</h2>
            </div>
            <a href="#" className="v1-all-link">すべてみる →</a>
          </div>
          <div className="v1-blog-list">
            {V1_POSTS.map((p, i) =>
            <a key={i} href="#" className="v1-blog-row">
                <div className="v1-blog-date mono">{p.date}</div>
                <div className="v1-blog-tag">{p.tag}</div>
                <div className="v1-blog-title">{p.title}</div>
                <div className="v1-blog-arrow">→</div>
              </a>
            )}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="v1-cta">
        <div className="container v1-cta-inner">
          <Dragonfly size={80} style={{ color: 'var(--honey)', position: 'absolute', top: 24, right: '10%', opacity: .5 }} />
          <LeafSprig size={72} style={{ color: 'var(--forest-300)', position: 'absolute', bottom: 24, left: '8%', opacity: .6, transform: 'rotate(-15deg)' }} />
          <h2 className="v1-cta-title serif">
            自然のこと、<br />気軽に相談してみませんか？
          </h2>
          <p className="v1-cta-sub">
            小さな質問からでも、どうぞ。<br />
            お返事にはすこしお時間をいただくことがあります。
          </p>
          <a href="contact.html" className="btn btn-primary v1-cta-btn">
            お問い合わせへ <span aria-hidden>→</span>
          </a>
        </div>
      </section>

      <Footer variant="notebook" />
    </div>);

}

window.V1Notebook = V1Notebook;