// Components for MG-Hotel
const { useState, useEffect, useRef, useMemo } = React;

// Hotel imagery (Unsplash)
const IMG = {
  hero: "https://images.unsplash.com/photo-1582719508461-905c673771fd?w=2400&q=80",
  heroAlt: "https://images.unsplash.com/photo-1566073771259-6a8506099945?w=2400&q=80",
  about: "https://images.unsplash.com/photo-1602002418082-a4443e081dd1?w=1200&q=80",
  rooms: [
    "https://images.unsplash.com/photo-1631049307264-da0ec9d70304?w=1200&q=80",
    "https://images.unsplash.com/photo-1611892440504-42a792e24d32?w=1200&q=80",
    "https://images.unsplash.com/photo-1591088398332-8a7791972843?w=1200&q=80",
  ],
  gallery: [
    "https://images.unsplash.com/photo-1540541338287-41700207dee6?w=1200&q=80",
    "https://images.unsplash.com/photo-1571896349842-33c89424de2d?w=1200&q=80",
    "https://images.unsplash.com/photo-1582719508461-905c673771fd?w=1200&q=80",
    "https://images.unsplash.com/photo-1540202404-1b927e27fa8b?w=1200&q=80",
    "https://images.unsplash.com/photo-1578683010236-d716f9a3f461?w=1200&q=80",
    "https://images.unsplash.com/photo-1551918120-9739cb430c6d?w=1200&q=80",
    "https://images.unsplash.com/photo-1584132967334-10e028bd69f7?w=1200&q=80",
    "https://images.unsplash.com/photo-1561501900-3701fa6a0864?w=1200&q=80",
    "https://images.unsplash.com/photo-1559339352-11d035aa65de?w=1200&q=80",
  ],
  avatars: [
    "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=200&q=80",
    "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=200&q=80",
    "https://images.unsplash.com/photo-1531123897727-8f129e1688ce?w=200&q=80",
  ],
};

// Service icons (line)
const ServiceIcon = ({ name }) => {
  const icons = {
    restaurant: <path d="M3 3v8a3 3 0 0 0 3 3v7M9 3v8a3 3 0 0 1-3 3M15 14V3a4 4 0 0 0-4 4v5a4 4 0 0 0 4 4v5"/>,
    spa: <><circle cx="12" cy="9" r="3"/><path d="M5 21c0-7 7-9 7-9s7 2 7 9"/><path d="M12 12v9"/></>,
    pool: <><path d="M2 17c2 0 2-1 4-1s2 1 4 1 2-1 4-1 2 1 4 1 2-1 4-1"/><path d="M2 21c2 0 2-1 4-1s2 1 4 1 2-1 4-1 2 1 4 1 2-1 4-1"/><path d="M6 17V5a3 3 0 0 1 6 0M12 17V5a3 3 0 0 1 6 0"/></>,
    parking: <><rect x="4" y="3" width="16" height="18" rx="1"/><path d="M9 17V7h4a3 3 0 0 1 0 6H9"/></>,
    wifi: <><path d="M5 12.55a11 11 0 0 1 14 0"/><path d="M2 8.5a16 16 0 0 1 20 0"/><path d="M8.5 16.5a6 6 0 0 1 7 0"/><circle cx="12" cy="20" r=".5"/></>,
    service: <><path d="M5 12V7a7 7 0 0 1 14 0v5"/><path d="M3 18h18"/><path d="M3 22h18"/><circle cx="12" cy="15" r="1.5"/></>,
  };
  return (
    <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
      {icons[name]}
    </svg>
  );
};

const ICON_KEYS = ["restaurant", "spa", "pool", "parking", "wifi", "service"];

// Star
const Star = () => (
  <svg className="star" viewBox="0 0 24 24"><path d="M12 2l3 7 7 .8-5.3 4.8 1.6 7.4-6.3-3.7-6.3 3.7 1.6-7.4L2 9.8 9 9z"/></svg>
);

// Logo
const Logo = ({ small }) => (
  <a href="#home" className="logo" aria-label="MG-Hotel">
    <span className="logo-mark">MG</span>
    <span className="logo-name">
      <span>MG-Hotel</span>
      {!small && <small>Vlorë · 1962</small>}
    </span>
  </a>
);

// Reveal hook
function useReveal() {
  useEffect(() => {
    const els = document.querySelectorAll(".reveal");
    const io = new IntersectionObserver(entries => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          e.target.classList.add("in");
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.12, rootMargin: "0px 0px -40px 0px" });
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  });
}

// Parallax
function useParallax(ref, factor = 0.3) {
  useEffect(() => {
    const onScroll = () => {
      if (!ref.current) return;
      const y = window.scrollY * factor;
      ref.current.style.transform = `translate3d(0, ${y}px, 0) scale(1.1)`;
    };
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, [ref, factor]);
}

// Navbar
function Navbar({ lang, setLang, t, onBookClick }) {
  const [scrolled, setScrolled] = useState(false);
  const [overDark, setOverDark] = useState(true);
  const [open, setOpen] = useState(false);

  useEffect(() => {
    const onScroll = () => {
      setScrolled(window.scrollY > 80);
      const hero = document.querySelector(".hero");
      if (hero) {
        const rect = hero.getBoundingClientRect();
        setOverDark(rect.bottom > 80);
      }
    };
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  // Lock body scroll when drawer open
  useEffect(() => {
    document.body.style.overflow = open ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [open]);

  // Close drawer on Esc
  useEffect(() => {
    const onKey = (e) => { if (e.key === "Escape") setOpen(false); };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, []);

  const close = () => setOpen(false);
  const navLinks = [
    { href: "#home", label: t.nav.home },
    { href: "#rooms", label: t.nav.rooms },
    { href: "#services", label: t.nav.services },
    { href: "#gallery", label: t.nav.gallery },
    { href: "#contact", label: t.nav.contact },
  ];

  return (
    <>
      <nav className={`nav ${scrolled ? "scrolled" : ""} ${overDark && !scrolled ? "over-dark" : "over-light"} ${open ? "menu-open" : ""}`}>
        <Logo small={scrolled} />
        <div className="nav-links">
          {navLinks.map(l => <a key={l.href} href={l.href}>{l.label}</a>)}
        </div>
        <div className="nav-right">
          <div className="lang-switcher desktop-only">
            {["sq", "en", "it"].map((l, i) => (
              <React.Fragment key={l}>
                {i > 0 && <span>·</span>}
                <button className={lang === l ? "active" : ""} onClick={() => setLang(l)}>
                  {l.toUpperCase()}
                </button>
              </React.Fragment>
            ))}
          </div>
          <button className="nav-book desktop-only" onClick={onBookClick}>{t.nav.book}</button>
          <button
            className={`menu-toggle ${open ? "open" : ""}`}
            onClick={() => setOpen(o => !o)}
            aria-label="Menu"
            aria-expanded={open}
          >
            <span></span>
            <span></span>
            <span></span>
          </button>
        </div>
      </nav>

      {/* Mobile drawer */}
      <div className={`mobile-drawer ${open ? "open" : ""}`} onClick={close} aria-hidden={!open}>
        <div className="mobile-drawer-panel" onClick={e => e.stopPropagation()}>
          <div className="mobile-drawer-head">
            <Logo />
            <button className="mobile-close" onClick={close} aria-label="Close">
              <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M6 6l12 12M18 6L6 18"/></svg>
            </button>
          </div>
          <nav className="mobile-links">
            {navLinks.map((l, i) => (
              <a key={l.href} href={l.href} onClick={close} style={{ transitionDelay: open ? `${0.08 + i * 0.05}s` : "0s" }}>
                <span className="mobile-link-num">0{i + 1}</span>
                <span>{l.label}</span>
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
              </a>
            ))}
          </nav>
          <div className="mobile-drawer-foot">
            <div className="mobile-lang">
              <span className="mobile-foot-label">Language</span>
              <div className="lang-switcher">
                {["sq", "en", "it"].map((l, i) => (
                  <React.Fragment key={l}>
                    {i > 0 && <span>·</span>}
                    <button className={lang === l ? "active" : ""} onClick={() => setLang(l)}>
                      {l.toUpperCase()}
                    </button>
                  </React.Fragment>
                ))}
              </div>
            </div>
            <button className="btn btn-primary" onClick={() => { close(); onBookClick(); }} style={{ width: "100%" }}>
              {t.nav.book}
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
            </button>
            <div className="mobile-foot-contact">
              <a href="tel:+35533456789">+355 33 456 789</a>
              <span>·</span>
              <a href="mailto:hello@mg-hotel.al">hello@mg-hotel.al</a>
            </div>
          </div>
        </div>
      </div>
    </>
  );
}

// Hero
function Hero({ t }) {
  const bgRef = useRef(null);
  useParallax(bgRef, 0.4);
  return (
    <section className="hero" id="home">
      <div className="hero-bg" ref={bgRef}></div>
      <div className="container hero-content">
        <div className="hero-eyebrow eyebrow reveal">{t.hero.eyebrow}</div>
        <h1 className="hero-title reveal reveal-d2">
          {t.hero.tagline}<br/>
          <span className="accent">{t.hero.tagline2}</span>
        </h1>
        <p className="hero-sub reveal reveal-d3">{t.hero.sub}</p>
        <div className="hero-actions reveal reveal-d4">
          <a href="#booking" className="btn btn-primary">
            {t.hero.cta}
            <svg className="btn-arrow" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
          </a>
          <a href="#rooms" className="btn btn-ghost">{t.hero.cta2}</a>
        </div>
      </div>
      <div className="hero-meta">
        <div className="hero-meta-block">
          <span>★ ★ ★ ★ ★</span>
          <strong>5-star Boutique</strong>
        </div>
        <div className="hero-meta-block">
          <span>Since</span>
          <strong>1962</strong>
        </div>
        <div className="hero-meta-block">
          <span>Rooms</span>
          <strong>48</strong>
        </div>
      </div>
      <div className="hero-scroll">
        <span>{t.hero.scroll}</span>
        <div className="hero-scroll-line"></div>
      </div>
    </section>
  );
}

// Marquee divider
function Marquee() {
  const items = ["Riviera Albanese", "Ionian Sea", "Boutique 1962", "Mediterranean", "Vlorë", "Family Owned"];
  return (
    <div className="marquee">
      <div className="marquee-track">
        {[...items, ...items, ...items].map((it, i) => <span key={i}>{it}</span>)}
      </div>
    </div>
  );
}

// About
function About({ t }) {
  return (
    <section className="section about" id="about">
      <div className="container">
        <div className="about-grid">
          <div className="about-text reveal">
            <span className="eyebrow">{t.about.eyebrow}</span>
            <h2>
              {t.about.title.split(" ").slice(0, -2).join(" ")} <span className="italic-accent">{t.about.title.split(" ").slice(-2).join(" ")}</span>
            </h2>
            <p className="lede">{t.about.lead}</p>
            <p className="body">{t.about.body}</p>
          </div>
          <div className="about-image reveal reveal-d2">
            <img src={IMG.about} alt="MG-Hotel pool" />
            <div className="about-stamp">
              <div>
                <strong>1962</strong>
                Est.<br/>Vlorë
              </div>
            </div>
          </div>
        </div>
        <div className="about-values">
          {t.about.values.map((v, i) => (
            <div className="about-value reveal" style={{ transitionDelay: `${i*0.1}s` }} key={i}>
              <span className="about-value-num">— {v.n}</span>
              <h4>{v.t}</h4>
              <p>{v.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// Rooms
function Rooms({ t, onBook }) {
  return (
    <section className="section rooms" id="rooms">
      <div className="container">
        <div className="rooms-head reveal">
          <div className="section-head" style={{ marginBottom: 0 }}>
            <span className="eyebrow">{t.rooms.eyebrow}</span>
            <h2>{t.rooms.title}</h2>
            <p className="lede" style={{ color: "var(--c-text-muted)" }}>{t.rooms.sub}</p>
          </div>
        </div>
        <div className="rooms-grid">
          {t.rooms.cards.map((r, i) => (
            <article className="room-card reveal" style={{ transitionDelay: `${i*0.1}s` }} key={i}>
              <div className="room-img">
                <img src={IMG.rooms[i]} alt={r.name} loading="lazy" />
                <div className="room-tag">{r.subtitle}</div>
                <div className="room-price-tag">
                  €{r.price}
                  <small>{t.rooms.perNight}</small>
                </div>
              </div>
              <div className="room-body">
                <div className="room-name">
                  <h3>{r.name}</h3>
                </div>
                <p className="room-desc">{r.desc}</p>
                <div className="room-amenities">
                  {r.amenities.map(a => <span className="room-amenity" key={a}>{a}</span>)}
                </div>
                <div className="room-meta">
                  <span className="room-meta-item">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M3 3h18v18H3z"/><path d="M9 3v18M3 9h18"/></svg>
                    {r.sqm} m²
                  </span>
                  <span className="room-meta-item">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><circle cx="12" cy="8" r="3"/><path d="M5 21a7 7 0 0 1 14 0"/></svg>
                    {r.guests}
                  </span>
                  <span className="room-meta-item">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><circle cx="12" cy="12" r="3"/><path d="M2 12s4-7 10-7 10 7 10 7-4 7-10 7-10-7-10-7z"/></svg>
                    {r.view}
                  </span>
                </div>
                <div className="room-cta">
                  <button onClick={() => onBook(i)}>
                    {t.rooms.book}
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
                  </button>
                </div>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

// Services
function Services({ t }) {
  return (
    <section className="section services" id="services">
      <div className="container">
        <div className="section-head reveal">
          <span className="eyebrow">{t.services.eyebrow}</span>
          <h2>{t.services.title}</h2>
          <p className="lede" style={{ color: "var(--c-text-muted)" }}>{t.services.sub}</p>
        </div>
        <div className="services-grid">
          {t.services.list.map((s, i) => (
            <div className="service-item reveal" style={{ transitionDelay: `${i*0.05}s` }} key={i}>
              <span className="service-num">{String(i+1).padStart(2, "0")}</span>
              <div className="service-icon"><ServiceIcon name={ICON_KEYS[i]} /></div>
              <h4>{s.t}</h4>
              <p>{s.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// Gallery
function Gallery({ t }) {
  return (
    <section className="section gallery" id="gallery">
      <div className="container">
        <div className="section-head reveal">
          <span className="eyebrow">{t.gallery.eyebrow}</span>
          <h2>{t.gallery.title}</h2>
          <p className="lede" style={{ color: "var(--c-text-muted)" }}>{t.gallery.sub}</p>
        </div>
        <div className="gallery-grid reveal">
          {IMG.gallery.map((src, i) => (
            <div className={`gallery-item gallery-item-${i+1}`} key={i}>
              <img src={src} alt="" loading="lazy" />
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// Testimonials
function Testimonials({ t }) {
  return (
    <section className="section testimonials" id="testimonials">
      <div className="container">
        <div className="section-head reveal">
          <span className="eyebrow">{t.testimonials.eyebrow}</span>
          <h2>{t.testimonials.title}</h2>
        </div>
        <div className="testimonials-grid">
          {t.testimonials.items.map((it, i) => (
            <div className="testimonial reveal" style={{ transitionDelay: `${i*0.1}s` }} key={i}>
              <div className="testimonial-quote">"</div>
              <div className="testimonial-stars">{[...Array(5)].map((_, j) => <Star key={j} />)}</div>
              <p className="testimonial-text">"{it.text}"</p>
              <div className="testimonial-author">
                <div className="testimonial-avatar"><img src={IMG.avatars[i]} alt={it.name} /></div>
                <div>
                  <div className="testimonial-name">{it.name}</div>
                  <div className="testimonial-from">{it.from}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// Booking — multi-step flow
function Booking({ t, lang, initialRoom, setInitialRoom }) {
  const today = new Date();
  const tomorrow = new Date(today.getTime() + 86400000);
  const dayAfter = new Date(today.getTime() + 86400000 * 4);
  const fmt = d => d.toISOString().slice(0, 10);

  const [step, setStep] = useState(0);
  const [checkin, setCheckin] = useState(fmt(tomorrow));
  const [checkout, setCheckout] = useState(fmt(dayAfter));
  const [adults, setAdults] = useState(2);
  const [children, setChildren] = useState(0);
  const [roomIdx, setRoomIdx] = useState(initialRoom ?? 1);
  const [first, setFirst] = useState("");
  const [last, setLast] = useState("");
  const [email, setEmail] = useState("");
  const [phone, setPhone] = useState("");
  const [special, setSpecial] = useState("");
  const [done, setDone] = useState(false);
  const [errors, setErrors] = useState({});

  // Sync external initial room
  useEffect(() => {
    if (initialRoom != null) {
      setRoomIdx(initialRoom);
      setStep(2);
      setInitialRoom(null);
      const el = document.getElementById("booking");
      if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
    }
  }, [initialRoom]);

  const nights = useMemo(() => {
    const c1 = new Date(checkin), c2 = new Date(checkout);
    return Math.max(1, Math.round((c2 - c1) / 86400000));
  }, [checkin, checkout]);
  const room = t.rooms.cards[roomIdx];
  const total = nights * (room?.price || 0);

  const validateStep = () => {
    const e = {};
    if (step === 0) {
      if (new Date(checkout) <= new Date(checkin)) e.checkout = true;
    }
    if (step === 3) {
      if (!first.trim()) e.first = true;
      if (!last.trim()) e.last = true;
      if (!/^\S+@\S+\.\S+$/.test(email)) e.email = true;
    }
    setErrors(e);
    return Object.keys(e).length === 0;
  };

  const next = () => {
    if (!validateStep()) return;
    if (step < 3) setStep(step + 1);
    else setDone(true);
  };
  const back = () => setStep(Math.max(0, step - 1));
  const reset = () => {
    setDone(false); setStep(0); setFirst(""); setLast(""); setEmail(""); setPhone(""); setSpecial("");
  };

  const bookingId = useMemo(() => "MG-" + Math.random().toString(36).slice(2, 8).toUpperCase(), [done]);

  const progressWidth = `${(step / 3) * 76}%`;

  return (
    <section className="section booking" id="booking">
      <div className="container">
        <div className="booking-wrap">
          <aside className="booking-aside reveal">
            <span className="eyebrow">{t.booking.eyebrow}</span>
            <h2>{t.booking.title}</h2>
            <p>{t.booking.sub}</p>
            <div className="booking-summary">
              <span className="summary-label">{t.booking.summary}</span>
              <div className="summary-row"><span>{t.booking.checkin}</span><strong>{checkin}</strong></div>
              <div className="summary-row"><span>{t.booking.checkout}</span><strong>{checkout}</strong></div>
              <div className="summary-row"><span>{nights} {nights === 1 ? t.booking.night : t.booking.nights}</span><strong>{adults + children} {t.booking.adults.toLowerCase()}</strong></div>
              <div className="summary-row"><span>{t.rooms.eyebrow}</span><strong>{room?.name}</strong></div>
              <div className="summary-divider"></div>
              <div className="summary-total">
                <span className="label">{t.booking.total}</span>
                <span className="value">€{total}</span>
              </div>
            </div>
          </aside>
          <div className="booking-form reveal reveal-d2">
            {!done && (
              <>
                <div className="steps">
                  <div className="steps-progress" style={{ width: progressWidth }}></div>
                  {t.booking.steps.map((s, i) => (
                    <div className={`step ${i === step ? "active" : ""} ${i < step ? "done" : ""}`} key={i}>
                      <span className="step-circle">{i < step ? "✓" : i + 1}</span>
                      <span>{s}</span>
                    </div>
                  ))}
                </div>

                {step === 0 && (
                  <div>
                    <div className="field-row">
                      <div className="field-group">
                        <label className="field-label">{t.booking.checkin}</label>
                        <input type="date" className="field-input" value={checkin} min={fmt(today)} onChange={e => setCheckin(e.target.value)} />
                      </div>
                      <div className="field-group">
                        <label className="field-label">{t.booking.checkout}</label>
                        <input type="date" className="field-input" value={checkout} min={checkin} onChange={e => setCheckout(e.target.value)} style={errors.checkout ? { borderColor: "#c44" } : {}} />
                      </div>
                    </div>
                    <div className="field-group">
                      <label className="field-label">Stay Length</label>
                      <div style={{ background: "var(--c-bg)", padding: 16, border: "1px solid var(--c-line)", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                        <span style={{ fontFamily: "var(--f-display)", fontSize: 32 }}>{nights} <span style={{ fontSize: 16, color: "var(--c-text-muted)" }}>{nights === 1 ? t.booking.night : t.booking.nights}</span></span>
                        <span style={{ fontSize: 12, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--c-secondary)", fontWeight: 600 }}>€{total}</span>
                      </div>
                    </div>
                  </div>
                )}

                {step === 1 && (
                  <div>
                    <div className="field-group">
                      <label className="field-label">{t.booking.adults}</label>
                      <div className="counter">
                        <button className="counter-btn" onClick={() => setAdults(Math.max(1, adults - 1))} disabled={adults <= 1}>−</button>
                        <span className="counter-value">{adults}</span>
                        <button className="counter-btn" onClick={() => setAdults(Math.min(6, adults + 1))} disabled={adults >= 6}>+</button>
                      </div>
                    </div>
                    <div className="field-group">
                      <label className="field-label">{t.booking.children}</label>
                      <div className="counter">
                        <button className="counter-btn" onClick={() => setChildren(Math.max(0, children - 1))} disabled={children <= 0}>−</button>
                        <span className="counter-value">{children}</span>
                        <button className="counter-btn" onClick={() => setChildren(Math.min(4, children + 1))} disabled={children >= 4}>+</button>
                      </div>
                    </div>
                  </div>
                )}

                {step === 2 && (
                  <div className="room-pick">
                    {t.rooms.cards.map((r, i) => (
                      <div key={i} className={`room-pick-item ${roomIdx === i ? "selected" : ""}`} onClick={() => setRoomIdx(i)}>
                        <img src={IMG.rooms[i]} alt="" />
                        <div>
                          <div className="room-pick-name">{r.name}</div>
                          <div className="room-pick-meta">{r.sqm} m² · {r.guests} {t.booking.adults.toLowerCase()} · {r.view}</div>
                        </div>
                        <div className="room-pick-price">
                          €{r.price}
                          <small>/ {t.booking.night}</small>
                        </div>
                      </div>
                    ))}
                  </div>
                )}

                {step === 3 && (
                  <div>
                    <div className="field-row">
                      <div className="field-group">
                        <label className="field-label">{t.booking.firstName}</label>
                        <input className="field-input" value={first} onChange={e => setFirst(e.target.value)} style={errors.first ? { borderColor: "#c44" } : {}} />
                      </div>
                      <div className="field-group">
                        <label className="field-label">{t.booking.lastName}</label>
                        <input className="field-input" value={last} onChange={e => setLast(e.target.value)} style={errors.last ? { borderColor: "#c44" } : {}} />
                      </div>
                    </div>
                    <div className="field-row">
                      <div className="field-group">
                        <label className="field-label">{t.booking.email}</label>
                        <input className="field-input" type="email" value={email} onChange={e => setEmail(e.target.value)} style={errors.email ? { borderColor: "#c44" } : {}} />
                      </div>
                      <div className="field-group">
                        <label className="field-label">{t.booking.phone}</label>
                        <input className="field-input" value={phone} onChange={e => setPhone(e.target.value)} />
                      </div>
                    </div>
                    <div className="field-group">
                      <label className="field-label">{t.booking.special}</label>
                      <textarea className="field-input" rows="3" value={special} onChange={e => setSpecial(e.target.value)} />
                    </div>
                  </div>
                )}

                <div className="form-actions">
                  {step > 0 ? (
                    <button className="btn btn-ghost-dark" onClick={back}>
                      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M19 12H5M11 19l-7-7 7-7"/></svg>
                      {t.booking.back}
                    </button>
                  ) : <span></span>}
                  <button className="btn btn-dark" onClick={next}>
                    {step === 3 ? t.booking.confirm : t.booking.next}
                    <svg className="btn-arrow" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
                  </button>
                </div>
              </>
            )}

            {done && (
              <div className="confirmation">
                <div className="confirmation-tick">
                  <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><path d="M5 12l5 5 9-12"/></svg>
                </div>
                <h3>{t.booking.done}</h3>
                <p>{t.booking.doneSub}</p>
                <div className="confirmation-id">
                  <small>Booking ID</small>
                  <span style={{ fontSize: 22 }}>{bookingId}</span>
                </div>
                <button className="btn btn-ghost-dark" onClick={reset}>{t.booking.reset}</button>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

// Footer
function Footer({ t }) {
  return (
    <footer className="footer" id="contact">
      <div className="container">
        <div className="footer-grid">
          <div className="footer-brand">
            <Logo />
            <p>{t.footer.tagline}</p>
            <div className="socials">
              <a href="#" aria-label="Instagram">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><rect x="2" y="2" width="20" height="20" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="18" cy="6" r=".5" fill="currentColor"/></svg>
              </a>
              <a href="#" aria-label="Facebook">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg>
              </a>
              <a href="#" aria-label="TripAdvisor">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><circle cx="7" cy="13" r="3"/><circle cx="17" cy="13" r="3"/><path d="M2 13c0-3 5-5 10-5s10 2 10 5"/></svg>
              </a>
            </div>
          </div>
          <div>
            <h4>{t.footer.explore}</h4>
            <ul>
              <li><a href="#rooms">{t.footer.links.rooms}</a></li>
              <li><a href="#services">{t.footer.links.services}</a></li>
              <li><a href="#gallery">{t.footer.links.gallery}</a></li>
              <li><a href="#booking">{t.footer.links.booking}</a></li>
            </ul>
          </div>
          <div>
            <h4>{t.footer.contact}</h4>
            <div className="footer-contact">
              <span>{t.footer.address}</span>
              <a href="tel:+35533456789">+355 33 456 789</a>
              <a href="mailto:hello@mg-hotel.al">hello@mg-hotel.al</a>
            </div>
          </div>
          <div>
            <h4>{t.footer.newsletter}</h4>
            <p style={{ fontSize: 13, color: "rgba(255,255,255,0.6)", marginBottom: 16 }}>{t.footer.newsletterSub}</p>
            <form className="newsletter-form" onSubmit={e => { e.preventDefault(); e.target.reset(); }}>
              <input type="email" placeholder="email@..." required />
              <button type="submit">{t.footer.subscribe}</button>
            </form>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 MG-Hotel. {t.footer.rights}</span>
          <div className="footer-bottom-links">
            <a href="#">{t.footer.links.terms}</a>
            <a href="#">{t.footer.links.privacy}</a>
            <a href="#">{t.footer.links.faq}</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

// Export to window
Object.assign(window, {
  Logo, Navbar, Hero, About, Rooms, Services, Gallery, Testimonials, Booking, Footer, Marquee,
  useReveal, IMG,
});