// Furnishfy — shell: Header, Footer

function Header({ page, go, openSearch }) {
    const [solid, setSolid] = useState(false);
    useEffect(() => {
        const onScroll = () => setSolid(window.scrollY > 40);
        onScroll();
        window.addEventListener("scroll", onScroll, { passive: true });
        return () => window.removeEventListener("scroll", onScroll);
    }, []);

    const links = [
        { id: "home",    label: "Home" },
        { id: "shop",    label: "Collection" },
        { id: "rooms",   label: "Rooms" },
        { id: "story",   label: "Atelier" },
        { id: "contact", label: "Contact" },
    ];

    return (
        <header style={{
            position: "fixed", top: 0, left: 0, right: 0, zIndex: 60,
            transition: "all .5s var(--ease)",
            background: solid ? "color-mix(in oklch, var(--bg-deep) 88%, transparent)" : "transparent",
            backdropFilter: solid ? "blur(14px)" : "none",
            borderBottom: solid ? "1px solid var(--line)" : "1px solid transparent",
        }}>
            <div className="wrap" style={{
                display: "flex", alignItems: "center", justifyContent: "space-between",
                height: solid ? 72 : 92, transition: "height .5s var(--ease)"
            }}>

                {/* left nav */}
                <nav style={{ display: "flex", gap: 30, flex: 1 }} className="nav-desk">
                    {links.map((l) => (
                        <a key={l.id} className="navlink" onClick={() => go(l.id)}
                            style={{
                                cursor: "pointer", fontSize: 12.5, letterSpacing: ".16em",
                                textTransform: "uppercase", fontWeight: 400,
                                color: page === l.id ? "var(--gold)" : "var(--muted)",
                                transition: "color .3s", position: "relative", paddingBottom: 3,
                            }}
                            onMouseEnter={(e) => (e.currentTarget.style.color = "var(--ink)")}
                            onMouseLeave={(e) => (e.currentTarget.style.color = page === l.id ? "var(--gold)" : "var(--muted)")}>
                            {l.label}
                            {page === l.id && <span style={{ position: "absolute", left: 0, right: 0, bottom: -2, height: 1, background: "var(--gold)" }} />}
                        </a>
                    ))}
                </nav>

                {/* logo */}
                <div onClick={() => go("home")} style={{ cursor: "pointer", textAlign: "center", flex: "0 0 auto" }}>
                    {window.FURN?.LOGO
                        ? <img src={window.FURN.LOGO} alt={window.FURN.SITE_NAME || "Furnishfy"} style={{ height: 52, objectFit: "contain", display: "block" }} />
                        : <>
                            <div style={{ fontFamily: "var(--font-display)", fontSize: 27, letterSpacing: ".02em", lineHeight: 1, color: "var(--ink)" }}>
                                Furnish<span style={{ color: "var(--gold)", fontStyle: "italic" }}>fy</span>
                            </div>
                            <div style={{ fontSize: 8.5, letterSpacing: ".42em", color: "var(--faint)", marginTop: 4, textTransform: "uppercase" }}>
                                Maison de Luxe
                            </div>
                        </>
                    }
                </div>

                {/* right actions */}
                <div style={{ display: "flex", gap: 18, alignItems: "center", flex: 1, justifyContent: "flex-end" }}>
                    <button className="icon-btn" onClick={openSearch} aria-label="search" title="Search"><Icon name="search" size={19} /></button>
                </div>
            </div>
            <style>{`
        .icon-btn { background:none;border:none;color:var(--ink);cursor:pointer;padding:6px;display:flex;align-items:center;transition:color .3s; font-family:var(--font-ui); }
        .icon-btn:hover { color: var(--gold); }
        @media (max-width: 860px){ .nav-desk{ display:none !important; } }
      `}</style>
        </header>
    );
}


// ---------------- Footer ----------------
function Footer({ go }) {
    const [sent, setSent] = useState(false);
    const cols = [
        { h: "Shop",   items: ["Sofas", "Chairs", "Tables", "Lighting", "Bedroom"] },
        { h: "Maison", items: ["Our story", "Makers", "Showroom", "Sustainability"] },
        { h: "Care",   items: ["Shipping", "Assembly", "Warranty", "Contact"] },
    ];
    return (
        <footer style={{ background: "var(--secondary, var(--bg-deep))", borderTop: "1px solid var(--line)", marginTop: 0 }}>
            {/* newsletter */}
            <div className="wrap" style={{ padding: "80px 40px 56px", borderBottom: "1px solid var(--line)" }}>
                <div style={{ display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 50, alignItems: "center" }} className="foot-news">
                    <div>
                        <div className="eyebrow">The Furnishfy Letter</div>
                        <h2 style={{ fontSize: "clamp(30px,4vw,48px)", marginTop: 18, maxWidth: 460 }}>
                            Be first to every new arrival.
                        </h2>
                    </div>
                    <div>
                        <p style={{ color: "var(--muted)", fontSize: 15, marginBottom: 20, maxWidth: 380 }}>
                            Limited drops, showroom invitations, and notes from the atelier — once a month.
                        </p>
                        <form onSubmit={(e) => { e.preventDefault(); setSent(true); }} style={{ display: "flex", gap: 0, borderBottom: "1px solid var(--line)", maxWidth: 420 }}>
                            <input required type="email" placeholder="Your email address"
                                style={{ flex: 1, background: "none", border: "none", color: "var(--ink)", padding: "14px 4px", fontSize: 15, fontFamily: "var(--font-ui)", outline: "none" }} />
                            <button className="link-underline" style={{ border: "none", background: "none", color: "var(--gold)", whiteSpace: "nowrap", padding: "0 6px" }}>
                                {sent ? "Subscribed ✓" : "Subscribe"}
                            </button>
                        </form>
                    </div>
                </div>
            </div>

            {/* links */}
            <div className="wrap foot-cols" style={{ padding: "56px 40px 40px", display: "grid", gridTemplateColumns: "1.4fr repeat(3, 1fr)", gap: 40 }}>
                <div>
                    <div onClick={() => go("home")} style={{ cursor: "pointer" }}>
                        {window.FURN?.LOGO
                            ? <img src={window.FURN.LOGO} alt={window.FURN.SITE_NAME || "Furnishfy"} style={{ height: 42, objectFit: "contain", display: "block", marginBottom: 14 }} />
                            : <div style={{ fontFamily: "var(--font-display)", fontSize: 26, marginBottom: 12 }}>
                                Furnish<span style={{ color: "var(--gold)", fontStyle: "italic" }}>fy</span>
                              </div>
                        }
                    </div>
                    <p style={{ color: "var(--faint)", fontSize: 13.5, marginTop: 14, maxWidth: 240, lineHeight: 1.7 }}>
                        Considered furniture, built to last a lifetime. From our atelier to your home.
                    </p>
                </div>
                {cols.map((c) => (
                    <div key={c.h}>
                        <h4 style={{ fontFamily: "var(--font-ui)", fontSize: 12, letterSpacing: ".18em", textTransform: "uppercase", color: "var(--gold)", marginBottom: 16, fontWeight: 500 }}>{c.h}</h4>
                        <ul style={{ listStyle: "none", display: "flex", flexDirection: "column", gap: 11 }}>
                            {c.items.map((i) => {
                                const clickHandler = () => {
                                    if (i === "Contact") {
                                        go("contact");
                                    } else if (i === "Our story") {
                                        go("story");
                                    } else {
                                        const catMap = {
                                            "Sofas": "sofas",
                                            "Chairs": "chairs",
                                            "Tables": "tables",
                                            "Lighting": "lighting",
                                            "Bedroom": "beds"
                                        };
                                        go("shop", null, catMap[i] || null);
                                    }
                                };
                                return (
                                    <li key={i}>
                                        <a onClick={clickHandler} style={{ color: "var(--muted)", fontSize: 14, cursor: "pointer", transition: "color .3s" }} onMouseEnter={(e) => e.currentTarget.style.color = "var(--ink)"} onMouseLeave={(e) => e.currentTarget.style.color = "var(--muted)"}>
                                            {i}
                                        </a>
                                    </li>
                                );
                            })}
                        </ul>
                    </div>
                ))}
            </div>
            <div className="wrap" style={{ padding: "22px 40px 40px", borderTop: "1px solid var(--line)", display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: 12, color: "var(--faint)", fontSize: 12.5 }}>
                <span>© 2026 Furnishfy Maison de Luxe. All rights reserved.</span>
                <span style={{ display: "flex", gap: 22 }}>
                    <a style={{ color: "var(--faint)", cursor: "pointer" }}>Instagram</a>
                    <a style={{ color: "var(--faint)", cursor: "pointer" }}>Pinterest</a>
                    <a style={{ color: "var(--faint)", cursor: "pointer" }}>Privacy</a>
                </span>
            </div>
            <style>{`
        @media (max-width: 760px){ .foot-news, .foot-cols { grid-template-columns: 1fr !important; } }
      `}</style>
        </footer>
    );
}

Object.assign(window, { Header, Footer });