// Si Fashion — shared UI components
const { useState, useEffect, useRef } = React;

const ArrowRight = ({ size = 14 }) => (
  <svg className="arrow" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
    <path d="M5 12h14M13 6l6 6-6 6"/>
  </svg>
);

const ArrowDown = ({ size = 14 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
    <path d="M12 5v14M6 13l6 6 6-6"/>
  </svg>
);

const CloseIcon = ({ size = 16 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
    <path d="M6 6l12 12M18 6L6 18"/>
  </svg>
);

const InstagramIcon = () => (
  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
    <rect x="3" y="3" width="18" height="18" rx="4"/>
    <circle cx="12" cy="12" r="4"/>
    <circle cx="17.5" cy="6.5" r="1" fill="currentColor"/>
  </svg>
);

const LinkedInIcon = () => (
  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
    <rect x="3" y="3" width="18" height="18"/>
    <path d="M8 10v7M8 7v.01M12 17v-4a2 2 0 0 1 4 0v4M12 10v7"/>
  </svg>
);

// ---------- Wordmark / Logo ----------
function Wordmark({ inverted = false }) {
  const color = inverted ? "#FFFFFF" : "var(--primary)";
  return (
    <span style={{
      fontFamily: "var(--font-display)",
      fontWeight: 700,
      letterSpacing: "0.16em",
      fontSize: 14,
      color,
    }}>
      SI <span style={{ fontWeight: 500, fontStyle: "italic", letterSpacing: "0.04em" }}>FASHION</span>
    </span>
  );
}

// ---------- Eyebrow ----------
function Eyebrow({ children, onDark = false, noRule = false }) {
  return (
    <div className={"eyebrow" + (onDark ? " on-dark" : "") + (noRule ? " no-rule" : "")}>
      {children}
    </div>
  );
}

// ---------- Section head ----------
function SectionHead({ eyebrow, title, right, dark = false }) {
  return (
    <div className="section-head">
      <div>
        <Eyebrow onDark={dark}>{eyebrow}</Eyebrow>
        <h2 style={{ marginTop: 18 }}>{title}</h2>
      </div>
      <div className="right">{right}</div>
    </div>
  );
}

// ---------- Navbar ----------
function Navbar({ route, navigate, onEnquire }) {
  const [drawer, setDrawer] = useState(false);
  const links = [
    { id: "showroom", label: "Showroom" },
    { id: "brands", label: "Brands" },
    { id: "sports", label: "Sports Speciality" },
    { id: "brand-development", label: "Brand Development" },
    { id: "about", label: "About" },
    { id: "contact", label: "Contact" },
  ];

  return (
    <>
      <nav className="nav">
        <div className="wrap nav-inner">
          <div className="nav-brand" onClick={() => navigate("home")} style={{ cursor: "pointer" }}>
            <span className="mark"><img src="media/favicon-si-fashion.svg" alt="" /></span>
            <Wordmark />
          </div>
          <div className="nav-links">
            {links.map(l => (
              <span key={l.id}
                className={"nav-link" + (route === l.id ? " active" : "")}
                onClick={() => navigate(l.id)}
              >{l.label}</span>
            ))}
          </div>
          <div className="nav-right">
            <div className="nav-locale">
              <span className="on">EN</span>
              <span title="Arabic — phase 1 launch locale">AR</span>
              <span title="Russian — stub">RU</span>
              <span title="Chinese — stub">ZH</span>
            </div>
            <button className="btn sm" onClick={onEnquire}>Enquire <ArrowRight /></button>
            <button className="nav-menu-btn" onClick={() => setDrawer(true)} aria-label="Menu">
              <svg width="18" height="18" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="1.6" fill="none">
                <path d="M3 6h18M3 12h18M3 18h18"/>
              </svg>
            </button>
          </div>
        </div>
      </nav>
      {drawer && (
        <div className="nav-drawer">
          <div className="nav-drawer-top">
            <Wordmark inverted />
            <button onClick={() => setDrawer(false)} style={{
              width: 40, height: 40, border: "1px solid var(--on-primary-line)",
              background: "transparent", color: "var(--on-primary)", cursor: "pointer"
            }}><CloseIcon /></button>
          </div>
          <div className="nav-drawer-links">
            {links.map(l => (
              <a key={l.id} onClick={() => { navigate(l.id); setDrawer(false); }}>{l.label}</a>
            ))}
          </div>
          <div style={{ marginTop: "auto", paddingTop: 32, borderTop: "1px solid var(--on-primary-line)" }}>
            <button className="btn on-dark" onClick={() => { setDrawer(false); onEnquire(); }}>
              Connect With Us <ArrowRight />
            </button>
          </div>
        </div>
      )}
    </>
  );
}

// ---------- Hero ----------
function Hero({ onEnquire, navigate, heroImage }) {
  return (
    <section className="hero">
      <div className="wrap hero-grid">
        <div>
          <Eyebrow onDark>The Showroom by Si Fashion — Dubai Design District</Eyebrow>
          <h1 style={{ marginTop: 28 }}>
            Shaping the brands<br/>
            <span className="accent">for the future.</span>
          </h1>
          <p className="hero-sub">
            A fashion distribution and brand-development partner based at Dubai Design District.
            Thirty years of regional expertise, placed at the service of the brands defining what comes next.
          </p>
          <div className="hero-cta">
            <button className="btn on-dark" onClick={() => navigate("brands")}>
              Explore Brands <ArrowRight />
            </button>
            <button className="btn ghost on-dark" onClick={onEnquire}>
              Connect With Us
            </button>
          </div>
        </div>
        <div className="hero-media">
          <img src={heroImage} alt="Editorial campaign tile" />
          <div className="hero-tag">Editorial · Si Fashion Roster · S/S 26</div>
        </div>
      </div>

      <div className="hero-ticker">
        <div className="hero-ticker-track">
          {[0, 1].map(i => (
            <span key={i}>
              <em>●</em> Dubai Design District &nbsp;·&nbsp;
              <em>●</em> Multi-brand showroom &nbsp;·&nbsp;
              <em>●</em> 13 territories &nbsp;·&nbsp;
              <em>●</em> RVS Group since 1989 &nbsp;·&nbsp;
              <em>●</em> Department stores &nbsp;·&nbsp;
              <em>●</em> Concept stores &nbsp;·&nbsp;
              <em>●</em> E-commerce &nbsp;·&nbsp;
              <em>●</em> Sports speciality &nbsp;·&nbsp;
            </span>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- Credibility ----------
function Credibility() {
  return (
    <div className="wrap" style={{ paddingTop: 0, paddingBottom: 0 }}>
      <div className="cred">
        {SF_DATA.credibility.map(c => (
          <div className="cred-item" key={c.label}>
            <div className="cred-figure">{c.figure}</div>
            <div className="cred-label">{c.label}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ---------- Division card ----------
function DivisionCard({ d, navigate }) {
  return (
    <div className="div-card" onClick={() => navigate(d.cta.to)}>
      <div className="no">{d.eyebrow}</div>
      <h3>{d.title}</h3>
      <div className="tagline">{d.tagline}</div>
      <p className="body">{d.body}</p>
      <div className="cta">
        <span className="link-arrow">{d.cta.label} <ArrowRight /></span>
      </div>
    </div>
  );
}

// ---------- Brand card ----------
function BrandCard({ b, onOpen, idx, showTiles }) {
  const useImage = showTiles && b.tile;
  return (
    <div className="brand-card" onClick={() => onOpen(b)}>
      <div className="cat-tag">{b.category}</div>
      {useImage ? (
        <div className="brand-tile">
          <img src={b.tile} alt={`${b.name} — lookbook tile`} loading="lazy" />
        </div>
      ) : (
        <div className="brand-tile placeholder">
          <div className="ph-label">{b.category}<br/>· · ·<br/>Tile pending rights</div>
        </div>
      )}
      <div className="brand-meta">
        <div className="name">{b.name}</div>
        <div className="origin">{b.origin}</div>
        <div className="note">{b.note}</div>
      </div>
    </div>
  );
}

// ---------- Brand detail drawer ----------
function BrandDetail({ brand, onClose, onEnquire, showTiles }) {
  if (!brand) return null;
  useEffect(() => {
    const h = (e) => e.key === "Escape" && onClose();
    window.addEventListener("keydown", h);
    return () => window.removeEventListener("keydown", h);
  }, [onClose]);

  return (
    <div className="brand-detail" onClick={onClose}>
      <div className="brand-detail-panel" onClick={e => e.stopPropagation()}>
        <div className="close">
          <Eyebrow noRule>Represented brand · {brand.category}</Eyebrow>
          <button onClick={onClose} aria-label="Close"><CloseIcon /></button>
        </div>
        {showTiles && brand.tile ? (
          <div className="hero-tile"><img src={brand.tile} alt={brand.name} /></div>
        ) : (
          <div className="hero-tile" style={{
            background: "repeating-linear-gradient(135deg, var(--surface) 0 14px, var(--surface-2) 14px 28px)",
            display: "grid", placeItems: "center"
          }}>
            <div className="tag">Permissioned imagery pending</div>
          </div>
        )}
        <div className="body">
          <h2>{brand.name}</h2>
          <div className="meta-row">
            <span className="pill">Origin · {brand.origin}</span>
            <span className="pill">Category · {brand.category}</span>
          </div>
          <p className="lede" style={{ marginTop: 22 }}>{brand.note}</p>
          <p style={{ marginTop: 18, color: "var(--ink-dim)" }}>
            Distributed by Si Fashion across MENA. Available for placement in department stores,
            concept retailers, sneaker & sports speciality channels and fashion e-commerce.
          </p>

          <div className="sect">
            <h4>Placement Channels</h4>
            <div className="channel-list">
              {SF_DATA.channels.map(c => <span key={c.code} className="pill">{c.label}</span>)}
            </div>
          </div>

          <div className="sect">
            <h4>Territories</h4>
            <div className="channel-list">
              {["UAE","KSA","Qatar","Bahrain","Kuwait","Oman","Lebanon","Jordan","Egypt","India","CIS","South Africa"].map(t =>
                <span key={t} className="pill">{t}</span>
              )}
            </div>
          </div>

          <div style={{ marginTop: 36, display: "flex", gap: 12, flexWrap: "wrap" }}>
            <button className="btn" onClick={() => onEnquire({ brand: brand.name, type: "Retailer enquiry" })}>
              Stock this brand <ArrowRight />
            </button>
            <button className="btn ghost" onClick={() => onEnquire({ brand: brand.name, type: "Press / Lookbook" })}>
              Request line sheet
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

// ---------- Territory grid ----------
function TerritoryGrid({ dark = false }) {
  return (
    <div className="terr-grid">
      {SF_DATA.territories.map((t, i) => (
        <div className="terr-item" key={t}>
          <span>{t}</span>
          <span className="idx">{String(i + 1).padStart(2, "0")}</span>
        </div>
      ))}
    </div>
  );
}

// ---------- Process strip ----------
function ProcessStrip({ dark = false }) {
  return (
    <div className="process">
      {SF_DATA.process.map(p => (
        <div className="process-step" key={p.step}>
          <div className="step-no">{p.step}</div>
          <h4>{p.title}</h4>
          <div className="body">{p.body}</div>
        </div>
      ))}
    </div>
  );
}

// ---------- Footer ----------
function Footer({ navigate, onEnquire }) {
  const c = SF_DATA.contact;
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer-grid">
          <div className="mark-block">
            <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
              <span style={{ width: 36, height: 36, background: "var(--accent)", display: "grid", placeItems: "center" }}>
                <img src="media/favicon-si-fashion.svg" alt="" style={{ width: 22, height: 22, filter: "brightness(0)" }} />
              </span>
              <span className="wordmark">SI FASHION</span>
            </div>
            <p>
              A Dubai Design District distribution and brand-development partner.
              Operator of The Showroom by Si Fashion. Part of RVS Group, founded 1989.
            </p>
            <div style={{ display: "flex", gap: 14, color: "var(--accent)" }}>
              <a href={c.instagram} target="_blank" rel="noreferrer" title={c.instagramHandle}><InstagramIcon /></a>
              <a href={c.linkedin} target="_blank" rel="noreferrer" title={c.linkedinHandle}><LinkedInIcon /></a>
            </div>
          </div>

          <div>
            <h5>Divisions</h5>
            <ul>
              <li><a onClick={() => navigate("showroom")}>The Showroom</a></li>
              <li><a onClick={() => navigate("sports")}>Sports Speciality</a></li>
              <li><a onClick={() => navigate("brand-development")}>Brand Development</a></li>
              <li><a onClick={() => navigate("brands")}>Brand Roster</a></li>
            </ul>
          </div>

          <div>
            <h5>Company</h5>
            <ul>
              <li><a onClick={() => navigate("about")}>About</a></li>
              <li><a onClick={() => navigate("contact")}>Contact</a></li>
              <li><a onClick={onEnquire}>Enquire</a></li>
              <li><a>Careers · on request</a></li>
            </ul>
          </div>

          <div>
            <h5>Contact</h5>
            <ul>
              <li><a href={c.phoneHref}>{c.phone}</a></li>
              <li><a href={c.emailHref}>{c.email}</a></li>
              <li style={{ color: "var(--on-primary-dim)", fontSize: 13, lineHeight: 1.55 }}>
                {c.address}<br/>{c.addressLine2}
              </li>
            </ul>
          </div>
        </div>

        <div className="footer-bottom">
          <span>© 2026 Si Fashion · Powered by RVS Group</span>
          <span>Premium B2B representation · MENA</span>
        </div>
      </div>
    </footer>
  );
}

// ---------- Sticky Enquire FAB ----------
function EnquireFab({ onClick }) {
  return (
    <button className="enq-fab" onClick={onClick}>
      Connect With Us <ArrowRight />
    </button>
  );
}

Object.assign(window, {
  ArrowRight, ArrowDown, CloseIcon, InstagramIcon, LinkedInIcon,
  Wordmark, Eyebrow, SectionHead,
  Navbar, Hero, Credibility,
  DivisionCard, BrandCard, BrandDetail,
  TerritoryGrid, ProcessStrip,
  Footer, EnquireFab,
});
