// ServicesGrid + MidCTA + Pricing

const allServices = [
  { icon: '🎬', title: 'Sunday Reels', desc: 'Weekly sermon clips formatted for Instagram, TikTok & YouTube Shorts.' },
  { icon: '📱', title: 'Social Media Management', desc: '6–12 custom posts/week with graphics, captions, and scheduling.' },
  { icon: '📺', title: 'Live Streaming Production', desc: 'Multi-camera streaming with remote mixing and platform management.' },
  { icon: '✂️', title: 'Video Editing & Production', desc: 'Polished sermon edits, testimonies, and event recaps — 72hr turnaround.' },
  { icon: '🎨', title: 'Graphic Design', desc: 'Unlimited custom graphics for series, events, bulletins, and slides.' },
  { icon: '✝️', title: 'Worship Production Content', desc: 'Branded lyric videos, countdowns, and sermon bumpers for your service.' },
  { icon: '🌐', title: 'Branding & Website', desc: 'Logo, visual identity, and website built for a growing congregation.' },
  { icon: '📊', title: 'Communications Strategy', desc: 'Google Ads, SEO audits, and quarterly outreach strategy plans.' },
  { icon: '🎙️', title: 'Podcast & Audio Production', desc: 'Sermon podcast editing, noise reduction, and platform publishing.' },
  { icon: '🎉', title: 'Event & Conference Media', desc: 'Full media support for conferences, VBS, and large-scale outreach.' },
  { icon: '👥', title: 'Youth & Children\'s Media', desc: 'Sunday school videos, youth social campaigns, and kids\' lesson content.' },
  { icon: '📧', title: 'Digital Communications', desc: 'Weekly email newsletters, SMS blasts, and church app updates.' },
  { icon: '🎓', title: 'Volunteer Training', desc: 'Workshops and coaching for your in-house audio, video, and lighting team.' },
  { icon: '📅', title: 'Content Calendar Management', desc: 'Planned, branded content for the entire year — holidays, series, events.' },
  { icon: '🤖', title: 'AI Content & Automation', desc: 'AI-drafted captions, email sequences, chatbots, and automated scheduling workflows.' },
  { icon: '📷', title: 'Photography & Media Library', desc: 'On-site event photography, portraits, and organized digital asset library for your team.' },
  { icon: '🖥️', title: 'Digital Signage & Messaging', desc: 'Scheduled on-campus screen content — announcements, hymn lyrics, and event displays.' },
];

const ServicesGrid = () => (
  <section style={{ background: 'var(--cream)', padding: '80px 48px' }}>
    <div className="container">
      <div className="fade-up" style={{ marginBottom: 56, display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 40, alignItems: 'end' }}>
        <div>
          <div className="overline" style={{ color: 'var(--brass)', marginBottom: 16 }}>All Services</div>
          <h2 className="display" style={{ fontSize: 'clamp(30px, 3vw, 44px)', color: 'var(--espresso)' }}>
            Everything your<br /><em style={{ fontStyle: 'italic' }}>church needs.</em>
          </h2>
        </div>
        <p style={{ fontFamily: 'DM Sans, sans-serif', fontSize: 16, lineHeight: 1.7, color: 'var(--text-muted)', maxWidth: 480, alignSelf: 'end' }}>
          15 services, one partner. Mix and match — or let us build the right package for your church size and goals.
        </p>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 1, background: 'var(--border)', border: '1px solid var(--border)', borderRadius: 16, overflow: 'hidden' }}>
        {allServices.map(({ icon, title, desc }) => (
          <ServiceItem key={title} icon={icon} title={title} desc={desc} />
        ))}
        {/* Last cell fill if odd */}
        {allServices.length % 2 !== 0 && <div style={{ background: 'var(--cream)' }} />}
      </div>
    </div>
  </section>
);

const ServiceItem = ({ icon, title, desc }) => {
  const [hov, setHov] = React.useState(false);
  return (
    <div
      onMouseEnter={() => setHov(true)}
      onMouseLeave={() => setHov(false)}
      style={{
        background: hov ? 'var(--cream-dark)' : 'var(--cream)',
        padding: '28px 32px',
        display: 'flex', alignItems: 'flex-start', gap: 18,
        transition: 'background 0.2s',
        cursor: 'default',
      }}
    >
      <span style={{ fontSize: 20, flexShrink: 0, marginTop: 1 }}>{icon}</span>
      <div>
        <div style={{ fontFamily: 'DM Sans, sans-serif', fontSize: 15, fontWeight: 600, color: 'var(--espresso)', marginBottom: 4 }}>{title}</div>
        <div style={{ fontFamily: 'DM Sans, sans-serif', fontSize: 13, lineHeight: 1.6, color: 'var(--text-muted)' }}>{desc}</div>
      </div>
    </div>
  );
};

const MidCTA = () => (
  <section style={{ background: 'var(--espresso)', padding: '80px 48px' }}>
    <div className="container">
      <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: 64, alignItems: 'center' }}>
        <div>
          <div className="overline" style={{ color: 'var(--brass)', marginBottom: 20 }}>Get Started Today</div>
          <h2 className="display" style={{ fontSize: 'clamp(28px, 3vw, 44px)', color: 'var(--cream)', marginBottom: 20 }}>
            Your first Reel could be live<br />
            <em style={{ fontStyle: 'italic', color: 'var(--brass)' }}>this Sunday.</em>
          </h2>
          <p style={{ fontFamily: 'DM Sans, sans-serif', fontSize: 16, color: 'rgba(244,237,226,0.6)', lineHeight: 1.7 }}>
            Start with Sunday Reels Basic at $200/mo — no long-term contract, cancel any time. Most churches see measurable social growth within the first 30 days.
          </p>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          <a href="#contact" className="btn btn-rust" style={{ textAlign: 'center', fontSize: 13 }}>Book a Free Call</a>
          <a href="#pricing" className="btn" style={{
            textAlign: 'center', fontSize: 13, fontFamily: 'DM Sans, sans-serif', fontWeight: 600,
            letterSpacing: '0.05em', textTransform: 'uppercase', padding: '14px 32px', borderRadius: 6,
            background: 'transparent', color: 'rgba(244,237,226,0.55)', border: '1px solid rgba(244,237,226,0.15)',
            cursor: 'pointer', textDecoration: 'none', transition: 'all 0.25s',
          }}
          onMouseEnter={e => { e.currentTarget.style.borderColor = 'rgba(244,237,226,0.35)'; e.currentTarget.style.color = 'var(--cream)'; }}
          onMouseLeave={e => { e.currentTarget.style.borderColor = 'rgba(244,237,226,0.15)'; e.currentTarget.style.color = 'rgba(244,237,226,0.55)'; }}>
            View All Pricing
          </a>
          {/* Star rating */}
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, justifyContent: 'center', paddingTop: 8 }}>
            <div style={{ display: 'flex', gap: 2 }}>
              {[1,2,3,4,5].map(s => <span key={s} style={{ color: 'var(--brass)', fontSize: 14 }}>★</span>)}
            </div>
            <span style={{ fontFamily: 'DM Sans, sans-serif', fontSize: 12, color: 'rgba(244,237,226,0.45)' }}>4.9/5 from church leaders</span>
          </div>
        </div>
      </div>
    </div>
  </section>
);

const pricingTiers = [
  {
    name: 'Sunday Reels Basic',
    price: '$200',
    period: '/mo',
    annual: '$180/mo billed annually',
    tag: null,
    desc: 'Perfect for small to mid-size churches getting started with short-form video.',
    features: [
      'One edited Reel per week (30–60s)',
      'Subtitles included',
      'Licensed music',
      'Instagram & TikTok formatted',
      'Delivered by Saturday night',
      'Unlimited revisions',
    ],
    cta: 'Get Started',
    featured: false,
  },
  {
    name: 'Sunday Reels Enhanced',
    price: '$350',
    period: '/mo',
    annual: '$300/mo billed annually',
    tag: 'Most Popular',
    desc: 'Higher polish with motion graphics and branded intro/outro for mid-size churches.',
    features: [
      'Everything in Basic',
      'Branded intro + outro',
      'Motion graphics & lower-thirds',
      'Animated titles & transitions',
      'Up to 2 music tracks/week',
      'Multi-language captioning add-on',
    ],
    cta: 'Get Started',
    featured: true,
  },
  {
    name: 'Social Accelerator',
    price: '$500',
    period: '/mo',
    annual: '+$100/mo per extra platform',
    tag: 'Full Service',
    desc: 'Everything in Enhanced plus social posting strategy and performance reporting.',
    features: [
      'Everything in Enhanced',
      'Weekly social media calendar',
      'Auto-posting to 2 platforms',
      'Monthly performance report',
      'Facebook/Instagram ad add-on',
      'Weekly "Stories" clips add-on',
    ],
    cta: 'Get Started',
    featured: false,
  },
];

const Pricing = () => (
  <section id="pricing" style={{ background: 'var(--cream)', padding: '100px 48px' }}>
    <div className="container">
      <div className="fade-up" style={{ textAlign: 'center', marginBottom: 64 }}>
        <div className="overline" style={{ color: 'var(--brass)', marginBottom: 16 }}>Pricing</div>
        <h2 className="display" style={{ fontSize: 'clamp(32px, 3.5vw, 52px)', color: 'var(--espresso)', marginBottom: 20 }}>
          Start with Sunday Reels.
        </h2>
        <p style={{ fontFamily: 'DM Sans, sans-serif', fontSize: 16, color: 'var(--text-muted)', maxWidth: 520, margin: '0 auto' }}>
          Three tiers for different church sizes and goals. No long-term contracts. Cancel any time.
        </p>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
        {pricingTiers.map(tier => <PricingCard key={tier.name} {...tier} />)}
      </div>

      {/* Bundles */}
      <div className="fade-up" style={{ marginTop: 80, paddingTop: 64, borderTop: '1px solid var(--border)' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 56, alignItems: 'start' }}>
          <div>
            <div className="overline" style={{ color: 'var(--brass)', marginBottom: 16 }}>Service Bundles</div>
            <h3 className="display" style={{ fontSize: 'clamp(24px, 2.5vw, 36px)', color: 'var(--espresso)', marginBottom: 16 }}>
              Need more than Reels?
            </h3>
            <p style={{ fontFamily: 'DM Sans, sans-serif', fontSize: 15, lineHeight: 1.7, color: 'var(--text-muted)' }}>
              Custom packages built around your church's specific needs. Book a free call and we'll build a proposal in 24 hours.
            </p>
            <a href="#contact" className="btn btn-outline" style={{ marginTop: 24, display: 'inline-block', fontSize: 12 }}>Get a Custom Quote</a>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
            {[
              { name: 'Creative Impact Pack', desc: 'Video Editing + Graphic Design + Reels', from: 'From $750/mo' },
              { name: 'Livestream Starter Kit', desc: 'Streaming Setup + Volunteer Training + Graphics', from: 'From $900/mo' },
              { name: 'Engagement Suite', desc: 'AI Automation + Strategy + Training', from: 'From $1,200/mo' },
              { name: 'Mission Media Max', desc: 'Unlimited All-Channel Content + Consulting', from: 'From $2,500/mo' },
            ].map(({ name, desc, from }) => (
              <div key={name} style={{
                background: 'var(--white)', border: '1px solid var(--border)', borderRadius: 12, padding: '20px 22px',
              }}>
                <div style={{ fontFamily: 'DM Sans, sans-serif', fontSize: 13, fontWeight: 600, color: 'var(--espresso)', marginBottom: 4 }}>{name}</div>
                <div style={{ fontFamily: 'DM Sans, sans-serif', fontSize: 12, color: 'var(--text-muted)', lineHeight: 1.5, marginBottom: 10 }}>{desc}</div>
                <div className="overline" style={{ color: 'var(--brass)', fontSize: 10 }}>{from}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  </section>
);

const PricingCard = ({ name, price, period, annual, tag, desc, features, cta, featured }) => {
  const [hov, setHov] = React.useState(false);
  return (
    <div
      onMouseEnter={() => setHov(true)}
      onMouseLeave={() => setHov(false)}
      style={{
        background: featured ? 'var(--espresso)' : 'var(--white)',
        border: featured ? '1px solid rgba(168,124,61,0.3)' : '1px solid var(--border)',
        borderRadius: 20, padding: '36px 32px',
        position: 'relative', overflow: 'hidden',
        transform: hov ? 'translateY(-4px)' : featured ? 'translateY(-8px)' : 'translateY(0)',
        boxShadow: hov || featured ? '0 20px 48px rgba(45,36,26,0.14)' : '0 2px 8px rgba(45,36,26,0.05)',
        transition: 'all 0.3s cubic-bezier(0.16,1,0.3,1)',
      }}
    >
      {tag && (
        <div style={{
          position: 'absolute', top: 20, right: 20,
          background: 'var(--brass)', color: 'var(--cream)',
          fontFamily: 'DM Sans, sans-serif', fontSize: 10, fontWeight: 600,
          letterSpacing: '0.08em', textTransform: 'uppercase',
          padding: '4px 10px', borderRadius: 20,
        }}>{tag}</div>
      )}
      <div className="overline" style={{ color: featured ? 'var(--brass)' : 'var(--text-lighter)', marginBottom: 16, fontSize: 10 }}>{name}</div>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 4, marginBottom: 8 }}>
        <span className="display" style={{ fontSize: 44, color: featured ? 'var(--cream)' : 'var(--espresso)' }}>{price}</span>
        <span style={{ fontFamily: 'DM Sans, sans-serif', fontSize: 16, color: featured ? 'rgba(244,237,226,0.5)' : 'var(--text-lighter)' }}>{period}</span>
      </div>
      <div style={{ fontFamily: 'DM Sans, sans-serif', fontSize: 11, color: featured ? 'rgba(244,237,226,0.4)' : 'var(--text-lighter)', marginBottom: 20 }}>{annual}</div>
      <div style={{ height: 1, background: featured ? 'rgba(244,237,226,0.1)' : 'var(--border)', marginBottom: 20 }} />
      <p style={{ fontFamily: 'DM Sans, sans-serif', fontSize: 13, lineHeight: 1.6, color: featured ? 'rgba(244,237,226,0.6)' : 'var(--text-muted)', marginBottom: 24 }}>{desc}</p>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginBottom: 32 }}>
        {features.map(f => (
          <div key={f} style={{ display: 'flex', gap: 10, alignItems: 'flex-start' }}>
            <span style={{ color: 'var(--brass)', fontSize: 13, flexShrink: 0 }}>✓</span>
            <span style={{ fontFamily: 'DM Sans, sans-serif', fontSize: 13, color: featured ? 'rgba(244,237,226,0.8)' : 'var(--text)', lineHeight: 1.4 }}>{f}</span>
          </div>
        ))}
      </div>
      <a href="#contact" style={{
        display: 'block', textAlign: 'center',
        fontFamily: 'DM Sans, sans-serif', fontSize: 12, fontWeight: 600,
        letterSpacing: '0.06em', textTransform: 'uppercase',
        padding: '13px 24px', borderRadius: 6, textDecoration: 'none',
        background: featured ? 'var(--rust)' : 'transparent',
        color: featured ? 'var(--cream)' : 'var(--espresso)',
        border: featured ? 'none' : '1.5px solid var(--border-dark)',
        transition: 'all 0.2s',
      }}
      onMouseEnter={e => {
        if (featured) { e.currentTarget.style.background = 'var(--rust-dark)'; }
        else { e.currentTarget.style.borderColor = 'var(--brass)'; e.currentTarget.style.color = 'var(--brass)'; }
      }}
      onMouseLeave={e => {
        if (featured) { e.currentTarget.style.background = 'var(--rust)'; }
        else { e.currentTarget.style.borderColor = 'var(--border-dark)'; e.currentTarget.style.color = 'var(--espresso)'; }
      }}>
        {cta}
      </a>
    </div>
  );
};