const { Eyebrow, Button, Field, Icon, IconTile, AbstractVisual } = window.PixelmindsDesignSystem_c25e6a;

const DETAILS = [
  { icon: 'mail', label: 'Email', value: 'info@pixelminds.gr' },
  { icon: 'map-pin', label: 'Τοποθεσία', value: 'Θεσσαλονίκη, Ελλάδα', note: 'Συνεργασία με πελάτες παντού' },
  { icon: 'phone', label: 'Τηλέφωνο', value: '+30 694 156 3018' },
  { icon: 'clock', label: 'Ώρες λειτουργίας', value: 'Δευ – Παρ: 09:00 – 21:00', note: 'Σάββατο: κατόπιν ραντεβού' }
];

function Contact() {
  const [sent, setSent] = React.useState(false);
  return (
    <div className="pm-light">
      <section style={{ paddingBlock: '64px 26px' }}>
        <div className="pm-container">
          <div style={{ maxWidth: 760, display: 'flex', flexDirection: 'column', gap: 16 }}>
            <Eyebrow>ΕΠΙΚΟΙΝΩΝΗΣΤΕ ΜΑΖΙ ΜΑΣ</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: 560 }}>
              Έχετε μια ερώτηση, χρειάζεστε μια εξατομικευμένη λύση ή θέλετε να ξεκινήσετε ένα νέο project; Είμαι εδώ για να βοηθήσω.
            </p>
          </div>
        </div>
      </section>
      <section style={{ paddingBottom: 'var(--section-y)' }}>
        <div className="pm-container pm-split-55" style={{ display: 'grid', gap: 40, alignItems: 'start' }}>
          <form onSubmit={(e) => { e.preventDefault(); setSent(true); }}
            className="pm-form-grid" style={{ display: 'grid', gap: 16, padding: 28, background: 'var(--white)', border: '1px solid var(--light-border-subtle)', borderRadius: 'var(--radius-sm)', boxShadow: 'var(--shadow-light-card)' }}>
            <Field label="Όνομα" required placeholder="Το όνομά σας" />
            <Field label="Email" required type="email" placeholder="name@example.gr" />
            <Field label="Τηλέφωνο" type="tel" placeholder="Προαιρετικό" />
            <Field label="Εταιρεία" placeholder="Προαιρετικό" />
            <Field label="Τύπος έργου" style={{ gridColumn: '1 / -1' }} options={['Νέα ιστοσελίδα', 'eCommerce', 'Φιλοξενία & υποδομή', 'Ασφάλεια & συντήρηση', 'SEO & marketing', 'Άλλο']} />
            <Field label="Μήνυμα" required type="textarea" style={{ gridColumn: '1 / -1' }} placeholder="Πείτε μας λίγα λόγια για το έργο σας" />
            <div style={{ gridColumn: '1 / -1', display: 'flex', alignItems: 'center', gap: 14 }}>
              <Button arrow type="submit">Αποστολή μηνύματος</Button>
              {sent && <span style={{ fontSize: 13.5, color: 'var(--purple-primary)' }}>Ευχαριστούμε — θα επικοινωνήσουμε σύντομα.</span>}
            </div>
          </form>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 22 }}>
            <div style={{ padding: 26, background: 'var(--white)', border: '1px solid var(--light-border-subtle)', borderRadius: 'var(--radius-sm)', display: 'flex', flexDirection: 'column', gap: 20 }}>
              <div style={{ fontFamily: 'var(--font-display)', fontSize: 19, fontWeight: 600, color: 'var(--light-text-strong)', letterSpacing: '-.015em' }}>Στοιχεία Επικοινωνίας</div>
              {DETAILS.map(d => (
                <div key={d.label} style={{ display: 'flex', gap: 13, alignItems: 'flex-start' }}>
                  <IconTile name={d.icon} tone="light" size={36} iconSize={17} />
                  <div>
                    <div style={{ fontSize: 12, color: 'var(--light-text-muted)', letterSpacing: '.06em', textTransform: 'uppercase' }}>{d.label}</div>
                    <div style={{ fontSize: 14.5, color: 'var(--light-text-strong)', marginTop: 2 }}>{d.value}</div>
                    {d.note && <div style={{ fontSize: 12.5, color: 'var(--light-text-muted)', marginTop: 1 }}>{d.note}</div>}
                  </div>
                </div>
              ))}
            </div>
            <div style={{ position: 'relative', overflow: 'hidden', borderRadius: 'var(--radius-sm)', minHeight: 300 }}>
              <AbstractVisual variant={3} orb height="100%" style={{ position: 'absolute', inset: 0 }} />
              <div style={{ position: 'relative', padding: '34px 30px', display: 'flex', flexDirection: 'column', gap: 20, minHeight: 300, justifyContent: 'flex-end' }}>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 32, fontWeight: 700, lineHeight: 1.12, letterSpacing: '-.025em', color: '#fff' }}>
                  Ίδιοι στόχοι.<br />Ένα πιο φωτεινό<br />αύριο.
                </div>
                <div style={{ display: 'flex', gap: 8 }}>
                  {['linkedin', 'facebook', 'instagram', 'youtube'].map(s => (
                    <a key={s} href="#" style={{ width: 34, height: 34, display: 'grid', placeItems: 'center', borderRadius: 'var(--radius-sm)', border: '1px solid rgba(255,255,255,.22)' }}>
                      <Icon name={s} size={16} color="rgba(255,255,255,.85)" />
                    </a>
                  ))}
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { Contact });