/* global React */
// =================================================================
// §3b CLIENT RESULTS — fanned card stack (Lando-style)
// =================================================================
const { useState: useResultsState, useRef: useResultsRef, useEffect: useResultsEffect } = React;

function CardCarousel({ cards, cardPhotos }) {
  const [idx, setIdx] = useResultsState(3); // start on Bentley Trike
  const trackRef = useResultsRef(null);

  // Scroll track to center card i
  const scrollTo = (i) => {
    setIdx(i);
    const track = trackRef.current;
    if (!track) return;
    const card = track.children[i];
    if (!card) return;
    const trackCenter = track.offsetWidth / 2;
    const cardCenter = card.offsetLeft + card.offsetWidth / 2;
    track.scrollTo({ left: cardCenter - trackCenter, behavior: 'smooth' });
  };

  // On mount scroll to starting card
  useResultsEffect(() => {
    setTimeout(() => scrollTo(3), 80);
  }, []);

  // Sync idx dot when user scrolls manually
  const onScroll = () => {
    const track = trackRef.current;
    if (!track) return;
    const trackCenter = track.scrollLeft + track.offsetWidth / 2;
    let closest = 0, minDist = Infinity;
    Array.from(track.children).forEach((card, i) => {
      const dist = Math.abs(card.offsetLeft + card.offsetWidth / 2 - trackCenter);
      if (dist < minDist) { minDist = dist; closest = i; }
    });
    setIdx(closest);
  };

  return (
    <div className="card-carousel">
      <div className="card-carousel-track" ref={trackRef} onScroll={onScroll}>
        {cards.map((c, i) => (
          <a
            key={i}
            href="book.html"
            className={"card-carousel-item" + (i === idx ? " is-active" : "")}
          >
            <div className="results-card-photo" style={{ backgroundImage: `url(${cardPhotos[i].src})`, backgroundSize: 'cover', backgroundPosition: cardPhotos[i].pos, position: 'absolute', inset: 0 }} />
            <div className="results-card-overlay" />
            <div className="results-card-meta">
              <div className="results-card-tag">{c.tag}</div>
              <div className="results-card-name">{c.name}</div>
              <div className="results-card-stat">
                <span className="m">{c.metric}</span>
                <span className="l">{c.label}</span>
              </div>
            </div>
          </a>
        ))}
      </div>

      <button className="carousel-arrow carousel-prev" onClick={() => scrollTo(Math.max(0, idx - 1))} disabled={idx === 0}>‹</button>
      <button className="carousel-arrow carousel-next" onClick={() => scrollTo(Math.min(cards.length - 1, idx + 1))} disabled={idx === cards.length - 1}>›</button>

      <div className="carousel-dots">
        {cards.map((_, i) => (
          <button key={i} className={"carousel-dot" + (i === idx ? " active" : "")} onClick={() => scrollTo(i)} />
        ))}
      </div>
    </div>
  );
}

function Results() {
  const cardPhotos = [
    { src: 'card-joey.jpg',             pos: 'center top'   },
    { src: 'card-renuva.jpg',           pos: 'right center' },
    { src: 'card-permanent-lights.jpg', pos: 'center'       },
    { src: 'card-bentley-trike.jpg',    pos: 'center'       },
    { src: 'card-alanis-air.webp',      pos: 'center'       },
    { src: 'card-miss-carrie-june.jpg', pos: 'center top'   },
    { src: 'card-tim-tebow.png',        pos: 'center top'   },
  ];

  const cards = [
    { tag: "CLINIC",        name: "Dr. Joey Alcantara",      metric: "$38K",   label: "generated in 30 days · 58× ROAS" },
    { tag: "CLINIC",        name: "Renuva Back & Pain",       metric: "$2.1M",  label: "generated in 9 months · 7.6× ROI" },
    { tag: "HOME SERVICES", name: "Permanent Lights Calgary", metric: "$250K",  label: "revenue in 5 months · 26.6× ROI" },
    { tag: "FEATURED",      name: "Bentley Trike",            metric: "$3M",    label: "/ year in 12 months · 17.83× ROAS" },
    { tag: "HOME SERVICES", name: "Alanis Air",               metric: "$400K+", label: "closed in 3 months · 40× ROAS" },
    { tag: "E-COM",         name: "Miss Carrie June",         metric: "$194K",  label: "in 30 days · 4.81× ROAS" },
    { tag: "CELEBRITY",     name: "Tim Tebow",                metric: "200+",   label: "sign-ups in 1 month · $50/sign-up" },
  ];

  const transforms = [
    { rot: -22, x: -360, y: 56,  scale: 0.86, z: 1 },
    { rot: -15, x: -240, y: 30,  scale: 0.90, z: 2 },
    { rot:  -8, x: -130, y: 12,  scale: 0.94, z: 3 },
    { rot:   0, x:    0, y: -8,  scale: 1.04, z: 7 },
    { rot:   8, x:  130, y: 12,  scale: 0.94, z: 3 },
    { rot:  15, x:  240, y: 30,  scale: 0.90, z: 2 },
    { rot:  22, x:  360, y: 56,  scale: 0.86, z: 1 },
  ];

  return (
    <section className="results-section">
      <div className="results-head">
        <span className="eyebrow"><span className="dot" /> CLIENT RESULTS</span>
        <h2 className="results-title" style={{ marginTop: 20 }}>
          Over 381 clients scaled.<br/><span className="it">See the proof.</span>
        </h2>
        <p className="results-sub">A Few Businesses Currently Working With Us.</p>
      </div>

      {/* Mobile carousel */}
      <div className="rmf-wrap">
        <CardCarousel cards={cards} cardPhotos={cardPhotos} />
      </div>

      {/* Desktop fan */}
      <div className="results-fan">
        <div className="results-fan-inner">
          {cards.map((c, i) => {
            const t = transforms[i];
            const isCenter = i === 3;
            return (
              <div
                key={i}
                className={"results-card" + (isCenter ? " is-center" : "")}
                style={{
                  transform: `translate(-50%, -50%) translate(${t.x}px, ${t.y}px) rotate(${t.rot}deg) scale(${t.scale})`,
                  zIndex: t.z,
                }}
              >
                <div className="results-card-photo" style={{ backgroundImage: `url(${cardPhotos[i].src})`, backgroundSize: 'cover', backgroundPosition: cardPhotos[i].pos }}>
                  <div className="results-card-placeholder" />
                  <div className="results-card-overlay" />
                  <div className="results-card-meta">
                    <div className="results-card-tag">{c.tag}</div>
                    <div className="results-card-name">{c.name}</div>
                    <div className="results-card-stat">
                      <span className="m">{c.metric}</span>
                      <span className="l">{c.label}</span>
                    </div>
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </div>

      <div className="results-foot">
        <div className="results-foot-line">Real Businesses. Real Receipts.</div>
        <div className="results-foot-cta">
          <a href="proof.html" className="results-foot-link">SEE CASE STUDIES →</a>
        </div>
        <div style={{ marginTop: 32, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 10 }}>
          <a href="book.html" className="btn btn-violet" style={{ fontSize: 16, padding: '14px 32px' }}>
            Book my free audit →
          </a>
          <span style={{ fontSize: 13, color: 'var(--fg-3)', letterSpacing: '0.04em' }}>3× ROAS in 90 days — or we work free</span>
        </div>
      </div>
    </section>
  );
}

window.Results = Results;