const { CtaStrip, Eyebrow, Toggle, PricingCard, Icon, Tag, Button, ArrowLink } = window.PixelmindsDesignSystem_c25e6a;

const OC_ITEMS = [
  'Εγκατάσταση και παραμετροποίηση OpenCart',
  'Premium OpenCart Theme',
  'Προσαρμογή σχεδιασμού στην εταιρική σας ταυτότητα',
  'Responsive σχεδιασμό για desktop, tablet και κινητά',
  'Δημιουργία της βασικής δομής του ηλεκτρονικού καταστήματος',
  'Δημιουργία και οργάνωση κατηγοριών',
  'Βασική παραμετροποίηση τρόπων αποστολής',
  'Βασική παραμετροποίηση τρόπων πληρωμής',
  'Βασικές ρυθμίσεις SEO',
  'SSL και βασικές ρυθμίσεις ασφαλείας',
  'Ρύθμιση email του καταστήματος',
  'Βασική βελτιστοποίηση απόδοσης',
  'Εκπαίδευση στη διαχείριση του OpenCart',
  'Τεχνική υποστήριξη μετά την παράδοση'
];

const FLEX_SERVICES = [
  { label: 'HOSTING', title: 'Φιλοξενία Ιστοσελίδας', text: 'Αξιόπιστη φιλοξενία για την ιστοσελίδα ή το eShop σας, με έμφαση στην ασφάλεια, τη σταθερότητα και την απόδοση.', tags: ['Hosting', 'SSL', 'Backups', 'Monitoring', 'Τεχνική Υποστήριξη'], link: 'Ζητήστε προσφορά' },
  { label: 'MAINTENANCE', title: 'Συντήρηση & Updates', text: 'Αναλαμβάνουμε την τεχνική συντήρηση της ιστοσελίδας σας, ώστε να παραμένει ενημερωμένη, ασφαλής και λειτουργική.', tags: ['WordPress Updates', 'Plugin Updates', 'Theme Updates', 'Backups', 'Έλεγχος λειτουργίας'], link: 'Δείτε τις επιλογές' },
  { label: 'SECURITY', title: 'Ασφάλεια Ιστοσελίδας', text: 'Ενισχύουμε την προστασία της ιστοσελίδας σας και μειώνουμε τους κινδύνους από κακόβουλες επιθέσεις και malware.', tags: ['Cloudflare', 'Security Hardening', 'Firewall', 'Malware Checks', 'Login Protection'], link: 'Ενισχύστε την ασφάλεια' },
  { label: 'TECHNICAL SUPPORT', title: 'Τεχνική Υποστήριξη', text: 'Διορθώσεις, αλλαγές και τεχνική βοήθεια για την υπάρχουσα ιστοσελίδα ή το eShop σας.', tags: ['WordPress', 'OpenCart', 'Hosting', 'Email', 'DNS', 'Cloudflare'], link: 'Χρειάζομαι τεχνική υποστήριξη' },
  { label: 'BUSINESS EMAIL', title: 'Επαγγελματικό Email', text: 'Δημιουργούμε και ρυθμίζουμε επαγγελματικούς λογαριασμούς email για την επιχείρησή σας, χρησιμοποιώντας το δικό σας domain.', tags: ['Email Accounts', 'SMTP', 'SPF', 'DKIM', 'DMARC', 'DNS Configuration'], link: 'Ρυθμίστε το επαγγελματικό σας email' },
  { label: 'EMAIL MARKETING', title: 'Email Marketing & Newsletters', text: 'Επικοινωνήστε με τους πελάτες σας μέσα από επαγγελματικά newsletters και οργανωμένες email καμπάνιες.', tags: ['Newsletter Design', 'Campaign Setup', 'Email Templates', 'Mailing Lists', 'Αποστολές', 'Reports'], link: 'Σχεδιάστε την επόμενη καμπάνια σας' },
  { label: 'SEO & ANALYTICS', title: 'SEO & Analytics', text: 'Βελτιώνουμε την παρουσία της ιστοσελίδας σας στις μηχανές αναζήτησης και οργανώνουμε τη σωστή παρακολούθηση της απόδοσής της.', tags: ['On-Page SEO', 'Technical SEO', 'Search Console', 'Google Analytics', 'Google Tag Manager'], link: 'Βελτιώστε την παρουσία σας' },
  { label: 'DIGITAL MARKETING', title: 'Google Ads & Meta Ads', text: 'Σχεδιάζουμε και υποστηρίζουμε ψηφιακές καμπάνιες με στόχο την αύξηση της προβολής, της επισκεψιμότητας και της ανάπτυξης της επιχείρησής σας.', tags: ['Google Ads', 'Meta Ads', 'Campaign Setup', 'Targeting', 'Creatives', 'Βελτιστοποίηση'], link: 'Συζητήστε την καμπάνια σας' },
  { label: 'CONTENT & SOCIAL', title: 'Περιεχόμενο & Social Media', text: 'Δημιουργούμε περιεχόμενο που υποστηρίζει την ψηφιακή παρουσία και την επικοινωνία της επιχείρησής σας.', tags: ['Social Media Posts', 'Γραφιστικά', 'Website Content', 'Blog Articles', 'Banners', 'Digital Creatives'], link: 'Συζητήστε τις ανάγκες σας' }
];

const FLEX_COMBOS = [
  { label: 'HOSTING + ΑΣΦΑΛΕΙΑ', text: 'Για επιχειρήσεις που χρειάζονται αξιόπιστη φιλοξενία και προστασία της ιστοσελίδας τους.' },
  { label: 'HOSTING + ΣΥΝΤΗΡΗΣΗ + ΥΠΟΣΤΗΡΙΞΗ', text: 'Για όσους θέλουν να αναλάβουμε συνολικά την καθημερινή τεχνική φροντίδα της ιστοσελίδας.' },
  { label: 'SEO + ANALYTICS', text: 'Για επιχειρήσεις που θέλουν καλύτερη οργανική παρουσία και σωστή παρακολούθηση των αποτελεσμάτων.' },
  { label: 'EMAIL MARKETING + DESIGN', text: 'Για οργανωμένες email καμπάνιες με επαγγελματικό σχεδιασμό.' },
  { label: 'SECURITY + CLOUDFLARE + BACKUPS', text: 'Για μεγαλύτερη προστασία και καλύτερο έλεγχο της ψηφιακής υποδομής.' }
];

function PlanCard({ go, className, ...rest }) {
  const onClick = (e) => {
    if (e.target.closest('a,button')) { e.preventDefault(); go('Επικοινωνία'); }
  };
  return <div className={className} onClick={onClick}><PricingCard {...rest} /></div>;
}

function FlexServiceCard({ label, title, text, tags, link, go }) {
  const [h, setH] = React.useState(false);
  return (
    <div onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
      style={{ display: 'flex', flexDirection: 'column', gap: 10, padding: '22px 22px 24px', 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)' }}>
      <span style={{ fontFamily: 'var(--font-body)', fontSize: 11.5, fontWeight: 600, letterSpacing: '.16em', textTransform: 'uppercase', color: 'var(--purple-light)' }}>{label}</span>
      <h3 style={{ fontSize: 17.5, fontWeight: 600, fontFamily: 'var(--font-display)', letterSpacing: '-.01em', color: 'var(--text-strong)' }}>{title}</h3>
      <p style={{ fontSize: 13.5, lineHeight: 1.6, color: 'var(--text-muted)' }}>{text}</p>
      <p style={{ fontSize: 13, lineHeight: 1.7, color: 'var(--text-muted)' }}>{tags.join(' · ')}</p>
      <div style={{ marginTop: 'auto', paddingTop: 12 }}>
        <ArrowLink size={13} onClick={(e) => { e.preventDefault(); go('Επικοινωνία'); }}>{link}</ArrowLink>
      </div>
    </div>
  );
}

const OC_EXTRAS = ['ERP & XML Διασυνδέσεις', 'Μαζικές Εισαγωγές Προϊόντων', 'Τράπεζες & Payment Gateways', 'Courier', 'Marketplaces', 'Skroutz', 'Εξειδικευμένα Modules', 'Αυτοματισμοί', 'Πολυγλωσσικό eShop', 'Multi-Currency'];

const BENEFITS = [
  { icon: 'monitor-smartphone', label: 'Responsive Design' },
  { icon: 'search', label: 'SEO Friendly' },
  { icon: 'gauge', label: 'Fast Performance' },
  { icon: 'shield-check', label: 'Secure & Reliable' }
];

function Plans({ go }) {
  const [period, setPeriod] = React.useState('Μηνιαία');

  return (
    <div>
      <section style={{ paddingBlock: '62px 32px' }}>
        <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 />Προσιτές και ευέλικτες.</h1>
          </div>
          <p style={{ fontSize: 15.5, lineHeight: 1.7, color: 'var(--text-muted)', maxWidth: 440, paddingBottom: 6 }}>
            Διαλέξτε το πακέτο που ταιριάζει στις ανάγκες σας. Ξεκάθαρη τιμολόγηση, χωρίς εκπλήξεις.
          </p>
        </div>
      </section>
      <div className="pm-container" style={{ paddingBottom: 30 }}>
        <Toggle value={period} onChange={setPeriod} />
      </div>
      <section style={{ paddingBottom: 40 }}>
        <div className="pm-container pm-grid-2">
          <PlanCard go={go} recommended name="START" badge="ΔΗΜΟΦΙΛΕΣ" setup="€200 αρχικό κόστος" monthly="+ €20 / μήνα"
            description="Μια ολοκληρωμένη λύση ιστοσελίδας με φιλοξενία και υποστήριξη."
            items={['Κατασκευή ιστοσελίδας', 'Domain', 'Hosting', 'SSL', 'Ασφάλεια', 'Updates', 'Backups', 'Τεχνική υποστήριξη']}
            note="Ελάχιστη διάρκεια 12 μήνες" cta="Ξεκινήστε τώρα" />
          <PlanCard go={go} name="FLEX" setup="€0 αρχικό κόστος" monthly="+ €20 / μήνα"
            description="Ιδανικό εάν έχετε ήδη domain και hosting."
            items={['Κατασκευή ιστοσελίδας', 'Design & setup', 'Βασικά updates', 'Συντήρηση περιεχομένου']}
            providedLabel="Εσείς παρέχετε:" provided={['Domain', 'Hosting']} cta="Επιλέξτε Flex" />
        </div>
      </section>
      <section style={{ paddingBottom: 40 }}>
        <div className="pm-container pm-head-split" style={{ display: 'grid', gap: 48, alignItems: 'flex-end', marginBottom: 34 }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            <Eyebrow>OPENCART eCOMMERCE</Eyebrow>
            <h2>Το δικό σας eShop, έτοιμο για πωλήσεις.</h2>
          </div>
          <p style={{ fontSize: 15.5, lineHeight: 1.7, color: 'var(--text-muted)', maxWidth: 460, paddingBottom: 4 }}>
            Σχεδιάζουμε και υλοποιούμε επαγγελματικά ηλεκτρονικά καταστήματα με OpenCart, προσαρμοσμένα στις ανάγκες κάθε επιχείρησης, με έμφαση στην ταχύτητα, την ασφάλεια, την εύκολη διαχείριση και τη δυνατότητα μελλοντικής ανάπτυξης.
          </p>
        </div>
        <div className="pm-container pm-grid-2">
          <PlanCard go={go} className="pm-oc-price" name="OPENCART eSHOP" setup="Από €900"
            description="Η τελική τιμή διαμορφώνεται ανάλογα με τις απαιτήσεις του έργου."
            items={OC_ITEMS} cta="Ζητήστε προσφορά" />
          <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 16, padding: '30px 30px 32px', background: 'var(--surface-card)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-md)' }}>
              <h3>Χρειάζεστε περισσότερες δυνατότητες;</h3>
              <p style={{ fontSize: 14.5, lineHeight: 1.6, color: 'var(--text-muted)' }}>
                Το OpenCart μπορεί να επεκταθεί και να προσαρμοστεί στις πραγματικές ανάγκες της επιχείρησής σας.
              </p>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
                {OC_EXTRAS.map(x => <Tag key={x}>{x}</Tag>)}
              </div>
              <div style={{ marginTop: 'auto', paddingTop: 8 }}>
                <Button variant="secondary" arrow onClick={(e) => { e.preventDefault(); go('Επικοινωνία'); }}>Συζητήστε το έργο σας μαζί μας</Button>
              </div>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12, padding: '26px 30px 28px', background: 'var(--surface-raised)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-md)' }}>
              <span style={{ fontFamily: 'var(--font-display)', fontSize: 13, fontWeight: 700, letterSpacing: '.16em', textTransform: 'uppercase', color: 'var(--purple-light)' }}>Εξατομικευμένη προσφορά</span>
              <p style={{ fontSize: 14, lineHeight: 1.65, color: 'var(--text-muted)' }}>
                Κάθε ηλεκτρονικό κατάστημα έχει διαφορετικές ανάγκες. Η τελική τιμή καθορίζεται από τον αριθμό και τον τρόπο εισαγωγής των προϊόντων, τις απαιτήσεις σχεδιασμού, τις διασυνδέσεις με τρίτες υπηρεσίες και τις πρόσθετες λειτουργίες του eShop.
              </p>
              <p style={{ fontSize: 14, lineHeight: 1.65, color: 'var(--text-muted)' }}>
                Τυχόν κόστη τρίτων υπηρεσιών, premium modules, τραπεζικών διασυνδέσεων, payment gateways, ERP, courier ή άλλων εξωτερικών υπηρεσιών δεν περιλαμβάνονται στη βασική τιμή, εκτός εάν αναφέρονται ρητά στην προσφορά.
              </p>
            </div>
          </div>
        </div>
      </section>
      <section style={{ paddingBottom: 40, borderTop: '1px solid var(--line-dark)', paddingTop: 64 }}>
        <div className="pm-container pm-head-split" style={{ display: 'grid', gap: 48, alignItems: 'flex-end', marginBottom: 34 }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            <Eyebrow>ΕΥΕΛΙΚΤΕΣ ΥΠΗΡΕΣΙΕΣ</Eyebrow>
            <h2>Έχετε ήδη ιστοσελίδα; Αναλαμβάνουμε ό,τι χρειάζεστε.</h2>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12, maxWidth: 460, paddingBottom: 4 }}>
            <p style={{ fontSize: 15, lineHeight: 1.7, color: 'var(--text-muted)' }}>Δεν χρειάζεται να δημιουργήσετε μια νέα ιστοσελίδα ή ένα νέο eShop για να συνεργαστείτε με την Pixelminds.</p>
            <p style={{ fontSize: 15, lineHeight: 1.7, color: 'var(--text-muted)' }}>Μπορούμε να αναλάβουμε συγκεκριμένες υπηρεσίες για την υπάρχουσα ψηφιακή σας παρουσία — από τη φιλοξενία και τη συντήρηση έως την ασφάλεια, το επαγγελματικό email, το SEO και το digital marketing.</p>
            <p style={{ fontSize: 15, lineHeight: 1.7, color: 'var(--text-body)' }}>Επιλέξτε μόνο τις υπηρεσίες που πραγματικά χρειάζεστε.</p>
          </div>
        </div>
        <div className="pm-container pm-grid-3">
          {FLEX_SERVICES.map(s => <FlexServiceCard key={s.label} {...s} go={go} />)}
        </div>
      </section>
      <section style={{ paddingBottom: 40 }}>
        <div className="pm-container">
          <div style={{ display: 'flex', flexDirection: 'column', gap: 22, padding: '34px 34px 36px', background: 'var(--surface-card)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-lg, var(--radius-md))' }}>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12, maxWidth: 720 }}>
              <Eyebrow>PIXELMINDS FLEX SERVICES</Eyebrow>
              <h2 style={{ fontSize: 'var(--fs-h3)' }}>Επιλέξτε μόνο ό,τι χρειάζεστε.</h2>
              <p style={{ fontSize: 15, lineHeight: 1.7, color: 'var(--text-muted)' }}>Κάθε επιχείρηση είναι διαφορετική. Γι' αυτό δεν χρειάζεται να πληρώνετε για υπηρεσίες που δεν χρησιμοποιείτε.</p>
              <p style={{ fontSize: 15, lineHeight: 1.7, color: 'var(--text-muted)' }}>Μπορείτε να επιλέξετε μία υπηρεσία ή να δημιουργήσουμε μαζί έναν συνδυασμό υπηρεσιών προσαρμοσμένο στις πραγματικές ανάγκες της επιχείρησής σας.</p>
            </div>
            <div className="pm-grid-3" style={{ gap: 16 }}>
              {FLEX_COMBOS.map(c => (
                <div key={c.label} style={{ display: 'flex', flexDirection: 'column', gap: 8, padding: '18px 18px 20px', background: 'var(--surface-raised)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-sm)' }}>
                  <span style={{ fontSize: 11.5, fontWeight: 600, letterSpacing: '.14em', textTransform: 'uppercase', color: 'var(--purple-light)', lineHeight: 1.45 }}>{c.label}</span>
                  <p style={{ fontSize: 13.5, lineHeight: 1.6, color: 'var(--text-muted)' }}>{c.text}</p>
                </div>
              ))}
            </div>
            <hr style={{ height: 1, border: 0, background: 'var(--border-subtle)', margin: 0 }} />
            <div style={{ display: 'flex', flexWrap: 'wrap', alignItems: 'flex-end', justifyContent: 'space-between', gap: 20 }}>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 8, maxWidth: 560 }}>
                <h3>Δεν βρίσκετε ακριβώς αυτό που χρειάζεστε;</h3>
                <p style={{ fontSize: 14.5, lineHeight: 1.65, color: 'var(--text-muted)' }}>Πείτε μας τι θέλετε να αναλάβουμε και θα δημιουργήσουμε μια λύση προσαρμοσμένη στην επιχείρησή σας.</p>
              </div>
              <Button arrow onClick={(e) => { e.preventDefault(); go('Επικοινωνία'); }}>Δημιουργήστε το δικό σας πακέτο</Button>
            </div>
          </div>
        </div>
      </section>
      <section style={{ paddingBottom: 'var(--section-y)' }}>
        <div className="pm-container">
          <div className="pm-benefits-4" style={{ display: 'grid', gap: 20, padding: '30px 34px', background: 'var(--surface-card)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-md)' }}>
            {BENEFITS.map(b => (
              <div key={b.label} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 10, textAlign: 'center' }}>
                <Icon name={b.icon} size={26} color="var(--purple-primary)" />
                <span style={{ fontSize: 14, fontWeight: 500, color: 'var(--text-body)' }}>{b.label}</span>
              </div>
            ))}
          </div>
        </div>
      </section>
      <section style={{ borderTop: '1px solid var(--line-dark)', paddingBlock: 64 }}>
        <div className="pm-container pm-head-split" style={{ display: 'grid', gap: 48, alignItems: 'flex-end' }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            <Eyebrow>ΕΝΑΣ ΣΥΝΕΡΓΑΤΗΣ. ΟΣΕΣ ΥΠΗΡΕΣΙΕΣ ΧΡΕΙΑΖΕΣΤΕ.</Eyebrow>
            <h2>Εσείς επιλέγετε τι χρειάζεστε. Εμείς αναλαμβάνουμε τα υπόλοιπα.</h2>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 18, maxWidth: 460, paddingBottom: 4 }}>
            <p style={{ fontSize: 15, lineHeight: 1.7, color: 'var(--text-muted)' }}>Από ένα απλό hosting ή μια τεχνική διόρθωση μέχρι συνεχή συντήρηση, ασφάλεια και digital marketing, η Pixelminds μπορεί να λειτουργήσει ως ο σταθερός ψηφιακός συνεργάτης της επιχείρησής σας.</p>
            <Button arrow onClick={(e) => { e.preventDefault(); go('Επικοινωνία'); }}>Ας συζητήσουμε τις ανάγκες σας</Button>
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { Plans });