/* Shared primitives + layout chrome (nav, sticky CTA, mobile bar, foundational components). */

const PHONE = "+971 4 441 5370";
const PHONE_TEL = "+97144415370";
const WA_LINK = "https://wa.me/97144415370?text=Hello%20360hub-ae%2C%20I%27d%20like%20to%20discuss%20an%20F%26B%20launch%20in%20the%20UAE.";
const EMAIL = "hello@360hub.ae";

function Container({ children, style, className }) {
  return (
    <div
      className={className}
      style={{
        maxWidth: 1280,
        margin: "0 auto",
        padding: "0 32px",
        ...style,
      }}
    >
      {children}
    </div>
  );
}

function SectionLabel({ index, label, tone = "dark" }) {
  const color = tone === "light" ? "rgba(250,247,240,0.55)" : "rgba(11,17,22,0.45)";
  const dot = tone === "light" ? "var(--brass-400)" : "var(--brass-500)";
  return (
    <div className="mono" style={{
      fontSize: 11,
      letterSpacing: "0.18em",
      textTransform: "uppercase",
      color,
      display: "flex",
      alignItems: "center",
      gap: 12,
      marginBottom: 28,
    }}>
      <span style={{ width: 6, height: 6, background: dot, display: "inline-block" }}></span>
      <span>{index}</span>
      <span style={{ flex: "0 0 28px", height: 1, background: "currentColor", opacity: 0.5 }}></span>
      <span>{label}</span>
    </div>
  );
}

function Btn({ children, variant = "primary", onClick, href, icon, style }) {
  const base = {
    display: "inline-flex",
    alignItems: "center",
    gap: 10,
    padding: "14px 20px",
    fontSize: 15,
    fontWeight: 500,
    letterSpacing: "-0.005em",
    border: "1px solid transparent",
    cursor: "pointer",
    textDecoration: "none",
    transition: "background 160ms ease, color 160ms ease, border-color 160ms ease, transform 160ms ease",
    whiteSpace: "nowrap",
    lineHeight: 1,
  };
  const variants = {
    primary: { background: "var(--navy-800)", color: "var(--sand-100)", borderColor: "var(--navy-800)" },
    primaryLight: { background: "var(--sand-100)", color: "var(--navy-800)", borderColor: "var(--sand-100)" },
    brass:   { background: "var(--brass-500)", color: "var(--navy-900)", borderColor: "var(--brass-500)" },
    ghost:   { background: "transparent", color: "var(--navy-800)", borderColor: "var(--line-strong)" },
    ghostLight: { background: "transparent", color: "var(--sand-100)", borderColor: "rgba(250,247,240,0.3)" },
  };
  const props = {
    style: { ...base, ...variants[variant], ...style },
    onClick,
    onMouseEnter: (e) => { e.currentTarget.style.transform = "translateY(-1px)"; },
    onMouseLeave: (e) => { e.currentTarget.style.transform = "translateY(0)"; },
  };
  const inner = (
    <>
      <span>{children}</span>
      {icon !== false && (
        <svg width="14" height="14" viewBox="0 0 14 14" fill="none" style={{ flexShrink: 0 }}>
          <path d="M3 7H11M11 7L7.5 3.5M11 7L7.5 10.5" stroke="currentColor" strokeWidth="1.4" strokeLinecap="square"/>
        </svg>
      )}
    </>
  );
  if (href) return <a href={href} {...props}>{inner}</a>;
  return <button {...props}>{inner}</button>;
}

function TopNav({ onScrollTo }) {
  const links = [
    ["What we do", "what"],
    ["Who we help", "who"],
    ["How it works", "how"],
    ["Why UAE", "why-uae"],
    ["Contact", "contact"],
  ];
  return (
    <header style={{
      position: "sticky", top: 0, zIndex: 50,
      background: "rgba(250,247,240,0.85)",
      backdropFilter: "blur(12px)",
      WebkitBackdropFilter: "blur(12px)",
      borderBottom: "1px solid var(--line)",
    }}>
      <Container style={{ display: "flex", alignItems: "center", justifyContent: "space-between", height: 68 }}>
        <a href="#top" style={{ display: "flex", alignItems: "center", gap: 10, textDecoration: "none" }}>
          <Logo />
          <span className="mono" style={{ fontSize: 11, letterSpacing: "0.14em", color: "var(--grey-500)", textTransform: "uppercase" }}>
            F&amp;B execution platform
          </span>
        </a>
        <nav style={{ display: "flex", alignItems: "center", gap: 28 }} className="hide-mobile">
          {links.map(([label, id]) => (
            <a key={id} onClick={(e) => { e.preventDefault(); onScrollTo(id); }} href={`#${id}`}
              style={{ fontSize: 14, color: "var(--navy-700)", textDecoration: "none", cursor: "pointer" }}>
              {label}
            </a>
          ))}
        </nav>
        <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
          <a href={WA_LINK} target="_blank" rel="noreferrer"
            className="hide-mobile"
            style={{ fontSize: 13, color: "var(--navy-700)", textDecoration: "none", display: "flex", alignItems: "center", gap: 8 }}>
            <span className="mono" style={{ fontSize: 12, color: "var(--grey-500)" }}>WA</span>
            {PHONE}
          </a>
          <Btn variant="primary" onClick={() => onScrollTo("contact")} style={{ padding: "10px 16px", fontSize: 14 }}>
            Book intro call
          </Btn>
        </div>
      </Container>
      <style>{`
        @media (max-width: 880px) {
          .hide-mobile { display: none !important; }
        }
      `}</style>
    </header>
  );
}

function Logo() {
  return (
    <div style={{ display: "flex", alignItems: "baseline", gap: 6 }}>
      <span style={{
        fontSize: 22,
        fontWeight: 600,
        letterSpacing: "-0.03em",
        color: "var(--navy-800)",
        lineHeight: 1,
      }}>360hub</span>
      <span className="mono" style={{
        fontSize: 11,
        color: "var(--brass-500)",
        letterSpacing: "0.08em",
        textTransform: "uppercase",
      }}>·ae</span>
    </div>
  );
}

function MobileStickyBar({ onScrollTo }) {
  return (
    <div className="mobile-bar" style={{
      position: "fixed",
      bottom: 0, left: 0, right: 0,
      background: "var(--navy-800)",
      color: "var(--sand-100)",
      zIndex: 100,
      display: "none",
      borderTop: "1px solid var(--navy-600)",
    }}>
      <a href={`tel:${PHONE_TEL}`} style={mobileBtnStyle}>
        <IconPhone /> <span>Call</span>
      </a>
      <a href={WA_LINK} target="_blank" rel="noreferrer" style={{ ...mobileBtnStyle, borderLeft: "1px solid var(--navy-600)", borderRight: "1px solid var(--navy-600)" }}>
        <IconChat /> <span>WhatsApp</span>
      </a>
      <a onClick={(e) => { e.preventDefault(); onScrollTo("contact"); }} href="#contact" style={mobileBtnStyle}>
        <IconSend /> <span>Send brief</span>
      </a>
      <style>{`
        @media (max-width: 880px) {
          .mobile-bar { display: grid !important; grid-template-columns: 1fr 1fr 1fr; }
          body { padding-bottom: 64px; }
        }
      `}</style>
    </div>
  );
}

const mobileBtnStyle = {
  display: "flex",
  alignItems: "center",
  justifyContent: "center",
  gap: 8,
  padding: "16px 8px",
  color: "var(--sand-100)",
  textDecoration: "none",
  fontSize: 13,
  fontWeight: 500,
};

function IconPhone() {
  return (
    <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
      <path d="M3 3.5C3 3 3.4 2.5 4 2.5H5.5L6.5 5L5 6C5.5 7.5 7 9 8.5 9.5L9.5 8L12 9V10.5C12 11.1 11.5 11.5 11 11.5C6.5 11.5 3 8 3 3.5Z"
        stroke="currentColor" strokeWidth="1.3" strokeLinejoin="round"/>
    </svg>
  );
}
function IconChat() {
  return (
    <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
      <path d="M2.5 4.5C2.5 3.4 3.4 2.5 4.5 2.5H11.5C12.6 2.5 13.5 3.4 13.5 4.5V9C13.5 10.1 12.6 11 11.5 11H6.5L3.5 13.5V11H4.5C3.4 11 2.5 10.1 2.5 9V4.5Z"
        stroke="currentColor" strokeWidth="1.3" strokeLinejoin="round"/>
    </svg>
  );
}
function IconSend() {
  return (
    <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
      <path d="M2.5 8L13.5 2.5L9.5 13.5L7.5 9L2.5 8Z" stroke="currentColor" strokeWidth="1.3" strokeLinejoin="round"/>
    </svg>
  );
}
function IconCheck() {
  return (
    <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
      <path d="M2.5 7L5.5 10L11.5 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="square" fill="none"/>
    </svg>
  );
}
function IconArrow({ size = 14 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 14 14" fill="none">
      <path d="M3 7H11M11 7L7.5 3.5M11 7L7.5 10.5" stroke="currentColor" strokeWidth="1.4" strokeLinecap="square"/>
    </svg>
  );
}

// Subtle ruled background for sand sections
function RuledBg({ color = "rgba(11,17,22,0.05)" }) {
  return (
    <div aria-hidden style={{
      position: "absolute", inset: 0,
      backgroundImage:
        `linear-gradient(to right, ${color} 1px, transparent 1px)`,
      backgroundSize: "calc((100% - 64px) / 12) 100%",
      backgroundPosition: "32px 0",
      pointerEvents: "none",
      maskImage: "linear-gradient(to bottom, transparent, black 12%, black 88%, transparent)",
    }}></div>
  );
}

Object.assign(window, {
  Container, SectionLabel, Btn, TopNav, MobileStickyBar, Logo, RuledBg,
  IconPhone, IconChat, IconSend, IconCheck, IconArrow,
  PHONE, PHONE_TEL, WA_LINK, EMAIL,
});