const { CtaStrip, SectionHead, FeatureCard, Eyebrow, CheckList, ArrowLink, PhotoFrame } = window.PixelmindsDesignSystem_c25e6a;

function ServiceTile({ title, items, image, variant, go }) {
  const [h, setH] = React.useState(false);
  if (!image) return <FeatureCard title={title} items={items} variant={variant} />;
  return (
    <div onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
      style={{ display: 'flex', flexDirection: 'column', overflow: 'hidden', background: 'var(--surface-card)', border: '1px solid ' + (h ? 'var(--purple-primary)' : 'var(--border-subtle)'), borderRadius: 'var(--radius-md)', transform: h ? 'translateY(-5px)' : 'none', boxShadow: h ? 'var(--glow-purple-soft)' : 'none', transition: 'transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease)' }}>
      <div style={{ overflow: 'hidden', height: 116 }}>
        <PhotoFrame src={image} alt="" height="100%" scale={h ? 1.04 : 1} />
      </div>
      <div style={{ padding: '18px 18px 20px', display: 'flex', flexDirection: 'column', gap: 12, flex: 1 }}>
        <h3 style={{ fontSize: 17.5 }}>{title}</h3>
        <CheckList items={items} size={13} />
        <div style={{ marginTop: 'auto', paddingTop: 12 }}><ArrowLink size={13}>Μάθετε περισσότερα</ArrowLink></div>
      </div>
    </div>
  );
}

const SERVICES = [
  { title: 'Σχεδιασμός Ιστοσελίδων', items: ['WordPress ανάπτυξη', 'Εταιρικές ιστοσελίδες', 'Landing pages', 'Responsive design', 'Performance optimization'] },
  { title: 'Ανάπτυξη eCommerce', items: ['WooCommerce', 'OpenCart', 'Product integrations', 'Payments', 'Shipping', 'Product imports'] },
  { title: 'Φιλοξενία & Υποδομή', items: ['Managed Hosting', 'Domain management', 'SSL', 'DNS', 'Cloudflare', 'Migration'] },
  { title: 'Ασφάλεια Ιστοσελίδων', items: ['Malware removal', 'WordPress hardening', 'Backups', 'Access protection', 'Security monitoring', 'Recovery'] },
  { title: 'Συντήρηση & Υποστήριξη', items: ['WordPress updates', 'Plugin updates', 'Theme updates', 'Performance checks', 'Technical support'] },
  { title: 'SEO & Analytics', items: ['Technical SEO', 'Rank Math', 'Google Search Console', 'Google Analytics', 'Tag Manager', 'SEO auditing'] },
  { title: 'Digital Marketing', items: ['Google Ads', 'Meta Ads', 'Social Media', 'Campaign strategy', 'Analytics'] },
  { title: 'Δημιουργικός Σχεδιασμός', items: ['UI/UX Design', 'Social graphics', 'Advertising creatives', 'Banners', 'Digital assets'] },
  { title: 'Email & Business Tools', items: ['Business email', 'SMTP', 'SPF / DKIM / DMARC', 'Newsletter systems', 'Technical setup'] }
];

function Services({ go }) {
  return (
    <div>
      <section style={{ paddingBlock: '62px 40px', borderBottom: '1px solid var(--line-dark)' }}>
        <div className="pm-container pm-head-split" style={{ display: 'grid', gap: 48, alignItems: 'flex-end' }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            <Eyebrow>ΟΙ ΥΠΗΡΕΣΙΕΣ ΜΑΣ</Eyebrow>
            <h1 style={{ fontSize: 'var(--fs-h1-sm)', lineHeight: 1.05 }}>Ολοκληρωμένες ψηφιακές<br />λύσεις για<br />σύγχρονες επιχειρήσεις.</h1>
          </div>
          <p style={{ fontSize: 15.5, lineHeight: 1.7, color: 'var(--text-muted)', maxWidth: 440, paddingBottom: 6 }}>
            Από τον σχεδιασμό και την ανάπτυξη μέχρι τη φιλοξενία, την ασφάλεια και την ψηφιακή ανάπτυξη, η Pixelminds προσφέρει ολοκληρωμένες λύσεις για την επιχείρησή σας.
          </p>
        </div>
      </section>
      <section className="pm-section">
        <div className="pm-container">
          <div className="pm-grid-3">
            {SERVICES.map((s, i) => (
              <div key={s.title} onClick={(e) => { e.preventDefault(); go('service:' + s.title); }} style={{ display: 'contents' }}>
                <ServiceTile {...s} image={pmImage(s.title)} variant={i % 4} />
              </div>
            ))}
          </div>
        </div>
      </section>
      <CtaStrip subtitle="Χρειάζεστε μια εξατομικευμένη λύση;" title="Ας βρούμε τη σωστή λύση για εσάς." cta="Επικοινωνήστε" onCta={(e) => { e.preventDefault(); go('Επικοινωνία'); }} />
    </div>
  );
}

Object.assign(window, { Services });