/* Top / Landing page */

/* ============================================================
   Sample banner data — re-used in hero columns + gallery marquee
   ============================================================ */
const BANNER_SAMPLES = [
  { ratio: "square", image: "assets/generated-banners/sns-ad-01-aqua-skincare.jpg", tag: "Instagram", headline: "AquaMelt" },
  { ratio: "poster", image: "assets/generated-banners/sns-ad-02-coral-cafe.jpg", tag: "Instagram", headline: "MomoLatte" },
  { ratio: "story", image: "assets/generated-banners/sns-ad-03-lime-fitness.jpg", tag: "TikTok広告", headline: "LimeFit" },
  { ratio: "video", image: "assets/generated-banners/sns-ad-04-violet-saas.jpg", tag: "X広告", headline: "TaskNest" },
  { ratio: "poster", image: "assets/generated-banners/sns-ad-05-amber-baby.jpg", tag: "Instagram", headline: "SoraBaby" },
  { ratio: "video", image: "assets/generated-banners/sns-ad-06-navy-security.jpg", tag: "Google広告", headline: "SecureBase" },
  { ratio: "square", image: "assets/generated-banners/sns-ad-07-orange-mealkit.jpg", tag: "Instagram", headline: "YoruDeli" },
  { ratio: "square", image: "assets/generated-banners/sns-ad-08-mint-pet.jpg", tag: "Instagram", headline: "PetLume" },
  { ratio: "square", image: "assets/generated-banners/sns-ad-09-red-event.jpg", tag: "Facebook広告", headline: "EventFlow" },
  { ratio: "poster", image: "assets/generated-banners/sns-ad-10-forest-travel.jpg", tag: "Instagram", headline: "GreenStay" },
  { ratio: "square", image: "assets/generated-banners/sns-ad-11-magenta-fashion.jpg", tag: "Instagram", headline: "WearLink" },
  { ratio: "square", image: "assets/generated-banners/sns-ad-12-brown-coffee.jpg", tag: "Instagram", headline: "RoastBox" },
  { ratio: "poster", image: "assets/generated-banners/sns-ad-13-yellow-education.jpg", tag: "Instagram", headline: "KiraNote" },
  { ratio: "square", image: "assets/generated-banners/sns-ad-14-teal-cleaning.jpg", tag: "LINE広告", headline: "MadoClean" },
  { ratio: "poster", image: "assets/generated-banners/sns-ad-15-purple-kids-code.jpg", tag: "Instagram", headline: "CodeKids" },
  { ratio: "video", image: "assets/generated-banners/sns-ad-16-blue-tax.jpg", tag: "X広告", headline: "QuickTax" },
  { ratio: "poster", image: "assets/generated-banners/sns-ad-17-olive-garden.jpg", tag: "Instagram", headline: "GardenBox" },
  { ratio: "square", image: "assets/generated-banners/sns-ad-18-rose-handmade.jpg", tag: "Facebook広告", headline: "CraftBase" },
  { ratio: "square", image: "assets/generated-banners/sns-ad-19-silver-watch.jpg", tag: "Instagram", headline: "PulseBand" },
  { ratio: "video", image: "assets/generated-banners/sns-ad-20-black-camera.jpg", tag: "YouTube広告", headline: "ClipForge" },
  { ratio: "square", image: "assets/generated-banners/sns-ad-21-turquoise-salon.jpg", tag: "LINE広告", headline: "SalonLoop" },
  { ratio: "video", image: "assets/generated-banners/sns-ad-22-indigo-meeting.jpg", tag: "Google広告", headline: "BoardSync" },
  { ratio: "square", image: "assets/generated-banners/sns-ad-23-burger.jpg", tag: "Instagram広告", headline: "GUTS" },
  { ratio: "square", image: "assets/generated-banners/sns-ad-24-ramen.jpg", tag: "LINE広告", headline: "麺処" },
  { ratio: "video", image: "assets/generated-banners/sns-ad-25-horror-movie.jpg", tag: "X広告", headline: "午前二時の廊下』" },
  { ratio: "portrait", image: "assets/generated-banners/sns-ad-26-shonen-manga.jpg", tag: "Instagram広告", headline: "少年漫画雷牙ランナーズ』" },
  { ratio: "square", image: "assets/generated-banners/sns-ad-27-private-school.jpg", tag: "Facebook広告", headline: "灯台ゼミ" },
  { ratio: "video", image: "assets/generated-banners/sns-ad-28-renovation.jpg", tag: "Google広告", headline: "住まい直し工房" },
  { ratio: "square", image: "assets/generated-banners/sns-ad-29-izakaya.jpg", tag: "Instagram広告", headline: "炭火酒場" },
  { ratio: "story", image: "assets/generated-banners/sns-ad-30-horror-attraction.jpg", tag: "TikTok広告", headline: "絶叫迷宮黒い病棟』" },
  { ratio: "video", image: "assets/generated-banners/sns-ad-31-game.jpg", tag: "YouTube広告", headline: "ゲームNEON" },
  { ratio: "portrait", image: "assets/generated-banners/sns-ad-32-luxury-restaurant.jpg", tag: "Instagram広告", headline: "Restaurant" },
  { ratio: "square", image: "assets/generated-banners/sns-ad-33-supplement.jpg", tag: "Instagram広告", headline: "Daily" },
  { ratio: "square", image: "assets/generated-banners/sns-ad-34-face-mask.jpg", tag: "Instagram広告", headline: "MeltVeil" },
  { ratio: "square", image: "assets/generated-banners/sns-ad-35-cosme.jpg", tag: "Instagram広告", headline: "RosaTone" }
];

/* Render a single banner tile */
function BannerTile({ b, idx }) {
  const style = b.image
    ? { backgroundImage: `url(${b.image})` }
    : { background: b.bg };
  return (
    <div
      key={idx}
      className={`showcase-tile tile-ratio-${b.ratio} ${b.image ? "showcase-tile--image" : ""}`}
      style={style}
      title={`${b.tag} · ${b.headline}`}
    >
      {!b.image && (
        <React.Fragment>
          <span className="tag">{b.tag}</span>
          <h4 style={{ whiteSpace: "pre-line" }}>{b.headline}</h4>
          {b.pill ? <span className="pill">{b.pill}</span> : <span />}
        </React.Fragment>
      )}
    </div>
  );
}

function TopPage({ onStart }) {
  const { t } = useI18n();

  const platforms = [
    { id: "instagram", name: "Instagram" },
    { id: "x", name: "X" },
    { id: "facebook", name: "Facebook" },
    { id: "line", name: "LINE" },
    { id: "tiktok", name: "TikTok" },
    { id: "youtube", name: "YouTube" },
    { id: "google", name: "Google Ads" },
  ];

  const features = [
    { icon: <Layout size={18} />, k: "f1" },
    { icon: <Wand size={18} />, k: "f2" },
    { icon: <Type size={18} />, k: "f3" },
    { icon: <Shield size={18} />, k: "f4" },
    { icon: <Download size={18} />, k: "f5" },
    { icon: <Lightning size={18} />, k: "f6" },
  ];

  /* Use all 35 samples in both areas: upper hero from the top, lower gallery from the bottom. */
  const heroSamples = BANNER_SAMPLES;
  const gallerySamples = [...BANNER_SAMPLES].reverse();

  /* Split upper hero samples into 3 columns */
  const heroCol = (mod) =>
    heroSamples.filter((_, i) => i % 3 === mod);

  /* Lower gallery keeps the previous dense marquee style while flowing from the bottom of the list. */
  const galleryRowA = gallerySamples.slice(0, 18);
  const galleryRowB = gallerySamples.slice(18);

  return (
    <main className="fade-in">
      {/* Hero */}
      <section className="hero">
        <div className="container">
          <div className="hero__inner">
            <div>
              <div className="hero__badge">
                <span className="dot"><Sparkles size={11} /></span>
                {t("hero_badge")}
              </div>
              <h1 className="hero__title">
                {t("hero_title_a")}
                <em>{t("hero_title_em")}</em>
                {t("hero_title_b")}
              </h1>
              <p className="hero__lede">{t("hero_lede")}</p>
              <div className="hero__cta">
                <button className="btn btn--primary btn--lg" onClick={onStart}>
                  {t("hero_cta_start")}
                  <ArrowRight size={16} />
                </button>
              </div>
              <ul className="hero__meta" style={{ listStyle: "none", padding: 0, margin: 0 }}>
                <li><Check size={14} /> {t("hero_meta_1")}</li>
                <li><Check size={14} /> {t("hero_meta_2")}</li>
                <li><Check size={14} /> {t("hero_meta_3")}</li>
              </ul>
            </div>

            {/* Hero showcase — 3 vertically-scrolling columns */}
            <div className="hero__showcase">
              {[0, 1, 2].map((m) => {
                const items = heroCol(m);
                return (
                  <div key={m} className={`showcase-col showcase-col--${m + 1}`}>
                    {[...items, ...items].map((b, i) => <BannerTile key={`${m}-${i}`} b={b} idx={`${m}-${i}`} />)}
                  </div>
                );
              })}
            </div>
          </div>
        </div>
      </section>

      {/* Gallery — horizontal marquee wall */}
      <section className="gallery">
        <div className="gallery-row">
          <div className="marquee">
            {[...galleryRowA, ...galleryRowA].map((b, i) => (
              <BannerTile key={`a-${i}`} b={b} idx={`a-${i}`} />
            ))}
          </div>
        </div>
        <div className="gallery-row">
          <div className="marquee marquee--reverse">
            {[...galleryRowB, ...galleryRowB].map((b, i) => (
              <BannerTile key={`b-${i}`} b={b} idx={`b-${i}`} />
            ))}
          </div>
        </div>

      </section>

      {/* Supported platforms strip */}
      <section className="logos">
        <div className="container">
          <div className="logos__label">{t("logos_label")}</div>
          <div className="logos__row">
            {platforms.map((p) => (
              <div key={p.id}>
                <span style={{
                  width: 22, height: 22, borderRadius: 6,
                  display: "inline-grid", placeItems: "center",
                  background: PLATFORM_COLORS[p.id], color: "#fff", marginRight: 2,
                }}>
                  <PlatformIcon id={p.id} size={13} />
                </span>
                {p.name}
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* How it works */}
      <section className="section" id="how">
        <div className="container">
          <div className="section__head section__head--center">
            <div className="section__eyebrow">{t("how_eyebrow")}</div>
            <h2 className="section__title">{t("how_title")}</h2>
            <p className="section__lede">{t("how_lede")}</p>
          </div>
          <div className="steps">
            {[1, 2, 3].map((n) => (
              <div className="step" key={n}>
                <div className="step__num">STEP {String(n).padStart(2, "0")}</div>
                <div className="step__icon">
                  {n === 1 && <Type size={16} />}
                  {n === 2 && <Sparkles size={16} />}
                  {n === 3 && <Download size={16} />}
                </div>
                <h3 className="step__title">{t(`step_${n}_title`)}</h3>
                <p className="step__body">{t(`step_${n}_body`)}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Features */}
      <section className="section" id="features">
        <div className="container">
          <div className="section__head">
            <div className="section__eyebrow">{t("features_eyebrow")}</div>
            <h2 className="section__title">{t("features_title")}</h2>
          </div>
          <div className="features">
            {features.map((f) => (
              <div className="feature" key={f.k}>
                <div className="feature__icon">{f.icon}</div>
                <h3>{t(`${f.k}_title`)}</h3>
                <p>{t(`${f.k}_body`)}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Final CTA */}
      <section className="section section--tight">
        <div className="container">
          <div className="final-cta">
            <h2>{t("cta_title")}</h2>
            <p>{t("cta_body")}</p>
            <button className="btn btn--primary btn--lg" onClick={onStart}>
              <Sparkles size={16} />
              {t("cta_button")}
              <ArrowRight size={16} />
            </button>
          </div>
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { TopPage });