// =====================================================================
// LiveSpark LP — Marquee & Punchline blocks
// =====================================================================

const Marquee = ({ items, reverse = false }) => {
  // duplicate items for seamless loop
  const loop = [...items, ...items];
  return (
    <div className="marquee" aria-hidden="true">
      <div className={`marquee-track ${reverse ? "reverse" : ""}`}>
        {loop.map((it, i) => (
          <React.Fragment key={i}>
            <span className={`marquee-item ${i % 2 === 1 ? "outline" : ""}`}>{it}</span>
            <span className="marquee-dot">✦</span>
          </React.Fragment>
        ))}
      </div>
    </div>
  );
};

const Punchline = ({ eyebrow, lines, sub }) => (
  <section className="punchline">
    <div className="container">
      {eyebrow && <span className="punchline-eyebrow">{eyebrow}</span>}
      <h2 className="punchline-title">
        {lines.map((l, i) => (
          <React.Fragment key={i}>
            {l.kind === "holo"   && <span className="holo">{l.text}</span>}
            {l.kind === "stroke" && <span className="stroke">{l.text}</span>}
            {(!l.kind || l.kind === "plain") && <span>{l.text}</span>}
            {i < lines.length - 1 && <br />}
          </React.Fragment>
        ))}
      </h2>
      {sub && <p className="punchline-sub">{sub}</p>}
    </div>
  </section>
);

window.Marquee = Marquee;
window.Punchline = Punchline;