/* tabiOS LP renewal components */
const { useState, useEffect, useRef } = React;

const ChevronRightIcon = ({ size = 18 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    <path d="M9 18l6-6-6-6" />
  </svg>
);

const MenuIcon = () => (
  <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" aria-hidden="true">
    <path d="M4 7h16" />
    <path d="M4 12h16" />
    <path d="M4 17h16" />
  </svg>
);

const XIcon = () => (
  <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" aria-hidden="true">
    <path d="M6 6l12 12" />
    <path d="M18 6L6 18" />
  </svg>
);

const StarIcon = () => (
  <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
    <path d="M12 2.8l2.9 5.9 6.5.9-4.7 4.6 1.1 6.5L12 17.6l-5.8 3.1 1.1-6.5-4.7-4.6 6.5-.9L12 2.8z" />
  </svg>
);

const AppleIcon = () => (
  <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
    <path d="M17.05 20.28c-.98.95-2.05.86-3.08.43-1.09-.46-2.09-.48-3.24 0-1.44.62-2.2.44-3.06-.43C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.08zM12 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z" />
  </svg>
);

const PlayIcon = () => (
  <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
    <path d="M3 2.5v19a.5.5 0 0 0 .77.42l13.13-9.5a.5.5 0 0 0 0-.84L3.77 2.08A.5.5 0 0 0 3 2.5z" />
  </svg>
);

const CompassIcon = () => (
  <svg width="38" height="38" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    <circle cx="12" cy="12" r="9.5" />
    <polygon points="14.5,9.5 10,11 9.5,14.5 14,13" fill="currentColor" stroke="none" />
  </svg>
);

const BinocularsIcon = () => (
  <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    <circle cx="6" cy="15.5" r="4" />
    <circle cx="18" cy="15.5" r="4" />
    <path d="M6 11.5V6c0-1 .5-2 2-2h0c1 0 1.5 1 1.5 2v3" />
    <path d="M18 11.5V6c0-1-.5-2-2-2h0c-1 0-1.5 1-1.5 2v3" />
    <path d="M9.5 9h5" />
  </svg>
);

const HeartIcon = () => (
  <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
    <path d="M12 21s-7-4.5-9.3-9.3C1.2 8.3 3 4.8 6.2 4.8c1.9 0 3.6 1 4.4 2.6.4.7 1.3.7 1.7 0C13.1 5.8 14.8 4.8 16.7 4.8c3.2 0 5 3.5 3.6 6.8C19 16.5 12 21 12 21z" />
  </svg>
);

const CheckIcon = () => (
  <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    <polyline points="4,12 10,18 20,6" />
  </svg>
);

const PlaneIcon = () => (
  <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
    <path d="M21 13.5l-8.5-2.4V4.3c0-.7-.6-1.3-1.3-1.3h-.4c-.7 0-1.3.6-1.3 1.3v6.8L1 13.5v1.6l8.5-1.6v4.7L7 19v1.6l4-1 4 1V19l-2.5-.8v-4.7l8.5 1.6v-1.6z" />
  </svg>
);

function scrollToId(id) {
  document.getElementById(id)?.scrollIntoView({ behavior: 'smooth' });
}

function Nav() {
  const [open, setOpen] = useState(false);
  const [scrolled, setScrolled] = useState(false);
  // [id, desktopLabel, mobileLabel?]
  const links = [
    ['concept', 'tabiOSとは'],
    ['creator-trips', 'クリエイターの旅'],
    ['moods', '気分で探す'],
    ['how', 'はじめ方'],
    ['voices', 'クリエイターたちの声'],
  ];

  useEffect(() => {
    const handleScroll = () => setScrolled(window.scrollY > 50);
    window.addEventListener('scroll', handleScroll, { passive: true });
    handleScroll();
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  const go = (id) => {
    setOpen(false);
    scrollToId(id);
  };

  return (
    <header className={`nav ${scrolled ? 'is-scrolled' : 'is-top'}${open ? ' is-menu-open' : ''}`}>
      <div className="container nav-inner">
        <a href="#" className="nav-brand" aria-label="tabiOS ホーム" onClick={() => setOpen(false)}>
          <img className="mark" src="assets/logo-mark.png" alt="" />
          <img className="word" src="assets/logo-wordmark.png" alt="tabiOS" />
        </a>
        <nav className="nav-links" aria-label="グローバルナビゲーション">
          {links.map(([id, label]) => (
            <button key={id} type="button" onClick={() => go(id)}>{label}</button>
          ))}
        </nav>{/* desktop labels */}
        <button className="nav-cta" type="button" onClick={() => go('cta')}>ダウンロード</button>
        <button
          className="menu-toggle"
          type="button"
          aria-label={open ? 'メニューを閉じる' : 'メニューを開く'}
          aria-expanded={open}
          onClick={() => setOpen((v) => !v)}>
          {open ? <XIcon /> : <MenuIcon />}
        </button>
      </div>
      <div className={`mobile-menu ${open ? 'is-open' : ''}`}>
        {links.map(([id, label, mobileLabel]) => (
          <button key={id} type="button" onClick={() => go(id)}>{mobileLabel || label}</button>
        ))}
        <button type="button" className="mobile-menu-cta" onClick={() => go('cta')}>ダウンロードする</button>
      </div>
    </header>
  );
}

const heroSlides = [
  { src: 'images/img-fv-4.jpg', alt: '光が差し込む竹林' },
  { src: 'images/img-fv-2.jpg', alt: '湯の街・蒸気の朝' },
  { src: 'images/img-fv-1.jpg', alt: '夕暮れの漁港' },
  { src: 'images/img-fv-5.jpg', alt: '青空と棚田' },
  { src: 'images/img-fv-3.jpg', alt: '透き通る海' },
];

function Hero() {
  const [activeSlide, setActiveSlide] = useState(0);

  useEffect(() => {
    const id = window.setInterval(() => {
      setActiveSlide((i) => (i + 1) % heroSlides.length);
    }, 2500);
    return () => window.clearInterval(id);
  }, []);

  return (
    <section className="hero" aria-labelledby="hero-title">
      <div className="hero-media">
        <div className="hero-slides" aria-hidden="true">
          {heroSlides.map((slide, i) => (
            <img
              key={slide.src}
              src={slide.src}
              alt={slide.alt}
              className={`hero-slide ${i === activeSlide ? 'is-active' : ''}`}
            />
          ))}
        </div>
        <div className="hero-shade"></div>
        <div className="container hero-copy">
          <p className="hero-kicker hero-reveal">tabiOS pre-registration</p>
          <h1 id="hero-title" className="hero-reveal">旅が、旅をつなぐ</h1>
          <p className="hero-lead hero-reveal">新しい旅と出会い、自分の旅にできるアプリ</p>
          <button className="btn btn-primary hero-main-cta hero-reveal" type="button" onClick={() => scrollToId('cta')}>
            ダウンロードする
            <ChevronRightIcon />
          </button>
          <div className="hero-dots" role="tablist" aria-label="FVスライド">
            {heroSlides.map((_, i) => (
              <button
                key={i}
                type="button"
                role="tab"
                aria-selected={i === activeSlide}
                aria-label={`スライド ${i + 1}`}
                className={`hero-dot ${i === activeSlide ? 'is-active' : ''}`}
                onClick={() => setActiveSlide(i)}
              />
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function Concept() {
  return (
    <section id="concept" className="concept section" aria-labelledby="concept-title">
      <div className="container-narrow">
        <span className="concept-icon" aria-hidden="true"><CompassIcon /></span>
        <h2 id="concept-title">あの人の旅が、<br className="sp-only" />あなたの旅になる</h2>
        <p>
          クリエイターのツアーと出会い、その旅を体験できる。<br className="sp-only" />タビオスは、旅の新しい楽しみ方
        </p>
      </div>
    </section>
  );
}

const creatorTrips = [
  {
    photo: 'images/img-ise-1.jpg',
    imageSet: [
      'images/img-ise-1.jpg',
      'images/img-ise-2.jpg',
      'images/img-ise-3.jpg',
      'images/img-ise-4.jpg',
    ],
    alt: '伊勢神宮の鳥居・おかげ横丁・VISON・温泉',
    creator: '@tabios_ise_vison',
    area: '伊勢・三重',
    title: '聖地と温泉の旅 ― 伊勢・VISON',
    description: '神宮を参拝して、おかげ横丁を歩いて、VISONの温泉へ。',
    episode: '早朝の神宮、人がいない参道に立つと、空気が違う。「ここに来たかった」が初めて実感に変わる瞬間でした。',
    price: '¥29,800',
    spots: '4 spots',
    style: '実体験ルート',
    rating: '4.8',
  },
  {
    photo: 'images/img-kyoto-1.jpg',
    imageSet: [
      'images/img-kyoto-1.jpg',
      'images/img-kyoto-2.jpg',
      'images/img-kyoto-3.jpg',
      'images/img-kyoto-4.jpg',
      'images/img-kyoto-5.jpg',
      'images/img-kyoto-6.jpg',
    ],
    interval: 1500,
    alt: '京都の着付け・カフェ・八坂神社・二年坂・花見小路・町家宿',
    creator: '@tabios_route02',
    area: '京都',
    title: '着物で歩く、京都の路地',
    description: '町家の路地と老舗の喫茶、夜の祇園まで。着物で歩く2日間。',
    episode: '夕方の祇園、白川沿いの路地でふと聞こえる三味線の音色。観光地のはずなのに、生活の気配がそのまま残っていました。',
    price: '¥84,800〜',
    spots: '6スポット',
    style: '実体験ルート',
    rating: '4.9',
  },
  {
    photo: 'images/img-asakusa-1.jpg',
    imageSet: [
      'images/img-asakusa-1.jpg',
      'images/img-asakusa-2.jpg',
      'images/img-asakusa-3.jpg',
      'images/img-asakusa-4.jpg',
      'images/img-asakusa-5.jpg',
      'images/img-asakusa-6.jpg',
      'images/img-asakusa-7.jpg',
    ],
    interval: 1500,
    alt: '浅草の雷門・合羽橋・谷中・隅田川・上野・夜のクルーズ・朝のホテル',
    creator: '@tabios_route03',
    area: '東京・浅草',
    title: '人力車で巡る下町時間',
    description: '雷門から仲見世通り、隅田川の夜景まで。下町を人力車でめぐる1日。',
    episode: '合羽橋から谷中へ歩く道で、昭和の匂いがそのまま残った商店街に出会う。観光ガイドには載らない、東京の隙間時間がここにありました。',
    price: '¥45,000〜',
    spots: '8スポット',
    style: '実体験ルート',
    rating: '4.8',
  },
  {
    photo: 'images/img-okinawa-1.jpg',
    imageSet: [
      'images/img-okinawa-1.jpg',
      'images/img-okinawa-2.jpg',
      'images/img-okinawa-3.jpg',
      'images/img-okinawa-4.jpg',
      'images/img-okinawa-5.jpg',
      'images/img-okinawa-6.jpg',
    ],
    interval: 1500,
    alt: '沖縄のシュノーケリング・首里城・国際通り・古宇利島・島の居酒屋・ホテル朝食',
    creator: '@tabios_route04',
    area: '沖縄',
    title: '海と泳ぐ、ひと夏の時間',
    description: '透き通る海でシュノーケル、夜は島の食を楽しむ3日間。',
    episode: '古宇利島の朝、誰もいない海に最初に飛び込んだとき、海と空の境目が消えて、世界に自分しかいなくなる瞬間がありました。',
    price: '¥112,000〜',
    spots: '6スポット',
    style: '実体験ルート',
    rating: '5.0',
  },
];

function PhotoSlideshow({ images, alt, interval = 3000 }) {
  const [active, setActive] = useState(0);

  useEffect(() => {
    if (!images || images.length < 2) return;
    const id = window.setInterval(() => {
      setActive((i) => (i + 1) % images.length);
    }, interval);
    return () => window.clearInterval(id);
  }, [images, interval]);

  return images.map((src, i) => (
    <img
      key={src}
      src={src}
      alt={i === 0 ? alt : ''}
      className={`photo-slide${i === active ? ' is-active' : ''}`}
      aria-hidden={i !== 0}
    />
  ));
}

function CreatorTrips() {
  const main = creatorTrips[0];
  return (
    <section id="creator-trips" className="creator-trips section" aria-labelledby="creator-title">
      <div className="container">
        <div className="section-heading">
          <p className="eyebrow">Creator routes</p>
          <h2 id="creator-title" className="section-title">クリエイターの旅が、<br className="sp-only" />ここにある</h2>
          <p className="section-sub">
            本音でおすすめしたい旅だけを、<br className="sp-only" />日本中から集めていく
          </p>
        </div>

        <article className="featured-trip">
          <div className="featured-photo">
            {main.imageSet && main.imageSet.length > 1 ? (
              <PhotoSlideshow images={main.imageSet} alt={main.alt} interval={main.interval || 3000} />
            ) : (
              <img src={main.photo} alt={main.alt} />
            )}
            <div className="featured-overlay">
              <span className="overlay-chip">{main.creator}</span>
              <span className="overlay-chip rating"><StarIcon /> {main.rating}</span>
            </div>
          </div>
          <div className="featured-copy">
            <p className="trip-area">{main.area}</p>
            <h3>{main.title}</h3>
            {main.description ? <p className="trip-description">{main.description}</p> : null}
            {main.episode ? (
              <div className="trip-episode">
                <p className="episode-label">推しエピソード</p>
                <p className="episode-body">{main.episode}</p>
              </div>
            ) : null}
            <dl className="trip-meta">
              <div><dt>Price</dt><dd>{main.price} / 人</dd></div>
              <div><dt>Spots</dt><dd>{main.spots}</dd></div>
              <div><dt>Style</dt><dd>{main.style || '実体験ルート'}</dd></div>
            </dl>
            <button className="btn btn-secondary" type="button" onClick={() => scrollToId('cta')}>
              このプランを見る
              <ChevronRightIcon />
            </button>
          </div>
        </article>

        <div className="creator-strip" aria-label="他のクリエイターの旅">
          {creatorTrips.slice(1).map((trip) => (
            <article className="mini-trip" key={trip.creator}>
              <div className="mini-photo">
                {trip.imageSet && trip.imageSet.length > 1 ? (
                  <PhotoSlideshow images={trip.imageSet} alt={trip.alt} interval={trip.interval || 3000} />
                ) : (
                  <img src={trip.photo} alt={trip.alt} />
                )}
                <div className="featured-overlay">
                  <span className="overlay-chip">{trip.creator}</span>
                  <span className="overlay-chip rating"><StarIcon /> {trip.rating}</span>
                </div>
              </div>
              <div className="mini-copy">
                <p className="trip-area">{trip.area}</p>
                <h3>{trip.title}</h3>
                {trip.description ? <p className="trip-description">{trip.description}</p> : null}
                {trip.episode ? (
                  <div className="trip-episode">
                    <p className="episode-label">推しエピソード</p>
                    <p className="episode-body">{trip.episode}</p>
                  </div>
                ) : null}
                <dl className="trip-meta">
                  <div><dt>Price</dt><dd>{trip.price} / 人</dd></div>
                  <div><dt>Spots</dt><dd>{trip.spots}</dd></div>
                  <div><dt>Style</dt><dd>{trip.style || '実体験ルート'}</dd></div>
                </dl>
                <button className="btn btn-secondary" type="button" onClick={() => scrollToId('cta')}>
                  このプランを見る
                  <ChevronRightIcon />
                </button>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

const moods = [
  { key: 'healing', label: '癒やされたい', image: 'images/download_1.gif' },
  { key: 'active', label: 'アクティブに', image: 'images/download_5.gif' },
  { key: 'gourmet', label: '美食を堪能', image: 'images/download_9.gif' },
  { key: 'seasons', label: '四季を楽しむ', image: 'images/download_11.gif' },
  { key: 'romantic', label: 'ロマンチックに', image: 'images/download_6.gif' },
  { key: 'self', label: '自分を磨く', image: 'images/download_2.gif' },
  { key: 'meet', label: '人と出逢う', image: 'images/download_7.gif' },
  { key: 'newself', label: '知らない自分に出逢う', image: 'images/download_0.gif' },
  { key: 'culture', label: '歴史・文化に触れる', image: 'images/download_10.gif' },
  { key: 'scenery', label: '絶景に出会う', image: 'images/download_8.gif' },
  { key: 'stay', label: '滞在を味わう', image: 'images/download_3.gif' },
  { key: 'together', label: '大切な人と過ごす', image: 'images/download_4.gif' },
];

function EmotionTags() {
  return (
    <section id="moods" className="moods section" aria-labelledby="moods-title">
      <div className="container moods-grid">
        <div className="section-heading">
          <p className="eyebrow">Mood search</p>
          <h2 id="moods-title" className="section-title">旅は、行き先から<br className="sp-only" />選ばなくていい</h2>
          <p className="section-sub">今の気分から選ぶ。<br className="sp-only" />それだけで旅の見え方が変わる</p>
        </div>
        <div className="mood-collage">
          {moods.map(({ key, label, image }) => (
            <article className={`mood-tile mood-${key}`} key={key}>
              <img className="mood-media" src={image} alt="" loading="lazy" />
              <span>{label}</span>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

const steps = [
  ['01', '出会う', 'images/img-step-01-home.jpg', BinocularsIcon],
  ['02', '惚れる', 'images/img-step-02-detail.jpg', HeartIcon],
  ['03', '決める', 'images/img-step-03-customize.jpg', CheckIcon],
  ['04', '旅に出る', 'images/img-step-04-complete.jpg', PlaneIcon],
];

function HowToUse() {
  const stackRef = useRef(null);
  const [activeStep, setActiveStep] = useState(0);

  useEffect(() => {
    const stack = stackRef.current;
    if (!stack) return;
    const phones = Array.from(stack.querySelectorAll('.step-phone'));
    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting && entry.intersectionRatio >= 0.6) {
            const idx = phones.indexOf(entry.target);
            if (idx >= 0) setActiveStep(idx);
          }
        });
      },
      { root: stack, threshold: [0.6] }
    );
    phones.forEach((p) => observer.observe(p));
    return () => observer.disconnect();
  }, []);

  return (
    <section id="how" className="how section" aria-labelledby="how-title">
      <div className="container">
        <div className="section-heading compact">
          <p className="eyebrow">How it starts</p>
          <h2 id="how-title" className="section-title">旅のはじまりは、4つだけ</h2>
          <p className="section-sub">出会って、惚れて、決めて、旅に出る。<br className="sp-only" />各スポットには「推しエピソード」がある。<br className="sp-only" />惚れた理由を、クリエイターの言葉で読める</p>
        </div>
        <div className="phone-stack" aria-label="tabiOS 予約ステップ" ref={stackRef}>
          {steps.map(([num, title, image, IconComp], index) => (
            <div className="step-item" key={num}>
              <div className="step-label">
                <div className="step-badge-wrap">
                  <span className="step-number">{num.replace(/^0/, '')}</span>
                  <span className="step-badge" aria-hidden="true"><IconComp /></span>
                </div>
                <span className="step-title">{title}</span>
              </div>
              <article className={`step-phone step-phone-${index + 1}`}>
                <img src={image} alt={`${title}のアプリ画面`} />
              </article>
            </div>
          ))}
        </div>
        <div className="step-dots" aria-hidden="true">
          {steps.map((_, i) => (
            <span key={i} className={`step-dot ${i === activeStep ? 'is-active' : ''}`} />
          ))}
        </div>
      </div>
    </section>
  );
}

const voices = [
  {
    quote: '自分の旅が、誰かの次の出発になる。その距離の近さがtabiOSらしさだと思います。',
    name: 'Creator A',
    handle: '@tabios_voice01',
    label: '人気クリエイター',
    initial: 'A',
  },
  {
    quote: '投稿で終わらず、旅そのものを届けられる。ファンとの関係が少し深くなる感覚があります。',
    name: 'Creator B',
    handle: '@tabios_voice02',
    label: '旅のプロ',
    initial: 'B',
  },
  {
    quote: '好きな町の歩き方まで残せるので、ガイドブックとは違う温度のあるプランになります。',
    name: 'Creator C',
    handle: '@tabios_voice03',
    label: 'ローカル案内人',
    initial: 'C',
  },
];

function Voices() {
  const [featured, ...rest] = voices;
  return (
    <section id="voices" className="voices section" aria-labelledby="voices-title">
      <div className="container">
        <div className="section-heading compact">
          <p className="eyebrow">Creator voices</p>
          <h2 id="voices-title" className="section-title">旅好きクリエイターの声</h2>
        </div>
        <div className="voices-layout">
          <article className="voice-card voice-featured">
            <p className="quote-text">{featured.quote}</p>
            <VoicePerson voice={featured} />
          </article>
          <div className="voice-side">
            {rest.map((voice) => (
              <article className="voice-card" key={voice.handle}>
                <p className="quote-text">{voice.quote}</p>
                <VoicePerson voice={voice} />
              </article>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function VoicePerson({ voice }) {
  return (
    <div className="voice-person">
      <div className="voice-avatar">{voice.initial}</div>
      <div className="voice-person-meta">
        <strong>{voice.name}</strong>
        <span className="voice-handle">{voice.handle}</span>
        <span className="voice-label-pill">{voice.label}</span>
      </div>
    </div>
  );
}

function FinalCTA() {
  return (
    <section id="cta" className="final-cta" aria-labelledby="cta-title">
      <img className="cta-bg" src="images/img-cta-beach.jpg" alt="" />
      <div className="cta-shade"></div>
      <div className="container cta-content">
        <p className="eyebrow">Pre-registration</p>
        <h2 id="cta-title">旅好き、集まれ</h2>
        <p>旅した人が届けて、旅したい人が見つける。<br className="sp-only" />あなたの予約が、次の旅を生む</p>
        <div className="cta-actions">
          <a className="store-button primary-store" href="#" aria-label="ダウンロードする">ダウンロードする</a>
          <div className="store-row">
            <a className="store-button store-icon-btn" href="#" aria-label="App Storeでダウンロード">
              <AppleIcon />
              <span><small>Download on the</small>App Store</span>
            </a>
            <a className="store-button store-icon-btn" href="#" aria-label="Google Playでダウンロード">
              <PlayIcon />
              <span><small>GET IT ON</small>Google Play</span>
            </a>
          </div>
        </div>
        <div className="qr-shell" aria-label="QRコード設置予定エリア">
          <div className="qr-frame"></div>
          <span>PC向けQRコードは実コード生成後に差し替え</span>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <div className="container footer-grid">
        <div className="footer-brand">
          <img src="assets/logo-wordmark.png" alt="tabiOS" />
          <p>株式会社tabiOS<br />愛知県名古屋市中区丸の内二丁目1-36<br />NUP・FUJISAWA丸の内ビル8F</p>
          <p className="footer-note">※掲載のクリエイター情報は一部仮のものです。リリース時に実在クリエイター情報に更新します。</p>
        </div>
        <div className="footer-col">
          <h3>Legal</h3>
          <a href="/terms">利用規約</a>
          <a href="#">プライバシーポリシー</a>
          <a href="#">特定商取引法に基づく表記</a>
          <span>観光庁登録旅行業：取得後追記</span>
        </div>
        <div className="footer-col">
          <h3>Contact</h3>
          <a href="mailto:info@tabios.design">info@tabios.design</a>
          <a href="#">Instagram</a>
          <a href="#">TikTok</a>
          <a href="#">YouTube</a>
        </div>
      </div>
      <div className="container footer-bottom">
        <span>© 2026 株式会社tabiOS</span>
      </div>
    </footer>
  );
}

Object.assign(window, { Nav, Hero, Concept, CreatorTrips, EmotionTags, HowToUse, Voices, FinalCTA, Footer });