// =====================================================================
// LiveSpark LP — Sections (Popular / Custom / HowTo)
// =====================================================================

// ------------------------------------------------ Popular Overlays
const PopularOverlays = () => {
  const { C } = useLang();
  return (
    <section className="section" id="overlays">
      <div className="container">
        <div className="section-headline">
          <div className="section-headline-left">
            <span className="eyebrow">Overlays</span>
            <h2>{C.popular.title}</h2>
            <p>{C.popular.subtitle}</p>
          </div>
          <div className="section-headline-right">{C.popular.sampleNote}</div>
        </div>

        <div className="overlay-grid">
          {C.popular.cards.map((card) => (
            <article key={card.title} className="overlay-card" data-tone={card.icon}>
              <div className="vp-wrap-outer">
                <VideoPreview
                  src={card.videoSrc}
                  title={card.title}
                  fallbackIcon={card.icon}
                  aspectRatio={9 / 16}
                />
              </div>
              <div className="overlay-card-body">
                <div className="overlay-card-icon"><Icon name={card.icon} size={20} /></div>
                <h3 className="overlay-card-title">{card.title}</h3>
                <p>{card.body}</p>
              </div>
            </article>
          ))}
        </div>

        <p className="popular-foot">{C.popular.note}</p>
      </div>
    </section>
  );
};

// ------------------------------------------------ Custom Overlay
const CustomOverlay = () => {
  const { C } = useLang();
  return (
    <section className="section section-tight" id="custom">
      <div className="container">
        <div className="custom-panel">
          <div className="vp-wrap-outer" style={{ width: "100%" }}>
            <VideoPreview
              src={C.custom.videoSrc}
              fallbackSrc={C.custom.fallbackVideoSrc}
              title={C.custom.title}
              fallbackIcon="sparkle"
              aspectRatio="auto"
            />
          </div>
          <div>
            <span className="eyebrow custom-eyebrow">Custom Overlay</span>
            <h2 className="custom-title">{C.custom.title}</h2>
            <p className="custom-sub">{C.custom.subtitle}</p>
            <p className="custom-body">{C.custom.body}</p>
            <a href={C.links?.custom || "#contact"} className="btn btn-primary btn-lg">
              {C.custom.cta}<Icon name="arrow-right" size={16} />
            </a>
          </div>
        </div>
      </div>
    </section>
  );
};

// ------------------------------------------------ HowTo
const HowTo = () => {
  const { C, lang } = useLang();
  return (
    <section className="section" id="how-to">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">How it works</span>
          <h2 className="section-title">
            {lang === "ja" ? (
              <>使い方は<span className="holo">かんたん3ステップ</span></>
            ) : (
              <>3 steps. <span className="holo">That's it.</span></>
            )}
          </h2>
        </div>
        <div className="howto-row">
          {C.howTo.steps.map((s, i) => (
            <React.Fragment key={s.title}>
              <article className="howto-card">
                <div className="howto-icon"><Icon name={s.icon} size={22} /></div>
                <div style={{ minWidth: 0 }}>
                  <div className="howto-num num">STEP {String(i + 1).padStart(2, "0")}</div>
                  <h3 className="howto-title">{s.title}</h3>
                  <p className="howto-body">{s.body}</p>
                </div>
              </article>
              {i < C.howTo.steps.length - 1 && (
                <div className="howto-arrow" aria-hidden="true">
                  <Icon name="arrow-right" size={20} />
                </div>
              )}
            </React.Fragment>
          ))}
        </div>
        <p className="howto-note">{C.howTo.note}</p>
      </div>
    </section>
  );
};

Object.assign(window, { PopularOverlays, CustomOverlay, HowTo });