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

const FOUNDER_TAGS = ['OpenCart', 'WordPress', 'Google Ads', 'Social Advertising', 'Brand & Web Design'];

const VALUES = [
  { icon: 'handshake', title: 'Ένας συνεργάτης', text: 'Ανάπτυξη, φιλοξενία, ασφάλεια και marketing σε ένα σημείο. Χωρίς διάσπαση ευθύνης.' },
  { icon: 'trending-up', title: 'Χτισμένο για ανάπτυξη', text: 'Λύσεις σχεδιασμένες ώστε να επεκτείνονται μαζί με την επιχείρησή σας.' },
  { icon: 'shield-check', title: 'Ασφάλεια πρώτα', text: 'Η προστασία και η συντήρηση δεν είναι δεύτερη σκέψη — είναι μέρος του έργου.' },
  { icon: 'life-buoy', title: 'Συνεχής υποστήριξη', text: 'Η συνεργασία δεν τελειώνει όταν η ιστοσελίδα βγει online.' }
];

function About({ go }) {
  return (
    <div className="pm-light">
      <section style={{ paddingBlock: '64px 20px' }}>
        <div className="pm-container pm-split-65" style={{ display: 'grid', gap: 56 }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
            <Eyebrow>ΣΧΕΤΙΚΑ ΜΕ ΤΗΝ PIXELMINDS</Eyebrow>
            <h1 style={{ fontSize: 'var(--fs-h1-sm)', lineHeight: 1.05, color: 'var(--light-text-strong)' }}>Τεχνολογία χωρίς<br />περιττή πολυπλοκότητα.</h1>
            <p style={{ fontSize: 16.5, lineHeight: 1.7, color: 'var(--light-text-body)', maxWidth: 620 }}>
              Η Pixelminds δημιουργήθηκε για να είναι ένας αξιόπιστος συνεργάτης για ολόκληρη την ψηφιακή παρουσία μιας επιχείρησης.
            </p>
            <p style={{ fontSize: 16.5, lineHeight: 1.7, color: 'var(--light-text-body)', maxWidth: 620 }}>
              Από τον σχεδιασμό και την ανάπτυξη έως τη φιλοξενία, την ασφάλεια και το digital marketing, δημιουργούμε λύσεις που βασίζονται στις πραγματικές ανάγκες του πελάτη.
            </p>
            <div className="pm-founder" style={{ display: 'grid', gap: 28, marginTop: 26, paddingTop: 30, borderTop: '1px solid var(--light-border-subtle)' }}>
              <div style={{ position: 'relative', overflow: 'hidden', aspectRatio: '1 / 1', borderRadius: 6, border: '1px solid var(--light-border-subtle)', background: 'var(--black-rich)' }}>
                <img src={(window.__resources && window.__resources.r_assets_kapselidakis_kostas_jpg) || 'assets/kapselidakis-kostas.jpg'} alt="Κωνσταντίνος Καψελιδάκης, Founder της Pixelminds" style={{ width: '100%', height: '100%', objectFit: 'cover', filter: 'grayscale(1) contrast(1.08) brightness(.96)' }} />
                <div aria-hidden="true" style={{ position: 'absolute', inset: 0, background: 'linear-gradient(155deg, rgba(123,61,255,.42), rgba(46,16,101,.5))', mixBlendMode: 'color' }} />
                <div aria-hidden="true" style={{ position: 'absolute', inset: 0, background: 'linear-gradient(to top, rgba(11,11,15,.42), transparent 55%)' }} />
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 8, justifyContent: 'center' }}>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 24, fontWeight: 600, letterSpacing: '-.02em', color: 'var(--light-text-strong)' }}>Konstantinos Kapselidakis</div>
                <div style={{ fontSize: 13.5, color: 'var(--light-text-muted)' }}>Founder — Pixelminds</div>
                <p style={{ fontSize: 15, lineHeight: 1.7, color: 'var(--light-text-body)', marginTop: 4, maxWidth: 480 }}>
                  Με εμπειρία σε web development, eCommerce, hosting, digital infrastructure, security και digital marketing, η Pixelminds συνδυάζει τεχνολογία και επιχειρηματική σκέψη σε ένα ενιαίο σημείο συνεργασίας.
                </p>
                <p style={{ fontSize: 15, lineHeight: 1.7, color: 'var(--light-text-body)', maxWidth: 480 }}>
                  Δώδεκα χρόνια στο digital marketing και στην ανάπτυξη ηλεκτρονικών καταστημάτων με OpenCart και WordPress, από τη Θεσσαλονίκη και remote. Η συνεργασία γίνεται συνήθως σε μηνιαία βάση, ώστε οι μικρές και μεσαίες επιχειρήσεις να έχουν σταθερό συνεργάτη χωρίς το κόστος μόνιμου τμήματος.
                </p>
                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginTop: 2 }}>
                  {FOUNDER_TAGS.map(t => <Tag key={t} tone="light" style={{ color: 'var(--light-text-body)' }}>{t}</Tag>)}
                </div>
                <div style={{ marginTop: 10 }}>
                  <Button variant="light" arrow onClick={() => go('Επικοινωνία')}>Ας συνεργαστούμε</Button>
                </div>
              </div>
            </div>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 30, paddingTop: 8 }}>
            {VALUES.map(v => (
              <div key={v.title} style={{ '--text-strong': 'var(--light-text-strong)', '--text-muted': 'var(--light-text-muted)' }}>
                <ValueItem icon={v.icon} title={v.title} tone="light">{v.text}</ValueItem>
              </div>
            ))}
          </div>
        </div>
      </section>
      <div style={{ paddingTop: 60 }}>
        <CtaStrip subtitle="Ας ξεκινήσουμε." title="Πείτε μας τι θέλετε να χτίσετε." cta="Συζητήστε το έργο σας μαζί μας" onCta={(e) => { e.preventDefault(); go('Επικοινωνία'); }} />
      </div>
    </div>
  );
}

Object.assign(window, { About });