// TrustBar + Process (Transformation) + Benefits

const TrustBar = () => {
  const churches = ['Trinity Church', 'Harvest Fellowship', 'Grace Community', 'Cornerstone', 'The Table', 'River City Church', 'Anthem Nashville'];
  return (
    <section style={{ background: 'var(--cream-dark)', borderTop: '1px solid var(--border)', borderBottom: '1px solid var(--border)', padding: '20px 48px', overflow: 'hidden' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto', display: 'flex', alignItems: 'center', gap: 40 }}>
        <span className="overline" style={{ color: 'var(--text-lighter)', fontSize: 10, flexShrink: 0 }}>Trusted by</span>
        <div style={{ display: 'flex', gap: 36, overflow: 'hidden', maskImage: 'linear-gradient(to right, transparent, black 8%, black 92%, transparent)' }}>
          {[...churches, ...churches].map((name, i) => (
            <span key={i} style={{
              fontFamily: 'DM Sans, sans-serif', fontSize: 13, fontWeight: 500,
              color: 'var(--text-lighter)', whiteSpace: 'nowrap', letterSpacing: '-0.01em',
            }}>{name}</span>
          ))}
        </div>
      </div>
    </section>
  );
};

const Process = () => {
  const steps = [
    { num: '01', title: 'We Audit Your Media', body: 'Free 30-minute call to understand your goals, church size, current media setup, and what's not working.' },
    { num: '02', title: 'We Build Your Strategy', body: 'A custom content calendar, service plan, and creative brief — ready to execute from day one.' },
    { num: '03', title: 'We Create & Deliver', body: 'Your Reels, graphics, and content land in your inbox every week. You review, approve, and post.' },
  ];

  return (
    <section id="process" className="section" style={{ background: 'var(--cream)' }}>
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '5fr 7fr', gap: 80, alignItems: 'start' }}>
          {/* Left label */}
          <div className="fade-up">
            <div className="overline" style={{ color: 'var(--brass)', marginBottom: 20 }}>How It Works</div>
            <h2 className="display" style={{ fontSize: 'clamp(32px, 3.5vw, 48px)', color: 'var(--espresso)', marginBottom: 24 }}>
              From chaos to<br /><em style={{ fontStyle: 'italic' }}>clarity in 3 steps.</em>
            </h2>
            <p style={{ fontFamily: 'DM Sans, sans-serif', fontSize: 16, lineHeight: 1.7, color: 'var(--text-muted)', maxWidth: 340 }}>
              Most churches waste 15+ volunteer hours a week on media that underperforms. Here's how we change that.
            </p>
          </div>

          {/* Right steps */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 0 }}>
            {steps.map(({ num, title, body }, i) => (
              <div key={num} className="fade-up" style={{
                display: 'grid', gridTemplateColumns: '64px 1fr', gap: 28,
                padding: '32px 0',
                borderTop: '1px solid var(--border)',
                animationDelay: `${i * 0.1}s`,
              }}>
                <div className="display" style={{ fontSize: 40, color: 'var(--border-dark)', letterSpacing: '-0.04em', paddingTop: 4 }}>{num}</div>
                <div>
                  <div style={{ fontFamily: 'DM Sans, sans-serif', fontSize: 16, fontWeight: 600, color: 'var(--espresso)', marginBottom: 8 }}>{title}</div>
                  <div style={{ fontFamily: 'DM Sans, sans-serif', fontSize: 15, lineHeight: 1.65, color: 'var(--text-muted)' }}>{body}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

const Benefits = () => {
  const benefits = [
    {
      label: 'Sunday Reels',
      headline: 'Sermon clips that actually get watched.',
      body: 'Short-form video built for the algorithm — not an afterthought. We edit, caption, and format every week so your message reaches people who haven't found your church yet.',
      outcomes: ['Weekly 30–60s Reel, every Sunday', 'Licensed music + subtitles included', 'Optimized for Instagram, TikTok & Reels', 'Delivered by Saturday night'],
      dark: false,
    },
    {
      label: 'Social Media Management',
      headline: 'Consistent content, zero volunteer burnout.',
      body: 'From 6 posts a week to fully managed community engagement — we create graphics, captions, and schedules your team never has to think about.',
      outcomes: ['Custom-designed graphics every week', 'Captions written in your church\'s voice', 'Cross-platform scheduling included', 'Monthly performance reports'],
      dark: true,
    },
    {
      label: 'Live Streaming Production',
      headline: 'Your service, streamed like it deserves.',
      body: 'Multi-camera setups, remote mixing, platform management across YouTube, Facebook Live, and Church Online. We handle the tech so your team can worship.',
      outcomes: ['Multi-camera live production', 'YouTube + Facebook Live + Church Online', 'Remote mixing available', 'Real-time captioning add-on'],
      dark: false,
    },
    {
      label: 'Video Editing & Production',
      headline: 'Sermons, testimonies, and stories — polished.',
      body: 'From raw footage to a finished video with scripture overlays, key point callouts, and branded transitions — delivered within 72 hours.',
      outcomes: ['Sermon edits with overlays & callouts', 'Testimony & community story videos', 'Unlimited clips under 5 min/mo', 'Quick 72-hour turnaround'],
      dark: true,
    },
  ];

  return (
    <div id="services">
      {benefits.map(({ label, headline, body, outcomes, dark }, i) => (
        <BenefitRow key={label} label={label} headline={headline} body={body} outcomes={outcomes} dark={dark} flip={i % 2 !== 0} />
      ))}
    </div>
  );
};

const NonprofitSection = () => {
  const benefits = [
    {
      icon: '🎥',
      title: 'Impact Reels',
      desc: 'Weekly 30–60s campaign and story highlights — formatted for Instagram, TikTok, and YouTube Shorts. Built to drive donations, volunteers, and awareness.',
    },
    {
      icon: '🤝',
      title: 'Donor Engagement Video',
      desc: 'Testimonials, impact stories, and giving-campaign videos that emotionally connect your donors to the mission and move them to act.',
    },
    {
      icon: '📣',
      title: 'Fundraising & Advocacy Campaigns',
      desc: 'Social ads, email sequences, and landing pages built around Giving Tuesday, annual appeals, and volunteer recruitment drives.',
    },
    {
      icon: '📊',
      title: 'Communications Strategy',
      desc: 'Quarterly outreach plans, Google Grant setup, analytics reporting, and AI-assisted content — tailored to nonprofit budgets and timelines.',
    },
  ];

  return (
    <section style={{ background: 'var(--cream)', padding: '100px 48px', borderTop: '1px solid var(--border)' }}>
      <div className="container">
        {/* Header */}
        <div className="fade-up" style={{ display: 'grid', gridTemplateColumns: '5fr 7fr', gap: 80, alignItems: 'end', marginBottom: 72 }}>
          <div>
            <div className="overline" style={{ color: 'var(--brass)', marginBottom: 20 }}>Also Serving Nonprofits</div>
            <h2 className="display" style={{ fontSize: 'clamp(30px, 3vw, 46px)', color: 'var(--espresso)' }}>
              Built for Ministry.<br />
              <em style={{ fontStyle: 'italic' }}>Ready for Mission.</em>
            </h2>
          </div>
          <div style={{ paddingBottom: 6 }}>
            <p style={{ fontFamily: 'DM Sans, sans-serif', fontSize: 16, lineHeight: 1.7, color: 'var(--text-muted)', maxWidth: 480, marginBottom: 28 }}>
              We serve nonprofits with the same strategy-first approach — replacing "Sunday Reels" with "Impact Reels" and shifting the focus to donor engagement, fundraising campaigns, and volunteer mobilization.
            </p>
            <a href="#contact" className="btn btn-outline" style={{ fontSize: 12 }}>Talk to Us About Your Nonprofit</a>
          </div>
        </div>

        {/* 2-col grid (not 3) */}
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20 }}>
          {benefits.map(({ icon, title, desc }, i) => (
            <NonprofitCard key={title} icon={icon} title={title} desc={desc} dark={i === 1 || i === 2} />
          ))}
        </div>

        {/* Bottom note */}
        <div className="fade-up" style={{
          marginTop: 48, padding: '28px 32px',
          background: 'var(--cream-dark)', border: '1px solid var(--border)', borderRadius: 12,
          display: 'flex', alignItems: 'center', gap: 24,
        }}>
          <div style={{ width: 40, height: 40, borderRadius: '50%', background: 'var(--espresso)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
            <span style={{ color: 'var(--brass)', fontSize: 16 }}>★</span>
          </div>
          <p style={{ fontFamily: 'DM Sans, sans-serif', fontSize: 14, lineHeight: 1.6, color: 'var(--text-muted)' }}>
            <strong style={{ color: 'var(--text)', fontWeight: 600 }}>Note on pricing:</strong> We offer sliding-scale rates and grant-friendly billing structures for qualifying nonprofits. Book a free call and we'll build a proposal that fits your budget.
          </p>
        </div>
      </div>
    </section>
  );
};

const NonprofitCard = ({ icon, title, desc, dark }) => {
  const [hov, setHov] = React.useState(false);
  return (
    <div
      onMouseEnter={() => setHov(true)}
      onMouseLeave={() => setHov(false)}
      style={{
        background: dark ? 'var(--espresso)' : 'var(--white)',
        border: dark ? '1px solid rgba(168,124,61,0.2)' : '1px solid var(--border)',
        borderRadius: 16, padding: '36px',
        transform: hov ? 'translateY(-3px)' : 'translateY(0)',
        boxShadow: hov ? '0 16px 40px rgba(45,36,26,0.1)' : 'none',
        transition: 'all 0.3s cubic-bezier(0.16,1,0.3,1)',
      }}
    >
      <div style={{ fontSize: 28, marginBottom: 16 }}>{icon}</div>
      <div style={{ fontFamily: 'DM Sans, sans-serif', fontSize: 16, fontWeight: 600, color: dark ? 'var(--cream)' : 'var(--espresso)', marginBottom: 10 }}>{title}</div>
      <div style={{ fontFamily: 'DM Sans, sans-serif', fontSize: 14, lineHeight: 1.65, color: dark ? 'rgba(244,237,226,0.6)' : 'var(--text-muted)' }}>{desc}</div>
    </div>
  );
};

const BenefitRow = ({ label, headline, body, outcomes, dark, flip }) => {
  const bg = dark ? 'var(--espresso)' : 'var(--cream)';
  const headColor = dark ? 'var(--cream)' : 'var(--espresso)';
  const bodyColor = dark ? 'rgba(244,237,226,0.6)' : 'var(--text-muted)';
  const checkColor = dark ? 'var(--brass)' : 'var(--rust)';
  const outcomeColor = dark ? 'rgba(244,237,226,0.85)' : 'var(--text)';
  const borderColor = dark ? 'rgba(244,237,226,0.1)' : 'var(--border)';

  const visual = (
    <div style={{
      background: dark ? 'rgba(255,255,255,0.04)' : 'var(--cream-dark)',
      border: `1px solid ${borderColor}`,
      borderRadius: 20, height: 340,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      position: 'relative', overflow: 'hidden',
    }}>
      {/* Geometric accent */}
      <div style={{
        position: 'absolute', top: -40, right: -40,
        width: 160, height: 160, borderRadius: '50%',
        background: dark ? 'rgba(168,124,61,0.08)' : 'rgba(168,124,61,0.06)',
        border: `1px solid ${dark ? 'rgba(168,124,61,0.2)' : 'rgba(168,124,61,0.15)'}`,
      }} />
      <div style={{ textAlign: 'center' }}>
        <div className="overline" style={{ fontSize: 10, color: dark ? 'rgba(244,237,226,0.3)' : 'var(--text-lighter)', marginBottom: 12 }}>{label}</div>
        <div className="display" style={{ fontSize: 64, color: dark ? 'rgba(244,237,226,0.07)' : 'rgba(45,36,26,0.07)', lineHeight: 1 }}>M³</div>
      </div>
    </div>
  );

  const content = (
    <div>
      <div className="overline" style={{ color: 'var(--brass)', marginBottom: 18 }}>{label}</div>
      <h3 className="display" style={{ fontSize: 'clamp(26px, 2.8vw, 38px)', color: headColor, marginBottom: 20 }}>{headline}</h3>
      <p style={{ fontFamily: 'DM Sans, sans-serif', fontSize: 16, lineHeight: 1.7, color: bodyColor, marginBottom: 28 }}>{body}</p>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
        {outcomes.map(o => (
          <div key={o} style={{ display: 'flex', alignItems: 'flex-start', gap: 12 }}>
            <span style={{ color: checkColor, fontSize: 14, marginTop: 2, flexShrink: 0 }}>✓</span>
            <span style={{ fontFamily: 'DM Sans, sans-serif', fontSize: 14, color: outcomeColor, lineHeight: 1.5 }}>{o}</span>
          </div>
        ))}
      </div>
    </div>
  );

  return (
    <section style={{ background: bg, padding: '80px 48px' }}>
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'center' }}>
          {flip ? <>{visual}{content}</> : <>{content}{visual}</>}
        </div>
      </div>
    </section>
  );
};