// NRGROUP — Page content (Αρχική, Υπηρεσίες, Έργα, Επικοινωνία)

const SERVICES = [
  {
    id: "ydraulika",
    icon: "Plumbing",
    title: "Υδραυλικές Εργασίες",
    short: "Επισκευές, εγκαταστάσεις και αντικαταστάσεις από έμπειρους υδραυλικούς.",
    full: "Αναλαμβάνουμε πλήρως όλες τις υδραυλικές εργασίες σε κατοικίες, διαμερίσματα και επαγγελματικούς χώρους. Από μικρές επισκευές έως ολοκληρωμένες εγκαταστάσεις, με υλικά εγγυημένης ποιότητας και τεχνικούς που γνωρίζουν τη δουλειά τους.",
    bullets: ["Επισκευή διαρροών", "Αντικατάσταση σωληνώσεων", "Μπαταρίες & καζανάκια", "Αποχετευτικά δίκτυα", "Θερμοσίφωνες"]
  },
  {
    id: "fysiko-aerio",
    icon: "Gas",
    title: "Φυσικό Αέριο",
    short: "Μελέτη, εγκατάσταση και σύνδεση φυσικού αερίου, με νόμιμα παραστατικά.",
    full: "Εγκαταστάσεις φυσικού αερίου από αδειούχους εγκαταστάτες — από τη μελέτη μέχρι την ενεργοποίηση. Αλλαγή από πετρέλαιο σε αέριο με σωστή διαστασιολόγηση και πλήρη φάκελο για τη ΔΕΠΑ.",
    bullets: ["Μελέτη εγκατάστασης", "Σωληνώσεις & συνδέσεις", "Αλλαγή από πετρέλαιο", "Φάκελος ΔΕΠΑ", "Έλεγχοι στεγανότητας"]
  },
  {
    id: "thermansi",
    icon: "Flame",
    title: "Θέρμανση & Καυστήρες",
    short: "Συντήρηση, καθαρισμός και αντικατάσταση λεβήτων και καυστήρων.",
    full: "Φροντίζουμε τη θέρμανση του χώρου σας όλο τον χρόνο — από την ετήσια συντήρηση έως την αντικατάσταση παλιού εξοπλισμού με σύγχρονο, οικονομικότερο. Επεμβαίνουμε άμεσα όταν χαλάει το λεβητοστάσιο τον χειμώνα.",
    bullets: ["Συντήρηση & καθαρισμός", "Φύλλο ελέγχου καύσης", "Αντικατάσταση καυστήρα", "Αντικατάσταση λέβητα", "Ενδοδαπέδια θέρμανση"]
  },
  {
    id: "24-7",
    icon: "Bolt",
    title: "Έκτακτες Επεμβάσεις 24/7",
    short: "Άμεση ανταπόκριση σε διαρροές, εμφράξεις και βλάβες, όλο το 24ωρο.",
    full: "Όταν η ζημιά δεν μπορεί να περιμένει, το συνεργείο μας έρχεται. Σε οποιαδήποτε περιοχή της Αττικής, οποιαδήποτε ώρα — με τον εξοπλισμό που χρειάζεται για να λυθεί το πρόβλημα επί τόπου.",
    bullets: ["Διαρροές νερού", "Σπασμένη σωλήνα", "Έμφραξη αποχέτευσης", "Λέβητας χωρίς θέρμανση", "Διαρροή αερίου"]
  },
  {
    id: "anakainiseis",
    icon: "Hammer",
    title: "Ανακαινίσεις",
    short: "Μερικές και ολικές ανακαινίσεις σπιτιών και καταστημάτων από ένα συνεργείο.",
    full: "Συντονίζουμε όλο το έργο για εσάς — υδραυλικά, ηλεκτρολογικά, χρωματισμούς, πλακάκια, κουφώματα. Ένας υπεύθυνος, ένα χρονοδιάγραμμα, ένας προϋπολογισμός. Χωρίς εκπλήξεις.",
    bullets: ["Ολική ανακαίνιση", "Ανακαίνιση μπάνιου", "Ανακαίνιση κουζίνας", "Επαγγελματικοί χώροι", "Διαχείριση έργου"]
  },
  {
    id: "plakakia",
    icon: "Tile",
    title: "Πλακάκια & Δάπεδα",
    short: "Τοποθέτηση πλακιδίων, laminate, παρκέ και βιομηχανικών δαπέδων.",
    full: "Άψογο φινίρισμα και σωστή προετοιμασία υποστρώματος. Συνεργαζόμαστε με τους πιο γνωστούς προμηθευτές, οπότε μπορούμε να σας προτείνουμε υλικά μέσα στον προϋπολογισμό σας.",
    bullets: ["Πλακάκια μπάνιου & κουζίνας", "Laminate & παρκέ", "Βιομηχανικά δάπεδα", "Προετοιμασία υποστρώματος", "Αρμολόγηση"]
  },
  {
    id: "aluminium",
    icon: "Frame",
    title: "Αλουμινοκατασκευές",
    short: "Ενεργειακά κουφώματα αλουμινίου και συστήματα σκίασης.",
    full: "Σύγχρονα κουφώματα που μειώνουν το κόστος θέρμανσης και ψύξης. Μετράμε, παράγουμε και τοποθετούμε με προσοχή στη λεπτομέρεια.",
    bullets: ["Κουφώματα αλουμινίου", "Ενεργειακά κουφώματα", "Συστήματα σκίασης", "Ρολά & σήτες", "Πόρτες ασφαλείας"]
  },
  {
    id: "loipa",
    icon: "Bolt",
    title: "Συμπληρωματικές Εργασίες",
    short: "Ηλεκτρολογικά, κλιματισμός, ελαιοχρωματισμοί, μονώσεις, ηλιακά, πυρόσβεση.",
    full: "Μέσα από το δίκτυο συνεργατών μας καλύπτουμε κάθε ανάγκη που μπορεί να προκύψει στον χώρο σας — με τους ίδιους κανόνες ποιότητας και υπευθυνότητας.",
    bullets: ["Ηλεκτρολογικά", "Κλιματισμός", "Γύψινες κατασκευές", "Ελαιοχρωματισμοί", "Ξυλουργικά", "Μονώσεις", "Ηλιακά", "Πυρόσβεση"]
  }
];

const PROJECTS = [
  { tag: "Ανακαίνιση", title: "Ανακαίνιση μπάνιου", area: "Πειραιάς", desc: "Πλήρης ανακαίνιση με νέα υδραυλικά, πλακίδια και είδη υγιεινής.", img: "assets/project-bath-1.webp" },
  { tag: "Ανακαίνιση", title: "Μπάνιο με ντουζιέρα", area: "Νέα Σμύρνη", desc: "Σύγχρονο μπάνιο με κρυστάλλινη καμπίνα και νέα υδραυλικά δίκτυα.", img: "assets/project-bath-2.webp" },
  { tag: "Ανακαίνιση", title: "Premium ανακαίνιση WC", area: "Άλιμος", desc: "Υψηλής αισθητικής μπάνιο με marble look πλακίδια και φωτισμό LED.", img: "assets/project-bath-3.webp" },
  { tag: "Υδραυλικά", title: "Εγκατάσταση δικτύου", area: "Κερατσίνι", desc: "Νέο δίκτυο σωληνώσεων σε WC με συλλέκτες, βάνες και πιεστικό.", img: "assets/project-install-plumbing.webp" },
  { tag: "Επισκευή", title: "Αντικατάσταση μπαταρίας", area: "Πειραιάς", desc: "Άμεση αντικατάσταση μπαταρίας κουζίνας με δοκιμή πίεσης και στεγανότητας.", img: "assets/project-fix-faucet.webp" },
  { tag: "Έκτακτο", title: "Επισκευή διαρροής", area: "Φάληρο", desc: "Εντοπισμός και αποκατάσταση κρυφής διαρροής κάτω από νεροχύτη.", img: "assets/project-leak-fix.webp" }
];

window.SERVICES = SERVICES;
window.PROJECTS = PROJECTS;

/* ============================================================ */
/*  HOME PAGE                                                   */
/* ============================================================ */
function HomePage() {
  const navTo = window.navTo;
  return (
    <React.Fragment>
      <section className="hero">
        <div className="container">
          <div className="hero-grid">
            <div className="hero-left">
              <div className="section-eyebrow">
                <span className="pip" />
                Τεχνική εταιρία · Από το 2008
              </div>
              <h1>
                Υδραυλικά, Αέριο &amp; Ανακαινίσεις, <span className="accent">σωστά από την πρώτη φορά.</span>
              </h1>
              <p className="lede">
                Ολοκληρωμένες λύσεις για το σπίτι ή την επιχείρησή σας — από έναν αξιόπιστο συνεργάτη.
                Άμεση ανταπόκριση σε όλη την Αττική, με νόμιμα παραστατικά και εγγύηση εργασίας.
              </p>
              <div className="hero-ctas">
                <a className="btn primary lg" href="#/contact" onClick={(e) => { e.preventDefault(); navTo("contact"); }}>
                  Ζητήστε εκτίμηση <Icon.ArrowRight />
                </a>
                <a className="btn outline lg" href={`tel:${NRGROUP_INFO.phones[0]}`}>
                  <Icon.Phone /> {NRGROUP_INFO.phones[0]}
                </a>
              </div>
              <div className="hero-meta">
                <div className="stat"><b>15+</b><span>χρόνια εμπειρίας</span></div>
                <div className="stat"><b>24/7</b><span>έκτακτες κλήσεις</span></div>
                <div className="stat"><b>2.500+</b><span>ολοκληρωμένα έργα</span></div>
              </div>
            </div>
            <div className="hero-right">
              <div className="hero-card">
                <img src="assets/hero.webp" alt="NRGROUP τεχνικές υπηρεσίες — υδραυλικά" className="hero-photo" />
                <div className="badge-floating top-right">
                  <div className="dot" />
                  <div>
                    <b>Διαθέσιμοι τώρα</b>
                    <span>Μέσος χρόνος άφιξης &lt; 90'</span>
                  </div>
                </div>
                <div className="badge-floating bottom-left">
                  <Icon.Shield style={{color: 'var(--brand)'}}/>
                  <div>
                    <b>Νόμιμα παραστατικά</b>
                    <span>Εγγύηση εργασίας</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <div className="trust-strip">
        <div className="container">
          <div className="trust-row">
            <div className="item"><Icon.Check /> Αδειούχοι εγκαταστάτες</div>
            <div className="item"><Icon.Check /> Άμεση ανταπόκριση</div>
            <div className="item"><Icon.Check /> Δωρεάν εκτίμηση</div>
            <div className="item"><Icon.Check /> Καθαρές τιμές</div>
            <div className="item"><Icon.Check /> Όλη η Αττική</div>
          </div>
        </div>
      </div>

      <section className="section">
        <div className="container">
          <div className="section-head">
            <div className="left">
              <div className="section-eyebrow"><span className="pip" />Υπηρεσίες</div>
              <h2>Ένα συνεργείο για όλη την τεχνική σας ανάγκη</h2>
              <p>Από μια διαρροή στο μπάνιο, μέχρι μια ολική ανακαίνιση. Συντονισμένα, με ένα υπεύθυνο και ένα τιμολόγιο.</p>
            </div>
            <a className="btn outline" href="#/services" onClick={(e) => { e.preventDefault(); navTo("services"); }}>
              Όλες οι υπηρεσίες <Icon.ArrowRight />
            </a>
          </div>

          <div className="services-grid">
            {SERVICES.slice(0, 6).map((s, i) => {
              const I = Icon[s.icon];
              const featured = i === 3; // emergency
              return (
                <a key={s.id} className={`service-card ${featured ? 'feature' : ''}`} href="#/services" onClick={(e) => { e.preventDefault(); navTo("services"); }}>
                  <div className="ico">{I && <I />}</div>
                  <h3>{s.title}</h3>
                  <p>{s.short}</p>
                  <span className="arrow">Μάθετε περισσότερα <Icon.ArrowRight /></span>
                </a>
              );
            })}
          </div>
        </div>
      </section>

      <section className="section" style={{ paddingTop: 0 }}>
        <div className="container">
          <div className="emergency">
            <div>
              <div className="pulse"><span className="dot" />Επείγον; Καλέστε άμεσα</div>
              <h2>Διαρροή, ζημιά ή λέβητας εκτός λειτουργίας;</h2>
              <p>
                Δεν περιμένει. Το συνεργείο μας ανταποκρίνεται 24 ώρες το 24ωρο,
                7 ημέρες την εβδομάδα, σε όλη την Αττική.
              </p>
            </div>
            <div className="phone-call">
              <span style={{ color: 'rgba(255,255,255,.6)', fontSize: 13, fontWeight: 600 }}>Άμεση γραμμή</span>
              <a href={`tel:${NRGROUP_INFO.phones[0]}`} className="phone-num">{NRGROUP_INFO.phones[0]}</a>
              <a className="btn brand" href={`tel:${NRGROUP_INFO.phones[0]}`}>
                <Icon.Phone /> Κλήση τώρα
              </a>
            </div>
          </div>
        </div>
      </section>

      <section className="section" style={{ background: 'var(--bg-soft)' }}>
        <div className="container">
          <div className="section-head">
            <div className="left">
              <div className="section-eyebrow"><span className="pip" />Πώς δουλεύουμε</div>
              <h2>Απλή, καθαρή διαδικασία</h2>
              <p>Χωρίς εκπλήξεις στο τέλος. Τα συμφωνημένα και τίποτα παραπάνω.</p>
            </div>
          </div>
          <div className="process-grid">
            <div className="step">
              <span className="num">01</span>
              <h4>Επικοινωνία</h4>
              <p>Μας καλείτε ή συμπληρώνετε φόρμα. Ο βοηθός μας μπορεί να ξεκινήσει αμέσως τη συνομιλία.</p>
            </div>
            <div className="step">
              <span className="num">02</span>
              <h4>Επιτόπια εκτίμηση</h4>
              <p>Επισκεπτόμαστε τον χώρο, αξιολογούμε την εργασία και σας δίνουμε καθαρή προσφορά.</p>
            </div>
            <div className="step">
              <span className="num">03</span>
              <h4>Εκτέλεση</h4>
              <p>Συντονισμένο συνεργείο, χρονοδιάγραμμα και καθαρός χώρος εργασίας.</p>
            </div>
            <div className="step">
              <span className="num">04</span>
              <h4>Παράδοση</h4>
              <p>Έλεγχος, νόμιμα παραστατικά και εγγύηση εργασίας. Είμαστε εδώ μετά την παράδοση.</p>
            </div>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="cta-strip">
            <div>
              <h2>Έτοιμοι να ξεκινήσουμε;</h2>
              <p style={{ marginTop: 14, maxWidth: '46ch' }}>
                Πείτε μας τι θέλετε να φτιάξετε. Θα σας απαντήσουμε με δωρεάν εκτίμηση και χρονοδιάγραμμα.
              </p>
            </div>
            <div className="right">
              <a className="btn primary lg" href="#/contact" onClick={(e) => { e.preventDefault(); navTo("contact"); }}>
                Φόρμα επικοινωνίας <Icon.ArrowRight />
              </a>
              <a className="btn outline lg" href={`mailto:${NRGROUP_INFO.email}`}>
                <Icon.Mail /> {NRGROUP_INFO.email}
              </a>
            </div>
          </div>
        </div>
      </section>
    </React.Fragment>
  );
}

/* ============================================================ */
/*  SERVICES PAGE                                               */
/* ============================================================ */
function ServicesPage() {
  const navTo = window.navTo;
  return (
    <React.Fragment>
      <section className="page-head">
        <div className="container">
          <div className="crumbs">
            <a href="#/" onClick={(e) => { e.preventDefault(); navTo("home"); }}>Αρχική</a> / Υπηρεσίες
          </div>
          <h1>Υπηρεσίες</h1>
          <p>Καλύπτουμε όλο το τεχνικό κομμάτι ενός χώρου με ένα συντονισμένο συνεργείο. Κάθε υπηρεσία εκτελείται από αδειούχους τεχνικούς, με υλικά εγγυημένης ποιότητας και νόμιμα παραστατικά.</p>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="services-detailed">
            {SERVICES.map((s, i) => {
              const I = Icon[s.icon];
              return (
                <div key={s.id} className="service-row" id={s.id}>
                  <div>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                      <div className="ico" style={{ width: 44, height: 44, borderRadius: 12, background: 'rgba(27,156,218,.12)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', color: 'var(--brand)' }}>
                        {I && <I />}
                      </div>
                      <span className="num">0{i + 1}</span>
                    </div>
                    <h3 style={{ marginTop: 14 }}>{s.title}</h3>
                  </div>
                  <div>
                    <p>{s.full}</p>
                    <div className="tags">
                      {s.bullets.map((b, k) => <span key={k} className="tag-pill">{b}</span>)}
                    </div>
                  </div>
                  <div>
                    <a className="btn outline" href="#/contact" onClick={(e) => { e.preventDefault(); navTo("contact"); }}>
                      Ζητήστε προσφορά <Icon.ArrowRight />
                    </a>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </section>

      <section className="section" style={{ paddingTop: 0 }}>
        <div className="container">
          <div className="emergency">
            <div>
              <div className="pulse"><span className="dot" />24/7</div>
              <h2>Δεν είστε σίγουρος ποια υπηρεσία χρειάζεστε;</h2>
              <p>Καλέστε μας. Σε λίγα λεπτά συνομιλίας θα ξέρουμε τι ακριβώς χρειάζεται ο χώρος σας και πόσο θα κοστίσει.</p>
            </div>
            <div className="phone-call">
              <span style={{ color: 'rgba(255,255,255,.6)', fontSize: 13, fontWeight: 600 }}>Άμεση γραμμή</span>
              <a href={`tel:${NRGROUP_INFO.phones[0]}`} className="phone-num">{NRGROUP_INFO.phones[0]}</a>
              <a className="btn brand" href={`tel:${NRGROUP_INFO.phones[0]}`}>
                <Icon.Phone /> Κλήση τώρα
              </a>
            </div>
          </div>
        </div>
      </section>
    </React.Fragment>
  );
}

/* ============================================================ */
/*  PROJECTS PAGE                                               */
/* ============================================================ */
function ProjectsPage() {
  const navTo = window.navTo;
  return (
    <React.Fragment>
      <section className="page-head">
        <div className="container">
          <div className="crumbs">
            <a href="#/" onClick={(e) => { e.preventDefault(); navTo("home"); }}>Αρχική</a> / Έργα
          </div>
          <h1>Έργα μας</h1>
          <p>Ένα δείγμα πρόσφατων έργων σε όλη την Αττική. Για περισσότερες φωτογραφίες, επισκεφθείτε τη σελίδα μας στο Facebook ή επικοινωνήστε μαζί μας.</p>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="projects-grid">
            {PROJECTS.map((p, i) => (
              <div key={i} className="project">
                <div className="thumb">
                  {p.img ? <img src={p.img} alt={p.title} className="thumb-img" /> : "// φωτογραφία έργου"}
                </div>
                <div className="body">
                  <span className="tag">{p.tag} · {p.area}</span>
                  <h4>{p.title}</h4>
                  <p>{p.desc}</p>
                </div>
              </div>
            ))}
          </div>

          <div style={{ marginTop: 64 }}>
            <div className="cta-strip">
              <div>
                <h2>Θέλετε κι εσείς ένα τέτοιο αποτέλεσμα;</h2>
                <p style={{ marginTop: 14 }}>Επικοινωνήστε μαζί μας για δωρεάν εκτίμηση και χρονοδιάγραμμα. Θα μιλήσει μαζί σας ο υπεύθυνος του έργου, όχι μόνο πωλητής.</p>
              </div>
              <div className="right">
                <a className="btn primary lg" href="#/contact" onClick={(e) => { e.preventDefault(); navTo("contact"); }}>
                  Ζητήστε προσφορά <Icon.ArrowRight />
                </a>
                <a className="btn outline lg" href={NRGROUP_INFO.facebook} target="_blank" rel="noopener">
                  <Icon.Facebook /> Δείτε μας στο Facebook
                </a>
              </div>
            </div>
          </div>
        </div>
      </section>
    </React.Fragment>
  );
}

/* ============================================================ */
/*  CONTACT PAGE                                                */
/* ============================================================ */
function ContactPage() {
  const [form, setForm] = React.useState({
    name: "", phone: "", email: "", service: "", message: ""
  });
  const [sent, setSent] = React.useState(false);

  function onSubmit(e) {
    e.preventDefault();
    // Build a mailto so the user's email client opens with pre-filled body —
    // works without backend. In production with Plesk, swap to a real form
    // endpoint (PHP mail/SMTP) — see DEPLOY.md.
    const body =
      `Όνομα: ${form.name}\n` +
      `Τηλέφωνο: ${form.phone}\n` +
      `Email: ${form.email}\n` +
      `Υπηρεσία: ${form.service}\n\n` +
      `Μήνυμα:\n${form.message}`;
    const url = `mailto:${NRGROUP_INFO.email}?subject=${encodeURIComponent("Αίτημα από το nrgroup.gr — " + (form.service || "Γενικό"))}&body=${encodeURIComponent(body)}`;
    window.location.href = url;
    setSent(true);
  }

  return (
    <React.Fragment>
      <section className="page-head">
        <div className="container">
          <div className="crumbs">
            <a href="#/" onClick={(e) => { e.preventDefault(); window.navTo("home"); }}>Αρχική</a> / Επικοινωνία
          </div>
          <h1>Επικοινωνία</h1>
          <p>Καλέστε μας, στείλτε email ή συμπληρώστε τη φόρμα. Για επείγοντα, η γραμμή 24/7 είναι πάντα διαθέσιμη.</p>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="contact-grid">
            <div className="contact-card">
              <h3 style={{ fontSize: 22, marginBottom: 24 }}>Στοιχεία επικοινωνίας</h3>
              <div className="contact-list">
                <div className="contact-item">
                  <div className="ico"><Icon.Phone /></div>
                  <div>
                    <div className="label">Τηλέφωνο</div>
                    <div className="value">
                      <a href={`tel:${NRGROUP_INFO.phones[0]}`}>{NRGROUP_INFO.phones[0]}</a>
                      {" · "}
                      <a href={`tel:${NRGROUP_INFO.phones[1]}`}>{NRGROUP_INFO.phones[1]}</a>
                    </div>
                    <div className="sub">24/7 για επείγοντα · Καθημερινές 08:00-20:00 για ραντεβού</div>
                  </div>
                </div>
                <div className="contact-item">
                  <div className="ico"><Icon.Mail /></div>
                  <div>
                    <div className="label">Email</div>
                    <div className="value"><a href={`mailto:${NRGROUP_INFO.email}`}>{NRGROUP_INFO.email}</a></div>
                    <div className="sub">Απαντάμε εντός 24 ωρών</div>
                  </div>
                </div>
                <div className="contact-item">
                  <div className="ico"><Icon.MapPin /></div>
                  <div>
                    <div className="label">Έδρα</div>
                    <div className="value">{NRGROUP_INFO.address}</div>
                    <div className="sub">Εξυπηρετούμε όλη την Αττική</div>
                  </div>
                </div>
                <div className="contact-item">
                  <div className="ico"><Icon.Clock /></div>
                  <div>
                    <div className="label">Ωράριο</div>
                    <div className="value" style={{ fontSize: 15 }}>Δευτέρα–Σάββατο 08:00–20:00</div>
                    <div className="sub">Έκτακτα περιστατικά: όλο το 24ωρο</div>
                  </div>
                </div>
                <div className="contact-item">
                  <div className="ico"><Icon.Facebook /></div>
                  <div>
                    <div className="label">Social</div>
                    <div className="value"><a href={NRGROUP_INFO.facebook} target="_blank" rel="noopener">facebook.com/nrgroup.gr</a></div>
                  </div>
                </div>
              </div>
            </div>

            <div className="contact-card">
              <h3 style={{ fontSize: 22, marginBottom: 8 }}>Φόρμα επικοινωνίας</h3>
              <p style={{ fontSize: 14, marginBottom: 20 }}>Συμπληρώστε τη φόρμα και θα σας καλέσουμε εντός λίγων ωρών.</p>

              {sent ? (
                <div style={{ padding: 24, background: 'rgba(132,195,65,.10)', border: '1px solid rgba(132,195,65,.35)', borderRadius: 12 }}>
                  <h4 style={{ marginBottom: 8, color: 'var(--brand-2)' }}>Έτοιμο!</h4>
                  <p style={{ fontSize: 14 }}>Το μήνυμα ανοίγει στο email σας. Πατήστε «Αποστολή» στο πρόγραμμα email για να ολοκληρώσετε. Ή καλέστε μας απευθείας στο {NRGROUP_INFO.phones[0]}.</p>
                  <button className="btn outline" style={{ marginTop: 16 }} onClick={() => { setSent(false); setForm({ name: "", phone: "", email: "", service: "", message: "" }); }}>Νέα αποστολή</button>
                </div>
              ) : (
                <form className="contact-form" onSubmit={onSubmit}>
                  <div className="form-row">
                    <div className="field">
                      <label htmlFor="name">Ονοματεπώνυμο</label>
                      <input id="name" required value={form.name} onChange={e => setForm({...form, name: e.target.value})} placeholder="π.χ. Γιώργος Παπαδόπουλος" />
                    </div>
                    <div className="field">
                      <label htmlFor="phone">Τηλέφωνο</label>
                      <input id="phone" required type="tel" value={form.phone} onChange={e => setForm({...form, phone: e.target.value})} placeholder="69xxxxxxxx" />
                    </div>
                  </div>
                  <div className="field">
                    <label htmlFor="email">Email (προαιρετικό)</label>
                    <input id="email" type="email" value={form.email} onChange={e => setForm({...form, email: e.target.value})} placeholder="you@example.com" />
                  </div>
                  <div className="field">
                    <label htmlFor="service">Υπηρεσία</label>
                    <select id="service" value={form.service} onChange={e => setForm({...form, service: e.target.value})}>
                      <option value="">Επιλέξτε υπηρεσία...</option>
                      {SERVICES.map(s => <option key={s.id} value={s.title}>{s.title}</option>)}
                      <option value="Άλλο">Άλλο / Δεν είμαι σίγουρος</option>
                    </select>
                  </div>
                  <div className="field">
                    <label htmlFor="message">Μήνυμα / Περιγραφή</label>
                    <textarea id="message" required rows={5} value={form.message} onChange={e => setForm({...form, message: e.target.value})} placeholder="Περιγράψτε σύντομα τι χρειάζεστε..."></textarea>
                  </div>
                  <p className="form-note">Για επείγοντα, καλέστε άμεσα στο {NRGROUP_INFO.phones[0]} (24/7).</p>
                  <button type="submit" className="btn primary lg">
                    Αποστολή <Icon.ArrowRight />
                  </button>
                </form>
              )}
            </div>
          </div>
        </div>
      </section>
    </React.Fragment>
  );
}

window.HomePage = HomePage;
window.ServicesPage = ServicesPage;
window.ProjectsPage = ProjectsPage;
window.ContactPage = ContactPage;