const { Header, Footer, CtaStrip, SectionHead, Button, ArrowLink, Eyebrow, ServiceCard, ProjectCard, TechLogos, AbstractVisual } = window.PixelmindsDesignSystem_c25e6a;
function pmRes(path) { const id = 'r_' + path.replace(/[^a-zA-Z0-9]/g, '_'); return (window.__resources && window.__resources[id]) || path; }

const CAPABILITIES = [
  { number: '01', label: 'ΚΑΤΑΣΚΕΥΗ', title: 'Ιστοσελίδες & eCommerce', image: pmRes('assets/home-01-build.jpg') },
  { number: '02', label: 'ΦΙΛΟΞΕΝΙΑ', title: 'Hosting & Υποδομή', image: pmRes('assets/home-02-hosting.jpg') },
  { number: '03', label: 'ΑΣΦΑΛΕΙΑ', title: 'Ασφάλεια & Συντήρηση', image: pmRes('assets/home-03-security.jpg') },
  { number: '04', label: 'ΑΝΑΠΤΥΞΗ', title: 'SEO & Digital Marketing', image: pmRes('assets/home-04-growth.jpg') }
];

const HOME_PROJECTS = [
  { title: 'Culture Skopelos', subtitle: 'Δημοτική πολιτιστική πλατφόρμα' },
  { title: 'Kantartzis-psy.gr', subtitle: 'Επαγγελματική Ιστοσελίδα για Ψυχολόγους' },
  { title: 'Beauty & Nails', subtitle: 'Online κατάστημα & ακαδημία' },
  { title: 'Bouyoshop', subtitle: 'eCommerce κατάστημα' }
];

function Hero({ go }) {
  return (
    <section style={{ position: 'relative', overflow: 'hidden', borderBottom: '1px solid var(--line-dark)' }}>
      <div style={{ position: 'absolute', inset: 0, backgroundImage: `url(${pmRes('assets/hero-bg-globe.jpg')})`, backgroundSize: 'cover', backgroundPosition: 'center right' }} />
      <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(90deg, var(--black-rich) 0%, rgba(11,11,15,.55) 42%, rgba(11,11,15,0) 68%)' }} />
      <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(60% 90% at 78% 40%, rgba(123,61,255,.18) 0%, rgba(11,11,15,0) 72%)' }} />
      <div className="pm-container pm-split-60" style={{ position: 'relative', paddingBlock: '76px 64px', display: 'grid', gap: 48, alignItems: 'center' }}>
        <div style={{ position: 'absolute', right: 60, bottom: 66, display: 'flex', flexDirection: 'column', gap: 4, fontSize: 12, fontWeight: 600, letterSpacing: '.14em', color: 'var(--gray-200)', textAlign: 'right', zIndex: 1 }}>
          <span>ΙΔΕΕΣ</span><span>ΤΕΧΝΟΛΟΓΙΑ</span><span>ΑΝΑΠΤΥΞΗ</span><span>ΠΡΑΓΜΑΤΙΚΑ</span><span style={{ color: 'var(--purple-light)' }}>ΑΠΟΤΕΛΕΣΜΑΤΑ</span>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 22 }}>
          <Eyebrow>ΨΗΦΙΑΚΕΣ ΛΥΣΕΙΣ ΓΙΑ ΣΥΓΧΡΟΝΕΣ ΕΠΙΧΕΙΡΗΣΕΙΣ</Eyebrow>
          <h1 style={{ maxWidth: 660 }}>Χτίζουμε την<br /><span className="pm-grad">ψηφιακή πλευρά</span><br />της επιχείρησής σας.</h1>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: '6px 14px', fontSize: 14.5, fontWeight: 500, color: 'var(--text-body)' }}>
            {['Ιστοσελίδες', 'eCommerce', 'Hosting', 'Ασφάλεια', 'Ψηφιακή Ανάπτυξη'].map((s, i) => (
              <React.Fragment key={s}>{i > 0 && <span style={{ color: 'var(--purple-primary)' }}>•</span>}<span>{s}</span></React.Fragment>
            ))}
          </div>
          <p style={{ maxWidth: 560, fontSize: 'var(--fs-lead)', lineHeight: 1.62, color: 'var(--text-muted)' }}>
            Από την πρώτη ιστοσελίδα μέχρι την ψηφιακή υποδομή πίσω από αυτή, η Pixelminds σχεδιάζει, κατασκευάζει, φιλοξενεί, προστατεύει και αναπτύσσει την online παρουσία της επιχείρησής σας.
          </p>
          <div style={{ display: 'flex', gap: 12, marginTop: 4 }}>
            <Button size="lg" arrow onClick={() => go('Επικοινωνία')}>Συζητήστε το έργο σας μαζί μας</Button>
            <Button size="lg" variant="secondary" onClick={() => go('Έργα')}>Δείτε τη δουλειά μας</Button>
          </div>
        </div>
        <div style={{ minHeight: 360 }} />
      </div>
    </section>
  );
}

/** Scales a single-line heading so it spans its container edge to edge. */
function useFitLine() {
  const ref = React.useRef(null);
  React.useLayoutEffect(() => {
    const box = ref.current; if (!box) return;
    let raf = 0, lastW = -1;
    const fit = () => {
      const h = box.querySelector('h2'); if (!h) return;
      const cw = (h.parentElement || box).clientWidth;
      if (window.innerWidth < 760) { h.style.fontSize = ''; lastW = -1; return; }
      if (cw === lastW) return;
      lastW = cw;
      // measure off-DOM so writing the size never re-triggers the observer
      const probe = document.createElement('span');
      const cs = getComputedStyle(h);
      probe.textContent = h.textContent;
      probe.style.cssText = `position:fixed;left:-9999px;top:0;white-space:nowrap;visibility:hidden;font:${cs.fontWeight} 100px/1 ${cs.fontFamily};letter-spacing:${cs.letterSpacing === 'normal' ? 'normal' : (parseFloat(cs.letterSpacing) / parseFloat(cs.fontSize)) + 'em'}`;
      document.body.appendChild(probe);
      const w = probe.getBoundingClientRect().width;
      probe.remove();
      if (w) h.style.fontSize = Math.min(100 * (cw / w), 52) + 'px';
    };
    const schedule = () => { cancelAnimationFrame(raf); raf = requestAnimationFrame(fit); };
    fit();
    window.addEventListener('resize', schedule);
    document.fonts && document.fonts.ready.then(() => { lastW = -1; fit(); });
    return () => { window.removeEventListener('resize', schedule); cancelAnimationFrame(raf); };
  }, []);
  return ref;
}

function Home({ go }) {
  const headRef = useFitLine();
  const workRef = useFitLine();
  return (
    <div>
      <Hero go={go} />
      <div style={{ borderBottom: '1px solid var(--line-dark)', background: 'var(--black-secondary)' }}>
        <div className="pm-container" style={{ paddingBlock: 22 }}><TechLogosImg /></div>
      </div>
      <section className="pm-section">
        <div className="pm-container">
          <div className="pm-onelinehead" ref={headRef}>
            <SectionHead eyebrow="ΤΙ ΚΑΝΟΥΜΕ" title="Κατασκευάζουμε. Φιλοξενούμε. Προστατεύουμε. Αναπτύσσουμε." />
          </div>
          <div className="pm-grid-4">
            {CAPABILITIES.map((c, i) => (
              <div key={c.number} onClick={(e) => { e.preventDefault(); go('Υπηρεσίες'); }} style={{ display: 'contents' }}>
                <ServiceCard {...c} variant={i} visualHeight={132} />
              </div>
            ))}
          </div>
        </div>
      </section>
      <section style={{ paddingBottom: 'var(--section-y)' }}>
        <div className="pm-container">
          <div className="pm-onelinehead" ref={workRef}>
            <SectionHead eyebrow="ΕΠΙΛΕΓΜΕΝΑ ΕΡΓΑ" title="Ιδέες που έγιναν πραγματικότητα."
              aside={<ArrowLink onClick={(e) => { e.preventDefault(); go('Έργα'); }}>Δείτε όλα τα έργα</ArrowLink>} />
          </div>
          <div className="pm-grid-4">
            {HOME_PROJECTS.map((p, i) => (
              <div key={p.title} onClick={(e) => { e.preventDefault(); go('Έργα'); }} style={{ display: 'contents' }}>
                <ProjectCard {...p} image={pmImage(p.title)} variant={i} height={270} />
              </div>
            ))}
          </div>
        </div>
      </section>
      <CtaStrip subtitle="Έχετε μια ιδέα;" title="Ας την υλοποιήσουμε μαζί." cta="Συζητήστε το έργο σας μαζί μας" onCta={(e) => { e.preventDefault(); go('Επικοινωνία'); }} />
    </div>
  );
}

Object.assign(window, { Home });