// Testimonials disclaimer + final CTA + Footer
// Real Trustpilot reviews — https://www.trustpilot.com/review/masterfilmmaker.com
// Append new 5-star reviews to the `quotes` array below; the slider handles any count.
function Testimonials() {
  const quotes = [
    {
      title: 'Excellent course with strong community support',
      quote: "I'm still relatively new to the Master Filmmaker program, but I've been genuinely impressed from the start. The amount of content included is substantial, with a huge range of lessons, resources, and real-world insights that make it clear a lot of thought has gone into building the course. What has stood out most to me so far is the support and openness of the team — they're generous with their knowledge, transparent about their own experiences, and clearly invested in helping members succeed.",
      name: 'Jonathan Galbraith', country: 'CA', reviewCount: '1 review', date: 'Apr 16, 2026',
    },
    {
      title: 'Make a promise, keep a promise',
      quote: "One thing I can appreciate in a coaching program is to make a promise and keep a promise. They've delivered on everything they've promised and I'm grateful. They have an easily laid out program to follow and helpful coaching along with it. Would recommend to anyone expanding their video business.",
      name: 'Dannel Daley', country: 'US', reviewCount: '2 reviews', date: 'Mar 3, 2026',
    },
    {
      title: "Join the program, there's no way you'll regret it",
      quote: "MF are simply the best. The level of knowledge developed over who even knows how many years is unparalleled. Let's just say they truly understand the sales process on a very deep level. And the program they've developed over time is phenomenal as well. You will be led step by step through a curriculum that is designed for ease of use so you can learn the sales process as well.",
      name: 'Dave Barger', country: 'US', reviewCount: '1 review', date: 'Jan 28, 2026',
    },
  ];

  const trackRef = React.useRef(null);
  const [canPrev, setCanPrev] = React.useState(false);
  const [canNext, setCanNext] = React.useState(true);

  const updateNavState = React.useCallback(() => {
    const t = trackRef.current;
    if (!t) return;
    setCanPrev(t.scrollLeft > 4);
    setCanNext(t.scrollLeft + t.clientWidth < t.scrollWidth - 4);
  }, []);

  React.useEffect(() => {
    updateNavState();
    const t = trackRef.current;
    if (!t) return;
    t.addEventListener('scroll', updateNavState, { passive: true });
    window.addEventListener('resize', updateNavState);
    return () => {
      t.removeEventListener('scroll', updateNavState);
      window.removeEventListener('resize', updateNavState);
    };
  }, [updateNavState]);

  const scrollByCards = (dir) => {
    const t = trackRef.current;
    if (!t) return;
    const card = t.querySelector('[data-testimonial-card]');
    const gap = 20;
    const delta = ((card ? card.offsetWidth : 380) + gap) * dir;
    t.scrollBy({ left: delta, behavior: 'smooth' });
    setTimeout(updateNavState, 450);
  };
  return (
    <section data-mf="testimonials" style={{
      background: '#0A0608',
      padding: '110px 44px',
      borderTop: '1px solid rgba(255,255,255,0.06)',
    }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 56 }}>
          <div style={{ display: 'inline-block' }}><Eyebrow tone="red">Verified Trustpilot Reviews</Eyebrow></div>
          <h2 style={{
            fontFamily: 'Poppins', fontWeight: 800,
            fontSize: 'clamp(36px, 4.4vw, 60px)',
            lineHeight: 1.0, letterSpacing: '-0.02em',
            margin: '20px auto 14px', color: '#fff', maxWidth: 820,
          }}>
            Straight from the <span style={{ color: '#E8123C' }}>owners</span> building with us.
          </h2>
          {/* Trustpilot-style rating summary */}
          <a
            href="https://www.trustpilot.com/review/masterfilmmaker.com"
            target="_blank"
            rel="noopener noreferrer"
            style={{
              display: 'inline-flex', alignItems: 'center', gap: 12,
              marginTop: 8, padding: '10px 18px',
              borderRadius: 999,
              background: 'rgba(255,255,255,0.04)',
              border: '1px solid rgba(255,255,255,0.1)',
              textDecoration: 'none', color: '#fff',
            }}
          >
            <div style={{ display: 'flex', gap: 3 }}>
              {[0,1,2,3,4].map(i => (
                <span key={i} style={{
                  width: 22, height: 22, background: '#00B67A',
                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                  color: '#fff', fontSize: 13, borderRadius: 2,
                }}>★</span>
              ))}
            </div>
            <span style={{ fontSize: 13, fontWeight: 600, letterSpacing: '0.02em', color: 'rgba(255,255,255,0.85)' }}>
              Excellent on <b style={{ color: '#fff' }}>Trustpilot</b>
            </span>
          </a>
        </div>
        <div data-mf="testimonials-slider" style={{ position: 'relative' }}>
          <button
            type="button"
            aria-label="Previous review"
            onClick={() => scrollByCards(-1)}
            data-mf="slider-arrow"
            style={{
              position: 'absolute', left: -8, top: '50%', transform: 'translateY(-50%)',
              zIndex: 2, width: 48, height: 48, borderRadius: '50%',
              background: 'rgba(10,6,8,0.78)', border: '1px solid rgba(255,255,255,0.14)',
              color: '#fff', cursor: 'pointer',
              fontSize: 22, fontFamily: 'Poppins',
              display: canPrev ? 'flex' : 'none',
              alignItems: 'center', justifyContent: 'center',
              backdropFilter: 'blur(10px)', WebkitBackdropFilter: 'blur(10px)',
            }}
          >‹</button>
          <button
            type="button"
            aria-label="Next review"
            onClick={() => scrollByCards(1)}
            data-mf="slider-arrow"
            style={{
              position: 'absolute', right: -8, top: '50%', transform: 'translateY(-50%)',
              zIndex: 2, width: 48, height: 48, borderRadius: '50%',
              background: 'rgba(10,6,8,0.78)', border: '1px solid rgba(255,255,255,0.14)',
              color: '#fff', cursor: 'pointer',
              fontSize: 22, fontFamily: 'Poppins',
              display: canNext ? 'flex' : 'none',
              alignItems: 'center', justifyContent: 'center',
              backdropFilter: 'blur(10px)', WebkitBackdropFilter: 'blur(10px)',
            }}
          >›</button>

          <div
            ref={trackRef}
            data-mf="testimonials-track"
            style={{
              display: 'flex', gap: 20,
              overflowX: 'auto', overflowY: 'hidden',
              scrollSnapType: 'x proximity', scrollBehavior: 'smooth',
              paddingBottom: 6, WebkitOverflowScrolling: 'touch',
            }}
          >
            {quotes.map((q, i) => (
              <div key={i} data-testimonial-card style={{
                flex: '0 0 min(380px, 85vw)', scrollSnapAlign: 'start',
                background: '#1C0810', border: '1px solid rgba(255,255,255,0.08)',
                borderRadius: 22, padding: 30,
                display: 'flex', flexDirection: 'column', gap: 18,
              }}>
                {/* Trustpilot 5-star row */}
                <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                  <div style={{ display: 'flex', gap: 2 }}>
                    {[0,1,2,3,4].map(s => (
                      <span key={s} style={{
                        width: 20, height: 20, background: '#00B67A',
                        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                        color: '#fff', fontSize: 12, borderRadius: 2,
                      }}>★</span>
                    ))}
                  </div>
                  <span style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.08em', color: 'rgba(255,255,255,0.45)', textTransform: 'uppercase' }}>
                    Trustpilot
                  </span>
                </div>

                {/* Review title */}
                <div style={{
                  fontFamily: 'Poppins', fontWeight: 800, fontSize: 20, lineHeight: 1.25,
                  color: '#fff', letterSpacing: '-0.01em',
                }}>{q.title}</div>

                {/* Review body */}
                <div style={{
                  fontFamily: 'Poppins', fontWeight: 400, fontSize: 14, lineHeight: 1.6,
                  color: 'rgba(255,255,255,0.72)',
                }}>{q.quote}</div>

                {/* Reviewer footer */}
                <div style={{ marginTop: 'auto', display: 'flex', alignItems: 'center', gap: 12,
                  paddingTop: 18, borderTop: '1px solid rgba(255,255,255,0.08)' }}>
                  <div style={{
                    width: 40, height: 40, borderRadius: '50%',
                    background: 'linear-gradient(135deg, #E8123C 0%, #5A0A24 100%)',
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    fontSize: 14, fontWeight: 800, color: '#fff',
                  }}>{q.name.split(' ').map(s=>s[0]).join('').slice(0,2)}</div>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontSize: 14, fontWeight: 700, color: '#fff' }}>{q.name}</div>
                    <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.5)', letterSpacing: '0.02em' }}>
                      {q.country} · {q.reviewCount} · {q.date}
                    </div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>

        <div style={{ textAlign: 'center', marginTop: 32 }}>
          <a
            href="https://www.trustpilot.com/review/masterfilmmaker.com"
            target="_blank"
            rel="noopener noreferrer"
            style={{
              fontSize: 13, fontWeight: 600, color: 'rgba(255,255,255,0.6)',
              textDecoration: 'none', letterSpacing: '0.02em',
              borderBottom: '1px solid rgba(255,255,255,0.2)', paddingBottom: 2,
            }}
          >Read all reviews on Trustpilot →</a>
        </div>

        <div data-mf="footer-disclaimer" style={{
          marginTop: 48, maxWidth: 860, marginLeft: 'auto', marginRight: 'auto',
          padding: '18px 22px', borderRadius: 14,
          background: 'rgba(255,255,255,0.03)',
          border: '1px solid rgba(255,255,255,0.08)',
          fontSize: 12, color: 'rgba(255,255,255,0.55)', lineHeight: 1.55, textAlign: 'center',
        }}>
          <b style={{ color: '#fff' }}>Earnings &amp; Results Disclaimer.</b> All testimonials on this page are from real clients.
          Results depicted are not typical and are not guaranteed. Success depends on individual effort, dedication, skills, and market conditions.
          Examples illustrate what some clients have achieved; your own results may vary.
        </div>
      </div>
    </section>
  );
}
window.Testimonials = Testimonials;

function FinalCTA({ onCTA }) {
  return (
    <section data-mf="final-cta" style={{
      position: 'relative',
      background: '#E8123C',
      padding: '100px 44px',
      overflow: 'hidden',
    }}>
      <div style={{
        position: 'absolute', inset: 0,
        background: 'radial-gradient(ellipse 60% 80% at 20% 100%, rgba(0,0,0,0.3) 0%, transparent 60%)',
      }}/>
      <div data-mf="final-cta-grid" style={{
        position: 'relative', maxWidth: 1100, margin: '0 auto',
        display: 'grid', gridTemplateColumns: '2fr 1fr', gap: 40, alignItems: 'center',
      }}>
        <div>
          <div style={{
            display: 'inline-block', padding: '6px 14px',
            background: 'rgba(0,0,0,0.25)', border: '1px solid rgba(255,255,255,0.3)',
            borderRadius: 999, fontSize: 11, fontWeight: 700, letterSpacing: '0.16em',
            color: '#fff',
          }}>READY TO SCALE?</div>
          <h2 style={{
            fontFamily: 'Poppins', fontWeight: 800,
            fontSize: 'clamp(40px, 5vw, 72px)',
            lineHeight: 1.0, letterSpacing: '-0.025em',
            margin: '18px 0 16px', color: '#fff',
          }}>
            45 minutes.<br/>Your next retainer.
          </h2>
          <p style={{ fontSize: 17, lineHeight: 1.5, color: 'rgba(255,255,255,0.92)', margin: 0, maxWidth: 520 }}>
            Book a demo. We'll show you the system and whether it's a fit. No pressure, no pitch.
          </p>
        </div>
        <div data-mf="final-cta-right" style={{ display: 'flex', flexDirection: 'column', gap: 14, alignItems: 'flex-end' }}>
          <button onClick={onCTA} style={{
            background: '#0A0608', color: '#fff', border: 'none', borderRadius: 999,
            padding: '22px 40px', fontFamily: 'Poppins', fontWeight: 700, fontSize: 16,
            display: 'inline-flex', alignItems: 'center', gap: 12,
            cursor: 'pointer', boxShadow: '0 10px 30px rgba(0,0,0,0.3)',
          }}>
            Schedule Demo
            <span style={{
              width: 22, height: 22, borderRadius: '50%', background: '#E8123C',
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              fontSize: 12,
            }}>→</span>
          </button>
          <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.85)', fontWeight: 500 }}>
            Rated ★ 4.85/5 by 804+ clients
          </div>
        </div>
      </div>
    </section>
  );
}
window.FinalCTA = FinalCTA;

function Footer() {
  const linkStyle = {
    color: 'rgba(255,255,255,0.65)', textDecoration: 'none', fontSize: 13, fontWeight: 500,
  };
  return (
    <footer data-mf="footer" style={{
      background: '#0A0608', borderTop: '1px solid rgba(255,255,255,0.08)',
      padding: '72px 44px 40px',
    }}>
      <div style={{ maxWidth: 1100, margin: '0 auto' }}>

        {/* DISCLAIMER BLOCK */}
        <div style={{
          padding: '36px 40px',
          background: 'rgba(255,255,255,0.02)',
          border: '1px solid rgba(255,255,255,0.08)',
          borderRadius: 18,
          marginBottom: 44,
        }}>
          <div style={{
            fontFamily: 'Poppins', fontWeight: 800, fontSize: 13,
            letterSpacing: '0.18em', color: '#E8123C', marginBottom: 16,
          }}>DISCLAIMER</div>

          <div style={{
            display: 'flex', flexDirection: 'column', gap: 14,
            fontSize: 13.5, lineHeight: 1.65, color: 'rgba(255,255,255,0.72)',
          }}>
            <p style={{ margin: 0 }}>
              We don't believe in get-rich-quick schemes — and you shouldn't either.
            </p>
            <p style={{ margin: 0 }}>
              We believe in doing the work, solving real problems, and serving others. Our programs are built to help you do that.
            </p>
            <p style={{ margin: 0 }}>
              As with any business, your results are dependent on your own effort, consistency, and execution.
              We never guarantee earnings — and you should know that all results shown are from people who put in the work.
            </p>
            <p style={{ margin: 0 }}>
              Everything we share is for educational and informational purposes only. Nothing on this page, in our programs, or on our calls is legal, financial, or tax advice.
            </p>
          </div>
        </div>

        {/* META ROW */}
        <div style={{
          paddingTop: 28, borderTop: '1px solid rgba(255,255,255,0.08)',
          display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 14,
          textAlign: 'center',
        }}>
          <div style={{ fontSize: 12.5, color: 'rgba(255,255,255,0.55)', lineHeight: 1.6 }}>
            © 2026 Deeran Films LLC d/b/a Master Filmmaker — All Rights Reserved
          </div>
          <div style={{
            fontSize: 11.5, color: 'rgba(255,255,255,0.42)', lineHeight: 1.6,
            maxWidth: 780,
          }}>
            This site is NOT a part of the Facebook website or Facebook Inc.
            Additionally, this site is NOT endorsed by Facebook in any way.
            FACEBOOK is a trademark of FACEBOOK, Inc.
          </div>
          <div style={{ display: 'flex', gap: 10, alignItems: 'center', flexWrap: 'wrap', justifyContent: 'center', marginTop: 4 }}>
            <a href="https://www.masterfilmmaker.com/terms-of-service" target="_blank" rel="noopener noreferrer" style={linkStyle}>Privacy Policy</a>
            <span style={{ color: 'rgba(255,255,255,0.2)' }}>|</span>
            <a href="https://www.masterfilmmaker.com/termsofuse" target="_blank" rel="noopener noreferrer" style={linkStyle}>Terms Of Service</a>
            <span style={{ color: 'rgba(255,255,255,0.2)' }}>|</span>
            <a href="https://www.masterfilmmaker.com/ftc-disclosure" target="_blank" rel="noopener noreferrer" style={linkStyle}>FTC Disclosure</a>
          </div>
          <a href="#" onClick={(e) => e.preventDefault()} style={{
            ...linkStyle, fontSize: 12, marginTop: 4,
          }}>Do Not Sell or Share My Personal Information</a>
        </div>
      </div>
    </footer>
  );
}
window.Footer = Footer;
