// NRGROUP — App shell, routing, header, footer

const ROUTES = {
  home: { hash: "#/", label: "Αρχική", Component: () => <HomePage /> },
  services: { hash: "#/services", label: "Υπηρεσίες", Component: () => <ServicesPage /> },
  projects: { hash: "#/projects", label: "Έργα", Component: () => <ProjectsPage /> },
  contact: { hash: "#/contact", label: "Επικοινωνία", Component: () => <ContactPage /> },
};

function getRouteFromHash() {
  const h = window.location.hash || "#/";
  const found = Object.entries(ROUTES).find(([, r]) => r.hash === h);
  return found ? found[0] : "home";
}

function navTo(route) {
  window.location.hash = ROUTES[route].hash;
  window.scrollTo({ top: 0, behavior: "instant" });
}
window.navTo = navTo;

function Header({ current }) {
  const [open, setOpen] = React.useState(false);
  const navItems = [
    { key: "home", label: "Αρχική" },
    { key: "services", label: "Υπηρεσίες" },
    { key: "projects", label: "Έργα" },
    { key: "contact", label: "Επικοινωνία" },
  ];
  return (
    <header className={"site-header " + (open ? "nav-mobile-open" : "")}>
      <div className="container header-inner">
        <a className="brand-link" href="#/" onClick={(e) => { e.preventDefault(); navTo("home"); setOpen(false); }}>
          <img src="assets/logo.webp" alt="NRGROUP" />
          <div className="brand-text">
            <strong>NRGROUP</strong>
            <span>Υδραυλικά · Αέριο · Ανακαινίσεις</span>
          </div>
        </a>
        <nav className="nav">
          {navItems.map((n) => (
            <a
              key={n.key}
              href={ROUTES[n.key].hash}
              className={current === n.key ? "active" : ""}
              onClick={(e) => { e.preventDefault(); navTo(n.key); setOpen(false); }}
            >
              {n.label}
            </a>
          ))}
        </nav>
        <div className="header-cta">
          <a className="btn ghost" href={`tel:${NRGROUP_INFO.phones[0]}`}>
            <Icon.Phone /> {NRGROUP_INFO.phones[0]}
          </a>
          <a className="btn primary" href="#/contact" onClick={(e) => { e.preventDefault(); navTo("contact"); setOpen(false); }}>
            Ζητήστε προσφορά
          </a>
          <button className="btn ghost mobile-menu-btn icon-only" onClick={() => setOpen(o => !o)} aria-label="Μενού" style={{ padding: 8 }}>
            <Icon.Menu />
          </button>
        </div>
      </div>
    </header>
  );
}

function Footer() {
  return (
    <footer className="site-footer">
      <div className="container">
        <div className="footer-grid">
          <div>
            <div className="footer-brand-stack">
              <img src="assets/logo.webp" alt="NRGROUP" />
            </div>
            <p style={{ maxWidth: 360 }}>
              Τεχνική εταιρία NRGROUP — Υδραυλικά, φυσικό αέριο, θέρμανση και ανακαινίσεις σε όλη την Αττική. Με εμπειρία, υπευθυνότητα και νόμιμα παραστατικά.
            </p>
            <div style={{ marginTop: 22, display: 'flex', gap: 10 }}>
              <a href={NRGROUP_INFO.facebook} target="_blank" rel="noopener" className="btn outline sm" style={{ borderColor: 'rgba(255,255,255,.18)', color: '#fff' }}>
                <Icon.Facebook /> Facebook
              </a>
            </div>
          </div>
          <div>
            <h5>Εταιρία</h5>
            <ul>
              <li><a href="#/" onClick={(e) => { e.preventDefault(); navTo("home"); }}>Αρχική</a></li>
              <li><a href="#/services" onClick={(e) => { e.preventDefault(); navTo("services"); }}>Υπηρεσίες</a></li>
              <li><a href="#/projects" onClick={(e) => { e.preventDefault(); navTo("projects"); }}>Έργα</a></li>
              <li><a href="#/contact" onClick={(e) => { e.preventDefault(); navTo("contact"); }}>Επικοινωνία</a></li>
            </ul>
          </div>
          <div>
            <h5>Υπηρεσίες</h5>
            <ul>
              {SERVICES.slice(0, 6).map(s => (
                <li key={s.id}><a href="#/services" onClick={(e) => { e.preventDefault(); navTo("services"); }}>{s.title}</a></li>
              ))}
            </ul>
          </div>
          <div>
            <h5>Επικοινωνία</h5>
            <ul>
              <li><a href={`tel:${NRGROUP_INFO.phones[0]}`}>{NRGROUP_INFO.phones[0]}</a></li>
              <li><a href={`tel:${NRGROUP_INFO.phones[1]}`}>{NRGROUP_INFO.phones[1]}</a></li>
              <li><a href={`mailto:${NRGROUP_INFO.email}`}>{NRGROUP_INFO.email}</a></li>
              <li>{NRGROUP_INFO.address}</li>
              <li style={{ color: 'var(--brand-2)' }}>24/7 για επείγοντα</li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© {new Date().getFullYear()} NRGROUP. Όλα τα δικαιώματα διατηρούνται.</span>
          <span>Σχεδίαση & Ανάπτυξη με ❤ για ποιοτική δουλειά</span>
        </div>
      </div>
    </footer>
  );
}

function App() {
  const [route, setRoute] = React.useState(getRouteFromHash());
  React.useEffect(() => {
    const onHash = () => setRoute(getRouteFromHash());
    window.addEventListener("hashchange", onHash);
    return () => window.removeEventListener("hashchange", onHash);
  }, []);
  const Component = ROUTES[route].Component;
  return (
    <React.Fragment>
      <Header current={route} />
      <main>
        <Component />
      </main>
      <Footer />
      <ChatWidget />
    </React.Fragment>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);