// Section components for botanica LP

const Header = () => {
  const [isMenuOpen, setIsMenuOpen] = React.useState(false);
  const toggleMenu = () => setIsMenuOpen(!isMenuOpen);
  const closeMenu = () => setIsMenuOpen(false);

  return (
    <header className="nav">
      <div className="nav-inner">
        <a href="#home" className="logo">
          <img src="assets/IMG_6660.jpg" alt="ボタニカマーク" style={{height: 40, width: 'auto', objectFit: 'contain'}} />
          <img src="assets/ボタニカ　ロゴ.png" alt="ボタニカ文字ロゴ" style={{height: 30, width: 'auto', objectFit: 'contain'}} />
        </a>
        <nav className="nav-links">
          <a href="#home">ホーム</a>
          <a href="#service">サービス</a>
          <a href="#method">教育方針</a>
          <a href="#teachers">講師紹介</a>
          <a href="#pricing">料金</a>
          <a href="#faq">Q&A</a>
          <a href="#contact" className="btn-pill">資料請求・無料体験 <Icon.ChevronRight/></a>
        </nav>
        <button className="nav-mobile-toggle" onClick={toggleMenu} aria-label="メニューを開く">
          <Icon.Menu />
        </button>
      </div>

      {/* Mobile Menu */}
      <div className={`mobile-menu-overlay ${isMenuOpen ? 'open' : ''}`} onClick={closeMenu}></div>
      <div className={`mobile-menu ${isMenuOpen ? 'open' : ''}`}>
        <button className="close-btn" onClick={closeMenu} aria-label="メニューを閉じる">
          <Icon.X />
        </button>
        <a href="#home" onClick={closeMenu}>ホーム</a>
        <a href="#service" onClick={closeMenu}>サービス</a>
        <a href="#method" onClick={closeMenu}>教育方針</a>
        <a href="#teachers" onClick={closeMenu}>講師紹介</a>
        <a href="#pricing" onClick={closeMenu}>料金</a>
        <a href="#faq" onClick={closeMenu}>Q&A</a>
        <a href="#contact" className="btn-pill" onClick={closeMenu} style={{marginTop:10}}>資料請求・無料体験 <Icon.ChevronRight/></a>
      </div>
    </header>
  );
};

const OrnTitle = ({children}) => (
  <div className="orn">
    <LeafSprig size={70} color="#7da086"/>
    <span className="orn-title">{children}</span>
    <span style={{transform:'scaleX(-1)',display:'inline-flex'}}><LeafSprig size={70} color="#7da086"/></span>
  </div>
);

const Hero = () => (
  <section className="hero" id="home">
    <div style={{position:'absolute',top:60,left:-30,opacity:.5}}><LeafSpray size={260} color="#88a890"/></div>
    <div style={{position:'absolute',top:280,right:0,opacity:.45}}><LeafSpray size={220} color="#88a890" flip={true}/></div>
    <div className="container">
      <div className="hero-grid">
        <div>
          <h1>
            どこにいても、<br/>
            <span className="accent">質の高い学びを。</span>
          </h1>
          <h2>社会的養護に特化した<br/>完全個別オンライン塾。</h2>
          <p className="lead">
            学習習慣の定着から受験対策まで。<br/>
            私たちは、子供たちの『自分で選ぶ未来』を<br/>支えます。
          </p>
          <div className="hero-ctas">
            <a href="#contact" className="cta-primary"><Icon.Document/> 資料請求・無料体験はこちら <Icon.ChevronRight/></a>
          </div>
          <div className="hero-tags">
            <span><Icon.Shield size={16}/> 社会的養護向け</span>
            <span><Icon.Person size={16}/> 完全個別</span>
            <span><Icon.Monitor size={16}/> オンライン対応</span>
          </div>
        </div>
      </div>
    </div>
  </section>
);

const Reasons = () => (
  <section className="reasons">
    <div className="container">
      <OrnTitle>ボタニカが選ばれる<span style={{fontFamily:'Cormorant Garamond, serif',fontStyle:'italic',padding:'0 6px',color:'var(--green)'}}>3</span>つの理由</OrnTitle>
      <div className="reasons-grid" style={{marginTop:30}}>
        {[
          {n:1, ico:<Icon.House size={64}/>, t:'施設特化', d:'社会的養護の学習環境や支援現場を理解した設計。'},
          {n:2, ico:<Icon.Lamp size={64}/>, t:'リモート技術', d:'Zoom・iPad・書画カメラを活用し、離れていても手元まで丁寧に指導。'},
          {n:3, ico:<Icon.Chat size={64}/>, t:'対話重視', d:'答えを教えるだけでなく、気持ちや考えを引き出す個別対話を大切にします。'},
        ].map(r => (
          <div className="reason" key={r.n}>
            <div className="reason-num">{r.n}</div>
            <div className="reason-circle">{r.ico}</div>
            <h3>{r.t}</h3>
            <div className="leaf-divider"><LeafSprig size={20}/></div>
            <p>{r.d}</p>
          </div>
        ))}
      </div>
    </div>
  </section>
);

const Issues = () => (
  <section className="issues">
    <div className="container">
      <OrnTitle>解決できる課題</OrnTitle>
      <div className="issues-grid" style={{marginTop:36}}>
        {[
          {ico:<Icon.Clipboard size={48}/>, t:'職員の負担軽減', d:'学習の伴走や接続準備もサポートし、現場の負担を減らします。'},
          {ico:<Icon.Chart size={48}/>, t:'学習意欲の向上', d:'一人ひとりの理解に寄り添い、小さな成功体験を積み重ねます。'},
        ].map((c,i)=>(
          <div className="issue-card" key={i}>
            <div className="issue-icon">{c.ico}</div>
            <div>
              <h4>{c.t}</h4>
              <p>{c.d}</p>
            </div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

const NavyBand = ({children}) => (
  <div className="navy-band">
    <p>{children}</p>
  </div>
);

const Service = () => (
  <section className="service" id="service">
    <div className="service-bg">
      <div className="container">
        <div className="service-hero">
          <div>
            <span className="label-pill"><Icon.Sprout size={14}/> サービス内容</span>
            <h2>リアルに伝わる、<br/><span style={{color:'var(--green)'}}>オンライン個別指導。</span></h2>
            <p>Zoom・iPad・書画カメラを活用し、<br/>離れていても「手元まで見える」学習支援を実現します。</p>
          </div>
        </div>
      </div>
    </div>
    <div className="container" style={{paddingTop:60}}>

      <OrnTitle>指導システム</OrnTitle>
      <div className="systems" style={{marginTop:30}}>
        {[
          {n:1, src:'assets/system-zoom.png', t:'Zoomで双方向指導', d:'表情や反応を見ながら、対話を大切に進めます。'},
          {n:2, src:'assets/system-ipad.png', t:'iPadでスムーズ受講', d:'タブレット活用で、場所を選ばず安定して学べます。'},
          {n:3, src:'assets/system-doc.png', t:'書画カメラで手元指導', d:'ノートや問題の途中式まで確認し、つまずきを見逃しません。'},
        ].map(s=>(
          <div className="system-card" key={s.n}>
            <div className="system-num">{s.n}</div>
            <h4>{s.t}</h4>
            <div className="photo"><img src={s.src} alt=""/></div>
            <p>{s.d}</p>
          </div>
        ))}
      </div>

      <div className="friendly">
        <div className="friendly-photo"><img src="assets/service-mid.jpg?v=3" alt="授業を受ける生徒"/></div>
        <div>
          <div style={{textAlign:'center',marginBottom:14}}><LeafSprig size={70}/></div>
          <h3 style={{textAlign:'center'}}>現場で使いやすい、わかりやすい仕組み</h3>
          <ul>
            <li><span style={{color:'var(--green)'}}><Icon.CheckCircle/></span> 接続方法を事前にご案内</li>
            <li><span style={{color:'var(--green)'}}><Icon.CheckCircle/></span> 必要機材の貸出にも対応</li>
            <li><span style={{color:'var(--green)'}}><Icon.CheckCircle/></span> 初回設定も丁寧にサポート</li>
          </ul>
        </div>
      </div>

      <OrnTitle>施設向け導入フロー</OrnTitle>
      <div className="flow">
        <div className="flow-grid">
          {[
            {n:1, ico:<Icon.Mail/>, t:'お問い合わせ・ご相談', d:'ご状況やご希望をお聞かせください。'},
            {n:2, ico:<Icon.ClipCheck/>, t:'環境確認・ご提案', d:'地域の環境やお子様の現在の状況や背景をお伺いし、最適なプランをご提案します。'},
            {n:3, ico:<Icon.Devices/>, t:'機材準備・接続サポート', d:'機材の準備と接続設定や受講環境のご提案など、事前準備をサポートします。'},
            {n:4, ico:<Icon.Sprout size={28}/>, t:'体験授業', d:'合計４回の体験授業（無料）を実施し、納得して授業が開始できるようにサポートします。'},
            {n:5, ico:<Icon.Pencil size={28}/>, t:'授業スタート', d:'万全のサポートで、授業を開始します。'},
          ].map((f,i)=>(
            <div className="flow-step" key={f.n}>
              <div className="flow-num">{f.n}</div>
              <div className="ico">{f.ico}</div>
              <h5>{f.t}</h5>
              <p>{f.d}</p>
              {i<4 && <div className="flow-arrow"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 12h14M13 6l6 6-6 6"/></svg></div>}
            </div>
          ))}
        </div>
      </div>

      <OrnTitle>導入後も安心</OrnTitle>
      <div className="reassure">
        {[
          {ico:<Icon.Headset/>, t:'操作フォロー', d:'困ったときはすぐにサポートします。'},
          {ico:<Icon.Chart size={28}/>, t:'学習進捗の共有', d:<>定期的なミーティング（週１回程度）を実施いたします。<br/>お子様の学習状況等を共有し、連携を深めます。</>},
          {ico:<Icon.Chat size={28}/>, t:'継続相談', d:'運用に関するご相談を継続的に承ります。'},
        ].map((r,i)=>(
          <div className="reassure-card" key={i}>
            <div className="ico">{r.ico}</div>
            <h5>{r.t}</h5>
            <p>{r.d}</p>
          </div>
        ))}
      </div>

      <div style={{textAlign:'center',marginTop:50}}>
        <OrnTitle>1ステップで資料請求できます</OrnTitle>
        <div style={{display:'flex',gap:14,justifyContent:'center',marginTop:24,flexWrap:'wrap'}}>
          <a href="#contact" className="cta-primary"><Icon.Document/> 資料請求・無料体験はこちら <Icon.ChevronRight/></a>
        </div>
      </div>
    </div>
  </section>
);

const Method = () => (
  <section className="method" id="method">
    <div style={{position:'absolute',top:200,left:-10,opacity:.4}}><LeafSpray size={220} color="#88a890"/></div>
    <div className="container">
      <div className="method-hero">
        <div>
          <span className="label-pill"><Icon.Sprout size={14}/> 教育方針・メソッド</span>
          <h2>学びは、<br/><span style={{color:'var(--green)'}}>未来の選択肢を広げる訓練。</span></h2>
          <p style={{fontWeight: 600, color: 'var(--green-d)', marginBottom: 16, lineHeight: 1.6}}>「自ら選び、主体的に歩む力を。<br/>成績の先にある、真の成長を見据えて」</p>
          <div style={{display: 'flex', flexDirection: 'column', gap: 16}}>
            <div>
              <div style={{fontWeight: 600, color: 'var(--green-d)', fontSize: 15}}>真の学習とは：</div>
              <p style={{margin: 0, fontSize: 14, color: 'var(--muted)', lineHeight: 1.8}}>目標に向かう過程で、自分の特性と向き合うこと。単なる知識の習得ではなく、自己理解を深めるプロセスを重視します。</p>
            </div>
            <div>
              <div style={{fontWeight: 600, color: 'var(--green-d)', fontSize: 15}}>目指す姿：</div>
              <p style={{margin: 0, fontSize: 14, color: 'var(--muted)', lineHeight: 1.8}}>受験や進学をゴールとせず、社会に出てからも変化を楽しみ、成長し続けられる力を育みます。</p>
            </div>
            <div>
              <div style={{fontWeight: 600, color: 'var(--green-d)', fontSize: 15}}>学力と個性の両立：</div>
              <p style={{margin: 0, fontSize: 14, color: 'var(--muted)', lineHeight: 1.8}}>多様性が叫ばれる時代だからこそ、基礎学力という土台を大切にします。確かな力があってこそ、個性は自由な翼を得て、最大限に発揮されると考えるからです。</p>
            </div>
          </div>
        </div>
        <div className="method-photo"><img src="assets/f99dd934-cdc2-47b0-abd9-78d12e6dafef.png" alt="代表メッセージ"/></div>
      </div>

      <div className="quote-card">
        <div style={{display:'flex', flexDirection:'column', alignItems:'center', textAlign:'center'}}>
          <div className="quote-badge">
            <div className="circle"><Icon.Sprout size={28}/></div>
            <span>代表メッセージ</span>
          </div>
          <div className="quote-text" style={{marginTop: 20}}>大人が選択肢を提示し、<br/>子供が自ら決定する。</div>
        </div>
        <div className="quote-body">
          <p style={{margin: '0 0 1em 0'}}>「社会に居場所がない」——高校受験に失敗した私が感じた孤独が、すべての原点です。</p>
          <p style={{margin: '0 0 1em 0'}}>教育一家に生まれながら勉強に劣等感を抱き、成績低迷が続いた中学時代。そこから一念発起し、1年間で偏差値を30以上伸ばして教育大学へ進学しました。そこで出会ったのは、既存の教育システムでは十分に支援されない子どもたちの現実でした。</p>
          <p style={{margin: '0 0 1em 0'}}>「勉強ができない」という感覚は、その子の未来を閉ざしてしまうと私は考えます。一人ひとりが可能性を信じて歩める環境を作りたい。その思いから「学習塾ボタニカ」を設立しました。</p>
          <p style={{margin: 0}}>私の経験が、お子様の未来の一助になることを心より願っています。</p>
        </div>
      </div>

      <OrnTitle>ボタニカの学習メソッド</OrnTitle>
      <div className="method-cards" style={{marginTop:30}}>
        {[
          {n:1, ico:<img src="assets/授業イラスト.png" alt="対話で整理する" style={{height: '100%', width: '100%', objectFit: 'contain', padding: '6px'}} />, t:'対話で整理する', d:<>教え込むのではなく、引き出す。<br/>対話から生まれる、子ども自身の『気づき』を伴走します。</>},
          {n:2, ico:<img src="assets/3d1d9661-55d1-4e6a-b233-6f22ace97954 11.23.39.png" alt="情報を集める" style={{height: '100%', width: '100%', objectFit: 'contain', padding: '6px'}} />, t:'情報を集める', d:'進路・学習・社会の情報を一緒に調べ、比較します。'},
          {n:3, ico:<img src="assets/544db08a-9973-4ac4-80a6-63e39aa77bdd.png" alt="自分で選ぶ" style={{height: '100%', width: '100%', objectFit: 'contain', padding: '6px'}} />, t:'自分で選ぶ', d:<>選択肢を見比べ、<br/>自分で決めて行動にうつす経験を積み重ねます。</>},
        ].map(m=>(
          <div className="method-card" key={m.n}>
            <div className="num">{m.n}</div>
            <div className="ico">{m.ico}</div>
            <h4>{m.t}</h4>
            <p>{m.d}</p>
          </div>
        ))}
      </div>

      <OrnTitle>単なる「勉強」ではなく</OrnTitle>
      <div className="plus" style={{marginTop:30}}>
        <div className="plus-card">
          <div className="ico"><Icon.Book/></div>
          <h4>知識の習得</h4>
          <p className="sub">学校内容の理解・受験対策・<br/>基礎定着</p>
          <p className="note">すべての土台となる大切な学びです。</p>
        </div>
        <div className="plus-sym">＋</div>
        <div className="plus-card accent">
          <div className="ico"><Icon.Brain/></div>
          <h4>情報収集と<br/>選択の訓練</h4>
          <p className="sub">比較する・考える・決める・伝える</p>
          <p className="note" style={{color:'var(--green-d)'}}>ボタニカが大切にする独自の価値です。</p>
        </div>
      </div>

      <OrnTitle>成長のイメージ</OrnTitle>
      <div className="growth">
        {[
          {n:1, ico:<img src="assets/4439939a-b38d-446a-bf4e-afe2860e1c64.png" alt="わからない" style={{height: '100%', width: '100%', objectFit: 'contain', padding: '6px'}} />, t:'わからない', d:'不安や疑問をそのままにせず、安心して向き合います。'},
          {n:2, ico:<img src="assets/授業イラスト.png" alt="話せる" style={{height: '100%', width: '100%', objectFit: 'contain', padding: '6px'}} />, t:'話せる', d:'自分の考えや気持ちを言葉にできるようサポートします。'},
          {n:3, ico:<img src="assets/3d1d9661-55d1-4e6a-b233-6f22ace97954 11.23.39.png" alt="選べる" style={{height: '100%', width: '100%', objectFit: 'contain', padding: '6px'}} />, t:'選べる', d:'情報をもとに、自分で選ぶ経験を積み重ねます。'},
          {n:4, ico:<img src="assets/544db08a-9973-4ac4-80a6-63e39aa77bdd.png" alt="前に進める" style={{height: '100%', width: '100%', objectFit: 'contain', padding: '6px'}} />, t:'前に進める', d:'自分の選択に自信を持ち、未来へ一歩を踏み出せるようになります。'},
        ].map(g=>(
          <div className="growth-step" key={g.n}>
            <div className="num">{g.n}</div>
            <div className="ico">{g.ico}</div>
            <h5>{g.t}</h5>
            <p>{g.d}</p>
          </div>
        ))}
      </div>

      <div className="closing-banner">
        <SmallLeafIcon color="#2f5d3f" size={22}/>
        一人ひとりの背景に寄り添いながら、学びと自立を支えます。
        <SmallLeafIcon color="#2f5d3f" size={22}/>
      </div>
    </div>
  </section>
);

const Pricing = () => (
  <section className="pricing" id="pricing">
    <div className="container">
      <div style={{textAlign:'center'}}>
        <span className="label-pill"><Icon.Sprout size={14}/> 料金体系</span>
        <h2 className="section-title">わかりやすく、選びやすい料金設計。</h2>
        <p className="section-sub">施設向けに特化。<br/>目的や支援体制に合わせて柔軟に対応できる、明瞭なプランをご用意しています。</p>
      </div>
      <div className="pricing-grid">
        {[
          {ico:<Icon.House size={42}/>, t:'施設向けプラン', items:['1対1オンライン個別指導','導入サポート・機材相談込み','学習進捗共有あり','月額・回数はご相談に応じて設計'], price:'20000', note:'※人数・回数に応じてお見積り'},
        ].map((p,i)=>(
          <div className="price-card" key={i}>
            <div className="head">
              <div className="ico">{p.ico}</div>
              <h3>{p.t}</h3>
            </div>
            <div className="underline"></div>
            <ul className="price-list">
              {p.items.map((it,j)=>(
                <li key={j}><Icon.CheckCircle size={20}/>{it}</li>
              ))}
            </ul>
            <div className="price-row">
              <span className="price-tag">月額目安</span>
              <span className="price-num">{p.price}</span>
              <span className="price-yen">円〜</span>
              <span className="price-note">{p.note}</span>
            </div>
          </div>
        ))}
      </div>

      <OrnTitle>追加サポート</OrnTitle>
      <div className="addons" style={{marginTop:24}}>
        {[
          {ico:<Icon.Monitor size={20}/>, t:'無料体験授業', d:'実際の授業を体験いただけます。お気軽にお申し込みください。'},
          {ico:<Icon.Chat size={20}/>, t:'学習相談', d:'学習の悩みや進路について、専門スタッフが丁寧に対応します。'},
          {ico:<Icon.ClipCheck size={20}/>, t:'導入前ヒアリング', d:'施設の状況やご要望を伺い、最適なプランをご提案します。'},
        ].map((a,i)=>(
          <div className="addon-card" key={i}>
            <div className="head">
              <div className="ico">{a.ico}</div>
              <h5>{a.t}</h5>
            </div>
            <div className="underline"></div>
            <p>{a.d}</p>
          </div>
        ))}
      </div>

      <div className="clarity">
        <div style={{textAlign:'center',marginBottom:8}}><LeafSprig size={70}/></div>
        <h4>不透明さをなくすために</h4>
        <div className="clarity-grid">
          {[
            {ico:<Icon.Document size={20}/>, t:'事前に内容と費用を丁寧にご説明'},
            {ico:<Icon.Calc size={22}/>, t:'必要に応じて個別見積りをご案内'},
            {ico:<Icon.HandHeart size={22}/>, t:'無理な勧誘はありません'},
          ].map((c,i)=>(
            <div className="clarity-cell" key={i}>
              <div className="ico">{c.ico}</div>
              <p>{c.t}</p>
            </div>
          ))}
        </div>
      </div>



      <div style={{textAlign:'center'}}>
        <h2 className="section-title" style={{fontSize:32}}>まずは資料をご覧ください</h2>
        <div style={{display:'flex',gap:14,justifyContent:'center',marginTop:18,flexWrap:'wrap'}}>
          <a href="#contact" className="cta-primary"><Icon.Document/> 資料請求・無料体験はこちら <Icon.ChevronRight/></a>
        </div>
      </div>
    </div>
  </section>
);

const FAQ = () => {
  const [open, setOpen] = React.useState(0);
  const faqs = [
    {q:'予算に合わせて調整できますか?', a:'はい、可能です。'},
    {q:'少人数から導入できますか?', a:'対応しています。'},
    {q:'まず相談だけでも大丈夫?', a:'もちろんです。'},
    {q:'ネット環境が不安です。', a:'事前に接続確認を行い、通信環境に応じた受講方法をご案内します。'},
    {q:'機材の操作が難しそうです。', a:'初回設定や操作方法を丁寧にサポートし、必要に応じて機材の貸出もご相談いただけます。'},
    {q:'不登校の生徒でも大丈夫ですか?', a:'はい。学習状況や気持ちに寄り添いながら、無理のないペースで個別に進めます。'},
    {q:'施設職員の負担は増えませんか?', a:'接続準備や進め方も含めてサポートし、現場で無理なく続けられる仕組みを整えています。'},
    {q:'まずは相談だけでも可能ですか?', a:'もちろん可能です。資料請求や無料体験授業から、お気軽にご相談ください。'},
  ];
  return (
    <section className="faq" id="faq">
      <div style={{position:'absolute',top:80,left:0,opacity:.4}}><LeafSpray size={220} color="#88a890"/></div>
      <div style={{position:'absolute',top:240,right:0,opacity:.35}}><LeafSpray size={220} color="#88a890" flip/></div>
      <div className="container">
        <div style={{textAlign:'center'}}>
          <span className="label-pill"><Icon.Sprout size={14}/> Q&A</span>
          <h2 className="section-title">現場の不安に、丁寧にお応えします。</h2>
          <p className="section-sub">施設職員の方や生徒・保護者の皆さまから、よくいただくご質問をまとめました。</p>
        </div>
        <div className="faq-list">
          {faqs.map((f,i)=>(
            <div className={`faq-item ${open===i?'open':''}`} key={i}>
              <button className="faq-q" onClick={()=>setOpen(open===i?-1:i)}>
                <span className="faq-tag">Q{i+1}</span>
                <div className="faq-text">
                  <h4>{f.q}</h4>
                </div>
                <span className="faq-toggle"><Icon.Plus size={16}/></span>
              </button>
              <div className="faq-detail"><div className="faq-detail-inner">{f.a}</div></div>
            </div>
          ))}
        </div>

        <div className="two-col">
          <div className="panel">
            <div className="panel-title"><LeafSprig size={50}/><h4>こんな方におすすめ</h4><span style={{transform:'scaleX(-1)',display:'inline-flex'}}><LeafSprig size={50}/></span></div>
            <ul className="recommend-list">
              <li><div className="ico"><Icon.House size={26}/></div>施設での学習支援を充実させたい</li>
              <li><div className="ico"><Icon.Person size={26}/></div>子供の学習意欲を引き出したい</li>
              <li><div className="ico"><Icon.Shield size={26}/></div>安心して導入できる外部支援を探している</li>
            </ul>
          </div>
          <div className="panel">
            <div className="panel-title"><LeafSprig size={50}/><h4>導入・受講の声</h4><span style={{transform:'scaleX(-1)',display:'inline-flex'}}><LeafSprig size={50}/></span></div>
            <div className="voice">
              <div className="avatar"><Icon.PersonCircle/></div>
              <div>
                <div className="voice-bubble">先生方が一人ひとりに合った指導をしてくださり、分からないところも丁寧に教えていただきました。<br/>また、進路に悩んだ時も親身になって相談に乗ってくださり、とても心強かったです。<br/>ただ答えを教えるのではなく、自分で考えて答えを導き出せるように指導してくださったおかげで、学力だけでなく考える力も身についたと感じています。</div>
                <div className="voice-name">元、中学高校 受講生</div>
              </div>
            </div>
            <div className="voice">
              <div className="avatar"><Icon.PersonCircle/></div>
              <div>
                <div className="voice-bubble">勉強は得意ではかったですが、この塾に通わせてもらい勉強をする習慣がつき、内申点をあげることができました。<br/>この塾を皆さんにも利用していただきたいと思い、今はこの塾の裏方を手伝わせて頂いてます。</div>
                <div className="voice-name">元、中学高校 受講生</div>
              </div>
            </div>
            <div className="voice">
              <div className="avatar"><Icon.PersonCircle/></div>
              <div>
                <div className="voice-bubble">塾に子供達が通い始めて、課題を提出してくるようになりました。<br/>内申点がつけやすいです。</div>
                <div className="voice-name">中学校 担任教員</div>
              </div>
            </div>
            <div className="voice">
              <div className="avatar"><Icon.PersonCircle/></div>
              <div>
                <div className="voice-bubble">導入時の希望として、全員に一対一の指導を行ってもらいました。<br/>子供たちにとって、学習を通して大人と向き合ってもらえる機会が増えたと感じております。</div>
                <div className="voice-name">社会的養護 職員様</div>
              </div>
            </div>
            <div className="voice">
              <div className="avatar"><Icon.PersonCircle/></div>
              <div>
                <div className="voice-bubble">一人で抱え込まずに学べるようになりました。<br/>簡単なことから一緒に教えてくれました。<br/>悩むことが減ったと思います。</div>
                <div className="voice-name">中学生・受講生</div>
              </div>
            </div>
          </div>
        </div>

        <div className="closing" id="contact">
          <div style={{textAlign:'center',marginBottom:6,color:'#88a890'}}><LeafSprig size={70} color="#88a890"/></div>
          <h3>資料請求・無料体験授業 受付中</h3>
          <p className="meta">社会的養護向け / 完全個別 / オンライン対応</p>
          <div className="closing-ctas">
            <a href="#contact" className="cta-primary"><Icon.Document/> 資料請求・無料体験はこちら <Icon.ChevronRight/></a>
          </div>
          <p style={{textAlign:'center',marginTop:22,color:'var(--muted)',fontSize:13}}>1ステップでお問い合わせフォームへ</p>
        </div>
      </div>
    </section>
  );
};

const ContactForm = () => {
  return (
    <div className="contact-form" style={{marginTop: 40}}>
      <form action="mailto:botanica.h28@gmail.com?subject=ボタニカ お問い合わせ" method="POST" encType="text/plain">
        <div className="form-group">
          <label className="form-label">お名前 <span className="req">必須</span></label>
          <input type="text" name="お名前" className="form-input" placeholder="山田 太郎" required />
        </div>
        <div className="form-group">
          <label className="form-label">ふりがな <span className="req">必須</span></label>
          <input type="text" name="ふりがな" className="form-input" placeholder="やまだ たろう" required />
        </div>
        <div className="form-group">
          <label className="form-label">施設名・法人名 <span className="opt">任意</span></label>
          <input type="text" name="施設名・法人名" className="form-input" placeholder="〇〇学園" />
        </div>
        <div className="form-group">
          <label className="form-label">メールアドレス <span className="req">必須</span></label>
          <input type="email" name="メールアドレス" className="form-input" placeholder="example@botanica.com" required />
        </div>
        <div className="form-group">
          <label className="form-label">電話番号 <span className="opt">任意</span></label>
          <input type="tel" name="電話番号" className="form-input" placeholder="000-0000-0000" />
        </div>
        <div className="form-group">
          <label className="form-label">お問い合わせ種別 <span className="req">必須</span></label>
          <select name="お問い合わせ種別" className="form-select" required>
            <option value="">選択してください</option>
            <option value="資料請求">資料請求</option>
            <option value="無料体験授業の申し込み">無料体験授業の申し込み</option>
            <option value="その他ご相談">その他ご相談</option>
          </select>
        </div>
        <div className="form-group">
          <label className="form-label">お問い合わせ内容 <span className="opt">任意</span></label>
          <textarea name="お問い合わせ内容" className="form-textarea" placeholder="ご質問やご要望があればご記入ください"></textarea>
        </div>
        <button type="submit" className="form-submit">
          <Icon.Document /> メールソフトを起動して送信する
        </button>
      </form>
    </div>
  );
};

const Teachers = () => (
  <section className="teachers" id="teachers">
    <div className="container">
      <OrnTitle>講師紹介</OrnTitle>
      <div className="teachers-grid" style={{marginTop:30}}>
        {[
          {name:'オオタカ　先生', img: 'assets/オオタカ.png', role: <>塾長<br/>［大阪教育大学　教育学部］</>, bio: <>学校生活のほとんどの時間は勉強（授業）です。<br/>そして、進路選択の1番の武器も勉強です。<br/>授業時間は長いですし、成績が付けられるのは楽しくないこともあるでしょう。<br/>でも、コツコツできることを1つずつしていけば意外と難しくないと思います。<br/>わかることが増えると、学校の授業もちょっと楽しくなりますよ！<br/>必要な努力とその続け方をしっかりと教えていきます。<br/>自身の土台を固めていきましょう！</>},
          {name:'ウエノ　先生', img: 'assets/ウエノ.png', role: <>講師<br/>［大阪府立大学(現大阪公立大学)工学部］</>, bio: <>数学を担当しています講師のウエノです。生徒のみなさんが「数学ってわかると楽しい！」と思える授業を心がけています。<br/>質問しやすい雰囲気づくりを大切にし、計算や方程式、図形など、苦手な単元での躓きを明確にしながら基礎から丁寧にサポートします。<br/>成績と自信のアップにつなげられるよう一緒に頑張りましょう！</>},
          {name:'ミナ　先生', img: 'assets/2B72AAA2-639A-43A7-895C-FF9C810F73AB.PNG', role: <>講師<br/>［京都教育大学　教育学部］</>, bio: <>はじめまして、ミナです！<br/>大阪府で小学校教員として2年間勤務し、2年生と6年生の担任をしていました。その後はカナダへの留学や、ベトナムの幼稚園・児童養護施設での活動など、さまざまな国や環境で子どもたちと関わってきました。<br/><br/>授業では、「できた！」「わかった！」という気持ちを大切にしながら、子どもたちが安心して楽しく学べる雰囲気づくりを心がけています。<br/><br/>子どもたちが「もっと話したい！」「英語って楽しい！」と思えるような、明るく前向きな授業を目指しています。どうぞよろしくお願いいたします！</>},
          {name:'カワハラ　先生', img: 'assets/カワハラ先生.PNG', role: <>講師<br/>［奈良教育大学　教育学部］<br/>［岐阜大学　医学部］</>, bio: <>コメント準備中</>},
          {name:'キノシタ　先生', img: 'assets/キノシタ先生.PNG', role: <>講師<br/>［大阪医科薬科大学 薬学部］</>, bio: <>「勉強は面白いんだ！」そんな発見がある授業を届けられたらと思います。実は教科書の内容は、身の回りのことと深く繋がっています。たくさんのことに触れて、刺激を受け、興味をもち、知的好奇心を溢れさせるスイッチを一緒に押していきましょう！<br/>そして、「苦手で嫌いな科目」を日々の積み重ねで、「得意で好きな科目」に変えるために子どもたち一人ひとりの興味に寄り添ってサポートできればと思います。よろしくお願いします！</>},
          {name:'ジョウイ　先生', img: 'assets/IMG_0274.PNG', role: <>講師<br/>［九州大学　農学部］</>, bio: <>数学は好きですか？<br/>ほとんどの人が「嫌い」「苦手」と答えるでしょう。きっとどこかの段階でつまずいてしまい、それ以降の授業が分からなくなってしまったからだと思います。<br/>ボタニカの授業ではどこでつまずいたのかを一緒に紐解きながら、一人一人に合わせて進めていきます。「好きになった」「嫌いではなくなった」と思ってもらえるようにサポートしていきます！</>},
          {name:'イシダ　先生', img: 'assets/イシダ先生.png', role: <>講師<br/>［大阪教育大学　教育学部］</>, bio: <>勉強は、人形遊びの道具やブロックのパーツを集めていくことににていると思います<br/>一つ一つは知識は言わば道具やパーツ、それをたくさん集めて組み合わせていくことで、色々なことができるようになっていく。<br/>少しずつ集めた知識を使うことで、より大きな問題に取り組むことができるようになります。<br/>ブロックやおもちゃがたくさん入った箱ってワクワクしませんか？<br/>僕と一緒におもちゃ箱をいっぱいにしましょう。</>},
          {name:'カガヤ　先生', img: 'assets/カガヤ先生.PNG', role: <>講師<br/>［同志社大学 法学部］</>, bio: <>将来やりたいことは人それぞれですが、学びがなければ、大人になる時にやりたいことを選べなくなることがあります。今の学校の成績が思うようでなくても、他の誰かと比べて「自分はダメだ」と焦る必要はありません。大切なのは、将来のために昨日の自分よりも一歩ずつでも前へ進むことです。あなたの「わからない」ことに一つ一つ丁寧向き合っていきます。じっくりと歩みを重ね、「自分はやれる」という自信をつけていきましょう。</>},
          {name:'ナカガワ　先生', img: 'assets/ナカガワ先生.PNG', role: <>講師<br/>［大阪養育大学　教育学部］</>, bio: <>「英語なんて、入試から無くなればいいのに！」と思っていた高校時代、赤点も追試も経験しました。<br/>それでも、行きたい大学のために必死に勉強した結果。獲得した英語力のおかげで、「海外留学しよう！」と決断した瞬間、迷わずその道を取ることができました。<br/>学力が身につくと、それは呼吸のような”標準装備”になります。でもそれは、他の人から見れば簡単には手に入らない「羨ましい力」。<br/>学力は、未来の可能性を裏切らない。 その確信を、生徒一人ひとりに伝えていきたいと思っています。</>}
        ].map((t,i)=> (
          <div className="teacher-card" key={i}>
            <div className="photo">
              {t.img ? <img src={t.img} alt={t.name} style={{width:'100%', height:'100%', objectFit:'cover', borderRadius:'50%'}} /> : <Icon.Person size={80}/>}
            </div>
            <h3>{t.name}</h3>
            <h4>{t.role}</h4>
            <p>{t.bio}</p>
          </div>
        ))}
      </div>
    </div>
  </section>
);

const Footer = () => (
  <footer className="foot">
    <div className="logo-row" style={{display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '8px'}}>
      <img src="assets/IMG_6660.jpg" alt="ボタニカマーク" style={{height: 42, width: 'auto', objectFit: 'contain'}} />
      <img src="assets/ボタニカ　ロゴ.png" alt="ボタニカ文字ロゴ" style={{height: 32, width: 'auto', objectFit: 'contain'}} />
    </div>
    <p className="tag">どこにいても、質の高い学びを。</p>
    <p className="copy">© 2026 Botanica Online Academy. All rights reserved.</p>
  </footer>
);

window.Header = Header;
window.Hero = Hero;
window.Reasons = Reasons;
window.Issues = Issues;
window.NavyBand = NavyBand;
window.Service = Service;
window.Method = Method;
window.Pricing = Pricing;
window.FAQ = FAQ;
window.Teachers = Teachers;
window.Footer = Footer;
window.ContactForm = ContactForm;