// Shared components for Hessa Falasi prototype
const { useState, useEffect, useRef } = React;

const WA_LINK = "https://wa.me/971526404072?text=Hi%20Hessa%20Falasi%2C%20I%27d%20like%20to%20book%20a%20styling%20appointment";

function formatAED(amount, locale) {
  // Use English digits regardless of locale for prices (luxury convention),
  // but allow Arabic-Indic via locale conversion if requested.
  const n = amount.toLocaleString("en-US");
  return `AED ${n}`;
}

function PriceBlock({ p, locale }) {
  const t = window.HF_USE_T(locale);
  return (
    <span className="price num">
      {p.priceFrom ? <span className="from">{t("common.from")}</span> : null}
      {formatAED(p.priceAED)}
    </span>
  );
}

function Navbar({ route, locale, setLocale, navigate, dark }) {
  const t = window.HF_USE_T(locale);
  const [openMenu, setOpenMenu] = useState(false);
  const [showColl, setShowColl] = useState(false);

  const links = [
    { id: "collections", label: t("nav.collections"), href: "#/collections" },
    { id: "house",       label: t("nav.house"),       href: "#/the-house" },
    { id: "press",       label: t("nav.press"),       href: "#/press" },
    { id: "visit",       label: t("nav.visit"),       href: "#/visit" }
  ];

  const isActive = (id) => route.path.startsWith("/" + id) || (id === "collections" && route.path.startsWith("/collection"));

  return (
    <nav className={"nav" + (dark ? " nav--noir" : "")}>
      <div className="container nav-row">
        <div className="left">
          <button className="nav-link" onClick={() => setOpenMenu(true)} aria-label="menu" style={{display:"inline-flex",gap:8,alignItems:"center"}}>
            <svg width="18" height="10" viewBox="0 0 18 10" fill="none"><line x1="0" y1="1" x2="18" y2="1" stroke="currentColor"/><line x1="0" y1="9" x2="12" y2="9" stroke="currentColor"/></svg>
            <span style={{fontSize:11,letterSpacing:".18em"}}>{t("nav.menu")}</span>
          </button>
          {links.slice(0,2).map(l => (
            <a key={l.id} href={l.href} className={"nav-link" + (isActive(l.id) ? " active" : "")}>{l.label}</a>
          ))}
        </div>

        <a href="#/" className="wordmark" aria-label="Hessa Falasi">
          HESSA FALASI
          <small>{locale === "ar" ? "بيت تصميم · دبي" : "Maison · Dubai"}</small>
        </a>

        <div className="right">
          {links.slice(2).map(l => (
            <a key={l.id} href={l.href} className={"nav-link" + (isActive(l.id) ? " active" : "")}>{l.label}</a>
          ))}
          <button className="nav-link" onClick={() => setLocale(locale === "en" ? "ar" : "en")} style={{display:"inline-flex",gap:8,alignItems:"center"}}>
            <span style={{opacity: locale==="en" ? 1 : .4}}>EN</span>
            <span style={{opacity:.4}}>/</span>
            <span style={{opacity: locale==="ar" ? 1 : .4, fontFamily:"var(--arabic)"}}>ع</span>
          </button>
          <a href="#/appointments" className="btn btn--sm" style={{padding:"10px 14px"}}>
            {t("common.bookAppt")}
          </a>
        </div>
      </div>

      {openMenu ? (
        <div className="mob-menu">
          <div style={{display:"flex",justifyContent:"space-between",alignItems:"center"}}>
            <span className="wordmark" style={{textAlign:"start"}}>HESSA FALASI</span>
            <button className="nav-link" onClick={()=>setOpenMenu(false)}>{t("nav.close")}</button>
          </div>
          <div className="mlist">
            <a className="serif" href="#/" onClick={()=>setOpenMenu(false)}>{t("nav.home")}</a>
            <a className="serif" href="#/collections" onClick={()=>setOpenMenu(false)}>{t("nav.collections")}</a>
            <a className="serif" href="#/the-house" onClick={()=>setOpenMenu(false)}>{t("nav.house")}</a>
            <a className="serif" href="#/press" onClick={()=>setOpenMenu(false)}>{t("nav.press")}</a>
            <a className="serif" href="#/appointments" onClick={()=>setOpenMenu(false)}>{t("nav.appointments")}</a>
            <a className="serif" href="#/visit" onClick={()=>setOpenMenu(false)}>{t("nav.visit")}</a>
            <a className="serif" href="#/size-guide" onClick={()=>setOpenMenu(false)}>{t("nav.sizeGuide")}</a>
          </div>
          <div style={{marginTop:"auto",paddingTop:24,display:"flex",gap:12,flexDirection:"column"}}>
            <a href={WA_LINK} target="_blank" rel="noopener" className="btn btn--ghost">{t("common.whatsAppShort")}</a>
          </div>
        </div>
      ) : null}
    </nav>
  );
}

function Footer({ locale }) {
  const t = window.HF_USE_T(locale);
  return (
    <footer className="footer">
      <div className="container">
        <div className="top">
          <div>
            <div className="wordmark">HESSA FALASI<small>{locale==="ar" ? "بيت تصميم · دبي ·  منذ ٢٠١١" : "Maison · Dubai · Since 2011"}</small></div>
            <p style={{maxWidth:36+"ch",lineHeight:1.7,fontSize:14,color:"rgba(251,248,242,.7)"}}>
              {locale === "ar"
                ? "تواصلوا معنا عبر واتساب لأي استفسار أو لحجز جلسة قياس خاصة."
                : "WhatsApp our atelier for fittings, sizing or styling. Replies within one business day."}
            </p>
            <a href={WA_LINK} target="_blank" rel="noopener" className="btn btn--ghost-light" style={{marginTop:18}}>
              {t("common.whatsAppShort")}
            </a>
          </div>

          <div>
            <h4>{t("nav.collections")}</h4>
            <ul>
              <li><a href="#/collection/abaya">Abaya</a></li>
              <li><a href="#/collection/kaftan">Kaftan</a></li>
              <li><a href="#/collection/marrakech">Marrakech</a></li>
              <li><a href="#/collection/ramadan-25">Ramadan 25</a></li>
            </ul>
          </div>
          <div>
            <h4>{locale === "ar" ? "الدار" : "House"}</h4>
            <ul>
              <li><a href="#/the-house">{t("nav.house")}</a></li>
              <li><a href="#/press">{t("nav.press")}</a></li>
              <li><a href="#/appointments">{t("nav.appointments")}</a></li>
              <li><a href="#/visit">{t("nav.visit")}</a></li>
              <li><a href="#/size-guide">{t("nav.sizeGuide")}</a></li>
            </ul>
          </div>
          <div>
            <h4>{locale === "ar" ? "تواصلوا" : "Contact"}</h4>
            <ul>
              <li>Building 2, Ground Floor, Unit R07</li>
              <li>Dubai Design District, UAE</li>
              <li>info@hessafalasi.com</li>
              <li>+971 52 640 4072</li>
            </ul>
            <h4 style={{marginTop:24}}>{locale === "ar" ? "متابعة" : "Follow"}</h4>
            <ul style={{display:"flex",gap:18,flexDirection:"row",flexWrap:"wrap"}}>
              <li><a href="https://instagram.com/hessafalasi" target="_blank" rel="noopener">Instagram</a></li>
              <li><a href="https://tiktok.com/@hessa.falasi" target="_blank" rel="noopener">TikTok</a></li>
              <li><a href="https://pinterest.com/hessafalasi_store" target="_blank" rel="noopener">Pinterest</a></li>
            </ul>
          </div>
        </div>

        <div className="bottom">
          <span>© 2026 Hessa Falasi · {locale === "ar" ? "جميع الحقوق محفوظة" : "All rights reserved"}</span>
          <span>{t("common.aedRange")}</span>
          <span>{t("common.delivery")}</span>
        </div>
      </div>
    </footer>
  );
}

function SectionHead({ num, title, meta }) {
  return (
    <div className="sect-head">
      <span className="num-mark">{num}</span>
      <h2>{title}</h2>
      <span className="meta">{meta}</span>
    </div>
  );
}

function ProductCard({ p, locale, navigate, badge }) {
  const t = window.HF_USE_T(locale);
  return (
    <div className="prod" onClick={() => navigate("#/product/" + p.handle)} role="button" tabIndex={0}>
      <div className="frame">
        <img src={p.image} alt={p.name[locale]} loading="lazy" />
        {badge ? <span className={"badge" + (badge.dark ? " dark":"")}>{badge.text}</span> : null}
        <div className="quick">
          <button className="btn">{locale === "ar" ? "نظرة سريعة" : "Quick view"}</button>
        </div>
      </div>
      <div className="info">
        <span className="name serif">{p.name[locale]}</span>
        <PriceBlock p={p} locale={locale} />
      </div>
      <div className="sub">{t(`silhouettes.${p.silhouette}`) || ""} · {p.collection.toUpperCase()}</div>
    </div>
  );
}

function CollectionCard({ c, locale, span, num }) {
  return (
    <a className={"coll-card span-" + span} href={"#/collection/" + c.slug}>
      <img src={c.cover} alt={c.name[locale]} loading="lazy" />
      <span className="num-tag">{num}</span>
      <div className="label">
        <div className="tag">{c.tag[locale]}{c.seasonal ? " · " + (locale==="ar"?"موسمي":"Seasonal") : ""}</div>
        <div className="name">{c.name[locale]}</div>
      </div>
    </a>
  );
}

function Toast({ message, onDone }) {
  useEffect(() => {
    if (!message) return;
    const t = setTimeout(onDone, 2400);
    return () => clearTimeout(t);
  }, [message]);
  if (!message) return null;
  return <div className="toast">{message}</div>;
}

function WhatsAppFab({ locale }) {
  const t = window.HF_USE_T(locale);
  return (
    <a className="wa-fab" href={WA_LINK} target="_blank" rel="noopener">
      <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M20.5 3.5A11.86 11.86 0 0 0 12 0C5.37 0 0 5.37 0 12c0 2.12.55 4.18 1.6 6.01L0 24l6.16-1.61A11.94 11.94 0 0 0 12 24c6.63 0 12-5.37 12-12 0-3.2-1.25-6.21-3.5-8.5ZM12 21.8c-1.86 0-3.69-.5-5.29-1.45l-.38-.22-3.66.96.98-3.57-.25-.37A9.8 9.8 0 1 1 12 21.8Z"/></svg>
      {locale === "ar" ? "واتساب" : "WhatsApp us"}
    </a>
  );
}

Object.assign(window, {
  WA_LINK, formatAED, PriceBlock, Navbar, Footer, SectionHead, ProductCard, CollectionCard, Toast, WhatsAppFab
});