// 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: 'They Deliver',
      quote: "Great actionable information that delivered exactly what was promised. It's clear they know their stuff, and their guidance is practical, well thought out, and easy to implement. They're responsive, helpful, and genuinely invested in your success. If you're looking to build solid systems and grow your business quickly without unnecessary fluff, they provide a ton of real value.",
      name: 'Stan Cannata', country: 'US', reviewCount: '1 review', date: 'Jan 3, 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 service 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',
    },
    // ── Deeran Films client testimonials (from deeranfilms.com) ──────────
    {
      title: 'Seamless from start to finish',
      quote: "We thoroughly enjoyed working with Eric and his team on our culture video! The process from start to finish was seamless, and the end result was exactly what we hoped for!",
      name: 'Mark Harrington', country: 'Epic', reviewCount: 'Culture film', source: 'Client Review',
    },
    {
      title: 'Delivered ahead of schedule',
      quote: "Eric and his team filmed and edited a new employee video for our club and did a phenomenal job! He was willing to work around our crazy schedules to get the best footage possible. He delivered ahead of schedule and was great to use as marketing for future team members.",
      name: 'Sarah Winstead', country: 'AAC', reviewCount: 'Employee video', source: 'Client Review',
    },
  ];

  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: '#0A0C0E',
      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 Reviews &amp; Client Words</Eyebrow></div>
          <h2 style={{
            fontFamily: 'Archivo', 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: '#0784BE' }}>service business 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,12,14,0.78)', border: '1px solid rgba(255,255,255,0.14)',
              color: '#fff', cursor: 'pointer',
              fontSize: 22, fontFamily: 'Archivo',
              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,12,14,0.78)', border: '1px solid rgba(255,255,255,0.14)',
              color: '#fff', cursor: 'pointer',
              fontSize: 22, fontFamily: 'Archivo',
              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: '#15191D', border: '1px solid rgba(255,255,255,0.08)',
                borderRadius: 12, padding: 30,
                display: 'flex', flexDirection: 'column', gap: 18,
              }}>
                {/* Trustpilot 5-star row */}
                <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                  {/* Trustpilot's green star mark ONLY on real Trustpilot reviews.
                      Client quotes (q.source set) carry no rating — the source page doesn't rate them. */}
                  {!q.source && (
                    <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' }}>
                    {q.source || 'Trustpilot'}
                  </span>
                </div>

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

                {/* Review body */}
                <div style={{
                  fontFamily: 'Archivo', 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, #0784BE 0%, #033A55 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].filter(Boolean).join(' · ')}
                    </div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>

        <div data-mf="footer-disclaimer" style={{
          marginTop: 48, maxWidth: 860, marginLeft: 'auto', marginRight: 'auto',
          padding: '18px 22px', borderRadius: 12,
          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: '#0784BE',
      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: 'Archivo', fontWeight: 800,
            fontSize: 'clamp(40px, 5vw, 72px)',
            lineHeight: 1.0, letterSpacing: '-0.025em',
            margin: '18px 0 16px', color: '#fff',
          }}>
            45 minutes.<br/>Your next client.
          </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 inbound client system and whether it's a fit for your service business. 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: '#0A0C0E', color: '#fff', border: 'none', borderRadius: 999,
            padding: '22px 40px', fontFamily: 'Archivo', 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: '#0784BE',
              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 828+ 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: '#0A0C0E', 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: 12,
          marginBottom: 44,
        }}>
          <div style={{
            fontFamily: 'Archivo', fontWeight: 300, fontSize: 13,
            letterSpacing: '0.34em', color: '#0784BE', 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',
        }}>
          <Wordmark height={44}/>

          {/* Social icons */}
          <SocialRow/>

          <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;

// Social media icon row — Instagram, Facebook, LinkedIn, YouTube.
// SVG paths from Simple Icons (CC0). Inline so no extra dependencies.
function SocialRow() {
  const socials = [
    {
      name: 'Instagram',
      href: 'https://www.instagram.com/masterfilmmakerofficial/',
      d: 'M12 0C8.74 0 8.333.015 7.053.072 5.775.132 4.905.333 4.14.63c-.789.306-1.459.717-2.126 1.384S.935 3.35.63 4.14C.333 4.905.131 5.775.072 7.053.012 8.333 0 8.74 0 12s.015 3.667.072 4.947c.06 1.277.261 2.148.558 2.913.306.788.717 1.459 1.384 2.126.667.666 1.336 1.079 2.126 1.384.766.296 1.636.499 2.913.558C8.333 23.988 8.74 24 12 24s3.667-.015 4.947-.072c1.277-.06 2.148-.262 2.913-.558.788-.306 1.459-.718 2.126-1.384.666-.667 1.079-1.335 1.384-2.126.296-.765.499-1.636.558-2.913.06-1.28.072-1.687.072-4.947s-.015-3.667-.072-4.947c-.06-1.277-.262-2.149-.558-2.913-.306-.789-.718-1.459-1.384-2.126C21.319 1.347 20.651.935 19.86.63c-.765-.297-1.636-.499-2.913-.558C15.667.012 15.26 0 12 0zm0 2.16c3.203 0 3.585.016 4.85.071 1.17.055 1.805.249 2.227.415.562.217.96.477 1.382.896.419.42.679.819.896 1.381.164.422.36 1.057.413 2.227.057 1.266.07 1.646.07 4.85s-.015 3.585-.074 4.85c-.061 1.17-.256 1.805-.421 2.227-.224.562-.479.96-.899 1.382-.419.419-.824.679-1.38.896-.42.164-1.065.36-2.235.413-1.274.057-1.649.07-4.859.07-3.211 0-3.586-.015-4.859-.074-1.171-.061-1.816-.256-2.236-.421-.569-.224-.96-.479-1.379-.899-.421-.419-.69-.824-.9-1.38-.165-.42-.359-1.065-.42-2.235-.045-1.26-.061-1.649-.061-4.844 0-3.196.016-3.586.061-4.861.061-1.17.255-1.814.42-2.234.21-.57.479-.96.9-1.381.419-.419.81-.689 1.379-.898.42-.166 1.051-.361 2.221-.421 1.275-.045 1.65-.06 4.859-.06l.045.03zm0 3.678c-3.405 0-6.162 2.76-6.162 6.162 0 3.405 2.76 6.162 6.162 6.162 3.405 0 6.162-2.76 6.162-6.162 0-3.405-2.76-6.162-6.162-6.162zM12 16c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4zm7.846-10.405c0 .795-.646 1.44-1.44 1.44-.795 0-1.44-.646-1.44-1.44 0-.794.646-1.439 1.44-1.439.793-.001 1.44.645 1.44 1.439z',
    },
    {
      name: 'Facebook',
      href: 'https://www.facebook.com/masterfilmmakerofficial/',
      d: 'M9.101 23.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085 1.848-5.978 5.858-5.978.401 0 .955.042 1.468.103a8.68 8.68 0 0 1 1.141.195v3.325a8.623 8.623 0 0 0-.653-.036 26.805 26.805 0 0 0-.733-.009c-.707 0-1.259.096-1.675.309a1.686 1.686 0 0 0-.679.622c-.258.42-.374.995-.374 1.752v1.297h3.919l-.386 2.103-.287 1.564h-3.246v8.245C19.396 23.238 24 18.179 24 12.044c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.628 3.874 10.35 9.101 11.647Z',
    },
    {
      name: 'LinkedIn',
      href: 'https://www.linkedin.com/company/master-filmmaker',
      d: 'M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 0 1-2.063-2.065 2.063 2.063 0 1 1 2.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z',
    },
    {
      name: 'YouTube',
      href: 'https://www.youtube.com/channel/UCjc1mFF6rGTGheqw7j9-FvA',
      d: 'M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z',
    },
  ];
  return (
    <div data-mf="social-row" style={{ display: 'flex', gap: 14, alignItems: 'center', justifyContent: 'center' }}>
      {socials.map(s => (
        <a
          key={s.name}
          href={s.href}
          aria-label={s.name}
          target="_blank"
          rel="noopener noreferrer"
          style={{
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
            width: 40, height: 40, borderRadius: '50%',
            background: 'rgba(255,255,255,0.04)',
            border: '1px solid rgba(255,255,255,0.10)',
            color: 'rgba(255,255,255,0.7)',
            transition: 'all 220ms cubic-bezier(0.2, 0.6, 0.2, 1)',
          }}
          onMouseEnter={e => {
            e.currentTarget.style.background = 'rgba(7,132,190,0.12)';
            e.currentTarget.style.borderColor = 'rgba(7,132,190,0.5)';
            e.currentTarget.style.color = '#fff';
            e.currentTarget.style.transform = 'translateY(-2px)';
          }}
          onMouseLeave={e => {
            e.currentTarget.style.background = 'rgba(255,255,255,0.04)';
            e.currentTarget.style.borderColor = 'rgba(255,255,255,0.10)';
            e.currentTarget.style.color = 'rgba(255,255,255,0.7)';
            e.currentTarget.style.transform = 'translateY(0)';
          }}
        >
          <svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor" aria-hidden="true">
            <path d={s.d}/>
          </svg>
        </a>
      ))}
    </div>
  );
}
window.SocialRow = SocialRow;