/* ============================================================
   STREAM WITH LIEN — Home page
   ============================================================ */

function Hero({ d, ui, social, live }) {
  return (
    <section className="hero">
      <div className="wrap hero__inner">
        <div className="hero__text">
          <div className="flex" style={{ gap: 12, alignItems: "center", marginBottom: 22, flexWrap: "wrap" }}>
            <span className="eyebrow">{d.kicker}</span>
            <LiveBadge live={live} ui={ui} />
          </div>
          <h1 className="hero__title">
            <span>{d.h1a}</span>{" "}
            <span className="hl">{d.h1b}</span>{" "}
            <span>{d.h1c}</span>
          </h1>
          <p className="hero__lede soft">{d.lede}</p>
          <div className="hero__cta flex" style={{ gap: 14, flexWrap: "wrap" }}>
            <Btn variant="primary" size="lg" iconLeft="twitch" href={social.twitch}>{d.ctaPrimary}</Btn>
            <Btn size="lg" iconLeft="discord" href={social.discord}>{d.ctaSecondary}</Btn>
          </div>
        </div>

        <div className="hero__media">
          <div className="hero__photo sticker">
            <Ph label="Lien — hero portret" h={420} r={20} />
            <div className="hero__sticker hero__sticker--np sticker">
              <span className="np-eq"><i></i><i></i><i></i><i></i></span>
              <div>
                <div className="np-label">Now playing</div>
                <div className="np-track">Muziekbingo mix</div>
              </div>
            </div>
            <div className="hero__sticker hero__sticker--fam">
              <Icon name="heart" size={16} /> FAmilien
            </div>
          </div>
        </div>
      </div>

      <div className="marquee hero__marquee">
        <div className="marquee__inner">
          {[0, 1].map(k => (
            <span key={k} className="marquee__row" aria-hidden={k === 1}>
              {d.marquee.map((m, i) => (<span key={i} className="marquee__item">{m}<i className="marquee__star">✶</i></span>))}
            </span>
          ))}
        </div>
      </div>
    </section>
  );
}

function About({ d }) {
  const ref = useReveal();
  return (
    <section className="section about" ref={ref}>
      <div className="wrap about__inner">
        <div className="about__media reveal">
          <Ph label="Lien — sfeerbeeld" h={380} r={20} className="about__ph" />
          <div className="about__badge sticker">
            <span className="about__badge-big">100%</span>
            <span className="about__badge-sm">goeie vibes</span>
          </div>
        </div>
        <div className="about__text reveal">
          <span className="eyebrow">{d.aboutKicker}</span>
          <h2 className="about__h">{d.aboutH}</h2>
          <p className="about__p soft">{d.aboutP1}</p>
          <p className="about__p soft">{d.aboutP2}</p>
          <div className="stats">
            {d.statsValue.map((v, i) => (
              <div className="stat" key={i}>
                <span className="stat__v">{v}</span>
                <span className="stat__l">{d.statsLabel[i]}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function Community({ d, ui, social }) {
  const ref = useReveal();
  return (
    <section className="section community" ref={ref}>
      <div className="wrap">
        <div className="sec-head reveal">
          <span className="eyebrow">{d.communityKicker}</span>
          <h2 className="sec-head__h">{d.communityH}</h2>
          <p className="sec-head__p soft">{d.communityP}</p>
        </div>
        <div className="community__grid">
          <a className="plat plat--twitch reveal" href={social.twitch} target="_blank" rel="noopener noreferrer">
            <div className="plat__top">
              <span className="plat__icon"><Icon name="twitch" size={28} /></span>
              <Icon name="arrowUpRight" size={26} />
            </div>
            <h3 className="plat__name">{d.twitchCard.name}</h3>
            <p className="plat__desc">{d.twitchCard.desc}</p>
            <span className="plat__cta">{d.twitchCard.cta}<Icon name="arrow" size={18} /></span>
          </a>
          <a className="plat plat--discord reveal" href={social.discord} target="_blank" rel="noopener noreferrer">
            <div className="plat__top">
              <span className="plat__icon"><Icon name="discord" size={28} /></span>
              <Icon name="arrowUpRight" size={26} />
            </div>
            <h3 className="plat__name">{d.discordCard.name}</h3>
            <p className="plat__desc">{d.discordCard.desc}</p>
            <span className="plat__cta">{d.discordCard.cta}<Icon name="arrow" size={18} /></span>
          </a>
        </div>
      </div>
    </section>
  );
}

function SocialBlock({ d, social }) {
  const ref = useReveal();
  return (
    <section className="section social-block" ref={ref}>
      <div className="wrap social-block__inner reveal">
        <div>
          <span className="eyebrow">{d.socialKicker}</span>
          <h2 className="social-block__h">{d.socialH}</h2>
        </div>
        <SocialRow social={social} big />
      </div>
    </section>
  );
}

function Explore({ d, go }) {
  const ref = useReveal();
  return (
    <section className="section explore" ref={ref}>
      <div className="wrap">
        <div className="sec-head reveal">
          <span className="eyebrow">{d.exploreKicker}</span>
          <h2 className="sec-head__h">{d.exploreH}</h2>
        </div>
        <div className="explore__grid">
          {d.tiles.map((t, i) => (
            <button className="tile reveal" key={t.id} onClick={() => go(t.id)} style={{ transitionDelay: (i * 60) + "ms" }}>
              <div className="tile__num">0{i + 1}</div>
              <Ph label={t.id} h={150} r={14} className="tile__ph" />
              <h3 className="tile__t">{t.t}</h3>
              <p className="tile__d soft">{t.d}</p>
              <span className="tile__go"><Icon name="arrowUpRight" size={20} /></span>
            </button>
          ))}
        </div>
      </div>
    </section>
  );
}

function HomePage({ d, ui, social, live, go, lang }) {
  const h = d.home[lang];
  return (
    <>
      <Hero d={h} ui={ui} social={social} live={live} />
      <About d={h} />
      <Community d={h} ui={ui} social={social} />
      <SocialBlock d={h} social={social} />
      <Explore d={h} go={go} />
    </>
  );
}

Object.assign(window, { HomePage });