const { CtaStrip, Eyebrow, FilterPills, ProjectRow, ProjectCard } = window.PixelmindsDesignSystem_c25e6a;

const FILTERS = ['Όλα', 'Ιστοσελίδες', 'eCommerce', 'Επιχειρήσεις', 'Δημόσιος Τομέας', 'Design', 'Η Συμβολή μας'];

const PROJECTS = [
  { title: 'Culture Skopelos', href: 'https://cultureskopelos.gr', subtitle: 'Δημοτική πολιτιστική πλατφόρμα', tags: ['WordPress', 'UX/UI', 'SEO'], cats: ['Ιστοσελίδες', 'Δημόσιος Τομέας'], description: 'Πλατφόρμα προβολής του πολιτιστικού αποθέματος και των εκδηλώσεων του δήμου, με δομή περιεχομένου που συντηρείται εσωτερικά.' },
  { title: 'Kantartzis-psy.gr', href: 'https://kantartzis-psy.gr', subtitle: 'Επαγγελματική Ιστοσελίδα για Ψυχολόγους', tags: ['WordPress', 'SEO', 'Design'], cats: ['Ιστοσελίδες', 'Επιχειρήσεις'], description: 'Λιτή επαγγελματική παρουσία με έμφαση στην αναγνωσιμότητα, τη διακριτικότητα και την εύκολη επικοινωνία.' },
  { title: 'Beauty & Nails', href: 'https://beautyandnails.gr', subtitle: 'Online κατάστημα & ακαδημία', tags: ['OpenCart', 'Design', 'Marketing'], cats: ['eCommerce', 'Επιχειρήσεις'], description: 'Ηλεκτρονικό κατάστημα προϊόντων περιποίησης μαζί με τμήμα σεμιναρίων και εγγραφών.' },
  { title: 'Bouyoshop', href: 'https://bouyoshop.gr', subtitle: 'eCommerce κατάστημα', tags: ['OpenCart', 'Payments', 'Marketing'], cats: ['eCommerce'], description: 'Κατάστημα με μεγάλο κατάλογο προϊόντων, αυτοματοποιημένες εισαγωγές και ρυθμίσεις αποστολών.' },
  { title: 'Dimitriskiriakos.com', href: 'https://dimitriskiriakos.com', subtitle: 'Ιστοσελίδα καλλιτέχνη', tags: ['WordPress', 'UX/UI', 'Design'], cats: ['Ιστοσελίδες', 'Design'], description: 'Προσωπικό portfolio καλλιτέχνη, με το έργο στο επίκεντρο και διακριτική τυπογραφία γύρω από αυτό.' },
  { title: 'Nikoslazaridis.gr', href: 'https://nikoslazaridis.gr', subtitle: 'Ιστοσελίδα ιατρού', tags: ['WordPress', 'SEO', 'Design'], cats: ['Ιστοσελίδες', 'Επιχειρήσεις'], description: 'Ιατρική παρουσία με σαφή δομή υπηρεσιών, βιογραφικό και άμεση επικοινωνία για ραντεβού.' },
  { title: 'Reversebeautyshop.gr', href: 'https://reversebeautyshop.gr', subtitle: 'Online κατάστημα ομορφιάς & περιποίησης', tags: ['OpenCart', 'Payments', 'Marketing'], cats: ['eCommerce', 'Επιχειρήσεις'], description: 'Ηλεκτρονικό κατάστημα προϊόντων ομορφιάς και περιποίησης, με καθαρή δομή κατηγοριών και εύκολη παραγγελία.' },
  { title: 'Voulamessiniati.gr', href: 'https://voulamessiniati.gr', subtitle: 'Επαγγελματική ιστοσελίδα', tags: ['WordPress', 'UX/UI', 'SEO'], cats: ['Ιστοσελίδες', 'Επιχειρήσεις'], description: 'Επαγγελματική παρουσία με καθαρή δομή περιεχομένου και άμεση επικοινωνία.' },
  { title: 'Budotaijutsu.gr', href: 'https://budotaijutsu.gr', subtitle: 'Ιστοσελίδα σχολής πολεμικών τεχνών', tags: ['WordPress', 'UX/UI', 'SEO'], cats: ['Ιστοσελίδες', 'Επιχειρήσεις'], description: 'Παρουσίαση της σχολής, των τμημάτων και του προγράμματος προπονήσεων, με άμεση επικοινωνία για εγγραφές.' },
  { title: 'Flexibel.gr', href: 'https://flexibel.gr', subtitle: 'eCommerce κατάστημα', tags: ['OpenCart', 'Payments', 'Marketing'], cats: ['eCommerce', 'Επιχειρήσεις'], description: 'Ηλεκτρονικό κατάστημα με οργανωμένο κατάλογο προϊόντων και απλή διαδικασία παραγγελίας.' },
  { title: 'Atlasconsulting', href: 'https://atlasconsulting.gr', subtitle: 'Ψηφιακή υποστήριξη συμβουλευτικής εταιρείας', tags: ['WordPress', 'Development', 'Design', 'Email Marketing', 'Google Analytics', 'IT Services'], cats: ['Η Συμβολή μας', 'Επιχειρήσεις'], description: 'Συνεχής ψηφιακή υποστήριξη: ανάπτυξη και σχεδιασμός ιστοσελίδας, email marketing, μετρήσεις με Google Analytics και IT services.' },
  { title: 'Medusashop.gr', href: 'https://medusashop.gr', subtitle: 'Franchise ομορφιάς & περιποίησης', tags: ['Beauty', 'Franchise', 'Design', 'Email Marketing', 'Digital Marketing'], cats: ['Η Συμβολή μας', 'Επιχειρήσεις'], description: 'Υποστήριξη δικτύου franchise ομορφιάς: σχεδιασμός, email marketing και ψηφιακό μάρκετινγκ για τα καταστήματα.' }
];

const UPCOMING = [
  { title: 'Paragogosnuts.gr', subtitle: 'Σύντομα κοντά σας' },
  { title: 'Mariabilingualcounsellor.com', subtitle: 'Σύντομα κοντά σας' }
];

function Projects({ go }) {
  const [filter, setFilter] = React.useState('Όλα');
  const list = filter === 'Όλα' ? PROJECTS : PROJECTS.filter(p => p.cats.includes(filter));
  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 }}>
            Μια επιλογή από ιστοσελίδες και eCommerce έργα που σχεδιάστηκαν με συγκεκριμένο σκοπό: να εξυπηρετούν την επιχείρηση και τους ανθρώπους της.
          </p>
        </div>
      </section>
      <div className="pm-container" style={{ paddingBottom: 28 }}>
        <FilterPills items={FILTERS} value={filter} onChange={setFilter} />
      </div>
      <section style={{ paddingBottom: 'var(--section-y)' }}>
        <div className="pm-container pm-rows" style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
          {list.map((p, i) => <ProjectRow key={p.title} {...p} image={pmImage(p.title)} href={p.href} target={p.href ? '_blank' : undefined} rel={p.href ? 'noopener' : undefined} variant={i} />)}
          {list.length === 0 && <p style={{ color: 'var(--text-muted)' }}>Δεν υπάρχουν έργα σε αυτή την κατηγορία ακόμη.</p>}
          <div className="pm-grid-2" style={{ marginTop: 14 }}>
            {UPCOMING.map((u, i) => <ProjectCard key={i} {...u} image={pmImage(u.title)} variant={i + 2} height={200} />)}
          </div>
        </div>
      </section>
      <CtaStrip subtitle="Έχετε ένα παρόμοιο έργο στο μυαλό σας;" title="Ας δημιουργήσουμε κάτι εξαιρετικό μαζί." cta="Συζητήστε το έργο σας μαζί μας" onCta={(e) => { e.preventDefault(); go('Επικοινωνία'); }} />
    </div>
  );
}

Object.assign(window, { Projects });