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

// Bilingual article bodies. Rendered directly per language, so they bypass the text-node translator.
const ARTICLE_POSTS = {
  'Πώς να ασφαλίσετε την WordPress ιστοσελίδα σας': {
    category: 'ΑΣΦΑΛΕΙΑ', categoryEn: 'SECURITY', cat: 'Ασφάλεια', readTime: '5 λεπτά ανάγνωση', readTimeEn: '5 min read',
    titleEn: 'How to secure your WordPress website',
    leadGr: 'Οι περισσότερες παραβιάσεις σε WordPress δεν είναι στοχευμένες επιθέσεις. Είναι αυτοματοποιημένα bots που ψάχνουν ξεχασμένα updates και αδύναμους κωδικούς.',
    leadEn: 'Most WordPress breaches are not targeted attacks. They are automated bots looking for forgotten updates and weak passwords.',
    tags: ['WordPress', 'Security', 'Backups'],
    bodyGr: [
      { h: 'Κρατήστε τα updates σε σειρά', p: ['Ο πυρήνας, τα plugins και το theme είναι ο πιο συνηθισμένος τρόπος εισόδου. Ένα plugin που δεν έχει ενημερωθεί για μήνες είναι γνωστή, δημόσια καταγεγραμμένη ευπάθεια.', 'Ελέγχετε τα updates σε τακτική βάση και αφαιρείτε ό,τι δεν χρησιμοποιείτε. Κάθε ανενεργό plugin παραμένει κώδικας στον server.'] },
      { h: 'Προστατέψτε την είσοδο', l: ['Ισχυροί, μοναδικοί κωδικοί για κάθε λογαριασμό', 'Two-factor authentication στους διαχειριστές', 'Περιορισμός προσπαθειών σύνδεσης', 'Ρόλοι χρηστών με τα ελάχιστα δικαιώματα που χρειάζονται'] },
      { h: 'Backups που έχετε δοκιμάσει', p: ['Ένα backup αξίζει όσο και η επαναφορά του. Κρατήστε αντίγραφα εκτός του server και δοκιμάστε τουλάχιστον μία φορά ότι η επαναφορά δουλεύει.', 'Αν δεν ξέρετε πόσο χρόνο θέλει η επαναφορά, δεν έχετε σχέδιο ανάκαμψης — έχετε μια ελπίδα.'] },
      { h: 'Ένα επίπεδο μπροστά από τον server', p: ['Ένα firewall και ένα CDN όπως το Cloudflare φιλτράρουν κακόβουλη κίνηση πριν φτάσει στην ιστοσελίδα, με όφελος και στην ταχύτητα.'] }
    ],
    bodyEn: [
      { h: 'Keep updates in order', p: ['The core, the plugins and the theme are the most common way in. A plugin that has not been updated for months is a known, publicly documented vulnerability.', 'Check updates on a regular schedule and remove whatever you do not use. Every inactive plugin is still code sitting on the server.'] },
      { h: 'Protect the front door', l: ['Strong, unique passwords for every account', 'Two-factor authentication for administrators', 'Limits on login attempts', 'User roles with the minimum rights they need'] },
      { h: 'Backups you have actually tested', p: ['A backup is worth exactly as much as its restore. Keep copies off the server and test at least once that restoring works.', 'If you do not know how long a restore takes, you do not have a recovery plan — you have a hope.'] },
      { h: 'A layer in front of the server', p: ['A firewall and a CDN such as Cloudflare filter malicious traffic before it reaches the site, with a speed benefit as well.'] }
    ]
  },
  'SEO για μικρές επιχειρήσεις: ένας πρακτικός οδηγός': {
    category: 'SEO', categoryEn: 'SEO', cat: 'SEO', readTime: '6 λεπτά ανάγνωση', readTimeEn: '6 min read',
    titleEn: 'SEO for small businesses: a practical guide',
    leadGr: 'Το SEO για μια μικρή επιχείρηση δεν είναι κυνήγι λέξεων-κλειδιών. Είναι να βρίσκει κάποιος αυτό που προσφέρετε, στην περιοχή που δραστηριοποιείστε.',
    leadEn: 'SEO for a small business is not keyword chasing. It is making sure someone can find what you offer, in the area you serve.',
    tags: ['SEO', 'Search Console', 'Local'],
    bodyGr: [
      { h: 'Ξεκινήστε από τη δομή', p: ['Μία σελίδα για κάθε υπηρεσία, με καθαρό τίτλο και περιγραφή, αποδίδει περισσότερο από μια σελίδα που τα λέει όλα μαζί.', 'Βεβαιωθείτε ότι κάθε σελίδα έχει έναν σκοπό και μία βασική ενέργεια για τον επισκέπτη.'] },
      { h: 'Τα τεχνικά βασικά', l: ['Ταχύτητα φόρτωσης σε κινητά', 'Σωστά titles και meta descriptions', 'Καθαρά URLs και εσωτερικοί σύνδεσμοι', 'Sitemap και Search Console', 'HTTPS σε όλη την ιστοσελίδα'] },
      { h: 'Τοπική παρουσία', p: ['Για επιχειρήσεις με φυσική έδρα ή περιοχή εξυπηρέτησης, το προφίλ στο Google και η συνέπεια στα στοιχεία επικοινωνίας μετράνε περισσότερο από οποιαδήποτε τεχνική λεπτομέρεια.'] },
      { h: 'Μετρήστε λίγα, αλλά σωστά', p: ['Παρακολουθήστε ερωτήματα αναζήτησης, κλικ και τις σελίδες που φέρνουν επικοινωνία. Αν δεν αλλάζει κάποια απόφαση, δεν χρειάζεται να μετριέται.'] }
    ],
    bodyEn: [
      { h: 'Start with structure', p: ['One page per service, with a clear title and description, does more than a single page that says everything at once.', 'Make sure every page has one purpose and one main action for the visitor.'] },
      { h: 'The technical basics', l: ['Loading speed on mobile', 'Correct titles and meta descriptions', 'Clean URLs and internal links', 'Sitemap and Search Console', 'HTTPS across the whole site'] },
      { h: 'Local presence', p: ['For businesses with a physical base or service area, the Google profile and consistent contact details matter more than any technical detail.'] },
      { h: 'Measure little, but properly', p: ['Track search queries, clicks and the pages that produce enquiries. If it does not change a decision, it does not need measuring.'] }
    ]
  },
  'Πώς να χρησιμοποιήσετε το Google Analytics': {
    category: 'MARKETING', categoryEn: 'MARKETING', cat: 'Marketing', readTime: '5 λεπτά ανάγνωση', readTimeEn: '5 min read',
    titleEn: 'How to use Google Analytics',
    leadGr: 'Τα analytics γίνονται χρήσιμα όταν σταματήσετε να κοιτάτε επισκέψεις και αρχίσετε να κοιτάτε ενέργειες.',
    leadEn: 'Analytics become useful the moment you stop looking at visits and start looking at actions.',
    tags: ['Analytics', 'GA4', 'Tag Manager'],
    bodyGr: [
      { h: 'Ορίστε τι θεωρείτε αποτέλεσμα', p: ['Μια κλήση, μια φόρμα, μια παραγγελία. Χωρίς ορισμένα events, τα analytics δείχνουν κίνηση αλλά όχι αποτέλεσμα.'] },
      { h: 'Στήστε τα σωστά από την αρχή', l: ['Εγκατάσταση μέσω Google Tag Manager', 'Events για φόρμες, τηλέφωνα και παραγγελίες', 'Σύνδεση με Search Console', 'Αποκλεισμός της δικής σας κίνησης'] },
      { h: 'Κοιτάξτε πηγές, όχι σύνολα', p: ['Το σημαντικό δεν είναι πόσοι ήρθαν, αλλά από πού ήρθαν όσοι έκαναν κάτι. Εκεί φαίνεται ποιο κανάλι αξίζει τον χρόνο σας.'] },
      { h: 'Μία αναφορά τον μήνα', p: ['Μια σύντομη, σταθερή αναφορά κάθε μήνα είναι πιο χρήσιμη από καθημερινό έλεγχο πινάκων.'] }
    ],
    bodyEn: [
      { h: 'Define what counts as a result', p: ['A call, a form, an order. Without defined events, analytics show traffic but not outcomes.'] },
      { h: 'Set it up properly from the start', l: ['Installation through Google Tag Manager', 'Events for forms, phone taps and orders', 'Connection to Search Console', 'Exclusion of your own traffic'] },
      { h: 'Look at sources, not totals', p: ['What matters is not how many came, but where the ones who did something came from. That is where you see which channel is worth your time.'] },
      { h: 'One report a month', p: ['A short, consistent monthly report is more useful than checking dashboards every day.'] }
    ]
  },
  'Τι κοστίζει πραγματικά μια επαγγελματική ιστοσελίδα': {
    category: 'WEB DEVELOPMENT', categoryEn: 'WEB DEVELOPMENT', cat: 'Web Development', readTime: '7 λεπτά ανάγνωση', readTimeEn: '7 min read',
    titleEn: 'What a professional website really costs',
    leadGr: 'Η τιμή κατασκευής είναι μόνο ένα μέρος του κόστους. Η ιστοσελίδα έχει και κόστος λειτουργίας, όπως κάθε εργαλείο της επιχείρησης.',
    leadEn: 'The build price is only part of the cost. A website has a running cost too, like any other business tool.',
    tags: ['Budget', 'Hosting', 'Maintenance'],
    bodyGr: [
      { h: 'Τι πληρώνετε μία φορά', p: ['Σχεδιασμό, υλοποίηση, δομή περιεχομένου και την αρχική παραμετροποίηση. Εδώ επηρεάζει κυρίως το μέγεθος και η πολυπλοκότητα, όχι ο αριθμός των σελίδων.'] },
      { h: 'Τι πληρώνετε συνεχώς', l: ['Domain και φιλοξενία', 'SSL και backups', 'Updates και συντήρηση', 'Τεχνική υποστήριξη', 'Τυχόν premium themes ή modules'] },
      { h: 'Πού ξεφεύγει συνήθως ο προϋπολογισμός', p: ['Στις διασυνδέσεις με τρίτες υπηρεσίες, στις μαζικές εισαγωγές προϊόντων και στο περιεχόμενο — κείμενα και φωτογραφίες που συχνά θεωρούνται δεδομένα.'] },
      { h: 'Η φθηνή λύση που βγαίνει ακριβή', p: ['Μια ιστοσελίδα χωρίς συντήρηση, backups και υποστήριξη κοστίζει λιγότερο στην αρχή και περισσότερο την ημέρα που κάτι θα πάει λάθος.'] }
    ],
    bodyEn: [
      { h: 'What you pay once', p: ['Design, build, content structure and the initial configuration. Size and complexity drive this far more than the page count.'] },
      { h: 'What you pay continuously', l: ['Domain and hosting', 'SSL and backups', 'Updates and maintenance', 'Technical support', 'Any premium themes or modules'] },
      { h: 'Where budgets usually slip', p: ['Third-party integrations, bulk product imports, and content — the copy and photography that are often assumed to be free.'] },
      { h: 'The cheap option that gets expensive', p: ['A website with no maintenance, backups or support costs less at the start and more on the day something goes wrong.'] }
    ]
  },
  'WooCommerce ή OpenCart; Τι να επιλέξετε': {
    category: 'ECOMMERCE', categoryEn: 'ECOMMERCE', cat: 'eCommerce', readTime: '6 λεπτά ανάγνωση', readTimeEn: '6 min read',
    titleEn: 'WooCommerce or OpenCart? How to choose',
    leadGr: 'Και οι δύο πλατφόρμες στήνουν σοβαρά ηλεκτρονικά καταστήματα. Η επιλογή εξαρτάται από τον κατάλογο, τη ροή εργασίας και το ποιος θα το διαχειρίζεται.',
    leadEn: 'Both platforms run serious online stores. The choice depends on your catalogue, your workflow and who will manage it.',
    tags: ['WooCommerce', 'OpenCart', 'eCommerce'],
    bodyGr: [
      { h: 'Πότε ταιριάζει το WooCommerce', p: ['Όταν το περιεχόμενο έχει βάρος: blog, υπηρεσίες, landing pages και ένα κατάστημα μέσα στο ίδιο οικοσύστημα WordPress.'] },
      { h: 'Πότε ταιριάζει το OpenCart', p: ['Όταν προτεραιότητα είναι ο κατάλογος: πολλά προϊόντα, παραλλαγές, μαζικές εισαγωγές και μια διαχείριση φτιαγμένη αποκλειστικά για eShop.'] },
      { h: 'Τα κριτήρια που μετράνε', l: ['Αριθμός και τρόπος εισαγωγής προϊόντων', 'Διασυνδέσεις με ERP, courier και marketplaces', 'Τρόποι πληρωμής και τραπεζικές διασυνδέσεις', 'Ποιος ενημερώνει τα προϊόντα καθημερινά', 'Σχέδια επέκτασης'] },
      { h: 'Η λάθος ερώτηση', p: ['Το «ποια πλατφόρμα είναι καλύτερη» οδηγεί σπάνια κάπου. Το «ποια εξυπηρετεί τη ροή εργασίας μας» απαντάει σχεδόν πάντα.'] }
    ],
    bodyEn: [
      { h: 'When WooCommerce fits', p: ['When content carries weight: a blog, services, landing pages and a store inside the same WordPress ecosystem.'] },
      { h: 'When OpenCart fits', p: ['When the catalogue comes first: many products, variants, bulk imports and an admin built purely for running a shop.'] },
      { h: 'The criteria that matter', l: ['How many products, and how they are imported', 'Integrations with ERP, couriers and marketplaces', 'Payment methods and bank integrations', 'Who updates products day to day', 'Plans for expansion'] },
      { h: 'The wrong question', p: ['"Which platform is better" rarely leads anywhere. "Which one serves our workflow" almost always does.'] }
    ]
  },
  'Ψηφιακή παρουσία: από πού ξεκινά μια μικρή επιχείρηση': {
    category: 'ΕΠΙΧΕΙΡΗΣΕΙΣ', categoryEn: 'BUSINESS', cat: 'Επιχειρήσεις', readTime: '4 λεπτά ανάγνωση', readTimeEn: '4 min read',
    titleEn: 'Digital presence: where a small business starts',
    leadGr: 'Δεν χρειάζεται να ξεκινήσετε από τα πάντα. Χρειάζεται να ξεκινήσετε από αυτά που φέρνουν επικοινωνία με πελάτες.',
    leadEn: 'You do not need to start with everything. You need to start with the things that produce customer contact.',
    tags: ['Strategy', 'Business', 'Digital'],
    bodyGr: [
      { h: 'Πρώτα τα θεμέλια', l: ['Domain στο όνομα της επιχείρησης', 'Επαγγελματικό email στο δικό σας domain', 'Μια σαφής ιστοσελίδα με υπηρεσίες και επικοινωνία', 'Προφίλ στο Google για τοπική αναζήτηση'] },
      { h: 'Μετά η συνέπεια', p: ['Ίδια στοιχεία επικοινωνίας παντού, ίδια ονομασία, ίδιο λογότυπο. Η αναγνωρισιμότητα χτίζεται από την επανάληψη, όχι από τον όγκο.'] },
      { h: 'Στο τέλος η προβολή', p: ['Καμπάνιες και social media αποδίδουν όταν υπάρχει κάτι σωστό να στείλετε τον κόσμο. Διαφήμιση πάνω σε αδύναμη ιστοσελίδα είναι κόστος, όχι επένδυση.'] },
      { h: 'Ρυθμός αντί ταχύτητας', p: ['Μια σταθερή, μικρή δουλειά κάθε μήνα φέρνει περισσότερα από μια μεγάλη προσπάθεια που σταματά μετά από έξι εβδομάδες.'] }
    ],
    bodyEn: [
      { h: 'Foundations first', l: ['A domain in the business name', 'Business email on your own domain', 'A clear website with services and contact', 'A Google profile for local search'] },
      { h: 'Then consistency', p: ['The same contact details everywhere, the same name, the same logo. Recognition is built by repetition, not volume.'] },
      { h: 'Promotion last', p: ['Campaigns and social media pay off when there is somewhere decent to send people. Advertising on top of a weak website is a cost, not an investment.'] },
      { h: 'Rhythm over speed', p: ['A small, steady amount of work each month brings more than one big push that stops after six weeks.'] }
    ]
  }
};

const ARTICLE_ORDER = Object.keys(ARTICLE_POSTS);

function ArticleDetail({ articleKey, go, lang = 'gr' }) {
  const a = ARTICLE_POSTS[articleKey];
  React.useEffect(() => { if (!a) go('Νέα'); }, [a]);
  if (!a) return null;
  const en = lang === 'en';
  const body = en ? a.bodyEn : a.bodyGr;
  const others = ARTICLE_ORDER.filter(k => k !== articleKey).slice(0, 3);
  const t = {
    back: en ? 'All articles' : 'Όλα τα άρθρα',
    related: en ? 'Related articles' : 'Σχετικά άρθρα',
    read: en ? 'Read article' : 'Διαβάστε το άρθρο',
    help: en ? 'Need a hand with this?' : 'Θέλετε βοήθεια σε αυτό;',
    helpText: en ? 'Tell us where your website stands and we will suggest the next step.' : 'Πείτε μας πού βρίσκεται η ιστοσελίδα σας και θα προτείνουμε το επόμενο βήμα.',
    cta: en ? 'Get in touch' : 'Επικοινωνήστε'
  };
  return (
    <div className="pm-light">
      <section style={{ paddingBlock: '52px 24px' }}>
        <div className="pm-container" style={{ display: 'flex', flexDirection: 'column', gap: 16, maxWidth: 820 }}>
          <a href="#" onClick={(e) => { e.preventDefault(); go('Νέα'); }} style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontSize: 13, fontWeight: 600, color: 'var(--light-text-muted)', textDecoration: 'none', alignSelf: 'flex-start' }}>
            <span aria-hidden="true">←</span><span>{t.back}</span>
          </a>
          <Eyebrow>{en ? a.categoryEn : a.category}</Eyebrow>
          <h1 style={{ fontSize: 'var(--fs-h1-sm)', lineHeight: 1.06, color: 'var(--light-text-strong)' }}>{en ? a.titleEn : articleKey}</h1>
          <p style={{ fontSize: 17.5, lineHeight: 1.65, color: 'var(--light-text-body)' }}>{en ? a.leadEn : a.leadGr}</p>
          <div style={{ display: 'flex', flexWrap: 'wrap', alignItems: 'center', gap: 10, paddingTop: 4 }}>
            {a.tags.map(x => <Tag key={x} tone="light" style={{ color: 'var(--light-text-body)' }}>{x}</Tag>)}
            <span style={{ fontSize: 13, color: 'var(--light-text-muted)' }}>{en ? a.readTimeEn : a.readTime}</span>
          </div>
        </div>
      </section>
      <div className="pm-container" style={{ maxWidth: 820 }}>
        <div style={{ height: 300, overflow: 'hidden', borderRadius: 'var(--radius-md)', border: '1px solid var(--light-border-subtle)' }}>
          {pmImage(articleKey)
            ? <img src={pmImage(articleKey)} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
            : <AbstractVisual variant={2} height="100%" />}
        </div>
      </div>
      <section style={{ paddingBlock: '34px 10px' }}>
        <div className="pm-container" style={{ maxWidth: 820, display: 'flex', flexDirection: 'column', gap: 30 }}>
          {body.map(sec => (
            <div key={sec.h} style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              <h2 style={{ fontSize: 'var(--fs-h3)', color: 'var(--light-text-strong)' }}>{sec.h}</h2>
              {(sec.p || []).map(par => <p key={par} style={{ fontSize: 16.5, lineHeight: 1.75, color: 'var(--light-text-body)' }}>{par}</p>)}
              {sec.l && (
                <ul style={{ margin: 0, paddingLeft: 20, display: 'flex', flexDirection: 'column', gap: 8 }}>
                  {sec.l.map(li => <li key={li} style={{ fontSize: 16, lineHeight: 1.65, color: 'var(--light-text-body)' }}>{li}</li>)}
                </ul>
              )}
            </div>
          ))}
          <div style={{ display: 'flex', flexWrap: 'wrap', alignItems: 'center', justifyContent: 'space-between', gap: 18, marginTop: 6, padding: '26px 28px', background: 'var(--white)', border: '1px solid var(--light-border-subtle)', borderRadius: 'var(--radius-md)' }}>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 6, maxWidth: 460 }}>
              <h3 style={{ color: 'var(--light-text-strong)' }}>{t.help}</h3>
              <p style={{ fontSize: 14.5, lineHeight: 1.6, color: 'var(--light-text-body)' }}>{t.helpText}</p>
            </div>
            <Button variant="light" arrow onClick={(e) => { e.preventDefault(); go('Επικοινωνία'); }}>{t.cta}</Button>
          </div>
        </div>
      </section>
      <section style={{ paddingBlock: '40px 0' }}>
        <div className="pm-container">
          <h2 style={{ fontSize: 'var(--fs-h3)', color: 'var(--light-text-strong)', marginBottom: 20 }}>{t.related}</h2>
          <div className="pm-grid-3">
            {others.map(k => (
              <a key={k} href="#" onClick={(e) => { e.preventDefault(); go('article:' + k); }} className="pm-related-light"
                style={{ display: 'flex', flexDirection: 'column', gap: 10, padding: '20px 20px 22px', background: 'var(--white)', border: '1px solid var(--light-border-subtle)', borderRadius: 'var(--radius-md)', textDecoration: 'none' }}>
                <span style={{ fontSize: 11.5, fontWeight: 600, letterSpacing: '.14em', textTransform: 'uppercase', color: 'var(--purple-primary)' }}>{en ? ARTICLE_POSTS[k].categoryEn : ARTICLE_POSTS[k].category}</span>
                <h3 style={{ fontSize: 16.5, color: 'var(--light-text-strong)' }}>{en ? ARTICLE_POSTS[k].titleEn : k}</h3>
                <span style={{ marginTop: 'auto', display: 'inline-flex', gap: 7, fontSize: 13, fontWeight: 600, color: 'var(--purple-primary)' }}><span>{t.read}</span><span aria-hidden="true">→</span></span>
              </a>
            ))}
          </div>
        </div>
      </section>
      <div style={{ paddingTop: 56 }}>
        <CtaStrip subtitle={en ? 'Want to talk through your own case?' : 'Θέλετε να συζητήσουμε τη δική σας περίπτωση;'} title={en ? "Let's talk about your project." : 'Ας μιλήσουμε για το έργο σας.'} cta={t.cta} onCta={(e) => { e.preventDefault(); go('Επικοινωνία'); }} />
      </div>
    </div>
  );
}

Object.assign(window, { ArticleDetail, ARTICLE_POSTS });