/* 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.png", tag: "Instagram", headline: "AquaMelt" },
  { ratio: "poster", image: "assets/generated-banners/sns-ad-02-coral-cafe.png", 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.png", 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.png", tag: "Google広告", headline: "SecureBase" },
  { ratio: "square", image: "assets/generated-banners/sns-ad-07-orange-mealkit.png", tag: "Instagram", headline: "YoruDeli" },
  { ratio: "square", image: "assets/generated-banners/sns-ad-08-mint-pet.png", tag: "Instagram", headline: "PetLume" },
  { ratio: "square", image: "assets/generated-banners/sns-ad-09-red-event.png", 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.png", tag: "Instagram", headline: "WearLink" },
  { ratio: "square", image: "assets/generated-banners/sns-ad-12-brown-coffee.png", 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.png", 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.png", 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.png", tag: "Facebook広告", headline: "CraftBase" },
  { ratio: "square", image: "assets/generated-banners/sns-ad-19-silver-watch.png", tag: "Instagram", headline: "PulseBand" },
  { ratio: "video", image: "assets/generated-banners/sns-ad-20-black-camera.png", tag: "YouTube広告", headline: "ClipForge" },
  { ratio: "square", image: "assets/generated-banners/sns-ad-21-turquoise-salon.png", tag: "LINE広告", headline: "SalonLoop" },
  { ratio: "video", image: "assets/generated-banners/sns-ad-22-indigo-meeting.png", tag: "Google広告", headline: "BoardSync" }
];

/* 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" },
  ];

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

  /* Two horizontal rows for gallery — each row duplicated for seamless marquee */
  const galleryRowA = BANNER_SAMPLES.slice(0, 11);
  const galleryRowB = BANNER_SAMPLES.slice(11);

  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);
                /* duplicate for seamless loop */
                const looped = [...items, ...items];
                return (
                  <div key={m} className={`showcase-col showcase-col--${m + 1}`}>
                    {looped.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 });