// Marquee.jsx — Infinite scrolling image carousel + Green CTA strip

const MARQUEE_IMGS = [
{ src: "https://imagedelivery.net/mYdfeAeRRdkIXG5w7XJhtQ/e6091403-28a5-4e71-8834-5841bf3b6600/public", label: "Design Natural" },
{ src: "https://imagedelivery.net/mYdfeAeRRdkIXG5w7XJhtQ/1738ec87-9e58-4aff-be33-1fead70eef00/public", label: "Henna" },
{ src: "https://imagedelivery.net/mYdfeAeRRdkIXG5w7XJhtQ/724fce1a-bbec-4f69-6dcd-324211594d00/public", label: "Design Natural" },
{ src: "https://imagedelivery.net/mYdfeAeRRdkIXG5w7XJhtQ/09b3191e-b7a7-4e29-cdbe-c7ee128afe00/public", label: "Brow Lamination" },
{ src: "https://imagedelivery.net/mYdfeAeRRdkIXG5w7XJhtQ/60a20f9f-fbe7-4bfd-6f36-a819d2ae3300/public", label: "Design Natural" },
{ src: "https://imagedelivery.net/mYdfeAeRRdkIXG5w7XJhtQ/ee9cbc76-23fe-4c34-d1af-ac6bc42aa200/public", label: "Tintura" },
{ src: "https://imagedelivery.net/mYdfeAeRRdkIXG5w7XJhtQ/4b934440-c640-4bbf-4caf-31779892e900/public", label: "Lash Lifting" },
{ src: "https://imagedelivery.net/mYdfeAeRRdkIXG5w7XJhtQ/6fd29f2a-779c-4cda-f4ef-b26b62fa0200/public", label: "Henna" },
{ src: "https://imagedelivery.net/mYdfeAeRRdkIXG5w7XJhtQ/acb51546-8755-44ba-e6d0-73c5222f3600/public", label: "Lash Lifting" },
{ src: "https://imagedelivery.net/mYdfeAeRRdkIXG5w7XJhtQ/8dd4829f-079e-414f-0be0-7a6520057600/public", label: "Design Natural" },
{ src: "https://imagedelivery.net/mYdfeAeRRdkIXG5w7XJhtQ/d3aecb59-88df-4dba-c0c8-06cf39c0ed00/public", label: "Design Natural" },
{ src: "https://imagedelivery.net/mYdfeAeRRdkIXG5w7XJhtQ/c1fa3c0e-2538-4b58-0280-df4f5528d100/public", label: "Brow Lamination" }];


const MARQUEE_ROW2 = [...MARQUEE_IMGS].reverse();

function MarqueeCard({ item }) {
  const [hovered, setHovered] = React.useState(false);
  return (
    <div
      className="mq-card"
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
      style={{ transform: hovered ? "scale(1.04)" : "scale(1)" }}>
      
      <img src={item.src} alt={item.label} loading="lazy" />
      <div className="mq-card-overlay" style={{ opacity: hovered ? 1 : 0 }}>
        <span className="mq-label">{item.label}</span>
        <a href={WA_LINK} target="_blank" rel="noopener" className="mq-book">Agendar →</a>
      </div>
    </div>);

}

function MarqueeRow({ items, reverse = false, speed = 40 }) {
  const doubled = [...items, ...items];
  return (
    <div className="mq-track-wrap">
      <div
        className="mq-track"
        style={{ animationDuration: `${speed}s`, animationDirection: reverse ? "reverse" : "normal" }}>
        
        {doubled.map((item, i) =>
        <MarqueeCard key={i} item={item} />
        )}
      </div>
    </div>);

}

function Marquee() {
  return (
    <section id="marquee-section" className="mq-section">
      {/* Header */}
      <div className="mq-header container">
        <div className="eyebrow reveal" style={{ justifyContent: "center", color: "var(--green-soft)" }}>
          Nossos resultados
        </div>
        <h2 className="section-title reveal d1" style={{ color: "white" }}>
          Cada cliente, um{" "}
          <span style={{ fontFamily: "var(--font-ed)", fontStyle: "italic", color: "var(--green-soft)", fontSize: "52px" }}>
            olhar único.
          </span>
        </h2>
        <p className="section-sub reveal d2" style={{ color: "rgba(255,255,255,0.55)" }}>
          Deslize para explorar nosso portfólio de transformações.
        </p>
      </div>

      {/* Row 1 — left */}
      <div className="reveal d2">
        <MarqueeRow items={MARQUEE_IMGS} speed={55} />
      </div>

      {/* Row 2 — right */}
      <div className="reveal d3" style={{ marginTop: 20 }}>
        <MarqueeRow items={MARQUEE_ROW2} reverse speed={45} />
      </div>

      {/* Bottom strip */}
      <div className="mq-bottom container reveal d4">
        <div className="mq-ticker">
          {["Design de Sobrancelhas", "Brow Lamination", "Henna", "Tintura", "Lash Lifting", "Mapeamento Facial"].map((t) =>
          <span key={t} className="mq-ticker-item">
              <span className="mq-ticker-dot">✦</span> {t}
            </span>
          )}
        </div>
        <a href={WA_LINK} target="_blank" rel="noopener" className="mq-cta-btn">
          Ver portfólio completo →
        </a>
      </div>
    </section>);

}

Object.assign(window, { Marquee });