const { useState } = React;

const LINE_URL = 'https://system.german-dream.jp/line/open/KdVBtOe9yevC';

// ══ App ════════════════════════════════════════════
function App() {
  const [openFaq, setOpenFaq] = useState(null);
  return (
    <>
      <Nav />
      <Hero />
      <Ticker />
      <WhatIs />
      <ForWhom />
      <Problems />
      <Strengths />
      <Instructor />
      <Courses />
      <Flow />
      <FAQ openFaq={openFaq} setOpenFaq={setOpenFaq} />
      <FinalCTA />
      <Footer />
    </>
  );
}

// ══ NAV ════════════════════════════════════════════
function Nav() {
  const [open, setOpen] = React.useState(false);
  const links = [
    ['音楽×ドイツ語 伴走レッスンとは', '#what-is'],
    ['対象', '#for-whom'],
    ['講師', '#instructor'],
    ['コース', '#courses'],
    ['よくある質問', '#faq'],
  ];
  const close = () => setOpen(false);
  return (
    <nav className="nav">
      <div className="nav-inner">
        <a className="logo" href="/" onClick={close}>
          <span className="logo-mark">Lilla</span>
          <span className="logo-sep" />
          <span className="logo-sub">
            音楽×ドイツ語 伴走レッスン<br/>
            <span style={{fontFamily:'Cormorant Garamond, serif', fontStyle:'italic', fontSize:'10px', letterSpacing:'0.1em'}}>
              Musik × Deutsch
            </span>
          </span>
        </a>

        {/* PC メニュー */}
        <div className="nav-links nav-links-pc">
          {links.map(([label, href]) => (
            <a key={href} className="nav-link" href={href}>{label}</a>
          ))}
          <a className="nav-cta" href={LINE_URL} target="_blank" rel="noopener noreferrer">
            無料相談する
          </a>
        </div>

        {/* ハンバーガーボタン（SP） */}
        <button
          className={`hamburger${open ? ' is-open' : ''}`}
          onClick={() => setOpen(!open)}
          aria-label="メニューを開く"
        >
          <span /><span /><span />
        </button>
      </div>

      {/* SP ドロワー */}
      <div className={`nav-drawer${open ? ' is-open' : ''}`}>
        <div className="nav-drawer-inner">
          {links.map(([label, href]) => (
            <a key={href} className="nav-drawer-link" href={href} onClick={close}>
              {label}
            </a>
          ))}
          <a
            className="nav-drawer-cta"
            href={LINE_URL} target="_blank" rel="noopener noreferrer"
            onClick={close}
          >
            無料相談する →
          </a>
        </div>
      </div>

      {/* オーバーレイ */}
      {open && <div className="nav-overlay" onClick={close} />}
    </nav>
  );
}

// ══ HERO ═══════════════════════════════════════════
function Hero() {
  return (
    <section className="hero">
      <div className="hero-left">
        <div className="hero-kicker">Musik × Deutsch — 音楽×ドイツ語 伴走レッスン</div>
        <h1 className="hero-title">
          音楽と<span className="em">ドイツ語</span>で、<br/>
          子どもの夢を<br/>
          <span className="de">本場ドイツへ。</span>
        </h1>
        <div className="hero-title-sub">
          — Musik × Deutsch Begleit-Kurs —
        </div>
        <p className="hero-lead">
          ピアノ演奏とドイツ語指導を一体で行う音楽×ドイツ語の専門家として、
          音楽とドイツ語を一体で学ぶ唯一無二のレッスン。
          ドイツの音楽大学を目指すお子さんを、
          本場を知り尽くしたリラが伴走します。
        </p>
        <div className="hero-ctas">
          <a className="btn-primary" href={LINE_URL} target="_blank" rel="noopener noreferrer">
            <span>無料相談はLINEへ</span>
            <span className="arrow">→</span>
          </a>
          <a className="btn-ghost" href="#courses">
            コースを見る
          </a>
        </div>
        <div className="hero-badges">
          <div className="hero-badge">
            <span className="hero-badge-val">Hamburg</span>
            <span className="hero-badge-label">音楽大学 Diplom取得</span>
          </div>
          <div className="hero-badge">
            <span className="hero-badge-val">新国立劇場</span>
            <span className="hero-badge-label">オペラ研修所 指導実績</span>
          </div>
          <div className="hero-badge">
            <span className="hero-badge-val">1 on 1</span>
            <span className="hero-badge-label">完全個別レッスン</span>
          </div>
        </div>
      </div>
      <div className="hero-right">
        <img
          className="hero-right-img"
          src="assets/lila-cutout-white.png"
          alt="リラ（西乃りら）— 音楽×ドイツ語講師"
        />
        <div className="hero-right-overlay" />
        <div className="hero-right-text">
          <div className="hero-right-de">
            Musik ist<br/>die Sprache<br/>der Seele.
          </div>
        </div>
      </div>
    </section>
  );
}

// ══ TICKER ══════════════════════════════════════════
function Ticker() {
  const items = [
    '音楽×ドイツ語', '音楽×ドイツ語', 'Hamburg', '本場ドイツへ',
    'Klavierbegleitung', 'ドイツ留学準備', 'Lied', 'Oper', '音楽大学受験対策',
    'Mit Herz und Sprache', '伴走レッスン', 'Musikhochschule',
  ];
  const doubled = [...items, ...items];
  return (
    <div className="ticker">
      <div className="ticker-inner">
        {doubled.map((item, i) => (
          <span key={i} className="ticker-item">
            {item} <span className="ticker-dot">✦</span>
          </span>
        ))}
      </div>
    </div>
  );
}

// ══ WHAT IS 音楽×ドイツ語 伴走レッスン ══════════════
function WhatIs() {
  return (
    <section className="what-is" id="what-is" data-screen-label="01 WhatIs">
      <div className="wrap">
        <div className="sec-head">
          <div className="sec-num">— 01 / Über den Kurs —</div>
          <div className="sec-eyebrow">Know the concept</div>
          <h2 className="sec-title">音楽×ドイツ語 伴走レッスンとは</h2>
          <p className="sec-sub" style={{color:'rgba(240,235,224,0.6)'}}>
            音楽とドイツ語を一体で学ぶ、本場仕込みの指導スタイル
          </p>
        </div>

        <div className="what-is-grid">
          <div className="what-is-text">
            <div className="what-is-word">Musik × Deutsch</div>
            <div className="what-is-def">
              <div className="what-is-def-term">音楽×ドイツ語 伴走レッスン</div>
              <div className="what-is-def-body">
                ドイツ語で「繰り返し練習させる人」を意味するプロのピアニスト。
                オペラや声楽・器楽の現場でピアノを弾きながら歌手・演奏家に
                言葉の発音・音楽表現・解釈を指導する専門職です。
                ドイツ・オーストリアの音楽大学では不可欠な存在。
              </div>
            </div>
            <p>
              リラは<strong>ハンブルク音楽大学ピアノ科でDiplomを取得</strong>し、
              帰国後は<strong>新国立劇場オペラ研修所</strong>でプロの音楽家に
              ドイツ語を指導してきました。
            </p>
            <p>
              「教科書のドイツ語」ではなく、
              <strong>「音楽の場で実際に使うドイツ語」</strong>を知っているから、
              声楽・ピアノ・器楽を学ぶお子さんが
              ドイツで本当に必要な表現を身につけられます。
            </p>
          </div>

          <div className="what-is-cards">
            {[
              {
                icon: '🎹',
                title: '音楽の文脈でドイツ語を学ぶ',
                body: '楽譜の指示語・リート・オペラの台本・音楽用語を音楽と一緒に学ぶから、「知っている」が「使える」に変わります。',
              },
              {
                icon: '🎓',
                title: 'ドイツ音楽大学の入試に対応',
                body: 'Vorspiel（審査演奏）での自己紹介、レパートリーの解説、審査員との会話まで実践的に準備します。',
              },
              {
                icon: '🌍',
                title: '現地の音楽文化まで伝える',
                body: 'ドイツ・ハンブルクで実際に暮らし学んだ経験をもとに、音楽院での生活・マナー・ドイツ人との付き合い方もお伝えします。',
              },
            ].map((c, i) => (
              <div key={i} className="what-is-card">
                <div className="what-is-card-icon">{c.icon}</div>
                <div className="what-is-card-title">{c.title}</div>
                <div className="what-is-card-body">{c.body}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ══ FOR WHOM ════════════════════════════════════════
function ForWhom() {
  const worries = [
    {
      q: '「子どもが将来ドイツの音楽大学に行きたいと言っているが、何から準備すればいいかわからない」',
      sub: '小学生〜高校生のお子さんを持つ親御さん',
    },
    {
      q: '「楽器や声楽は習っているけど、ドイツ語を音楽と一緒に教えてくれる先生が見つからない」',
      sub: 'ピアノ・声楽・バイオリンなど音楽を習わせている親御さん',
    },
    {
      q: '「ドイツ語教室に通わせても、音楽との繋がりが薄くて子どもの意欲が続かない」',
      sub: '語学と音楽を別々に習わせているご家庭',
    },
    {
      q: '「留学前に、楽譜のドイツ語や音楽用語を理解させておきたい」',
      sub: '数年後の音楽留学を見据えている親御さん',
    },
    {
      q: '「オーディションや入試の面接で使えるドイツ語を、実際の場面で練習させたい」',
      sub: 'コンクール・音大受験を控えているお子さんの親御さん',
    },
    {
      q: '「子どもに音楽の夢を諦めさせたくない。本物の環境で学ばせたい」',
      sub: '子どもの可能性に真剣に向き合いたい親御さん',
    },
  ];
  return (
    <section className="for-whom" id="for-whom" data-screen-label="02 ForWhom">
      <div className="wrap">
        <div className="sec-head">
          <div className="sec-num">— 02 / Für wen? —</div>
          <div className="sec-eyebrow">Is this for you?</div>
          <h2 className="sec-title">こんな<span className="em">親御さん</span>へ</h2>
          <p className="sec-sub">
            音楽とドイツ語、どちらも本物を学ばせたいご家庭に選ばれています
          </p>
        </div>
        <div className="worries-grid">
          {worries.map((w, i) => (
            <div key={i} className="worry-card">
              <div className="worry-q">{w.q}</div>
              <div className="worry-sub">{w.sub}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ══ PROBLEMS → SOLUTION ══════════════════════════════
function Problems() {
  return (
    <section className="problems" data-screen-label="03 Problems">
      <div className="wrap">
        <div className="sec-head">
          <div className="sec-num">— 03 / Das Problem —</div>
          <div className="sec-eyebrow">Common struggles</div>
          <h2 className="sec-title">よくある<span className="em">課題</span>と、その解決</h2>
        </div>
        <div className="problem-flow">
          <div className="problem-list">
            <div className="problem-item">😟 音楽とドイツ語を別々に習うため、繋がりが感じられず定着しない</div>
            <div className="problem-item">😟 発音の先生が「音楽ドイツ語」の専門知識を持っていない</div>
            <div className="problem-item">😟 ドイツ留学の実態を知らないまま準備が進んでいる</div>
            <div className="problem-item">😟 楽譜の指示語・リート・オペラの言葉が読めない</div>
            <div className="problem-item">😟 オーディション・入試で何をどう話せばいいか分からない</div>
          </div>
          <div className="problem-arrow">→</div>
          <div className="solution-list">
            <div className="solution-item">音楽の文脈でドイツ語を学ぶから、自然に定着</div>
            <div className="solution-item">ハンブルク音楽大学Diplom × オペラ研修所指導の専門家</div>
            <div className="solution-item">ドイツ在住経験者が留学のリアルをすべて伝える</div>
            <div className="solution-item">楽譜・リート・オペラのドイツ語を実際に演奏しながら学ぶ</div>
            <div className="solution-item">Vorspiel本番を想定した実践的なロールプレイで準備</div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ══ STRENGTHS ════════════════════════════════════════
function Strengths() {
  const items = [
    {
      num: '01', de: 'Musik & Sprache', icon: '🎼',
      title: '音楽とドイツ語、両方のプロ',
      body: 'ピアノ演奏とドイツ語指導を同時にこなす音楽×ドイツ語の専門家として、音と言葉を一体で教えられる国内唯一クラスの講師。「なぜこの発音か」が音楽的文脈で腑に落ちます。',
    },
    {
      num: '02', de: 'Erfahrung', icon: '🏛️',
      title: '新国立劇場 × ハンブルク仕込みの実績',
      body: 'ハンブルク音楽大学で磨いた技術と、新国立劇場オペラ研修所での現場指導経験。日本トップクラスの音楽家にドイツ語を教えてきた実績が、お子さんの指導にも生きています。',
    },
    {
      num: '03', de: 'Individualität', icon: '🧭',
      title: 'お子さんの目標に合わせた個別設計',
      body: 'ピアノ・声楽・バイオリン・フルートなど、楽器・レベル・留学目標・受験校によって内容を完全オーダーメイド。「この子がドイツで必要なドイツ語」だけを無駄なく学べます。',
    },
  ];
  return (
    <section className="strengths" data-screen-label="04 Strengths">
      <div className="wrap">
        <div className="sec-head">
          <div className="sec-num">— 04 / Warum Lilla? —</div>
          <div className="sec-eyebrow">Three reasons to choose</div>
          <h2 className="sec-title">リラが<span className="em">選ばれる</span>3つの理由</h2>
          <p className="sec-sub">音楽×ドイツ語を一体で指導できる専門家だからこそ</p>
        </div>
        <div className="strengths-grid">
          {items.map((s, i) => (
            <div key={i} className="strength-card">
              <div className="strength-num">{s.num}</div>
              <div className="strength-icon">{s.icon}</div>
              <div className="strength-de">{s.de}</div>
              <div className="strength-title">{s.title}</div>
              <div className="strength-body">{s.body}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ══ INSTRUCTOR ═══════════════════════════════════════
function Instructor() {
  return (
    <section className="instructor" id="instructor" data-screen-label="05 Instructor">
      <div className="wrap">
        <div className="sec-head">
          <div className="sec-num">— 05 / Die Lehrerin —</div>
          <div className="sec-eyebrow">Lernen Sie Lilla kennen</div>
          <h2 className="sec-title"><span className="em">講師</span>について</h2>
        </div>
        <div className="instructor-grid">
          <div className="inst-portrait-wrap">
            <div className="inst-portrait-bg" />
            <img
              className="inst-portrait-img"
              src="assets/lila-cutout-green.png"
              alt="リラ（西乃りら）"
            />
            <div className="inst-tag">
              <span style={{display:'block', fontFamily:'Cormorant Garamond, serif', fontStyle:'italic'}}>Mit Liebe.</span>
              音楽と言葉で、共に
            </div>
          </div>
          <div>
            <div className="inst-eyebrow">Musik × Deutsch Lehrerin</div>
            <div className="inst-role">音楽×ドイツ語講師</div>
            <h3 className="inst-name-jp">リラ <span style={{fontSize:'0.7em', fontWeight:400}}>（西乃 りら）</span></h3>
            <div className="inst-name-en">Lilla — Nishino Lilla</div>

            <div className="inst-career">
              {[
                { year: '大阪市立大学', text: '文学部独文学科 卒業' },
                { year: 'マールブルク大学', text: 'ドイツ文学 専攻' },
                { year: 'ハンブルク音楽大学', text: 'ピアノ科 Diplom 取得' },
                { year: '新国立劇場', text: 'オペラ研修所にて音楽家へのドイツ語指導（現在も継続）' },
              ].map((c, i) => (
                <div key={i} className="inst-career-item">
                  <span className="inst-career-year">{c.year}</span>
                  <span>{c.text}</span>
                </div>
              ))}
            </div>

            <blockquote className="inst-quote">
              <p>
                音楽を学ぶということは、言葉を学ぶことでもある。<br/>
                ドイツ語は、音楽を深く理解するための「もう一つの楽器」。<br/>
                その二つを一緒に育てることで、子どもたちの表現は豊かになります。
              </p>
              <span className="author">— Lilla / Nishino Lilla</span>
            </blockquote>
          </div>
        </div>
      </div>
    </section>
  );
}

// ══ COURSES ══════════════════════════════════════════
function Courses() {
  const courses = [
    {
      badge: 'KURS 01', de: 'Einführung',
      name: '音楽ドイツ語 入門コース',
      target: 'ドイツ語ゼロから始めるお子さん・小学生〜中学生向け',
      items: [
        '楽譜の指示語・速度記号（Allegro, Adagioなど）',
        '音楽用語のドイツ語読み方',
        '初歩の日常会話（自己紹介・挨拶）',
        '簡単なリート（歌曲）の意味を理解する',
        'ドイツの音楽文化・生活の紹介',
      ],
      price: '¥98,000', priceNote: '全10回 / オンライン',
      href: LINE_URL, featured: false,
    },
    {
      badge: 'KURS 02 — 人気No.1', de: 'Vorbereitung',
      name: 'ドイツ留学準備コース',
      target: '留学・音大受験を視野に入れた中学生〜大学生向け',
      items: [
        '入試・審査での自己紹介と演奏曲解説',
        'レパートリーのテキスト精読（発音・意味・表現）',
        '審査員や教授との会話シミュレーション',
        '出願書類・志望動機のドイツ語添削',
        'ドイツ音楽大学の受験・入学のリアル情報',
      ],
      price: '¥139,000', priceNote: '全15回 / オンライン',
      href: LINE_URL, featured: true,
    },
    {
      badge: 'KURS 03', de: 'Intensiv',
      name: '音楽×ドイツ語 集中コース',
      target: 'コンクール・入試本番が迫っているお子さん向け',
      items: [
        'ピアノ伴奏つきの本番想定レッスン',
        '楽曲テキストの深い解釈と表現法',
        'ドイツ語発音の徹底矯正',
        '本番での緊張・対話の実践トレーニング',
        '帰国後のフォローアップ相談',
      ],
      price: '¥180,000', priceNote: '全20回 / オンライン',
      href: LINE_URL, featured: false,
    },
  ];

  return (
    <section className="courses" id="courses" data-screen-label="06 Courses">
      <div className="wrap">
        <div className="sec-head">
          <div className="sec-num">— 06 / Die Kurse —</div>
          <div className="sec-eyebrow">Choose your path</div>
          <h2 className="sec-title">コースの<span className="em">ご案内</span></h2>
          <p className="sec-sub">お子さんのレベル・目標・スケジュールに合わせて選べる3コース</p>
        </div>
        <div className="courses-grid">
          {courses.map((c, i) => (
            <div key={i} className={`course-card${c.featured ? ' featured' : ''}`}>
              <div className="course-badge">{c.badge}</div>
              <div className="course-de">{c.de}</div>
              <div className="course-name">{c.name}</div>
              <div className="course-target">{c.target}</div>
              <div className="course-items">
                {c.items.map((item, j) => (
                  <div key={j} className="course-item">
                    <span className="course-item-dot" />
                    <span>{item}</span>
                  </div>
                ))}
              </div>
              <div className="course-price">
                <div className="course-price-label">PREIS</div>
                <div className="course-price-val">{c.price}</div>
                <div className="course-price-note">{c.priceNote}</div>
              </div>
              <a
                className={`course-cta-btn ${c.featured ? 'solid' : 'outline'}`}
                href={c.href}
                target="_blank" rel="noopener noreferrer"
              >
                <span>このコースを相談する</span>
                <span className="arrow">→</span>
              </a>
            </div>
          ))}
        </div>
        <p style={{textAlign:'center', marginTop:'40px', fontSize:'14px', color:'var(--ink-mute)'}}>
          ※ 料金・回数は目安です。お子さんの状況に合わせて柔軟に対応します。まずはお気軽にご相談ください。
        </p>
      </div>
    </section>
  );
}

// ══ FLOW ══════════════════════════════════════════════
function Flow() {
  const steps = [
    { num: '1', title: 'LINEで無料相談', body: 'お子さんの状況・目標・希望をお聞かせください' },
    { num: '2', title: '無料体験レッスン', body: '30分の体験で雰囲気・相性を確認' },
    { num: '3', title: 'コース・内容を決定', body: 'お子さんに合ったカリキュラムをご提案' },
    { num: '4', title: 'レッスン開始', body: 'Zoomによるオンライン個別レッスン' },
    { num: '5', title: '夢のドイツへ', body: 'ドイツ留学・音大受験に向けて着実に前進' },
  ];
  return (
    <section className="flow" data-screen-label="07 Flow">
      <div className="wrap">
        <div className="sec-head">
          <div className="sec-num">— 07 / Der Weg —</div>
          <div className="sec-eyebrow">Your journey starts here</div>
          <h2 className="sec-title" style={{color:'var(--ink-on-dark)'}}>
            レッスン開始までの<span className="em">流れ</span>
          </h2>
        </div>
        <div className="flow-steps">
          {steps.map((s, i) => (
            <div key={i} className="flow-step">
              <div className="flow-step-num">{s.num}</div>
              <div className="flow-step-title">{s.title}</div>
              <div className="flow-step-body">{s.body}</div>
            </div>
          ))}
        </div>
        <div className="flow-cta">
          <a className="btn-white" href={LINE_URL} target="_blank" rel="noopener noreferrer">
            <span>無料相談はLINEへ</span>
            <span className="arrow">→</span>
          </a>
        </div>
      </div>
    </section>
  );
}

// ══ FAQ ══════════════════════════════════════════════
function FAQ({ openFaq, setOpenFaq }) {
  const items = [
    {
      q: '楽器を習っていない子どもでも受講できますか？',
      a: 'はい、受講できます。楽器演奏の経験は必須ではありません。「将来ドイツで音楽を学びたい」「音楽とドイツ語を一緒に学びたい」というお子さんであれば、どのレベルからでも対応します。まずはご相談ください。',
    },
    {
      q: '小学生からでも始められますか？',
      a: 'はい、小学生から受講されているお子さんがいます。年齢や理解度に合わせて内容を調整しますので、焦らず楽しみながら進められます。',
    },
    {
      q: 'ドイツ留学はまだ先の話なのですが、今から始める意味はありますか？',
      a: '早く始めるほど有利です。言語は継続して触れることで定着するため、小学生・中学生のうちに音楽ドイツ語に慣れ親しんでおくと、高校・大学での留学準備がスムーズになります。',
    },
    {
      q: 'オンラインのみですか？対面は可能ですか？',
      a: '基本はZoomを使ったオンラインレッスンです。東京近郊の方は対面についてご相談いただける場合があります。詳しくはLINEでお問い合わせください。',
    },
    {
      q: '声楽専門ですか？ピアノや他の楽器でも対応できますか？',
      a: 'はい、ピアノ・バイオリン・フルート・チェロなど器楽のお子さんも対応しています。楽器の種類に関わらず「ドイツ語×音楽」の専門知識でサポートします。',
    },
    {
      q: '親も一緒に学べますか？',
      a: 'もちろんです。お子さんのレッスンに親御さんが同席されるケースも多いです。ドイツ留学を一緒にサポートできるよう、親御さん向けの情報提供も行っています。',
    },
  ];
  return (
    <section className="faq" id="faq" data-screen-label="08 FAQ">
      <div className="wrap">
        <div className="sec-head">
          <div className="sec-num">— 08 / Fragen & Antworten —</div>
          <div className="sec-eyebrow">Frequently asked questions</div>
          <h2 className="sec-title">よくある<span className="em">ご質問</span></h2>
        </div>
        <div className="faq-list">
          {items.map((item, i) => (
            <div key={i} className="faq-item">
              <button
                className="faq-q"
                onClick={() => setOpenFaq(openFaq === i ? null : i)}
              >
                <span>{item.q}</span>
                <span className={`faq-icon${openFaq === i ? ' open' : ''}`}>+</span>
              </button>
              {openFaq === i && (
                <div className="faq-a">{item.a}</div>
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ══ FINAL CTA ════════════════════════════════════════
function FinalCTA() {
  return (
    <section className="final-cta" data-screen-label="09 FinalCTA">
      <div className="final-cta-bg-text">Musik ist die Sprache der Seele</div>
      <div className="wrap">
        <div className="final-cta-inner">
          <div className="final-cta-kicker">— 今が、始め時です —</div>
          <h2 className="final-cta-title">
            子どもの音楽の夢を、<br/>
            ドイツ語という武器で叶えましょう。
          </h2>
          <p className="final-cta-sub">
            まずは無料相談から。お子さんの状況・目標・不安など<br/>
            どんなことでもLINEでお気軽にご連絡ください。
          </p>
          <div className="final-cta-btns">
            <a className="btn-white" href={LINE_URL} target="_blank" rel="noopener noreferrer">
              <span>無料相談はLINEへ</span>
              <span className="arrow">→</span>
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

// ══ FOOTER ═══════════════════════════════════════════
function Footer() {
  return (
    <footer className="footer">
      <div className="footer-logo">Lilla — 音楽×ドイツ語 伴走レッスン</div>
      <div className="footer-links-row">
        <a href="/" className="footer-link">← トップに戻る</a>
        <a href="/company.html" className="footer-link">会社概要</a>
      </div>
      <div className="footer-copy">
        © 2024 Lilla / 西乃慶音 — All rights reserved.
      </div>
    </footer>
  );
}

// ══ Mount ════════════════════════════════════════════
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);