/* global React */
const { useState, useEffect, useRef } = React;

// ===== Eyebrow (small caps, brass) =====
function Eyebrow({ children, tone = "brass", style }) {
  const color = tone === "gold" ? "var(--tf-brass-300)" : tone === "muted" ? "var(--tf-fg-muted)" : "var(--tf-brass-600)";
  return <div style={{ fontFamily: "var(--tf-font-body)", fontWeight: 600, fontSize: 12, letterSpacing: "0.18em", textTransform: "uppercase", color, ...style }}>{children}</div>;
}

// ===== Brass rule with optional jaali ornament =====
function BrassRule({ ornament = false, color }) {
  if (ornament) {
    return (
      <div style={{ display: "flex", alignItems: "center", gap: 14, padding: "8px 0" }}>
        <div style={{ flex: 1, height: 1, background: "linear-gradient(90deg,transparent,var(--tf-brass-400) 50%,transparent)" }} />
        <img src="assets/jaali-quatrefoil.svg" style={{ height: 26, opacity: 0.85 }} alt="" />
        <div style={{ flex: 1, height: 1, background: "linear-gradient(90deg,transparent,var(--tf-brass-400) 50%,transparent)" }} />
      </div>);

  }
  return <hr style={{ border: 0, height: 1, background: "linear-gradient(90deg,transparent," + (color || "var(--tf-brass-400)") + " 20%," + (color || "var(--tf-brass-400)") + " 80%,transparent)", opacity: 0.6, margin: 0 }} />;
}

// ===== Button =====
function Button({ children, variant = "primary", onClick, fullWidth = false, size = "md", href, target, rel, ...rest }) {
  const sizes = {
    sm: { padding: "10px 18px", fontSize: 13 },
    md: { padding: "13px 24px", fontSize: 14 },
    lg: { padding: "16px 28px", fontSize: 15 }
  };
  const variants = {
    primary: { background: "var(--tf-saffron-500)", color: "#fff", border: "0", boxShadow: "var(--tf-shadow-glow-saffron)" },
    flame: { background: "var(--tf-flame-gradient)", color: "#fff", border: "0", boxShadow: "var(--tf-shadow-glow-saffron)" },
    crimson: { background: "var(--tf-crimson-500)", color: "#fff", border: "0", boxShadow: "0 6px 16px rgba(76,45,20,0.18)" },
    outline: { background: "transparent", color: "#fff", border: "1px solid rgba(255,255,255,0.4)" },
    outlineDark: { background: "transparent", color: "var(--tf-ink-700)", border: "1px solid var(--tf-border-strong)" },
    brass: { background: "var(--tf-brass-300)", color: "var(--tf-ink-700)", border: "0" },
    ghost: { background: "transparent", color: "var(--tf-crimson-600)", border: "0", padding: "8px 0" }
  };
  const baseStyle = {
    fontFamily: "var(--tf-font-body)",
    fontWeight: 600,
    letterSpacing: "0.04em",
    borderRadius: 999,
    cursor: "pointer",
    display: "inline-flex",
    alignItems: "center",
    justifyContent: "center",
    gap: 8,
    transition: "transform 140ms var(--tf-ease-warm), box-shadow 220ms var(--tf-ease-warm), background 140ms var(--tf-ease-warm)",
    width: fullWidth ? "100%" : "auto",
    textAlign: "center",
    ...sizes[size],
    ...variants[variant]
  };
  const handlers = {
    onMouseOver: (e) => {e.currentTarget.style.transform = "translateY(-2px)";},
    onMouseOut: (e) => {e.currentTarget.style.transform = "translateY(0)";}
  };
  if (href) {
    return <a href={href} target={target} rel={rel} onClick={onClick} style={baseStyle} {...handlers} {...rest}>{children}</a>;
  }
  return <button onClick={onClick} style={baseStyle} {...handlers} {...rest}>{children}</button>;
}

// ===== Lucide-style icons (1.5px stroke, rounded) =====
const Icon = {
  Menu: (p) => <svg width={20} height={20} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M3 6h18M3 12h18M3 18h18" /></svg>,
  Close: (p) => <svg width={20} height={20} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M6 6l12 12M6 18L18 6" /></svg>,
  Phone: (p) => <svg width={18} height={18} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M22 16.92V21a1 1 0 01-1.1 1A19 19 0 012 4.1 1 1 0 013 3h4.09a1 1 0 011 .75l1 4a1 1 0 01-.27.95L7.21 10.79a16 16 0 006 6l2.09-1.61a1 1 0 01.95-.27l4 1a1 1 0 01.75 1z" /></svg>,
  Pin: (p) => <svg width={18} height={18} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 1118 0z" /><circle cx="12" cy="10" r="3" /></svg>,
  Clock: (p) => <svg width={18} height={18} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" {...p}><circle cx="12" cy="12" r="9" /><path d="M12 7v5l3 2" /></svg>,
  Pickup: (p) => <svg width={20} height={20} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M3 7h18M5 7v13a1 1 0 001 1h12a1 1 0 001-1V7M9 11v4M15 11v4" /></svg>,
  Truck: (p) => <svg width={20} height={20} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M3 13h13l3-4h2v8h-2" /><circle cx="7" cy="18" r="2" /><circle cx="17" cy="18" r="2" /></svg>,
  Arrow: (p) => <svg width={18} height={18} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M5 12h14M13 5l7 7-7 7" /></svg>,
  IG: (p) => <svg width={18} height={18} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" {...p}><rect x="3" y="3" width="18" height="18" rx="5" /><circle cx="12" cy="12" r="4" /><circle cx="17.5" cy="6.5" r="0.8" fill="currentColor" /></svg>
};

// ===== Logo (image) =====
function Logo({ variant = "horizontal", height = 78, ...rest }) {
  const src = variant === "circle"
    ? "assets/logo-circle.png"
    : variant === "medallion"
    ? "assets/logo-medallion.png"
    : "assets/logo-horizontal-new.png";
  return <img src={src} alt="Tandoori Flames" style={{ height, width: "auto", padding: "5px" }} {...rest} />;
}

// ===== Dish placeholder (warm gradient card with dish name typeset)
function DishPlaceholder({ name, idx = 0, aspect = "4 / 5" }) {
  const palette = [
  { bg: "linear-gradient(150deg,#bf4d3a 0%,#6c1b0f 100%)", glow: "radial-gradient(60% 50% at 30% 30%, rgba(217,136,7,0.55), transparent 60%)" },
  { bg: "linear-gradient(150deg,#d98807 0%,#855004 100%)", glow: "radial-gradient(60% 50% at 70% 30%, rgba(255,220,150,0.45), transparent 60%)" },
  { bg: "linear-gradient(150deg,#6b481f 0%,#33220d 100%)", glow: "radial-gradient(60% 50% at 30% 30%, rgba(217,136,7,0.4), transparent 60%)" },
  { bg: "linear-gradient(150deg,#a8311e 0%,#4d150c 100%)", glow: "radial-gradient(60% 50% at 70% 35%, rgba(217,136,7,0.4), transparent 60%)" },
  { bg: "linear-gradient(150deg,#8a6618 0%,#4d380a 100%)", glow: "radial-gradient(60% 50% at 30% 30%, rgba(255,220,150,0.45), transparent 60%)" },
  { bg: "linear-gradient(150deg,#bf9636 0%,#6c4f10 100%)", glow: "radial-gradient(60% 50% at 70% 35%, rgba(255,255,255,0.25), transparent 60%)" }];

  const p = palette[idx % palette.length];
  return (
    <div style={{ position: "relative", width: "100%", aspectRatio: aspect, background: p.bg, overflow: "hidden", borderRadius: "inherit" }}>
      <div style={{ position: "absolute", inset: 0, background: p.glow }} />
      {/* faint quatrefoil watermark */}
      <img src="assets/jaali-quatrefoil.svg" alt="" style={{ position: "absolute", right: -20, bottom: -20, width: 120, opacity: 0.08, filter: "brightness(0) invert(1)" }} />
      <div style={{ position: "absolute", left: 16, right: 16, bottom: 14 }}>
        <div style={{ fontFamily: "var(--tf-font-script)", fontSize: 14, color: "rgba(255,255,255,0.5)", lineHeight: 1 }}>photo</div>
        <div style={{ fontFamily: "var(--tf-font-display)", fontWeight: 500, fontSize: 18, color: "rgba(255,255,255,0.85)", textWrap: "balance", marginTop: 2 }}>{name}</div>
      </div>
    </div>);

}

// ===== Gallery placeholder (square / various aspects)
function GalleryPlaceholder({ kind = "dish", idx = 0, label, style }) {
  // kinds: dish | room | hands | flame | tandoor | bar
  const variants = {
    dish: { bg: "radial-gradient(60% 60% at 50% 45%, #bf4d3a 0%, #6c1b0f 70%, #2e0b07 100%)", glow: "radial-gradient(45% 35% at 50% 55%, rgba(255,200,100,0.45), transparent 70%)" },
    room: { bg: "linear-gradient(180deg,#322b24 0%, #1a1714 100%)", glow: "radial-gradient(40% 30% at 50% 70%, rgba(217,136,7,0.35), transparent 70%)" },
    hands: { bg: "linear-gradient(150deg,#6b481f 0%,#33220d 100%)", glow: "radial-gradient(50% 40% at 30% 30%, rgba(217,136,7,0.35), transparent 70%)" },
    flame: { bg: "radial-gradient(circle at 50% 70%, #d98807 0%, #a8311e 35%, #2e0b07 80%)", glow: "radial-gradient(35% 25% at 50% 70%, rgba(255,220,140,0.7), transparent 70%)" },
    tandoor: { bg: "linear-gradient(180deg,#1a1714 0%,#322b24 100%)", glow: "radial-gradient(60% 50% at 50% 60%, rgba(217,136,7,0.45), transparent 70%)" },
    bar: { bg: "linear-gradient(150deg,#4d380a 0%, #2e2105 100%)", glow: "radial-gradient(40% 30% at 70% 40%, rgba(255,220,140,0.35), transparent 70%)" }
  };
  const v = variants[kind] || variants.dish;
  return (
    <div style={{ position: "relative", overflow: "hidden", background: v.bg, ...style }}>
      <div style={{ position: "absolute", inset: 0, background: v.glow }} />
      <img src="assets/jaali-quatrefoil.svg" alt="" style={{ position: "absolute", right: -30, top: -30, width: 110, opacity: 0.06, filter: "brightness(0) invert(1)" }} />
      <div style={{ position: "absolute", left: 14, bottom: 12, fontFamily: "var(--tf-font-script)", fontSize: 18, color: "rgba(255,255,255,0.55)" }}>{label || kind}</div>
    </div>);

}

// hours computed for "today highlighted" — schedule per the design system Footer.
// Mon closed, Tue–Thu 5–10, Fri–Sat 5–11, Sun 5–10.
// Open every day, 11am – 10pm.
function getHours() {
  const grouped = [
    { range: "Everyday", line: "11am – 10pm", dayKeys: [0, 1, 2, 3, 4, 5, 6] },
  ];
  const today = new Date().getDay();
  // Compute open/closed status against current local time
  const now = new Date();
  const minutes = now.getHours() * 60 + now.getMinutes();
  const isOpen = minutes >= 11 * 60 && minutes < 22 * 60;
  return { grouped, today, isOpen, openLabel: "11am – 10pm" };
}

Object.assign(window, { Eyebrow, BrassRule, Button, Icon, Logo, DishPlaceholder, GalleryPlaceholder, getHours });