// Services — reorganized: 3 Pillars (hero cards) + 3 How We Work (support)
function Services() {
  const pillars = [
    {
      num: '01', title: 'Marketing',
      desc: 'Fill your pipeline with high-intent leads. Our system helps agency owners create content, run ads, and build a brand that converts — without the guesswork.',
      points: ['Content Systems', 'Paid Acquisition', 'Positioning & Offers'],
    },
    {
      num: '02', title: 'Sales', featured: true,
      desc: 'Close 5-figure retainers without feeling salesy. We coach you on frameworks that turn strangers into long-term clients in a single call.',
      points: ['Discovery Call Scripts', 'Retainer Pricing', 'Objection Handling'],
    },
    {
      num: '03', title: 'Fulfillment',
      desc: 'Deliver consistently without burning out. Build systems, hire right, and stop being the bottleneck in your own business.',
      points: ['Team Building', 'Client Delivery', 'SOPs & Systems'],
    },
  ];
  const formats = [
    { icon: '◉', title: 'Hybrid Service', desc: "We're not a course, Done-With-You, or Done-For-You — we\u2019re the hybrid. We hold your hand and walk you through every step of the process." },
    { icon: '◈', title: 'Group & 1-on-1', desc: 'Both group cohorts and private mentorship based on your business and where you are right now.' },
    { icon: '◆', title: 'Advisory', desc: 'We treat your business like our own. Not just a coach — your trusted advisor across every decision.' },
    { icon: '▣', title: 'Online Training', desc: 'A comprehensive library of up-to-date training on marketing, sales, operations, and everything between.' },
    { icon: '▤', title: 'Marketing & Sales', desc: 'Our bread and butter. No more hiring an "agency" that knows nothing about the realities of your business.' },
    { icon: '✦', title: 'Community', desc: 'Surrounded by like-minded video business owners actively scaling. You are the average of the 5 people you surround yourself with.' },
  ];

  return (
    <>
      {/* THE 3 PILLARS */}
      <section data-mf="section" id="core-values" style={{
        position: 'relative',
        background: `
          linear-gradient(180deg, #0A0608 0%, #15070B 50%, #0A0608 100%)
        `,
        padding: '120px 44px',
        borderTop: '1px solid rgba(255,255,255,0.06)',
      }}>
        <div style={{ maxWidth: 1280, margin: '0 auto' }}>
          <div style={{ textAlign: 'center', marginBottom: 64 }}>
            <div style={{ display: 'inline-block' }}>
              <Eyebrow tone="red">The 3 Pillars</Eyebrow>
            </div>
            <h2 style={{
              fontFamily: 'Poppins', fontWeight: 800,
              fontSize: 'clamp(40px, 5vw, 72px)',
              lineHeight: 1.0, letterSpacing: '-0.025em',
              margin: '22px auto 16px', color: '#fff', maxWidth: 900,
            }}>
              Every scaling agency masters the <span style={{ color: '#E8123C' }}>same 3 things</span>.
            </h2>
            <p style={{
              fontSize: 18, lineHeight: 1.55, color: 'rgba(255,255,255,0.68)',
              maxWidth: 640, margin: '0 auto',
            }}>
              Marketing, Sales, and Fulfillment. Skip one and your growth stalls. Master all three and your agency compounds.
            </p>
          </div>

          <div data-mf="pillars-grid" style={{
            display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 22,
          }}>
            {pillars.map(p => (
              <div key={p.title} data-mf="pillar-card" style={{
                position: 'relative',
                background: p.featured ? '#E8123C' : '#1C0810',
                border: p.featured ? '1px solid rgba(255,255,255,0.15)' : '1px solid rgba(255,255,255,0.08)',
                borderRadius: 28, padding: 36,
                minHeight: 400,
                display: 'flex', flexDirection: 'column',
                boxShadow: p.featured ? '0 20px 60px rgba(232,18,60,0.35)' : 'none',
                transition: 'transform 300ms cubic-bezier(0.22, 1, 0.36, 1)',
              }}
              onMouseEnter={e => e.currentTarget.style.transform = 'translateY(-4px)'}
              onMouseLeave={e => e.currentTarget.style.transform = 'translateY(0)'}
              >
                <div style={{
                  fontFamily: 'Poppins', fontWeight: 800, fontSize: 13,
                  color: p.featured ? 'rgba(255,255,255,0.75)' : '#E8123C',
                  letterSpacing: '0.12em', marginBottom: 18,
                }}>PILLAR {p.num}</div>
                <h3 data-mf="pillar-title" style={{
                  fontFamily: 'Poppins', fontWeight: 800, fontSize: 44,
                  letterSpacing: '-0.02em', lineHeight: 1, margin: '0 0 20px',
                  color: '#fff',
                }}>{p.title}</h3>
                <p style={{
                  fontSize: 15, lineHeight: 1.55,
                  color: p.featured ? 'rgba(255,255,255,0.92)' : 'rgba(255,255,255,0.68)',
                  margin: '0 0 26px',
                }}>{p.desc}</p>
                <div style={{
                  display: 'flex', flexDirection: 'column', gap: 10,
                  paddingTop: 20, marginTop: 'auto',
                  borderTop: p.featured ? '1px solid rgba(255,255,255,0.2)' : '1px solid rgba(255,255,255,0.08)',
                }}>
                  {p.points.map(pt => (
                    <div key={pt} style={{
                      display: 'flex', alignItems: 'center', gap: 10,
                      fontSize: 13, fontWeight: 600,
                      color: p.featured ? '#fff' : 'rgba(255,255,255,0.82)',
                    }}>
                      <span style={{
                        width: 16, height: 16, borderRadius: '50%',
                        background: p.featured ? 'rgba(255,255,255,0.25)' : 'rgba(232,18,60,0.15)',
                        color: p.featured ? '#fff' : '#E8123C',
                        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                        fontSize: 10, fontWeight: 800,
                      }}>✓</span>
                      {pt}
                    </div>
                  ))}
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* HOW WE WORK — 3 services */}
      <section data-mf="section" style={{
        background: '#0A0608',
        padding: '110px 44px 130px',
      }}>
        <div style={{ maxWidth: 1280, margin: '0 auto' }}>
          <div data-mf="formats-head" style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: 54, gap: 40, flexWrap: 'wrap' }}>
            <div>
              <SectionMark num="02" tone="red">How We Work</SectionMark>
              <h2 style={{
                fontFamily: 'Poppins', fontWeight: 800,
                fontSize: 'clamp(36px, 4.2vw, 60px)',
                lineHeight: 1.02, letterSpacing: '-0.02em',
                margin: '20px 0 0', color: '#fff', maxWidth: 740,
              }}>
                A hybrid system built for agency owners who are serious about scaling.
              </h2>
            </div>
            <div style={{ maxWidth: 360, color: 'rgba(255,255,255,0.62)', fontSize: 15, lineHeight: 1.55 }}>
              Six integrated services. One proven playbook. Zero fluff.
            </div>
          </div>

          <div data-mf="formats-grid" style={{
            display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 1,
            background: 'rgba(255,255,255,0.08)',
            borderRadius: 28, overflow: 'hidden',
            border: '1px solid rgba(255,255,255,0.08)',
          }}>
            {formats.map((f, i) => (
              <div key={f.title} data-mf="format-card" style={{
                background: '#120609',
                padding: '40px 32px 32px',
                display: 'flex', flexDirection: 'column',
                minHeight: 260,
                transition: 'background 220ms',
                position: 'relative',
              }}
              onMouseEnter={e => e.currentTarget.style.background = '#1C0810'}
              onMouseLeave={e => e.currentTarget.style.background = '#120609'}
              >
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 22 }}>
                  <div style={{
                    width: 48, height: 48, borderRadius: 14,
                    background: 'rgba(232,18,60,0.12)',
                    border: '1px solid rgba(232,18,60,0.35)',
                    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                    color: '#E8123C', fontSize: 22,
                  }}>{f.icon}</div>
                  <div style={{ color: 'rgba(255,255,255,0.22)', fontSize: 12, fontWeight: 700, letterSpacing: '0.1em' }}>
                    0{i+1}
                  </div>
                </div>
                <h3 style={{
                  fontFamily: 'Poppins', fontWeight: 800, fontSize: 22,
                  letterSpacing: '-0.01em', margin: '0 0 12px', color: '#fff',
                }}>{f.title}</h3>
                <p style={{
                  fontSize: 14, lineHeight: 1.6, color: 'rgba(255,255,255,0.62)', margin: 0,
                }}>{f.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>
    </>
  );
}
window.Services = Services;