const { CtaStrip, Eyebrow, FilterPills, ArticleCard, ArrowLink } = window.PixelmindsDesignSystem_c25e6a;

const CATS = ['Όλα', 'Web Development', 'eCommerce', 'Ασφάλεια', 'SEO', 'Marketing', 'Επιχειρήσεις'];

const ARTICLES = [
  { category: 'ΑΣΦΑΛΕΙΑ', title: 'Πώς να ασφαλίσετε την WordPress ιστοσελίδα σας', readTime: '5 λεπτά ανάγνωση', cat: 'Ασφάλεια' },
  { category: 'SEO', title: 'SEO για μικρές επιχειρήσεις: ένας πρακτικός οδηγός', readTime: '6 λεπτά ανάγνωση', cat: 'SEO' },
  { category: 'MARKETING', title: 'Πώς να χρησιμοποιήσετε το Google Analytics', readTime: '5 λεπτά ανάγνωση', cat: 'Marketing' },
  { category: 'WEB DEVELOPMENT', title: 'Τι κοστίζει πραγματικά μια επαγγελματική ιστοσελίδα', readTime: '7 λεπτά ανάγνωση', cat: 'Web Development' },
  { category: 'ECOMMERCE', title: 'WooCommerce ή OpenCart; Τι να επιλέξετε', readTime: '6 λεπτά ανάγνωση', cat: 'eCommerce' },
  { category: 'ΕΠΙΧΕΙΡΗΣΕΙΣ', title: 'Ψηφιακή παρουσία: από πού ξεκινά μια μικρή επιχείρηση', readTime: '4 λεπτά ανάγνωση', cat: 'Επιχειρήσεις' }
];

function Insights({ go }) {
  const [cat, setCat] = React.useState('Όλα');
  const list = cat === 'Όλα' ? ARTICLES : ARTICLES.filter(a => a.cat === cat);
  return (
    <div className="pm-light">
      <section style={{ paddingBlock: '64px 30px' }}>
        <div className="pm-container pm-head-split" style={{ display: 'grid', gap: 48, alignItems: 'flex-end' }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            <Eyebrow>ΝΕΑ &amp; ΑΡΘΡΑ</Eyebrow>
            <h1 style={{ fontSize: 'var(--fs-h1-sm)', lineHeight: 1.05, color: 'var(--light-text-strong)' }}>Ιδέες για μια καλύτερη<br />ψηφιακή παρουσία.</h1>
          </div>
          <p style={{ fontSize: 15.5, lineHeight: 1.7, color: 'var(--light-text-muted)', maxWidth: 440, paddingBottom: 6 }}>
            Συμβουλές, οδηγοί και αναλύσεις για web development, eCommerce, security, SEO και digital marketing.
          </p>
        </div>
      </section>
      <div className="pm-container" style={{ paddingBottom: 26 }}>
        <FilterPills tone="light" items={CATS} value={cat} onChange={setCat} />
      </div>
      <section style={{ paddingBottom: 'var(--section-y)' }}>
        <div className="pm-container">
          <div className="pm-grid-3">
            {list.map((a, i) => (
              <div key={a.title} onClick={(e) => { e.preventDefault(); go('article:' + a.title); }} style={{ display: 'contents' }}>
                <ArticleCard {...a} image={pmImage(a.title)} variant={i % 4} />
              </div>
            ))}
          </div>

        </div>
      </section>
      <CtaStrip subtitle="Θέλετε να συζητήσουμε τη δική σας περίπτωση;" title="Ας μιλήσουμε για το έργο σας." cta="Επικοινωνήστε" onCta={(e) => { e.preventDefault(); go('Επικοινωνία'); }} />
    </div>
  );
}

Object.assign(window, { Insights });