// Terra Group — Services Component
// Exports: Services

const Services = () => {
  const services = [
    {
      icon: (
        <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#154270" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
          <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
          <polyline points="9 22 9 12 15 12 15 22"/>
          <path d="M12 2v4M8 10h8"/>
        </svg>
      ),
      title: 'Property Maintenance',
      desc: 'From utility bill management to full property upkeep — we handle every detail so you don\'t have to.',
      tag: 'Full-service care',
    },
    {
      icon: (
        <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#154270" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
          <path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/>
        </svg>
      ),
      title: 'Property Renovation',
      desc: 'Big or small, we transform properties with quality craftsmanship, reliable partners, and on-time delivery.',
      tag: 'Renovations',
    },
    {
      icon: (
        <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#154270" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
          <polygon points="3 22 21 22 21 8 12 2 3 8"/>
          <line x1="9" y1="22" x2="9" y2="12"/><line x1="15" y1="22" x2="15" y2="12"/>
          <rect x="9" y="12" width="6" height="10"/>
        </svg>
      ),
      title: 'New Projects',
      desc: 'We design and build new residential and commercial buildings from the ground up, to modern specifications.',
      tag: 'New Construction',
    },
    {
      icon: (
        <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#154270" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
          <path d="M20 7H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2z"/>
          <path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/>
        </svg>
      ),
      title: 'Broking Services',
      desc: 'Expert real estate brokerage for buying and selling property in Evia — with deep local market knowledge.',
      tag: 'Real Estate',
    },
  ];

  const [hovered, setHovered] = React.useState(null);

  const s = {
    section: { background: '#f8fafc', padding: '96px 32px', id: 'services' },
    inner: { maxWidth: 1200, margin: '0 auto' },
    eyebrow: {
      fontFamily: "'Inter', sans-serif", fontSize: 11, fontWeight: 700,
      letterSpacing: '0.2em', textTransform: 'uppercase', color: '#87C8E8',
      marginBottom: 12, display: 'flex', alignItems: 'center', gap: 8,
    },
    line: { width: 28, height: 1, background: '#87C8E8', display: 'inline-block' },
    h2: {
      fontFamily: "'Playfair Display', serif", fontSize: 'clamp(28px, 4vw, 42px)',
      fontWeight: 700, color: '#0F1923', marginBottom: 16, lineHeight: 1.15,
    },
    lead: {
      fontFamily: "'Inter', sans-serif", fontSize: 17, color: '#4A5568',
      lineHeight: 1.65, maxWidth: 560, marginBottom: 56,
    },
    grid: { display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))', gap: 24 },
    card: (i) => ({
      background: 'white', borderRadius: 8,
      border: hovered === i ? '1px solid #87C8E8' : '1px solid #D1D5DB',
      padding: 28, cursor: 'default',
      boxShadow: hovered === i ? '0 4px 24px rgba(21,66,112,0.14)' : '0 2px 8px rgba(21,66,112,0.06)',
      transition: 'all 0.2s ease', transform: hovered === i ? 'translateY(-3px)' : 'none',
    }),
    iconWrap: {
      width: 52, height: 52, background: '#EBF2F8',
      borderRadius: 10, display: 'flex', alignItems: 'center', justifyContent: 'center',
      marginBottom: 18,
    },
    cardTag: {
      fontFamily: "'Inter', sans-serif", fontSize: 10, fontWeight: 700,
      letterSpacing: '0.14em', textTransform: 'uppercase', color: '#87C8E8',
      marginBottom: 6,
    },
    cardTitle: {
      fontFamily: "'Playfair Display', serif", fontSize: 19, fontWeight: 600,
      color: '#0F1923', marginBottom: 10, lineHeight: 1.3,
    },
    cardDesc: {
      fontFamily: "'Inter', sans-serif", fontSize: 14, color: '#4A5568', lineHeight: 1.65,
    },
  };

  return (
    <section style={s.section} id="services">
      <div style={s.inner}>
        <div style={s.eyebrow}><span style={s.line}></span>What We Offer</div>
        <h2 style={s.h2}>Complete Property<br/>Services</h2>
        <p style={s.lead}>From day-to-day management to ground-up construction — we're with you at every step.</p>
        <div style={s.grid}>
          {services.map((svc, i) => (
            <div key={i} style={s.card(i)}
              onMouseEnter={() => setHovered(i)}
              onMouseLeave={() => setHovered(null)}>
              <div style={s.iconWrap}>{svc.icon}</div>
              <div style={s.cardTag}>{svc.tag}</div>
              <div style={s.cardTitle}>{svc.title}</div>
              <div style={s.cardDesc}>{svc.desc}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { Services });