// TAO Design System — Services & Content Sections
// ui_kits/tao-website/Services.jsx

const SERVICES = [
  {
    id: 'association',
    title: 'Association Management',
    eyebrow: 'Year-Round',
    description: 'Comprehensive management for membership organizations — from governance support and membership administration to financials and communications.',
    features: ['Membership administration', 'Board & governance support', 'Financial management', 'Communications & newsletters'],
    price: 'From $275/month',
    page: 'services',
  },
  {
    id: 'conference',
    title: 'Conference Management',
    eyebrow: 'End-to-End',
    description: 'Full-service conference planning and execution — from venue sourcing and speaker management to on-site coordination and post-event reporting.',
    features: ['Venue sourcing & logistics', 'Speaker management', 'Registration management', 'On-site coordination'],
    price: 'Custom pricing',
    page: 'services',
  },
  {
    id: 'events',
    title: 'Tradeshow & Event Management',
    eyebrow: 'Local to International',
    description: 'Seamless event management for tradeshows, galas, and special events — at any scale, anywhere in the world.',
    features: ['Tradeshow logistics', 'Gala & awards planning', 'Vendor coordination', 'Budget management'],
    price: 'Custom pricing',
    page: 'services',
  },
];

function ServiceCard({ service, onNavigate }) {
  const [hov, setHov] = React.useState(false);
  return (
    <div
      onMouseEnter={() => setHov(true)}
      onMouseLeave={() => setHov(false)}
      style={{
        background: 'white', borderRadius: 4, padding: '32px 28px',
        border: `1px solid ${hov ? TAO_COLORS.forest : TAO_COLORS.border}`,
        boxShadow: hov ? '0 6px 20px rgba(26,60,52,0.12)' : '0 2px 12px rgba(26,60,52,0.06)',
        transform: hov ? 'translateY(-3px)' : 'none',
        transition: 'all 200ms ease-out', display: 'flex', flexDirection: 'column',
      }}
    >
      <div style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 10, fontWeight: 600, letterSpacing: '0.14em', textTransform: 'uppercase', color: TAO_COLORS.olive, marginBottom: 10 }}>{service.eyebrow}</div>
      <h3 style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 20, fontWeight: 300, color: TAO_COLORS.primary, marginBottom: 12, lineHeight: 1.2, letterSpacing: '-0.01em' }}>{service.title}</h3>
      <p style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 14, color: TAO_COLORS.textSecondary, lineHeight: 1.7, marginBottom: 20 }}>{service.description}</p>
      <ul style={{ listStyle: 'none', padding: 0, margin: '0 0 24px', flex: 1 }}>
        {service.features.map(f => (
          <li key={f} style={{ display: 'flex', alignItems: 'center', gap: 8, fontFamily: "'DM Sans', sans-serif", fontSize: 13, color: TAO_COLORS.textPrimary, padding: '5px 0', borderBottom: `1px solid ${TAO_COLORS.border}` }}>
            <Icon name="check" size={14} color={TAO_COLORS.accent} strokeWidth={2.5} />
            {f}
          </li>
        ))}
      </ul>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <span style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 13, fontWeight: 600, color: TAO_COLORS.forest }}>{service.price}</span>
        <Btn size="sm" variant="ghost" onClick={() => onNavigate(service.page)}>Learn More <Icon name="arrow" size={14} /></Btn>
      </div>
    </div>
  );
}

function ServicesSection({ onNavigate }) {
  return (
    <section style={{ background: TAO_COLORS.sageTint, padding: '96px 32px' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 56 }}>
          <div style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 11, fontWeight: 600, letterSpacing: '0.14em', textTransform: 'uppercase', color: TAO_COLORS.olive, marginBottom: 12 }}>Our Services</div>
          <h2 style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 40, fontWeight: 200, color: TAO_COLORS.primary, letterSpacing: '-0.03em', marginBottom: 16 }}>Everything your association needs</h2>
          <p style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 16, color: TAO_COLORS.textSecondary, maxWidth: 520, margin: '0 auto', lineHeight: 1.7 }}>We handle the operations so you can focus on your members and mission.</p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
          {SERVICES.map(s => <ServiceCard key={s.id} service={s} onNavigate={onNavigate} />)}
        </div>
      </div>
    </section>
  );
}

function WhyTAOSection() {
  const points = [
    { icon: 'clock', title: 'Save Time', body: 'Free up your board by delegating day-to-day operations to our experienced team.' },
    { icon: 'briefcase', title: 'Experience & Expertise', body: 'Decades of proven expertise managing associations of all sizes and sectors.' },
    { icon: 'users', title: 'Member-First Approach', body: 'We treat your members as our own clients — providing a professional, seamless experience.' },
    { icon: 'globe', title: 'Local to Global', body: 'Vancouver-based team managing organizations with local, national, and international reach.' },
  ];
  return (
    <section style={{ background: TAO_COLORS.bgWarm, padding: '96px 32px' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'center' }}>
          <div>
            <div style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 11, fontWeight: 600, letterSpacing: '0.14em', textTransform: 'uppercase', color: TAO_COLORS.olive, marginBottom: 12 }}>Why TAO</div>
            <h2 style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 38, fontWeight: 200, color: TAO_COLORS.primary, letterSpacing: '-0.03em', marginBottom: 20, lineHeight: 1.15 }}>A partner you can rely on.</h2>
            <p style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 15, color: TAO_COLORS.textSecondary, lineHeight: 1.8, marginBottom: 32 }}>
              Running an organization smoothly is a juggling act. That's where we step in. Offering comprehensive association and event management services, and year-over-year continuity. So while your Board may change, we won't.
            </p>
            <blockquote style={{ borderLeft: `3px solid ${TAO_COLORS.accent}`, paddingLeft: 20, marginBottom: 32 }}>
              <p style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 18, fontStyle: 'italic', fontWeight: 300, color: TAO_COLORS.primary, lineHeight: 1.5, maxWidth: '100%' }}>
                "Your success is our number one priority."
              </p>
            </blockquote>
            <Btn>Get in Touch <Icon name="arrow" size={16} /></Btn>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
            {points.map(p => (
              <div key={p.icon} style={{ background: TAO_COLORS.sageTint, borderRadius: 0, padding: '24px 20px', border: `1px solid ${TAO_COLORS.border}` }}>
                <div style={{ width: 36, height: 36, background: 'rgba(26,60,52,0.12)', borderRadius: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 12 }}>
                  <Icon name={p.icon} size={18} color={TAO_COLORS.forest} />
                </div>
                <div style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 14, fontWeight: 600, color: TAO_COLORS.textPrimary, marginBottom: 6 }}>{p.title}</div>
                <div style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 13, color: TAO_COLORS.textSecondary, lineHeight: 1.6 }}>{p.body}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function TestimonialsSection() {
  const testimonials = [
    { quote: "TAO has been instrumental in managing our annual conference. Their attention to detail and professionalism is unmatched.", name: "Sarah Chen", role: "Executive Director, BC Dental Association" },
    { quote: "Our membership has grown 30% since partnering with TAO. They handle everything — we just focus on our mission.", name: "Marcus Webb", role: "President, Pacific Northwest Engineering Society" },
    { quote: "The team at TAO treats our members like their own. We've never had a smoother gala event in 15 years.", name: "Priya Sharma", role: "Chair, Vancouver Non-Profit Network" },
  ];
  return (
    <section style={{ background: TAO_COLORS.deepForest, padding: '96px 32px' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 56 }}>
          <div style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 11, fontWeight: 600, letterSpacing: '0.14em', textTransform: 'uppercase', color: TAO_COLORS.sage, marginBottom: 12 }}>Client Stories</div>
          <h2 style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 38, fontWeight: 200, color: 'white', letterSpacing: '-0.03em' }}>Trusted by organizations across Canada</h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
          {testimonials.map((t, i) => (
            <div key={i} style={{ background: 'rgba(255,255,255,0.05)', borderRadius: 0, padding: '32px 28px', border: '1px solid rgba(255,255,255,0.1)' }}>
              <div style={{ display: 'flex', gap: 2, marginBottom: 20 }}>
                {[1,2,3,4,5].map(s => <Icon key={s} name="star" size={14} color={TAO_COLORS.sage} />)}
              </div>
              <p style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 15, fontStyle: 'italic', fontWeight: 300, color: 'rgba(255,255,255,0.7)', lineHeight: 1.7, marginBottom: 24 }}>"{t.quote}"</p>
              <div style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 13, fontWeight: 600, color: 'white' }}>{t.name}</div>
              <div style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 12, color: TAO_COLORS.muted, marginTop: 2 }}>{t.role}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function CTASection({ onNavigate }) {
  return (
    <section style={{ background: TAO_COLORS.sageTint, padding: '80px 32px', borderTop: `1px solid ${TAO_COLORS.border}` }}>
      <div style={{ maxWidth: 700, margin: '0 auto', textAlign: 'center' }}>
        <h2 style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 40, fontWeight: 200, color: TAO_COLORS.primary, letterSpacing: '-0.03em', marginBottom: 16 }}>Ready to elevate your association?</h2>
        <p style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 16, color: TAO_COLORS.textSecondary, lineHeight: 1.7, marginBottom: 36 }}>Let's talk about your organization's needs. We'll put together a tailored management solution that works for your team and your budget.</p>
        <div style={{ display: 'flex', gap: 16, justifyContent: 'center', flexWrap: 'wrap' }}>
          <Btn size="lg" onClick={() => onNavigate('contact')}>Book a Consultation <Icon name="arrow" size={18} /></Btn>
          <Btn size="lg" variant="secondary" onClick={() => onNavigate('services')}>View Services</Btn>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { ServicesSection, WhyTAOSection, TestimonialsSection, CTASection, SERVICES });