/* Foto Neon — Homepage. Hero + Marquee are unchanged (kept as-is per request);
   Services / Portfolio / Process / Contact are redesigned with stronger,
   more editorial layouts. Nav + Footer come from SiteChrome (App-level). */

const FN = window.FotoNeonDesignSystem_0a5c5f;
const {
  NeonHeading, NeonText, SectionLabel, NeonButton,
  ServiceCard, ContactCard,
} = FN;
const VideoTile = window.FNVideoTile;

const SERVICES = [
  { icon: "💡", title: "Neon Znakovi", color: "pink",
    description: "Klasični i LED neon znakovi po vašoj meri. Za brendiranje, dekoraciju i posebne prilike.",
    features: ["Custom dizajn", "LED & staklo", "Dimabilni"] },
  { icon: "✨", title: "LED Reklame", color: "cyan",
    description: "Moderne LED reklame sa svetlećim trakama. Energetski efikasne i dugotrajne.",
    features: ["RGB opcije", "Daljinski", "Niska potrošnja"] },
  { icon: "🎯", title: "Alu-Bond", color: "yellow",
    description: "Profesionalna alu-bond signalizacija sa LED osvetljenjem. Idealno za poslovne prostore.",
    features: ["UV štampa", "Vodootporno", "Dugotrajna"] },
];

/* Portfolio teaser — 6 of our real clips (full wall on the Gallery page). */
const PORTFOLIO = [
  { src: "videos/v1.mp4", color: "pink", span: "big" },
  { src: "videos/v2.mp4", color: "cyan" },
  { src: "videos/v3.mp4", color: "yellow" },
  { src: "videos/v7.mp4", color: "orange", span: "wide" },
  { src: "videos/v5.mp4", color: "green" },
  { src: "videos/v9.mp4", color: "purple" },
];

const STEPS = [
  { number: "01", title: "Konsultacija", color: "pink", description: "Razgovaramo o ideji, dimenzijama i budžetu. Besplatno." },
  { number: "02", title: "Dizajn", color: "cyan", description: "Kreiramo digitalni mock-up. Revizije uključene." },
  { number: "03", title: "Izrada", color: "yellow", description: "Ručno izrađujemo vaš znak, sa pažnjom na detalj." },
  { number: "04", title: "Isporuka", color: "green", description: "Dostavljamo i montiramo vaš svetleći znak." },
];

function Section({ id, children, style }) {
  return (
    <section id={id} style={{ position: "relative", padding: "7rem 1.5rem", ...style }}>
      <div style={{ maxWidth: "80rem", margin: "0 auto" }}>{children}</div>
    </section>
  );
}

/* ===== Sign3D — unchanged ===== */
function Sign3D() {
  const sceneRef = React.useRef(null);
  const signRef = React.useRef(null);
  React.useEffect(() => {
    const scene = sceneRef.current, sign = signRef.current;
    if (!scene || !sign) return;
    let timer;
    const play = () => {
      sign.classList.remove("play"); void sign.offsetWidth; sign.classList.add("play");
      clearTimeout(timer); timer = setTimeout(() => sign.classList.remove("play"), 2700);
    };
    const onMove = (e) => {
      const r = scene.getBoundingClientRect();
      const px = (e.clientX - r.left) / r.width - 0.5, py = (e.clientY - r.top) / r.height - 0.5;
      sign.style.setProperty("--ry", (px * 20).toFixed(2) + "deg");
      sign.style.setProperty("--rx", (-py * 20).toFixed(2) + "deg");
    };
    const onLeave = () => { sign.style.setProperty("--ry", "0deg"); sign.style.setProperty("--rx", "0deg"); };
    scene.addEventListener("pointermove", onMove);
    scene.addEventListener("pointerleave", onLeave);
    sign.addEventListener("click", play);
    const raf = requestAnimationFrame(play);
    return () => {
      clearTimeout(timer); cancelAnimationFrame(raf);
      scene.removeEventListener("pointermove", onMove);
      scene.removeEventListener("pointerleave", onLeave);
      sign.removeEventListener("click", play);
    };
  }, []);
  return (
    <div className="sign3d">
      <div className="scene do-float do-flicker do-hum do-bolt" ref={sceneRef}>
        <div className="float">
          <div className="sign" ref={signRef}>
            <div className="contact"></div>
            <div className="plate-back"></div>
            <div className="rim"></div>
            <div className="plate"></div>
            <div className="board-bleed"></div>
            <div className="ring-unlit"></div>
            <div className="ring-lit"></div>
            <span className="stud t"></span>
            <span className="stud b"></span>
            <span className="stud l"></span>
            <span className="stud r"></span>
            <div className="art">
              <div className="word pink"><span className="glass">FOTO</span><span className="lit">FOTO</span></div>
              <div className="word blue"><span className="glass">NEON</span><span className="lit">NEON</span></div>
              <div className="bolt">
                <svg className="b-glass" viewBox="0 0 64 128" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M40 3 L15 69 L31 69 L24 125 L51 55 L34 55 Z"></path></svg>
                <svg className="b-lit" viewBox="0 0 64 128" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                  <defs><linearGradient id="boltGrad" x1="0" y1="0" x2="0" y2="1">
                    <stop offset="0" stopColor="#ff4d14"></stop><stop offset="0.5" stopColor="#ffae22"></stop><stop offset="1" stopColor="#ffe24a"></stop>
                  </linearGradient></defs>
                  <path d="M40 3 L15 69 L31 69 L24 125 L51 55 L34 55 Z"></path>
                </svg>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div className="wall-glow"></div>
    </div>
  );
}

/* ===== Hero — unchanged ===== */
function Hero({ onNav }) {
  return (
    <section style={{ position: "relative", minHeight: "92vh", display: "flex", alignItems: "center", padding: "8rem 1.5rem 3rem" }}>
      <div className="fn-hero" style={{ maxWidth: "80rem", margin: "0 auto", width: "100%", display: "grid", gridTemplateColumns: "1.1fr 0.9fr", gap: "3rem", alignItems: "center" }}>
        <div>
          <SectionLabel color="cyan" data-hero="eyebrow">Niš · od ideje do sjaja</SectionLabel>
          <NeonHeading as="h1" size="hero" color="pink" animate="flicker" data-hero="title"
            style={{ margin: "1.25rem 0 1.5rem", fontSize: "clamp(2.8rem, 8vw, 6rem)" }}>
            Foto Neon
          </NeonHeading>
          <p data-hero="lead" style={{ fontSize: "clamp(1.05rem, 2vw, 1.35rem)", color: "var(--text-secondary)", maxWidth: "36rem", margin: "0 0 2.5rem", lineHeight: 1.55 }}>
            Izrađujemo <NeonText color="cyan">custom neon znakove</NeonText>,{" "}
            <NeonText color="yellow">LED reklame</NeonText> i{" "}
            <NeonText color="orange">alu-bond signalizaciju</NeonText> — ručno, po vašoj meri.
          </p>
          <div data-hero="cta" style={{ display: "flex", gap: "1rem", flexWrap: "wrap" }}>
            <NeonButton color="pink" onClick={() => onNav("shop")}>Naruči Znak</NeonButton>
            <NeonButton color="cyan" onClick={() => onNav("gallery")}>Pogledaj Radove</NeonButton>
          </div>
        </div>
        <div className="fn-hero-badge" data-hero="sign" style={{ display: "grid", placeItems: "center" }}>
          <Sign3D />
        </div>
      </div>
    </section>
  );
}

/* ===== Marquee — unchanged ===== */
function Marquee() {
  const words = ["NEON", "LED", "ALU-BOND", "SVETLEĆA SLOVA", "BRENDIRANJE IZLOGA", "24/7"];
  const strip = [...words, ...words, ...words];
  return (
    <div style={{ position: "relative", zIndex: 10, overflow: "hidden", borderTop: "1px solid var(--border-hairline)", borderBottom: "1px solid var(--border-hairline)", padding: "1rem 0", background: "rgba(5,5,8,0.5)" }}>
      <div style={{ display: "inline-flex", gap: "3rem", whiteSpace: "nowrap", animation: "fnmarquee 28s linear infinite" }}>
        {strip.map((w, i) => (
          <span key={i} style={{ fontFamily: "var(--font-display)", fontSize: "1.4rem", color: i % 2 ? "#00fff0" : "#ff10f0", textShadow: "0 0 10px currentColor", opacity: 0.9 }}>{w} ✦</span>
        ))}
      </div>
    </div>
  );
}

/* ===== Services — redesigned: sticky intro (left) + service cards (right) ===== */
function Services({ onNav }) {
  return (
    <Section id="usluge">
      <div className="fn-split" style={{ display: "grid", gridTemplateColumns: "0.85fr 1.15fr", gap: "3.5rem", alignItems: "start" }}>
        <div data-reveal="left" style={{ position: "sticky", top: "6rem" }}>
          <SectionLabel color="cyan">Šta radimo</SectionLabel>
          <NeonHeading color="pink" size="lg" animate="pulse" style={{ margin: "1rem 0 1.25rem" }}>Usluge</NeonHeading>
          <p style={{ color: "var(--text-secondary)", lineHeight: 1.65, fontSize: "1.05rem", margin: "0 0 2rem", maxWidth: "26rem" }}>
            Od jedne svetleće reči do kompletnog brendiranja izloga — svaki znak izrađujemo ručno, prilagođeno vašem prostoru.
          </p>
          <NeonButton color="pink" onClick={() => onNav("shop")}>Zatraži ponudu</NeonButton>
        </div>
        <div data-reveal-stagger="up" style={{ display: "flex", flexDirection: "column", gap: "1.5rem" }}>
          {SERVICES.map((s) => <ServiceCard key={s.title} {...s} />)}
        </div>
      </div>
    </Section>
  );
}

/* ===== Portfolio teaser — redesigned bento grid → links to Gallery ===== */
function Portfolio({ onNav }) {
  const span = (s) => s === "big" ? { gridColumn: "span 2", gridRow: "span 2" } : s === "wide" ? { gridColumn: "span 2" } : {};
  return (
    <Section id="radovi">
      <div style={{ display: "flex", flexWrap: "wrap", alignItems: "flex-end", justifyContent: "space-between", gap: "1.5rem", marginBottom: "3rem" }}>
        <div data-reveal="left">
          <SectionLabel color="pink">Portfolio</SectionLabel>
          <NeonHeading color="cyan" size="lg" animate="pulse" style={{ marginTop: "1rem" }}>Naši Radovi</NeonHeading>
        </div>
        <div data-reveal="right"><NeonButton color="cyan" onClick={() => onNav("gallery")}>Cela galerija →</NeonButton></div>
      </div>
      <div data-reveal-stagger="scale" className="fn-bento" style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gridAutoRows: "150px", gap: "1rem" }}>
        {PORTFOLIO.map((p, i) => (
          <VideoTile key={i} src={p.src} color={p.color} ratio="auto" autoPlayInView alt="Foto Neon — svetleći znak, ručni rad" style={{ ...span(p.span), height: "100%" }} />
        ))}
      </div>
    </Section>
  );
}

/* ===== Process — redesigned: horizontal connected timeline ===== */
function Process() {
  return (
    <Section id="proces">
      <div style={{ textAlign: "center", marginBottom: "4rem" }}>
        <SectionLabel color="yellow" align="center">Kako radimo</SectionLabel>
        <NeonHeading color="pink" size="lg" align="center" animate="pulse" style={{ marginTop: "1rem" }}>Proces</NeonHeading>
      </div>
      <div className="fn-timeline" style={{ position: "relative", display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: "1.5rem" }}>
        <div className="fn-timeline-line" style={{ position: "absolute", top: 32, left: "12%", right: "12%", height: 2, background: "linear-gradient(90deg, var(--neon-pink), var(--neon-cyan), var(--neon-yellow), var(--neon-green), var(--neon-pink))", backgroundSize: "200% 100%", boxShadow: "0 0 12px rgba(255,16,240,0.4)", opacity: 0.75, animation: "fn-flow 5s linear infinite" }}>
          <span className="fn-timeline-pulse" style={{ position: "absolute", top: "50%", left: 0, width: 12, height: 12, marginTop: -6, marginLeft: -6, borderRadius: "50%", background: "#fff", boxShadow: "0 0 8px #fff, 0 0 16px var(--neon-cyan), 0 0 30px var(--neon-cyan)", animation: "fn-travel 4s cubic-bezier(.55,0,.45,1) infinite" }} />
        </div>
        {STEPS.map((s, i) => (
          <div key={s.number} style={{ position: "relative", textAlign: "center" }}>
            <div style={{ width: 64, height: 64, margin: "0 auto 1.25rem", borderRadius: "50%", display: "grid", placeItems: "center", background: "var(--void)", color: `var(--neon-${s.color})`, border: `2px solid var(--neon-${s.color})`, boxShadow: `0 0 20px var(--neon-${s.color}), inset 0 0 10px color-mix(in srgb, var(--neon-${s.color}) 25%, transparent)`, animation: "neon-breathe 2.4s ease-in-out infinite", animationDelay: (i * 0.5) + "s" }}>
              <span style={{ fontFamily: "var(--font-body)", fontWeight: 700, fontSize: "1.2rem", color: `var(--neon-${s.color})`, textShadow: `0 0 10px var(--neon-${s.color})` }}>{s.number}</span>
            </div>
            <h3 style={{ margin: "0 0 0.6rem", fontSize: "1.25rem", fontWeight: 700, color: "var(--text-primary)", textShadow: `0 0 16px color-mix(in srgb, var(--neon-${s.color}) 40%, transparent)` }}>{s.title}</h3>
            <p style={{ margin: 0, color: "var(--text-secondary)", lineHeight: 1.55, fontSize: "0.95rem" }}>{s.description}</p>
          </div>
        ))}
      </div>
      <style>{`
        @keyframes fn-flow { to { background-position: 200% 0; } }
        @keyframes fn-travel { 0% { left: 0%; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
        @media (max-width: 780px){ .fn-timeline{ grid-template-columns: 1fr !important; gap: 2rem !important; } .fn-timeline-line{ display:none; } }
      `}</style>
    </Section>
  );
}

/* ===== Contact — redesigned: channels (left) + inquiry form (right) ===== */
function ContactField({ label, type = "text", area, value, onChange }) {
  const [focus, setFocus] = React.useState(false);
  const shared = {
    width: "100%", background: "rgba(5,5,8,0.6)", color: "var(--text-primary)",
    border: `1px solid ${focus ? "var(--neon-cyan)" : "var(--border-hairline)"}`,
    borderRadius: 0, padding: "0.85rem 1rem", fontFamily: "var(--font-body)", fontSize: "1rem",
    outline: "none", boxShadow: focus ? "0 0 14px rgba(0,255,240,0.25)" : "none",
    transition: "border-color 0.25s ease, box-shadow 0.25s ease", boxSizing: "border-box", resize: "vertical",
  };
  return (
    <label style={{ display: "block" }}>
      <span style={{ display: "block", marginBottom: "0.4rem", fontSize: "0.75rem", textTransform: "uppercase", letterSpacing: "0.12em", color: "var(--text-secondary)" }}>{label}</span>
      {area
        ? <textarea rows={4} value={value} onChange={onChange} onFocus={() => setFocus(true)} onBlur={() => setFocus(false)} style={shared} />
        : <input type={type} value={value} onChange={onChange} onFocus={() => setFocus(true)} onBlur={() => setFocus(false)} style={shared} />}
    </label>
  );
}

function Contact() {
  const [form, setForm] = React.useState({ name: "", contact: "", msg: "" });
  const [sent, setSent] = React.useState(false);
  const set = (k) => (e) => setForm((f) => ({ ...f, [k]: e.target.value }));
  const submit = (e) => { e.preventDefault(); setSent(true); setTimeout(() => setSent(false), 3200); };
  return (
    <Section id="kontakt">
      <div className="fn-split" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "3.5rem", alignItems: "center" }}>
        <div data-reveal="left">
          <SectionLabel color="cyan">Spremni za saradnju?</SectionLabel>
          <NeonHeading color="pink" size="lg" animate="pulse" style={{ margin: "1rem 0 1.25rem" }}>Osvetlite Ideju</NeonHeading>
          <p style={{ fontSize: "1.1rem", color: "var(--text-secondary)", lineHeight: 1.6, margin: "0 0 2rem", maxWidth: "28rem" }}>
            Javite nam se i zajedno ćemo kreirati savršen svetleći znak za vaš prostor ili brend.
          </p>
          <div style={{ display: "grid", gap: "1rem", maxWidth: "26rem" }}>
            <ContactCard color="pink" icon="📞" label="Telefon" value={window.FN_BRAND.phone} href={window.FN_BRAND.phoneHref} />
            <ContactCard color="yellow" icon="📸" label="Instagram" value={window.FN_BRAND.instagram} href={window.FN_BRAND.instagramHref} />
          </div>
        </div>
        <form data-reveal="right" onSubmit={submit} style={{ background: "var(--surface-card)", backdropFilter: "blur(12px)", border: "1px solid var(--border-hairline)", padding: "2rem", display: "grid", gap: "1.25rem" }}>
          <ContactField label="Ime" value={form.name} onChange={set("name")} />
          <ContactField label="Telefon ili e-mail" value={form.contact} onChange={set("contact")} />
          <ContactField label="Vaša ideja" area value={form.msg} onChange={set("msg")} />
          <NeonButton color="pink" type="submit">{sent ? "Poslato ✓" : "Pošalji upit"}</NeonButton>
          {sent && <span style={{ color: "var(--neon-green)", fontSize: "0.85rem", textShadow: "0 0 8px var(--neon-green)" }}>Hvala! Odgovaramo u roku od 24h.</span>}
        </form>
      </div>
      <style>{`@media (max-width: 780px){ .fn-split{ grid-template-columns: 1fr !important; } }`}</style>
    </Section>
  );
}

function HomePage({ onNav }) {
  window.useFotoNeonAnimations();
  const nav = onNav || (() => {});
  return (
    <div>
      <Hero onNav={nav} />
      <Marquee />
      <Services onNav={nav} />
      <Portfolio onNav={nav} />
      <Process />
      <Contact />
    </div>
  );
}

window.HomePage = HomePage;