// Eva — shared UI components

const { useState, useEffect, useRef, useMemo } = React;

// ---------- Format helpers ----------
function aed(n) {
  return "AED " + n.toLocaleString("en-AE");
}

// ---------- Wordmark ----------
function Wordmark({ size = 22, light = false }) {
  const color = light ? "var(--ivory)" : "var(--charcoal)";
  return (
    <div className="evaWordmark" style={{ color }}>
      <span className="evaWordmark__name" style={{ fontSize: size, letterSpacing: size * 0.32 + "px" }}>EVA</span>
      <span className="evaWordmark__sub" style={{ fontSize: size * 0.32, letterSpacing: size * 0.18 + "px" }}>JEWELLERS · DUBAI</span>
    </div>
  );
}

// ---------- Diamond glyph (simple svg primitive) ----------
function DiamondGlyph({ size = 14, color = "currentColor" }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" aria-hidden="true">
      <path d="M12 2 L22 9 L12 22 L2 9 Z" fill="none" stroke={color} strokeWidth="1.2" strokeLinejoin="round" />
      <path d="M2 9 L22 9 M12 2 L8 9 L12 22 M12 2 L16 9 L12 22" fill="none" stroke={color} strokeWidth="0.8" opacity="0.55" />
    </svg>
  );
}

// ---------- Top bar ----------
function TopBar() {
  return (
    <div className="evaTopBar">
      <span>{window.EVA_FACTS.hoursShort}</span>
      <span className="evaTopBar__dot">·</span>
      <span>Gold &amp; Diamond Park, Dubai</span>
      <span className="evaTopBar__dot">·</span>
      <span>Free worldwide shipping</span>
      <span className="evaTopBar__dot">·</span>
      <span>Free repair &amp; polish on Eva jewellery</span>
    </div>
  );
}

// ---------- Nav ----------
function Navbar({ route, go, openConsult }) {
  const links = [
    ["home", "Home"],
    ["collections", "Collections"],
    ["bespoke", "Bespoke"],
    ["education", "Diamond Guide"],
    ["about", "About"],
    ["testimonials", "Testimonials"],
    ["visit", "Visit"],
  ];
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);
  useEffect(() => {
    const on = () => setScrolled(window.scrollY > 8);
    on();
    window.addEventListener("scroll", on, { passive: true });
    return () => window.removeEventListener("scroll", on);
  }, []);
  return (
    <header className={"evaNav " + (scrolled ? "is-scrolled" : "")}>
      <TopBar />
      <div className="evaNav__row">
        <button className="evaNav__brand" onClick={() => go("home")} aria-label="Eva — Home">
          <Wordmark size={22} />
        </button>
        <nav className="evaNav__links">
          {links.map(([slug, label]) => (
            <button
              key={slug}
              className={"evaNav__link " + (route === slug ? "is-active" : "")}
              onClick={() => go(slug)}
            >
              {label}
            </button>
          ))}
        </nav>
        <div className="evaNav__cta">
          <a className="evaNav__wa" href={"https://wa.me/" + window.EVA_FACTS.whatsapp + "?text=Hi%20Eva%2C%20I%27d%20like%20to%20enquire."} target="_blank" rel="noreferrer">
            WhatsApp
          </a>
          <button className="evaBtn evaBtn--gold" onClick={openConsult}>
            Book a Private Consultation
          </button>
        </div>
        <button className="evaNav__burger" onClick={() => setOpen(true)} aria-label="Menu">
          <span /><span /><span />
        </button>
      </div>
      {open && (
        <div className="evaNav__drawer" onClick={() => setOpen(false)}>
          <div className="evaNav__drawerInner" onClick={(e) => e.stopPropagation()}>
            <button className="evaNav__drawerClose" onClick={() => setOpen(false)}>Close</button>
            {links.map(([slug, label]) => (
              <button key={slug} className="evaNav__drawerLink" onClick={() => { go(slug); setOpen(false); }}>{label}</button>
            ))}
            <button className="evaBtn evaBtn--gold" onClick={() => { setOpen(false); openConsult(); }}>Book a Private Consultation</button>
          </div>
        </div>
      )}
    </header>
  );
}

// ---------- Footer ----------
function Footer({ go }) {
  return (
    <footer className="evaFooter">
      <div className="evaFooter__grid">
        <div className="evaFooter__col evaFooter__brand">
          <Wordmark size={26} light={true} />
          <p className="evaFooter__tag">A private showroom for certified diamonds<br/>and bespoke pieces — Dubai, since 2007.</p>
          <p className="evaFooter__heritage">Part of the Mamiya group, established 1966.</p>
        </div>
        <div className="evaFooter__col">
          <h4>Visit</h4>
          <p>{window.EVA_FACTS.address}</p>
          <p>{window.EVA_FACTS.hoursShort}</p>
          <p>
            <a href={"tel:" + window.EVA_FACTS.phone.replace(/\s/g,"")}>{window.EVA_FACTS.phone}</a>
            <br/>
            <a href={"https://wa.me/" + window.EVA_FACTS.whatsapp} target="_blank" rel="noreferrer">WhatsApp · {window.EVA_FACTS.whatsappDisplay}</a>
          </p>
        </div>
        <div className="evaFooter__col">
          <h4>Collections</h4>
          {window.EVA_COLLECTIONS.slice(0, 6).map(c => (
            <button key={c.slug} className="evaFooter__link" onClick={() => go("collections")}>{c.label}</button>
          ))}
        </div>
        <div className="evaFooter__col">
          <h4>The House</h4>
          <button className="evaFooter__link" onClick={() => go("about")}>About Eva</button>
          <button className="evaFooter__link" onClick={() => go("bespoke")}>Bespoke service</button>
          <button className="evaFooter__link" onClick={() => go("education")}>Diamond &amp; gold guide</button>
          <button className="evaFooter__link" onClick={() => go("testimonials")}>Testimonials</button>
          <a className="evaFooter__link" href={window.EVA_FACTS.tripadvisorUrl} target="_blank" rel="noreferrer">Tripadvisor 5.0 ★</a>
          <a className="evaFooter__link" href={window.EVA_FACTS.instagram} target="_blank" rel="noreferrer">Instagram @evagemsdubai</a>
        </div>
      </div>
      <div className="evaFooter__legal">
        <span>© Eva Jewellers FZCO · {new Date().getFullYear()}</span>
        <span>Trades online as Eva Gems · evagems.com</span>
        <span>Prices indicative, subject to change.</span>
      </div>
    </footer>
  );
}

// ---------- WhatsApp FAB ----------
function WhatsAppFab() {
  return (
    <a
      className="evaWaFab"
      href={"https://wa.me/" + window.EVA_FACTS.whatsapp + "?text=Hi%20Eva%2C%20I%27d%20like%20to%20enquire."}
      target="_blank"
      rel="noreferrer"
      aria-label="Chat on WhatsApp"
    >
      <svg viewBox="0 0 32 32" width="22" height="22" aria-hidden="true">
        <path fill="currentColor" d="M16 3C9.4 3 4 8.3 4 14.9c0 2.4.7 4.7 2 6.6L4 29l7.7-2c1.8 1 3.8 1.5 5.9 1.5 6.6 0 12-5.3 12-11.9C29.6 7.9 24.3 3 16 3zm6.9 16.6c-.3.8-1.7 1.5-2.3 1.6-.6.1-1.4.1-2.2-.1-.5-.1-1.2-.4-2-.7-3.5-1.5-5.8-5-5.9-5.2-.2-.2-1.5-2-1.5-3.8s.9-2.7 1.3-3.1c.3-.3.7-.4 1-.4h.7c.2 0 .5 0 .8.6.3.7 1 2.4 1.1 2.5.1.2.1.4 0 .6-.1.2-.2.4-.4.6l-.5.6c-.2.2-.3.4-.1.7.2.3.8 1.4 1.8 2.2 1.3 1.1 2.4 1.5 2.7 1.7.3.2.6.1.8-.1.2-.3 1-1.1 1.2-1.5.2-.4.5-.3.8-.2.3.1 2 1 2.4 1.1.4.2.6.3.7.5.1.4.1.8-.2 1.4z"/>
      </svg>
      <span>WhatsApp</span>
    </a>
  );
}

// ---------- Trust strip ----------
function TrustStrip() {
  const facts = window.EVA_FACTS;
  return (
    <div className="evaTrust">
      <div className="evaTrust__item">
        <div className="evaTrust__num">{facts.rating}<span>/5</span></div>
        <div className="evaTrust__label">{facts.reviewCount} verified reviews<br/><span>Tripadvisor · {facts.ranking}</span></div>
      </div>
      <div className="evaTrust__divider" />
      <div className="evaTrust__item">
        <div className="evaTrust__num">24<span>h</span></div>
        <div className="evaTrust__label">Bespoke turnaround<br/><span>Sketch → CAD → set → delivered</span></div>
      </div>
      <div className="evaTrust__divider" />
      <div className="evaTrust__item">
        <div className="evaTrust__num">GIA<span> · IGI · HRD</span></div>
        <div className="evaTrust__label">Certified diamonds<br/><span>Natural &amp; lab-grown</span></div>
      </div>
      <div className="evaTrust__divider" />
      <div className="evaTrust__item">
        <div className="evaTrust__num">1966</div>
        <div className="evaTrust__label">Mamiya group heritage<br/><span>Eva boutique since 2007</span></div>
      </div>
    </div>
  );
}

// ---------- Section title ----------
function SectionEyebrow({ children }) {
  return <div className="evaEyebrow"><span /><em>{children}</em><span /></div>;
}

// ---------- Consultation modal ----------
function ConsultationModal({ open, onClose }) {
  const [mode, setMode] = useState("instore");
  const [step, setStep] = useState(1);
  const [data, setData] = useState({ occasion: "Engagement", date: "", time: "16:00", name: "", phone: "", note: "" });
  useEffect(() => { if (open) { setStep(1); } }, [open]);
  if (!open) return null;
  const occasions = ["Engagement", "Wedding band", "Anniversary", "Self / gift", "Bespoke remake"];
  return (
    <div className="evaModal" onClick={onClose}>
      <div className="evaModal__inner" onClick={(e) => e.stopPropagation()}>
        <button className="evaModal__close" onClick={onClose} aria-label="Close">×</button>
        {step === 1 && (
          <div className="evaModal__body">
            <div className="evaModal__eyebrow">Private consultation</div>
            <h2>Tell us about the moment.</h2>
            <p className="evaModal__lede">A 45-minute private appointment in the boutique or by video — with one of our master jewellers.</p>
            <div className="evaModal__seg">
              <button className={mode === "instore" ? "is-on" : ""} onClick={() => setMode("instore")}>In the boutique</button>
              <button className={mode === "virtual" ? "is-on" : ""} onClick={() => setMode("virtual")}>Virtual · video</button>
            </div>
            <label className="evaForm__label">Occasion</label>
            <div className="evaForm__chips">
              {occasions.map((o) => (
                <button key={o} className={"evaChip " + (data.occasion === o ? "is-on" : "")} onClick={() => setData({ ...data, occasion: o })}>{o}</button>
              ))}
            </div>
            <div className="evaForm__row">
              <div>
                <label className="evaForm__label">Preferred date</label>
                <input type="date" value={data.date} onChange={(e) => setData({ ...data, date: e.target.value })} />
              </div>
              <div>
                <label className="evaForm__label">Time</label>
                <select value={data.time} onChange={(e) => setData({ ...data, time: e.target.value })}>
                  {["11:00","12:00","13:00","14:00","15:00","16:00","17:00","18:00","19:00","20:00"].map(t => <option key={t}>{t}</option>)}
                </select>
              </div>
            </div>
            <div className="evaModal__actions">
              <button className="evaBtn evaBtn--ghost" onClick={onClose}>Cancel</button>
              <button className="evaBtn evaBtn--gold" onClick={() => setStep(2)}>Continue</button>
            </div>
          </div>
        )}
        {step === 2 && (
          <div className="evaModal__body">
            <div className="evaModal__eyebrow">Your details</div>
            <h2>Where shall we reach you?</h2>
            <div className="evaForm__row">
              <div><label className="evaForm__label">Name</label><input value={data.name} onChange={(e) => setData({...data, name: e.target.value})} placeholder="Full name" /></div>
              <div><label className="evaForm__label">Phone / WhatsApp</label><input value={data.phone} onChange={(e) => setData({...data, phone: e.target.value})} placeholder="+971 …" /></div>
            </div>
            <label className="evaForm__label">Anything we should know? (optional)</label>
            <textarea rows={3} value={data.note} onChange={(e) => setData({...data, note: e.target.value})} placeholder="A stone in mind, a heirloom you're resetting, a budget range…" />
            <div className="evaModal__summary">
              <strong>{mode === "instore" ? "In-boutique" : "Virtual"} · {data.occasion}</strong>
              <span>{data.date || "Date to confirm"} · {data.time}</span>
            </div>
            <div className="evaModal__actions">
              <button className="evaBtn evaBtn--ghost" onClick={() => setStep(1)}>Back</button>
              <button className="evaBtn evaBtn--gold" onClick={() => setStep(3)} disabled={!data.name || !data.phone}>Request appointment</button>
            </div>
          </div>
        )}
        {step === 3 && (
          <div className="evaModal__body evaModal__done">
            <div className="evaModal__seal"><DiamondGlyph size={28} color="var(--gold)" /></div>
            <h2>Thank you, {data.name.split(" ")[0] || "friend"}.</h2>
            <p className="evaModal__lede">We'll confirm your {mode === "instore" ? "in-boutique" : "virtual"} appointment for {data.date || "your preferred date"} at {data.time} by WhatsApp within the hour.</p>
            <p className="evaModal__small">Open daily 10:00 – 21:00 · Shop 5, Building 1, Gold &amp; Diamond Park.</p>
            <div className="evaModal__actions">
              <button className="evaBtn evaBtn--gold" onClick={onClose}>Close</button>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

Object.assign(window, {
  aed, Wordmark, DiamondGlyph, TopBar, Navbar, Footer, WhatsAppFab,
  TrustStrip, SectionEyebrow, ConsultationModal,
});