// components.jsx — shared UI: Navbar, Footer, Logo, icons, helpers.

const ArrowUR = ({ className = "arrow-icon" }) => (
  <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
    <path d="M7 17 L17 7" />
    <path d="M8 7 H17 V16" />
  </svg>
);

const ArrowR = ({ className = "arrow-icon" }) => (
  <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
    <path d="M5 12 H19" />
    <path d="M13 6 L19 12 L13 18" />
  </svg>
);

const ArrowL = ({ className = "arrow-icon" }) => (
  <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
    <path d="M19 12 H5" />
    <path d="M11 6 L5 12 L11 18" />
  </svg>
);

// Logo lockup — mark + wordmark
const SnoopyLogo = ({ small = false, onDark = false }) => (
  <div className="nav-logo">
    <div className="nav-mark" aria-hidden="true"></div>
    <div className="nav-name">
      SNOOPY <span>PRODUCTIONS</span>
    </div>
  </div>
);

const NAV_ITEMS = [
  { id: "home", label: "Home" },
  { id: "work", label: "Work" },
  { id: "services", label: "Services" },
  { id: "about", label: "About" },
  { id: "clients", label: "Clients" },
  { id: "contact", label: "Contact" },
];

function Navbar({ route, navigate, onDark = false, openEnquire }) {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    window.addEventListener("scroll", onScroll);
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const navClass = `nav ${onDark ? "on-dark" : ""}`;
  return (
    <header className={navClass}>
      <div className="container">
        <div className="nav-inner">
          <a onClick={(e) => { e.preventDefault(); navigate("home"); }} href="#home" aria-label="Snoopy Productions — Home">
            <SnoopyLogo onDark={onDark} />
          </a>
          <nav className="nav-links" aria-label="Primary">
            {NAV_ITEMS.map((it) => (
              <a key={it.id} className={`nav-link ${route.page === it.id ? "active" : ""}`}
                 href={`#${it.id}`}
                 onClick={(e) => { e.preventDefault(); navigate(it.id); }}>
                {it.label}
              </a>
            ))}
          </nav>
          <div className="lang-toggle" title="Language (Arabic locale planned per CLAUDE-DESIGN §1)">
            <span className="lang active">EN</span>
            <span className="lang">AR</span>
          </div>
          <button className="btn btn-primary btn-sm nav-cta" onClick={openEnquire}>
            Enquire
            <ArrowUR />
          </button>
        </div>
      </div>
    </header>
  );
}

function Footer({ navigate, openEnquire }) {
  return (
    <footer className="footer">
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "2fr 1fr 1fr 1fr 1.2fr", gap: 40 }} className="footer-grid">
          <div>
            <SnoopyLogo onDark />
            <p style={{ marginTop: 18, color: "#C9C0DE", fontSize: 15, maxWidth: 340 }}>
              A 360 creative production house in Dubai — design, in-house fabrication and technical delivery under one roof.
            </p>
            <button className="btn btn-light mt-6" onClick={openEnquire}>
              Brief us
              <ArrowUR />
            </button>
          </div>
          <div>
            <h4>Studio</h4>
            <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "grid", gap: 10, fontSize: 14 }}>
              <li><a href="#work" onClick={(e)=>{e.preventDefault(); navigate("work");}}>Work</a></li>
              <li><a href="#services" onClick={(e)=>{e.preventDefault(); navigate("services");}}>Services</a></li>
              <li><a href="#about" onClick={(e)=>{e.preventDefault(); navigate("about");}}>About</a></li>
              <li><a href="#clients" onClick={(e)=>{e.preventDefault(); navigate("clients");}}>Clients</a></li>
              <li><a href="#contact" onClick={(e)=>{e.preventDefault(); navigate("contact");}}>Contact</a></li>
              <li><a href="#partner" onClick={(e)=>{e.preventDefault(); navigate("contact");}}>Become a partner</a></li>
            </ul>
          </div>
          <div>
            <h4>Services</h4>
            <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "grid", gap: 10, fontSize: 14 }}>
              <li><a href="#" onClick={(e)=>{e.preventDefault(); navigate("services");}}>Event Production</a></li>
              <li><a href="#" onClick={(e)=>{e.preventDefault(); navigate("services");}}>Activations</a></li>
              <li><a href="#" onClick={(e)=>{e.preventDefault(); navigate("services");}}>Custom Builds</a></li>
              <li><a href="#" onClick={(e)=>{e.preventDefault(); navigate("services");}}>Retail Display</a></li>
              <li><a href="#" onClick={(e)=>{e.preventDefault(); navigate("services");}}>Signage</a></li>
              <li><a href="#" onClick={(e)=>{e.preventDefault(); navigate("services");}}>Art Installations</a></li>
            </ul>
          </div>
          <div>
            <h4>Contact</h4>
            <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "grid", gap: 10, fontSize: 14, color:"#C9C0DE" }}>
              <li>
                Al Quoz Industrial Area 3<br/>Dubai, UAE
                <div style={{ fontSize: 11, color: "#8A82A8", marginTop: 4 }}>Confirm exact unit/street</div>
              </li>
              <li><a href="tel:+971506496600">+971 50 649 6600</a></li>
              <li>
                <a href="mailto:hello@snoopyeverything.com">hello@snoopyeverything.com</a>
                <div style={{ fontSize: 11, color: "#8A82A8", marginTop: 4 }}>Live inbound — confirm</div>
              </li>
            </ul>
          </div>
          <div>
            <h4>Follow</h4>
            <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "grid", gap: 10, fontSize: 14 }}>
              <li><a href="https://instagram.com/snoopyproductions" target="_blank" rel="noreferrer">Instagram ↗</a></li>
              <li>
                <a href="https://www.linkedin.com/company/snoopy-productions" target="_blank" rel="noreferrer">LinkedIn ↗</a>
                <div style={{ fontSize: 11, color: "#8A82A8", marginTop: 4 }}>Confirm ownership</div>
              </li>
            </ul>
            <div style={{ marginTop: 28, padding: 14, borderRadius: 12, background: "rgba(255,255,255,0.05)", border: "1px solid rgba(255,255,255,0.08)", fontSize: 12.5, color: "#B7ABD3", lineHeight: 1.5 }}>
              <div className="flex center gap-2" style={{ fontWeight: 600, color: "#fff", marginBottom: 6 }}>
                <span className="pulse-dot" /> Open for new briefs
              </div>
              Bespoke work — no public prices. Tell us what you're building.
            </div>
          </div>
        </div>

        <div style={{ marginTop: 56, paddingTop: 24, borderTop: "1px solid rgba(255,255,255,0.08)", display: "flex", justifyContent: "space-between", gap: 16, flexWrap: "wrap", fontSize: 12, color: "#8A82A8" }}>
          <div>© Snoopy Productions. Bespoke creative & technical event production — Dubai.</div>
          <div>Dream Big, We Deliver.</div>
        </div>
      </div>
      <div className="footer-mega">DREAM BIG. WE DELIVER. DREAM BIG. WE DELIVER.</div>
    </footer>
  );
}

// Mobile sticky enquire bar
function MobileBar({ openEnquire }) {
  return (
    <div className="mobile-bar">
      <a href="tel:+971506496600" className="btn btn-ghost" style={{ background: "#fff" }}>
        Call
      </a>
      <button className="btn btn-primary" onClick={openEnquire}>
        Enquire <ArrowUR />
      </button>
    </div>
  );
}

// Placeholder image slot used for missing hero footage
function PlaceholderImage({ label = "rights-cleared hero still", aspect = "16/9" }) {
  return (
    <div style={{
      width: "100%", aspectRatio: aspect, borderRadius: 16,
      background: "repeating-linear-gradient(45deg, #2a2152, #2a2152 10px, #322760 10px, #322760 20px)",
      display: "grid", placeItems: "center", color: "#C9B6F0",
      fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
      fontSize: 13, letterSpacing: "0.04em",
    }}>
      [ {label} ]
    </div>
  );
}

// Enquire modal (category-qualified brief form)
function EnquireModal({ open, onClose, defaultService }) {
  const [service, setService] = React.useState(defaultService || "event-production");
  const [step, setStep] = React.useState(1);
  const [submitted, setSubmitted] = React.useState(false);
  const [form, setForm] = React.useState({ name: "", company: "", email: "", phone: "", timeline: "1-3-months", budget: "discuss", message: "" });

  React.useEffect(() => { if (defaultService) setService(defaultService); }, [defaultService]);
  React.useEffect(() => { if (!open) { setStep(1); setSubmitted(false); } }, [open]);

  if (!open) return null;

  const services = window.SNOOPY_DATA.SERVICES;

  return (
    <div style={{
      position: "fixed", inset: 0, zIndex: 90,
      background: "rgba(11, 7, 25, 0.6)",
      backdropFilter: "blur(8px)",
      display: "grid", placeItems: "center",
      padding: 20,
      animation: "lb-fade .2s ease",
    }} onClick={onClose}>
      <div onClick={(e) => e.stopPropagation()} style={{
        width: "100%", maxWidth: 720,
        maxHeight: "calc(100vh - 40px)", overflowY: "auto",
        background: "#fff",
        borderRadius: 22,
        boxShadow: "0 30px 80px -20px rgba(0,0,0,0.4)",
      }}>
        <div style={{ padding: "28px 32px", borderBottom: "1px solid var(--border)", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
          <div>
            <div className="eyebrow">Brief us</div>
            <h2 className="h-2" style={{ marginTop: 8 }}>Tell us what you're building.</h2>
          </div>
          <button onClick={onClose} style={{ width: 40, height: 40, borderRadius: 999, background: "var(--surface)", fontSize: 20, color: "var(--text)" }} aria-label="Close">×</button>
        </div>

        {submitted ? (
          <div style={{ padding: 56, textAlign: "center" }}>
            <div style={{ width: 64, height: 64, borderRadius: 999, background: "var(--brand-grad)", display: "grid", placeItems: "center", margin: "0 auto", color: "#fff", fontSize: 28 }}>✓</div>
            <h3 className="h-2" style={{ marginTop: 20 }}>Brief received.</h3>
            <p className="lede mt-3" style={{ margin: "12px auto 0" }}>
              We'll get back within one business day. (Prototype only — no email was actually sent.)
            </p>
            <button className="btn btn-dark mt-8" onClick={onClose}>Close</button>
          </div>
        ) : (
          <>
            <div style={{ padding: "0 32px", borderBottom: "1px solid var(--border)" }}>
              <div style={{ display: "flex", gap: 24, padding: "16px 0", fontFamily: "var(--font-display)", fontSize: 13, fontWeight: 500, color: "var(--muted)" }}>
                <div style={{ color: step >= 1 ? "var(--primary)" : "var(--muted)" }}>1. Service</div>
                <div style={{ color: step >= 2 ? "var(--primary)" : "var(--muted)" }}>2. About you</div>
                <div style={{ color: step >= 3 ? "var(--primary)" : "var(--muted)" }}>3. Project</div>
              </div>
            </div>

            <div style={{ padding: 32 }}>
              {step === 1 && (
                <>
                  <p style={{ color: "var(--text-soft)", marginBottom: 18 }}>What kind of project is this? (Pick the closest — we'll figure out the rest together.)</p>
                  <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 10 }}>
                    {services.map((s) => (
                      <button key={s.id} className={`service-tile ${service === s.id ? "active" : ""}`} onClick={() => setService(s.id)}>
                        {s.title}
                      </button>
                    ))}
                  </div>
                </>
              )}
              {step === 2 && (
                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
                  <div className="field"><label>Name</label><input value={form.name} onChange={(e)=>setForm({...form,name:e.target.value})} placeholder="Full name"/></div>
                  <div className="field"><label>Company</label><input value={form.company} onChange={(e)=>setForm({...form,company:e.target.value})} placeholder="Company / brand"/></div>
                  <div className="field"><label>Email</label><input type="email" value={form.email} onChange={(e)=>setForm({...form,email:e.target.value})} placeholder="you@brand.com"/></div>
                  <div className="field"><label>Phone (WhatsApp ok)</label><input value={form.phone} onChange={(e)=>setForm({...form,phone:e.target.value})} placeholder="+971…"/></div>
                </div>
              )}
              {step === 3 && (
                <div style={{ display: "grid", gap: 16 }}>
                  <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
                    <div className="field">
                      <label>Timeline</label>
                      <select value={form.timeline} onChange={(e)=>setForm({...form,timeline:e.target.value})}>
                        <option value="urgent">Urgent — within 4 weeks</option>
                        <option value="1-3-months">1–3 months</option>
                        <option value="3-6-months">3–6 months</option>
                        <option value="planning">Just planning</option>
                      </select>
                    </div>
                    <div className="field">
                      <label>Budget guide</label>
                      <select value={form.budget} onChange={(e)=>setForm({...form,budget:e.target.value})}>
                        <option value="discuss">Prefer to discuss</option>
                        <option value="<50k">Under AED 50k</option>
                        <option value="50-150k">AED 50k – 150k</option>
                        <option value="150-500k">AED 150k – 500k</option>
                        <option value="500k+">AED 500k +</option>
                      </select>
                    </div>
                  </div>
                  <div className="field">
                    <label>Tell us about the project</label>
                    <textarea value={form.message} onChange={(e)=>setForm({...form,message:e.target.value})} placeholder="What's the brief? Date / venue if you have them, references, anything else we should know."/>
                  </div>
                </div>
              )}
            </div>

            <div style={{ padding: "20px 32px", borderTop: "1px solid var(--border)", display: "flex", justifyContent: "space-between", alignItems: "center", background: "var(--surface)" }}>
              <button className="btn btn-ghost btn-sm" onClick={() => step > 1 ? setStep(step - 1) : onClose()}>
                {step === 1 ? "Cancel" : "Back"}
              </button>
              <div style={{ fontSize: 12, color: "var(--muted)" }}>
                Or call <a href="tel:+971506496600" style={{ color: "var(--primary)", fontWeight: 600 }}>+971 50 649 6600</a>
              </div>
              <button className="btn btn-primary" onClick={() => {
                if (step < 3) setStep(step + 1);
                else setSubmitted(true);
              }}>
                {step < 3 ? "Continue" : "Send brief"}
                <ArrowR />
              </button>
            </div>
          </>
        )}
      </div>
    </div>
  );
}

// Section heading
function SectionHead({ eyebrow, title, lede, align = "left", onDark = false }) {
  return (
    <div style={{ textAlign: align, maxWidth: align === "center" ? 720 : "none", margin: align === "center" ? "0 auto" : 0 }}>
      {eyebrow && <div className={`eyebrow ${onDark ? "on-dark" : ""}`}>{eyebrow}</div>}
      <h2 className="h-1 mt-3" style={{ color: onDark ? "#fff" : undefined }}>{title}</h2>
      {lede && <p className="lede mt-4" style={{ color: onDark ? "#C9C0DE" : undefined, margin: align === "center" ? "16px auto 0" : "16px 0 0" }}>{lede}</p>}
    </div>
  );
}

// Lightbox for project galleries
function Lightbox({ src, onClose }) {
  React.useEffect(() => {
    const onEsc = (e) => { if (e.key === "Escape") onClose(); };
    window.addEventListener("keydown", onEsc);
    return () => window.removeEventListener("keydown", onEsc);
  }, [onClose]);
  if (!src) return null;
  return (
    <div className="lightbox" onClick={onClose}>
      <button className="lightbox-close" aria-label="Close">×</button>
      <img src={src} alt="" />
    </div>
  );
}

Object.assign(window, {
  ArrowUR, ArrowR, ArrowL, SnoopyLogo, Navbar, Footer, MobileBar,
  PlaceholderImage, EnquireModal, SectionHead, Lightbox,
});