const { CtaStrip, Eyebrow, Button, CheckList, Tag, AbstractVisual, IconTile } = window.PixelmindsDesignSystem_c25e6a;

// One detail page per service on Υπηρεσίες. Keyed by the card title.
const SERVICE_PAGES = {
  'Σχεδιασμός Ιστοσελίδων': {
    label: 'WEB DESIGN', icon: 'monitor-smartphone',
    lead: 'Σχεδιάζουμε και κατασκευάζουμε ιστοσελίδες που εξυπηρετούν την επιχείρηση: καθαρή δομή, γρήγορη φόρτωση και περιεχόμενο που διαχειρίζεστε μόνοι σας.',
    includes: ['WordPress ανάπτυξη', 'Εταιρικές ιστοσελίδες', 'Landing pages', 'Responsive design', 'Performance optimization', 'Δομή περιεχομένου', 'Εκπαίδευση στη διαχείριση'],
    tags: ['WordPress', 'Divi', 'Elementor', 'UI/UX']
  },
  'Ανάπτυξη eCommerce': {
    label: 'ECOMMERCE', icon: 'monitor-smartphone',
    lead: 'Δημιουργούμε ηλεκτρονικά καταστήματα με WooCommerce και OpenCart, από τον κατάλογο και τις πληρωμές μέχρι τις αποστολές και τις διασυνδέσεις.',
    includes: ['WooCommerce', 'OpenCart', 'Product integrations', 'Payments', 'Shipping', 'Product imports', 'Marketplaces & Skroutz'],
    tags: ['WooCommerce', 'OpenCart', 'Payments', 'XML']
  },
  'Φιλοξενία & Υποδομή': {
    label: 'HOSTING', icon: 'gauge',
    lead: 'Αναλαμβάνουμε τη φιλοξενία και την υποδομή πίσω από την ιστοσελίδα σας, με έμφαση στη σταθερότητα, την ταχύτητα και τον σωστό έλεγχο.',
    includes: ['Managed Hosting', 'Domain management', 'SSL', 'DNS', 'Cloudflare', 'Migration', 'Monitoring'],
    tags: ['Hosting', 'Cloudflare', 'DNS', 'SSL']
  },
  'Ασφάλεια Ιστοσελίδων': {
    label: 'SECURITY', icon: 'shield-check',
    lead: 'Ενισχύουμε την προστασία της ιστοσελίδας σας, καθαρίζουμε μολύνσεις και μειώνουμε τους κινδύνους πριν γίνουν πρόβλημα.',
    includes: ['Malware removal', 'WordPress hardening', 'Backups', 'Access protection', 'Security monitoring', 'Recovery', 'Firewall & Cloudflare'],
    tags: ['Hardening', 'Malware', 'Firewall', 'Backups']
  },
  'Συντήρηση & Υποστήριξη': {
    label: 'MAINTENANCE', icon: 'life-buoy',
    lead: 'Κρατάμε την ιστοσελίδα σας ενημερωμένη και λειτουργική, με τεχνική υποστήριξη όταν τη χρειάζεστε.',
    includes: ['WordPress updates', 'Plugin updates', 'Theme updates', 'Performance checks', 'Technical support', 'Backups', 'Έλεγχος λειτουργίας'],
    tags: ['Updates', 'Backups', 'Support']
  },
  'SEO & Analytics': {
    label: 'SEO & ANALYTICS', icon: 'search',
    lead: 'Βελτιώνουμε την οργανική παρουσία της ιστοσελίδας σας και οργανώνουμε σωστές μετρήσεις, ώστε να ξέρετε τι αποδίδει.',
    includes: ['Technical SEO', 'On-Page SEO', 'Google Search Console', 'Google Analytics', 'Google Tag Manager', 'SEO auditing'],
    tags: ['SEO', 'Analytics', 'Search Console', 'GTM']
  },
  'Digital Marketing': {
    label: 'DIGITAL MARKETING', icon: 'trending-up',
    lead: 'Σχεδιάζουμε και υποστηρίζουμε καμπάνιες σε Google και Meta, με στόχο περισσότερη προβολή και πραγματικά αποτελέσματα.',
    includes: ['Google Ads', 'Meta Ads', 'Campaign setup', 'Targeting', 'Creatives', 'Βελτιστοποίηση', 'Reports'],
    tags: ['Google Ads', 'Meta Ads', 'Campaigns']
  },
  'Δημιουργικός Σχεδιασμός': {
    label: 'CREATIVE', icon: 'monitor-smartphone',
    lead: 'Δημιουργούμε το οπτικό υλικό που υποστηρίζει την ψηφιακή σας παρουσία, από το interface μέχρι τα γραφιστικά των καμπανιών.',
    includes: ['UI/UX Design', 'Social graphics', 'Advertising creatives', 'Banners', 'Digital assets', 'Website content'],
    tags: ['UI/UX', 'Γραφιστικά', 'Creatives']
  },
  'Email & Business Tools': {
    label: 'BUSINESS TOOLS', icon: 'mail',
    lead: 'Ρυθμίζουμε τα εργαλεία που χρησιμοποιεί καθημερινά η επιχείρησή σας: επαγγελματικό email, σωστή παραδοσιμότητα και newsletters.',
    includes: ['Business email', 'SMTP', 'SPF / DKIM / DMARC', 'Newsletter systems', 'Technical setup', 'DNS configuration'],
    tags: ['Email', 'SMTP', 'DMARC', 'Newsletters']
  }
};

const SERVICE_STEPS = [
  { title: 'Ανάλυση αναγκών', text: 'Συζητάμε τι χρειάζεται πραγματικά η επιχείρησή σας και τι έχει προτεραιότητα.' },
  { title: 'Υλοποίηση', text: 'Αναλαμβάνουμε την τεχνική εργασία και σας κρατάμε ενήμερους σε κάθε στάδιο.' },
  { title: 'Υποστήριξη', text: 'Μετά την παράδοση παραμένουμε διαθέσιμοι για αλλαγές και τεχνική βοήθεια.' }
];

function ServiceDetail({ serviceKey, go }) {
  const s = SERVICE_PAGES[serviceKey];
  const others = Object.keys(SERVICE_PAGES).filter(k => k !== serviceKey).slice(0, 4);
  React.useEffect(() => { if (!s) go('Υπηρεσίες'); }, [s]);
  if (!s) return null;
  const half = Math.ceil(s.includes.length / 2);
  return (
    <div>
      <section style={{ position: 'relative', overflow: 'hidden', borderBottom: '1px solid var(--line-dark)' }}>
        <div aria-hidden="true" style={{ position: 'absolute', inset: 0, background: 'radial-gradient(60% 90% at 82% 30%, rgba(123,61,255,.26) 0%, rgba(11,11,15,0) 72%)' }} />
        <div className="pm-container pm-split-60" style={{ position: 'relative', display: 'grid', gap: 48, alignItems: 'center', paddingBlock: '58px 56px' }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
            <a href="#" onClick={(e) => { e.preventDefault(); go('Υπηρεσίες'); }} style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontSize: 13, fontWeight: 600, color: 'var(--text-muted)', textDecoration: 'none' }}><span aria-hidden="true">←</span><span>Όλες οι υπηρεσίες</span></a>
            <Eyebrow>{s.label}</Eyebrow>
            <h1 style={{ fontSize: 'var(--fs-h1-sm)', lineHeight: 1.05 }}>{serviceKey}</h1>
            <p style={{ fontSize: 'var(--fs-lead)', lineHeight: 1.62, color: 'var(--text-muted)', maxWidth: 560 }}>{s.lead}</p>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>{s.tags.map(t => <Tag key={t}>{t}</Tag>)}</div>
            <div style={{ display: 'flex', gap: 12, marginTop: 4 }}>
              <Button arrow onClick={(e) => { e.preventDefault(); go('Επικοινωνία'); }}>Συζητήστε το έργο σας μαζί μας</Button>
            </div>
          </div>
          <div style={{ aspectRatio: '4 / 3', maxHeight: 330, overflow: 'hidden', borderRadius: 'var(--radius-md)', border: '1px solid var(--border-subtle)' }}>
            {pmImage(serviceKey)
              ? <img src={pmImage(serviceKey)} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
              : <AbstractVisual variant={2} orb height="100%" />}
          </div>
        </div>
      </section>
      <section className="pm-section">
        <div className="pm-container pm-grid-2">
          <div style={{ display: 'flex', flexDirection: 'column', gap: 18, padding: '30px 30px 32px', background: 'var(--surface-card)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-md)' }}>
            <h2 style={{ fontSize: 'var(--fs-h3)' }}>Τι περιλαμβάνει</h2>
            <div className="pm-grid-2" style={{ gap: 14 }}>
              <CheckList items={s.includes.slice(0, half)} size={14} />
              <CheckList items={s.includes.slice(half)} size={14} />
            </div>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            <h2 style={{ fontSize: 'var(--fs-h3)' }}>Πώς δουλεύουμε</h2>
            {SERVICE_STEPS.map((st, i) => (
              <div key={st.title} style={{ display: 'flex', gap: 16, padding: '18px 20px', background: 'var(--surface-raised)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-sm)' }}>
                <span style={{ fontFamily: 'var(--font-display)', fontSize: 16, fontWeight: 700, color: 'var(--purple-light)', letterSpacing: '.04em' }}>{'0' + (i + 1)}</span>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                  <h3 style={{ fontSize: 17 }}>{st.title}</h3>
                  <p style={{ fontSize: 13.5, lineHeight: 1.6, color: 'var(--text-muted)' }}>{st.text}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>
      <section style={{ paddingBottom: 'var(--section-y)' }}>
        <div className="pm-container">
          <h2 style={{ fontSize: 'var(--fs-h3)', marginBottom: 20 }}>Σχετικές υπηρεσίες</h2>
          <div className="pm-grid-4">
            {others.map(k => (
              <a key={k} href="#" onClick={(e) => { e.preventDefault(); go('service:' + k); }} className="pm-related"
                style={{ display: 'flex', flexDirection: 'column', gap: 10, padding: '20px 20px 22px', background: 'var(--surface-card)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-md)', textDecoration: 'none' }}>
                <IconTile name={SERVICE_PAGES[k].icon} />
                <h3 style={{ fontSize: 16.5 }}>{k}</h3>
                <span style={{ marginTop: 'auto', display: 'inline-flex', gap: 7, color: 'var(--purple-light)', fontSize: 13, fontWeight: 600 }}><span>Μάθετε περισσότερα</span><span aria-hidden="true">→</span></span>
              </a>
            ))}
          </div>
        </div>
      </section>
      <CtaStrip subtitle="Χρειάζεστε μια εξατομικευμένη λύση;" title="Ας βρούμε τη σωστή λύση για εσάς." cta="Επικοινωνήστε" onCta={(e) => { e.preventDefault(); go('Επικοινωνία'); }} />
    </div>
  );
}

Object.assign(window, { ServiceDetail, SERVICE_PAGES });