// Header + Hero + marquees for v3

const V3Nav = () =>
<nav className="v3-nav">
    <div className="shell v3-nav-inner">
      <a href="#" className="v3-nav-logo">
        <img src="assets/tuleen-logo.png" alt="Tuleen" />
      </a>
      <div className="v3-nav-links">
        <a href="#brands">Brands</a>
        <a href="#why">Why us</a>
        <a href="#markets">Markets</a>
        <a href="#partners">Partners</a>
      </div>
      <a href="#contact" className="v3-nav-cta" style={{ backgroundColor: "rgb(50, 0, 255)" }}>Work with us <Arrow size={13} /></a>
    </div>
  </nav>;


const V3Hero = ({ words = V3_HERO_WORDS, showStickers = true }) => {
  // pad to 4 words for the keyframe rotator
  const w = [...words];
  while (w.length < 4) w.push(w[0]);
  return (
    <section className="v3-hero">
      <div className="shell">
        <div className="v3-hero-top">
          <span className="pip"><span className="dot" />Tuleen Co. · Kuwait</span>
          <span>Est. 2021 — Six markets live</span>
        </div>

        <h1 className="v3-hero-headline">
          <div className="row">
            <span style={{ color: "rgb(0, 0, 0)" }}>Snacks</span>
            <span className="it purple">that</span>
          </div>
          <div className="row right">
            <span className="v3-word-slot">
              <span className="word coral">{w[0]}</span>
              <span className="word coral">{w[1]}</span>
              <span className="word coral">{w[2]}</span>
              <span className="word coral">{w[3]}</span>
            </span>
          </div>
          <div className="row">
            <span className="it">people </span>
            <span className="underline">actually</span>
            <span>want.</span>
          </div>
        </h1>

        {showStickers &&
        <>
            <span className="v3-hero-sticker s-1">★ Halal Cert.</span>
            <span className="v3-hero-sticker s-2">Made in Kuwait</span>
            <span className="v3-hero-sticker s-3">"the good stuff"</span>
          </>
        }

        <div className="v3-hero-bottom">
          <p className="v3-hero-sub">
            We're a Kuwait-based FMCG distributor. We hand-pick the snack and confectionery brands that earn their place on a shelf — and we get them there.
          </p>
          <div className="v3-hero-meta">
            <div className="ctas">
              <a href="#brands" className="v3-btn-primary">Meet the brands <Arrow size={14} /></a>
              <a href="#contact" className="v3-btn-ghost">Get in touch</a>
            </div>
          </div>
        </div>
      </div>
    </section>);

};

const V3MarqueeText = ({ items = V3_MARQUEE_TEXT, variant = "ink", reverse = false, fast = false }) => {
  const row = [...items, ...items];
  return (
    <div className={`v3-marquee ${variant}`}>
      <div className={`v3-marquee-track ${fast ? "fast" : ""} ${reverse ? "reverse" : ""}`}>
        {row.map((t, i) =>
        <React.Fragment key={i}>
            <span className={`v3-marquee-item ${i % 2 === 1 ? "it" : ""}`}>{t}</span>
            <span className="v3-marquee-item v3-marquee-star">✻</span>
          </React.Fragment>
        )}
      </div>
    </div>);

};

const V3MarqueeBig = ({ items = V3_MARQUEE_BIG, variant = "purple" }) => {
  const row = [...items, ...items];
  return (
    <div className={`v3-marquee ${variant}`}>
      <div className="v3-marquee-track">
        {row.map((it, i) =>
        <React.Fragment key={i}>
            <span className={`v3-marquee-item ${it.it ? "it" : ""}`}>{it.t}</span>
            <span className="v3-marquee-item v3-marquee-star">✻</span>
          </React.Fragment>
        )}
      </div>
    </div>);

};

const V3ProductMarquee = ({ images = V3_PROD_MARQUEE_IMAGES }) => {
  const row = [...images, ...images];
  return (
    <div className="v3-prod-marquee">
      <div className="v3-prod-track">
        {row.map((src, i) =>
        <div className="v3-prod-tile" key={i}>
            <img src={src} alt="" />
          </div>
        )}
      </div>
    </div>);

};

Object.assign(window, { V3Nav, V3Hero, V3MarqueeText, V3MarqueeBig, V3ProductMarquee });