/* components.jsx – All section components for Nikos Kyriakos Physics */
const { useState, useEffect, useRef, useCallback } = React;

/* ── Scroll-reveal hook ────────────────────────────── */
function useReveal(opts = {}) {
  const ref = useRef(null);
  const [vis, setVis] = useState(false);
  useEffect(() => {
    const el = ref.current;
    if (!el) {setVis(true);return;}

    /* Check if already in viewport */
    const rect = el.getBoundingClientRect();
    if (rect.top < window.innerHeight + 100) {
      setVis(true);return;
    }

    /* Observe for scroll into view */
    if ('IntersectionObserver' in window) {
      const obs = new IntersectionObserver(
        ([e]) => {if (e.isIntersecting) {setVis(true);obs.unobserve(el);}},
        { threshold: 0.05, rootMargin: '0px 0px 80px 0px', ...opts }
      );
      obs.observe(el);

      /* Fallback: scroll listener */
      const onScroll = () => {
        const r = el.getBoundingClientRect();
        if (r.top < window.innerHeight + 50) {
          setVis(true);obs.unobserve(el);
          window.removeEventListener('scroll', onScroll);
        }
      };
      window.addEventListener('scroll', onScroll, { passive: true });
      return () => {obs.disconnect();window.removeEventListener('scroll', onScroll);};
    } else {
      setVis(true);
    }
  }, []);
  return [ref, vis];
}

/* ── Shared section header ─────────────────────────── */
function SectionHeader({ pre, title, subtitle, center }) {
  return (
    <div className={`section-header ${center ? 'section-header--center' : ''}`}>
      {pre && <p className="section-pre">{pre}</p>}
      <h2 className="section-title">{title}</h2>
      {subtitle && <p className="section-subtitle">{subtitle}</p>}
    </div>);

}

/* ── Navbar ─────────────────────────────────────────── */
function Navbar() {
  const [scrolled, setScrolled] = useState(() => !!window.location.hash || window.scrollY > 40);
  const [menuOpen, setMenuOpen] = useState(false);
  const linksRef = useRef(null);
  const brandRef = useRef(null);

  useEffect(() => {
    const handleScroll = () => setScrolled(window.scrollY > 40);
    window.addEventListener('scroll', handleScroll, { passive: true });

    /* Scroll-linked alignment: nav links start centered over hero right panel */
    const heroRight = document.querySelector('.hero__right');
    const heroContent = document.querySelector('.hero__content');
    const navLinks = linksRef.current;
    const navBrand = brandRef.current;
    if (heroRight && navLinks && navBrand) {
      navLinks.style.transform = 'none';
      navBrand.style.transform = 'none';
      const heroRightRect = heroRight.getBoundingClientRect();
      const navLinksRect = navLinks.getBoundingClientRect();
      const navBrandRect = navBrand.getBoundingClientRect();
      const linksOffset = heroRightRect.left + heroRightRect.width / 2 - (navLinksRect.left + navLinksRect.width / 2);
      const heroTitle = document.querySelector('.hero__title');
      const titleRect = heroTitle ? heroTitle.getBoundingClientRect() : heroRightRect;
      const brandOffset = titleRect.left - navBrandRect.left;
      const heroH = heroRight.offsetHeight;
      const threshold = heroH / 5;

      let rafId;
      const update = () => {
        const sy = window.scrollY;
        const raw = sy <= threshold ? 0 : Math.min(1, (sy - threshold) / (500 - threshold));
        const eased = raw < 0.5 ? 2 * raw * raw : 1 - Math.pow(-2 * raw + 2, 2) / 2;
        navLinks.style.transform = `translateX(${linksOffset * (1 - eased)}px)`;
        navBrand.style.transform = `translateX(${brandOffset * (1 - eased)}px)`;
      };

      navLinks.style.willChange = 'transform';
      navLinks.style.transition = 'transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1)';
      navBrand.style.willChange = 'transform';
      navBrand.style.transition = 'transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1)';
      update();

      const onNavScroll = () => {
        if (rafId) cancelAnimationFrame(rafId);
        rafId = requestAnimationFrame(update);
      };
      window.addEventListener('scroll', onNavScroll, { passive: true });
      return () => {
        window.removeEventListener('scroll', handleScroll);
        window.removeEventListener('scroll', onNavScroll);
        if (rafId) cancelAnimationFrame(rafId);
      };
    }

    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  const mp = 'index.html';
  const [showDot, setShowDot] = useState(() => {
    try {return !localStorage.getItem('exercises_visited');} catch (e) {return true;}
  });
  const links = [
  ['Φροντιστήριο.html', 'Φροντιστήριο'],
  ['Εκπαιδευτικό Υλικό.html', 'Βιβλία'],
  ['Ασκήσεις.html', 'Ασκήσεις'],
  [`${mp}#about`, 'Βιογραφικό']];

  const isHome = window.location.pathname.endsWith('index.html') || window.location.pathname === '/' || window.location.pathname.endsWith('/');

  const handleNavClick = (href, e) => {
    if (href === 'Ασκήσεις.html') {
      try {localStorage.setItem('exercises_visited', '1');} catch (e2) {}
      setShowDot(false);
    }
    if (href === `${mp}#about` && isHome) {
      e.preventDefault();
      const el = document.getElementById('about');
      if (el) el.scrollIntoView({ behavior: 'smooth' });
    }
  };


  const closeMenu = () => setMenuOpen(false);

  return (
    <React.Fragment>
      <nav className={`nav ${scrolled ? 'nav--scrolled' : ''}`}>
        <div className="nav__inner">
          <a href="index.html" className="nav__brand" ref={brandRef} onClick={closeMenu}>
            <img src="uploads/logo-1780515191648.png" alt="" className="nav__logo" fetchpriority="high" />
            <span>Φυσική Λυκείου — Γυμνασίου Ν. Κ.</span>
          </a>
          <div className="nav__links" ref={linksRef}>
            {links.map(([href, label]) =>
            <a key={href} href={href} className="nav__link" onClick={(e) => handleNavClick(href, e)} style={{ position: 'relative' }}>
              {label}
              {href === 'Ασκήσεις.html' && showDot && <span className="nav__dot-pulse"></span>}
            </a>
            )}
            <a href="Επικοινωνία.html" className="btn btn--primary btn--sm nav__cta">Κλείστε Μάθημα</a>
          </div>
          <button className="nav__hamburger" onClick={() => setMenuOpen(!menuOpen)} aria-label="Menu">
            <span></span>
          </button>
        </div>
      </nav>
      <div className={`nav__mobile ${menuOpen ? 'open' : ''}`}>
        {links.map(([href, label]) =>
        <a key={href} href={href} onClick={closeMenu}>{label}</a>
        )}
        <a href="Επικοινωνία.html" className="btn btn--primary" onClick={closeMenu}>Κλείστε Μάθημα</a>
      </div>
    </React.Fragment>);

}

/*
 * ╔══════════════════════════════════════════════════════════════╗
 * ║  ΑΡΧΙΚΗ ΣΕΛΙΔΑ (HERO) — ΕΔΙΤ ΕΔΩ ΤΑ ΚΕΙΜΕΝΑ               ║
 * ║  Άλλαξε τα κείμενα μέσα στα '' ή ""                          ║
 * ╚══════════════════════════════════════════════════════════════╝
 */
function Hero() {
  return (
    <section className="hero">
      <div className="hero__content">
        {/* ── Υπότιτλος πάνω από το όνομα ── */}
        <p className="hero__pre">Φυσική · Μαθηματικά · Χημεία</p>
        {/* ── Όνομα (η <br /> κάνει αλλαγή γραμμής) ── */}
        <h1 className="hero__title">Νίκος Α.<br />Κυριάκος</h1>
        {/* ── Περιγραφή κάτω από το όνομα ── */}
        <p className="hero__tagline">Η Φυσική εξατομικευμένη στον Μαθητή.<br />35 χρόνια εμπειρίας με Έδρα στην <span style={{ whiteSpace: 'nowrap' }}>Νέα Μάκρη</span> και δράση σε όλη την Ελλάδα.</p>
        <div className="hero__cta">
          <SnakeBtn href="Επικοινωνία.html" className="btn btn--primary">Κλείστε Μάθημα</SnakeBtn>
          <SnakeBtn href="Ασκήσεις.html" className="btn btn--secondary">Ασκήσεις</SnakeBtn>
        </div>
        <div className="hero__stats">
          <div className="hero__stat">
            <div className="hero__stat-value">35+</div>
            <div className="hero__stat-label">Χρόνια</div>
          </div>
          <div className="hero__stat">
            <div className="hero__stat-value">500+</div>
            <div className="hero__stat-label">Μαθητές</div>
          </div>
          <div className="hero__stat">
            <div className="hero__stat-value">90%</div>
            <div className="hero__stat-label">Επιτυχία ΑΕΙ</div>
          </div>
        </div>
      </div>
      <div className="hero__right">
        <img src="uploads/logo-1780515191648.png" alt="Feynman Diagram" />
        <div className="hero__right-text">Physics · Since 1991</div>
      </div>
    </section>);
}

/* ── Stats Bar ──────────────────────────────────────── */
function StatsBar() {
  const [ref, vis] = useReveal();
  const stats = [
  { value: '35+', label: 'Χρόνια Εμπειρίας' },
  { value: '500+', label: 'Μαθητές' },
  { value: '90%+', label: 'ΑΕΙ 1ης Επιλογής' },
  { value: '3', label: 'Μαθήματα: Φυσική, Μαθηματικά, Χημεία' }];

  return (
    <div ref={ref} className={`stats-bar container reveal ${vis ? 'visible' : ''}`}>
      {stats.map((s, i) =>
      <div key={i} className="stats-bar__item">
          <div className="stats-bar__value">{s.value}</div>
          <div className="stats-bar__label">{s.label}</div>
        </div>
      )}
    </div>);

}

/*
 * ╔══════════════════════════════════════════════════════════════╗
 * ║  ΒΙΟΓΡΑΦΙΚΟ — ΕΔΙΤ ΕΔΩ ΤΑ ΚΕΙΜΕΝΑ                         ║
 * ║  Άλλαξε τα κείμενα μέσα στα '' ή ""                          ║
 * ║  Για φωτογραφία: αντικατέστησε το about__photo-placeholder   ║
 * ║  με: <img src="photo.jpg" />                                  ║
 * ╚══════════════════════════════════════════════════════════════╝
 */
function About() {
  const [ref, vis] = useReveal();
  return (
    <section id="about" className="section" ref={ref}>
      <div className={`container reveal ${vis ? 'visible' : ''}`}>
        <SectionHeader
          pre="Βιογραφικό"
          title="Μια ζωή αφιερωμένη στη Φυσική"
          subtitle="35+ χρόνια πάθους για τη διδασκαλία και τη μεταδοτικότητα" />
        
        <div className="about__grid">
          <div className="about__photo">
            <img src="uploads/Μπαμπάς.jpg" alt="Νίκος Α. Κυριάκος" style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: '35% center', transform: 'scale(1.4)', transformOrigin: '35% center' }} />
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: '24px', justifyContent: 'space-between', height: '100%' }}>
            <div>
              <p className="about__text">
                Ο Νίκος Α. Κυριάκος, πτυχιούχος Φυσικής του Εθνικού και Καποδιστριακού Πανεπιστημίου
                Αθηνών, διδάσκει Φυσική εδώ και 35 χρόνια. Με βαθιά κατανόηση των αναγκών κάθε
                μαθητή, έχει βοηθήσει πάνω από 500 μαθητές να πετύχουν τους ακαδημαϊκούς τους στόχους.
              </p>
              <p className="about__text">
                Ως συγγραφέας εκπαιδευτικών βιβλίων και δημιουργός ολοκληρωμένου εκπαιδευτικού υλικού,
                προσφέρει μια εμπειρία μάθησης που ξεπερνά το τυπικό φροντιστήριο — εξατομικευμένη,
                σε βάθος, και προσανατολισμένη στο αποτέλεσμα.
              </p>
            </div>
            <div className="about__credentials-row">
              <div className="about__credential">
                <div className="about__credential-bar"></div>
                <div>
                  <h4 className="about__credential-title">Απόφοιτος ΕΚΠΑ</h4>
                  <p className="about__credential-desc">Εθνικό & Καποδιστριακό Πανεπιστήμιο Αθηνών</p>
                </div>
              </div>
              <div className="about__credential">
                <div className="about__credential-bar"></div>
                <div>
                  <h4 className="about__credential-title">Συγγραφέας</h4>
                  <p className="about__credential-desc">Εκπαιδευτικά βιβλία Φυσικής<br />Ασκήσεις Προετοιμασίας Πανελληνίων</p>
                </div>
              </div>
              <div className="about__credential">
                <div className="about__credential-bar"></div>
                <div>
                  <h4 className="about__credential-title">Εξειδίκευση</h4>
                  <ul className="about__credential-desc" style={{margin:0, padding:0, listStyle:'none'}}>
                    <li>Κλασική Μηχανική</li>
                    <li>Ηλεκτρομαγνητισμός</li>
                    <li>Κβαντική Φυσική</li>
                  </ul>
                </div>
              </div>
              <div className="about__credential">
                <div className="about__credential-bar"></div>
                <div>
                  <h4 className="about__credential-title">Πανελλήνιες</h4>
                  <p className="about__credential-desc">Εξειδικευμένη προετοιμασία εξετάσεων</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

/* ── Services ───────────────────────────────────────── */
function Services() {
  const [ref, vis] = useReveal();
  const cards = [
  {
    icon: <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><circle cx="12" cy="7" r="4" /><path d="M5.5 21a6.5 6.5 0 0 1 13 0" /></svg>,
    title: 'Ατομικά Μαθήματα',
    features: ['Εξατομικευμένη προσέγγιση', 'Προσαρμοσμένο πρόγραμμα', 'Άμεση ανατροφοδότηση', 'Ευέλικτο ωράριο']
  },
  {
    icon: <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><circle cx="9" cy="7" r="3" /><circle cx="17" cy="7" r="3" /><path d="M2 21a7 7 0 0 1 12 0" /><path d="M14.5 17.5A5.5 5.5 0 0 1 22 21" /></svg>,
    title: 'Ομαδικά Μαθήματα',
    features: ['Μικρές ομάδες 2–4 ατόμων', 'Συνεργατική μάθηση', 'Ανταγωνιστικό κόστος', 'Κοινοί μαθησιακοί στόχοι']
  },
  {
    icon: <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><rect x="3" y="4" width="18" height="13" /><line x1="3" y1="20" x2="21" y2="20" /><path d="M8 20v-3h8v3" /><circle cx="12" cy="10" r="1" fill="currentColor" stroke="none" /><path d="M9 10h-1m8 0h-1" /></svg>,
    title: 'Online Μαθήματα',
    features: ['Μέσω Zoom', 'Από οπουδήποτε στην Ελλάδα', 'Ψηφιακός πίνακας', 'Ευέλικτο πρόγραμμα']
  }];


  const tableRows = [
  { level: 'Γυμνάσιο', ind: true, grp: true, onl: true },
  { level: 'Λύκειο', ind: true, grp: true, onl: true },
  { level: 'Πανελλήνιες', ind: true, grp: true, onl: true },
  { level: 'Πανεπιστήμιο', ind: true, grp: false, onl: true }];


  return (
    <section id="services" className="section section--alt" ref={ref}>
      <div className={`container reveal ${vis ? 'visible' : ''}`}>
        <SectionHeader
          pre="Υπηρεσίες"
          title="Μαθήματα για κάθε ανάγκη"
          subtitle="Επιλέξτε τη μορφή που σας ταιριάζει"
          center />
        
        <div className="services__cards">
          {cards.map((c, i) =>
          <div key={i} className={`service-card reveal-d${i + 1}`}>
              <div className="service-card__icon">{c.icon}</div>
              <h3 className="service-card__title">{c.title}</h3>
              <div className="service-card__features">
                {c.features.map((f, j) =>
              <div key={j} className="service-card__feature">
                    <span className="service-card__check">✓</span>
                    <span>{f}</span>
                  </div>
              )}
              </div>
            </div>
          )}
        </div>
        <div className="services__comparison">
          <div className="services__compare-head">
            <div className="services__compare-label"></div>
            <div className="services__compare-col"><strong>Ατομικά</strong></div>
            <div className="services__compare-col"><strong>Ομαδικά</strong></div>
            <div className="services__compare-col"><strong>Online</strong></div>
          </div>
          {tableRows.map((r, i) =>
          <div key={i} className="services__compare-row">
              <div className="services__compare-label">{r.level}</div>
              <div className={`services__compare-cell ${r.ind ? 'services__compare-cell--yes' : ''}`}>
                {r.ind ? <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3"><polyline points="20 6 9 17 4 12" /></svg> : '—'}
              </div>
              <div className={`services__compare-cell ${r.grp ? 'services__compare-cell--yes' : ''}`}>
                {r.grp ? <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3"><polyline points="20 6 9 17 4 12" /></svg> : '—'}
              </div>
              <div className={`services__compare-cell ${r.onl ? 'services__compare-cell--yes' : ''}`}>
                {r.onl ? <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3"><polyline points="20 6 9 17 4 12" /></svg> : '—'}
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ── Materials ──────────────────────────────────────── */
function Materials() {
  const [ref, vis] = useReveal();
  const items = [
  { icon: <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" /><polyline points="14 2 14 8 20 8" /><line x1="16" y1="13" x2="8" y2="13" /><line x1="16" y1="17" x2="8" y2="17" /></svg>,
    title: 'Σημειώσεις & Θεωρία', desc: 'Αναλυτικές σημειώσεις για κάθε κεφάλαιο, γραμμένες με σαφήνεια και παραδείγματα.' },
  { icon: <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z" /><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z" /></svg>,
    title: 'Ασκήσεις & Προβλήματα', desc: 'Ιδιόχειρες ασκήσεις κλιμακούμενης δυσκολίας για εμβάθυνση και εξάσκηση.' },
  { icon: <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><rect x="4" y="2" width="16" height="20" /><line x1="8" y1="6" x2="16" y2="6" /><line x1="8" y1="10" x2="16" y2="10" /><line x1="8" y1="14" x2="12" y2="14" /></svg>,
    title: 'Τυπολόγια', desc: 'Συγκεντρωτικοί τύποι ανά ενότητα για γρήγορη αναφορά και επανάληψη.' },
  { icon: <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20" /><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z" /></svg>,
    title: 'Εκπαιδευτικά Βιβλία', desc: 'Ιδιόχειρα βιβλία Φυσικής — δωρεάν για τους μαθητές μου.' }];


  return (
    <section id="materials" className="section" ref={ref}>
      <div className={`container reveal ${vis ? 'visible' : ''}`}>
        <SectionHeader
          pre="Εκπαιδευτικό Υλικό"
          title={<React.Fragment><span className="silky-word">Δωρεάν</span> για τους μαθητές μας</React.Fragment>}
          subtitle="Ολοκληρωμένο υλικό γραμμένο από τον ίδιο τον καθηγητή"
          center />
        
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(220px, 1fr))', gap: '16px' }}>
          {items.map((m, i) =>
          <div key={i} className={`service-card reveal-d${i + 1}`}>
              <div className="service-card__icon">{m.icon}</div>
              <h3 className="service-card__title">{m.title}</h3>
              <p style={{ fontSize: '0.85rem', color: 'var(--text-sec)', lineHeight: 1.6 }}>{m.desc}</p>
            </div>
          )}
        </div>
        <div className="materials__cta">
          <a href="Εκπαιδευτικό Υλικό.html" className="btn btn--primary materials__cta-btn">Βιβλία</a>
          <a href="Ασκήσεις.html" className="btn btn--secondary materials__cta-btn">Ασκήσεις</a>
        </div>
      </div>
    </section>);

}

/*
 * ╔══════════════════════════════════════════════════════════════╗
 * ║  FAQ — ΕΔΙΤ ΕΔΩ ΤΙΣ ΕΡΩΤΗΣΕΙΣ                             ║
 * ║  Κάθε ερώτηση έχει: q: 'ερώτηση', a: 'απάντηση'             ║
 * ║  Πρόσθεσε νέα αντιγράφοντας ένα { q:..., a:... } block       ║
 * ╚══════════════════════════════════════════════════════════════╝
 */
function FAQ() {
  const [ref, vis] = useReveal();
  const [openIdx, setOpenIdx] = useState(null);
  const toggle = (i) => setOpenIdx(openIdx === i ? null : i);

  const items = [
  {
    q: 'Πώς γίνονται τα online μαθήματα;',
    a: 'Μέσω Zoom, με χρήση ψηφιακού πίνακα. Ο μαθητής χρειάζεται μόνο υπολογιστή ή tablet με σύνδεση στο internet.'
  },
  {
    q: 'Τι εκπαιδευτικό υλικό παρέχεται;',
    a: 'Σημειώσεις, ασκήσεις, τυπολόγια και εκπαιδευτικά βιβλία — όλα δωρεάν για τους μαθητές μου.'
  },
  {
    q: 'Πόσο διαρκεί ένα μάθημα;',
    a: 'Η διάρκεια είναι ευέλικτη και προσαρμόζεται στις ανάγκες του μαθητή, συνήθως 60–90 λεπτά.'
  },
  {
    q: 'Υπάρχει δοκιμαστικό μάθημα;',
    a: 'Ναι! Προσφέρεται δοκιμαστικό μάθημα σε ειδική τιμή, ώστε να γνωρίσετε τη μέθοδο διδασκαλίας πριν δεσμευτείτε.'
  },
  {
    q: 'Σε ποιες περιοχές γίνονται τα μαθήματα;',
    a: 'Δια ζώσης στη Νέα Μάκρη και την ευρύτερη Ανατολική Αττική. Online σε ολόκληρη την Ελλάδα.'
  },
  {
    q: 'Δίνεται υποστήριξη μεταξύ των μαθημάτων στους εκπαιδευόμενους;',
    a: 'Φυσικά! Η υποστήριξη σε ερωτήσεις και εργασίες μεταξύ μαθημάτων περιλαμβάνεται χωρίς επιπλέον κόστος.'
  }];


  return (
    <section id="faq" className="section section--alt" ref={ref} style={{ position: 'relative', overflow: 'hidden' }}>
      <svg className="faq-orbitals" viewBox="0 0 400 400" style={{ position: 'absolute', right: '-80px', top: '50%', transform: 'translateY(-50%)', width: '400px', height: '400px', opacity: 0.15, pointerEvents: 'none' }}>
        <g>
          <animateTransform attributeName="transform" type="rotate" from="0 200 200" to="360 200 200" dur="30s" repeatCount="indefinite" />
          <ellipse cx="200" cy="200" rx="180" ry="70" fill="none" stroke="#0A0A0A" strokeWidth="1.5" />
          <circle r="4" fill="#4338CA" opacity="0.9">
            <animateMotion dur="30s" repeatCount="indefinite" path="M380,200 A180,70 0 1,1 20,200 A180,70 0 1,1 380,200" />
          </circle>
        </g>
        <g>
          <animateTransform attributeName="transform" type="rotate" from="60 200 200" to="-300 200 200" dur="24s" repeatCount="indefinite" />
          <ellipse cx="200" cy="200" rx="140" ry="55" fill="none" stroke="#0A0A0A" strokeWidth="1.5" />
          <circle r="3.5" fill="#4338CA" opacity="0.9">
            <animateMotion dur="24s" repeatCount="indefinite" path="M340,200 A140,55 0 1,1 60,200 A140,55 0 1,1 340,200" />
          </circle>
        </g>
        <g>
          <animateTransform attributeName="transform" type="rotate" from="120 200 200" to="480 200 200" dur="18s" repeatCount="indefinite" />
          <ellipse cx="200" cy="200" rx="100" ry="40" fill="none" stroke="#0A0A0A" strokeWidth="1.5" />
          <circle r="3" fill="#4338CA" opacity="0.9">
            <animateMotion dur="18s" repeatCount="indefinite" path="M300,200 A100,40 0 1,1 100,200 A100,40 0 1,1 300,200" />
          </circle>
        </g>
        <circle cx="200" cy="200" r="5" fill="#0A0A0A">
          <animate attributeName="r" values="4;7;4" dur="0.6s" repeatCount="indefinite" />
          <animate attributeName="cx" values="198;202;200;198" dur="0.4s" repeatCount="indefinite" />
          <animate attributeName="cy" values="198;201;199;202;198" dur="0.5s" repeatCount="indefinite" />
        </circle>
      </svg>
      <div className={`container reveal ${vis ? 'visible' : ''}`}>
        <SectionHeader pre="FAQ" title="Συχνές Ερωτήσεις" center />
        <div className="faq__list">
          {items.map((item, i) =>
          <div key={i} className={`faq-item ${openIdx === i ? 'faq-item--open' : ''}`}>
              <button className="faq-item__q" onClick={() => toggle(i)}>
                <span>{item.q}</span>
                <span className="faq-item__icon">+</span>
              </button>
              <div className="faq-item__a">
                <p>{item.a}</p>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/*
 * ╔══ ΕΠΙΚΟΙΝΩΝΙΑ — ΕΔΙΤ ΕΔΩ ΤΑ ΣΤΟΙΧΕΙΑ ΕΠΙΚΟΙΝΩΝΙΑΣ ══╗
 * ║  Άλλαξε τηλέφωνο, email, διεύθυνση, ωράριο   ║
 * ╚══════════════════════════════════════════╝
 */
function Contact() {
  return (
    <section id="contact" className="section">
      <div className="container">
        <SectionHeader
          pre="Επικοινωνία"
          title="Κλείστε το πρώτο σας μάθημα"
          subtitle="Επικοινωνήστε μαζί μας για να ξεκινήσετε" />
        
        <div className="contact__grid">
          <div>
            <div className="contact__items">
              <div className="contact-item">
                <div className="contact-item__icon">
                  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.79 19.79 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z" /></svg>
                </div>
                <div>
                  <div className="contact-item__label">Τηλέφωνο</div>
                  <div className="contact-item__value">
                    <a href="tel:+306977467660">+30 697 746 7660</a>
                  </div>
                </div>
              </div>
              <div className="contact-item">
                <div className="contact-item__icon">
                  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" /><polyline points="22,6 12,13 2,6" /></svg>
                </div>
                <div>
                  <div className="contact-item__label">Email</div>
                  <div className="contact-item__value">
                    <a href="mailto:nknd@hotmail.gr">nknd@hotmail.gr</a>
                  </div>
                </div>
              </div>
              <div className="contact-item">
                <div className="contact-item__icon">
                  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" /><circle cx="12" cy="10" r="3" /></svg>
                </div>
                <div>
                  <div className="contact-item__label">Διεύθυνση</div>
                  <div className="contact-item__value">Λεωφόρος Μαραθώνος 116<br />1ος Όροφος, Νέα Μάκρη</div>
                </div>
              </div>
              <div className="contact-item">
                <div className="contact-item__icon">
                  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><rect x="3" y="4" width="18" height="18" rx="0" /><line x1="3" y1="10" x2="21" y2="10" /><line x1="9" y1="4" x2="9" y2="10" /><line x1="15" y1="4" x2="15" y2="10" /></svg>
                </div>
                <div>
                  <div className="contact-item__label">Ωράριο</div>
                  <div className="contact-item__value">Δευτέρα — Σάββατο</div>
                </div>
              </div>
            </div>
          </div>
          <div className="contact__map">
            <iframe
              src="https://maps.google.com/maps?q=%CE%9B%CE%B5%CF%89%CF%86%CF%8C%CF%81%CE%BF%CF%82+%CE%9C%CE%B1%CF%81%CE%B1%CE%B8%CF%8E%CE%BD%CE%BF%CF%82+116+19005+%CE%9D%CE%AD%CE%B1+%CE%9C%CE%AC%CE%BA%CF%81%CE%B7+%CE%91%CF%84%CF%84%CE%B9%CE%BA%CE%AE&t=&z=17&ie=UTF8&iwloc=&output=embed"
              loading="lazy"
              allowFullScreen=""
              title="Χάρτης">
            </iframe>
          </div>
        </div>
      </div>
    </section>);

}

/*
 * ╔══ FOOTER — ΕΔΙΤ ΕΔΩ ΤΑ SOCIAL LINKS ═════════════╗
 * ║  Άλλαξε τα URLs στο href:, πρόσθεσε/αφαίρεσε    ║
 * ╚══════════════════════════════════════════╝
 */
function Footer() {
  const socials = [
  { label: 'Facebook', href: 'https://www.facebook.com/groups/2969110769839107' },
  { label: 'Instagram', href: '#' },
  { label: 'LinkedIn', href: '#' },
  { label: 'TikTok', href: '#' }];

  return (
    <footer className="footer">
      <div className="container footer__inner">
        <a href="index.html" className="footer__brand">
          <img src="uploads/logo-1780515191648.png" alt="" />
          <span>Φυσική Λυκείου — Γυμνασίου Ν. Κ.</span>
        </a>
        <div className="footer__links">
          <a href="Ασκήσεις.html" className="footer__link">Ασκήσεις</a>
          {socials.map((s) =>
          <a key={s.label} href={s.href} className="footer__link" target="_blank" rel="noopener noreferrer">
              {s.label}
            </a>
          )}
        </div>
        <div className="footer__copy">
          © 2026 Νίκος Α. Κυριάκος — Φυσική Λυκείου & Γυμνασίου. Νέα Μάκρη, Αττική.
        </div>
      </div>
    </footer>);

}

/* ── Gallery ────────────────────────────────────────── */
function Gallery() {
  const [ref, vis] = useReveal();
  const [current, setCurrent] = useState(0);

  const slides = [
  { label: 'teaching photo 1' },
  { label: 'classroom photo' },
  { label: 'teaching photo 2' },
  { label: 'office / workspace' },
  { label: 'students at work' },
  { label: 'whiteboard session' }];


  const total = slides.length;
  const prev = () => setCurrent((c) => (c - 1 + total) % total);
  const next = () => setCurrent((c) => (c + 1) % total);

  return (
    <section id="gallery" className="section" ref={ref}>
      <div className={`container reveal ${vis ? 'visible' : ''}`}>
        <SectionHeader
          pre="Φωτογραφίες"
          title="Ο χώρος μας"
          subtitle="Στιγμιότυπα από τη διδασκαλία και τον χώρο μαθημάτων"
          center />
        
        <div className="gallery__track-wrap">
          <button className="gallery__arrow gallery__arrow--prev" onClick={prev} aria-label="Previous">&#8249;</button>
          <button className="gallery__arrow gallery__arrow--next" onClick={next} aria-label="Next">&#8250;</button>
          <div className="gallery__track" style={{ transform: `translateX(-${current * 100}%)` }}>
            {slides.map((s, i) =>
            <div key={i} className="gallery__slide">
                <div className="gallery__slide-placeholder">
                  <svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" style={{ opacity: 0.25 }}>
                    <rect x="2" y="3" width="20" height="18" rx="2" />
                    <circle cx="8" cy="10" r="2" />
                    <path d="M22 15l-5-5L5 21" />
                  </svg>
                  <span>{s.label}</span>
                </div>
              </div>
            )}
          </div>
        </div>
        <div className="gallery__dots">
          {slides.map((_, i) =>
          <button
            key={i}
            className={`gallery__dot ${i === current ? 'gallery__dot--active' : ''}`}
            onClick={() => setCurrent(i)}
            aria-label={`Slide ${i + 1}`} />

          )}
        </div>
        <div className="gallery__grid">
          {slides.map((s, i) =>
          <div
            key={i}
            className={`gallery__thumb ${i === current ? 'gallery__thumb--active' : ''}`}
            onClick={() => setCurrent(i)}>
            
              <span className="gallery__thumb-placeholder">{s.label}</span>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ── Export to window ───────────────────────────────── */
/* Snake border wrapper component */
function SnakeBtn({ href, className, children }) {
  const wrapRef = useRef(null);
  const [dims, setDims] = useState({ w: 0, h: 0, perim: 0 });
  useEffect(() => {
    const el = wrapRef.current;
    if (!el) return;
    const measure = () => {
      const w = el.offsetWidth + 14;
      const h = el.offsetHeight + 14;
      setDims({ w, h, perim: 2 * (w + h) });
    };
    measure();
    window.addEventListener('resize', measure);
    return () => window.removeEventListener('resize', measure);
  }, []);
  /* Use a closed path so head and tail share the exact same vertex */
  const d = dims.w > 0 ?
  `M1,1 L${dims.w - 1},1 L${dims.w - 1},${dims.h - 1} L1,${dims.h - 1} Z` :
  '';
  return (
    <span className="snake-wrap" ref={wrapRef}>
      <a href={href} className={className}>{children}</a>
      {dims.perim > 0 &&
      <svg className="snake-svg" width={dims.w} height={dims.h} viewBox={`0 0 ${dims.w} ${dims.h}`}>
          <path d={d}
        strokeLinejoin="miter" strokeLinecap="square"
        style={{
          strokeDasharray: dims.perim + 2,
          strokeDashoffset: dims.perim + 2
        }} />
        </svg>
      }
    </span>);

}

Object.assign(window, {
  useReveal, SectionHeader, SnakeBtn,
  Navbar, Hero, StatsBar, About, Services, Materials, FAQ, Contact, Footer, Gallery
});