// Shared shell: logo, navbar, footer, reveal hook, image bank.
// Exports to window so other jsx files can consume.

const TrepicLogo = ({ height = 28, className = "" }) => {
  // Transparent-background PNG (668×200, ratio ~3.34) so the real gold
  // wordmark reads on both light and dark surfaces.
  const ratio = 668 / 200;
  const w = height * ratio;
  return (
    <img
      src="assets/trepic-logo.png"
      alt="Trepic"
      className={className}
      width={w}
      height={height}
      style={{ display: "block", height: `${height}px`, width: "auto", objectFit: "contain" }}
    />
  );
};

// Gradient defs (used by Tria ✦). Mounted once globally.
const GoldDefs = () => (
  <svg width="0" height="0" style={{ position: "absolute" }} aria-hidden="true">
    <defs>
      <linearGradient id="trepicGold" x1="0" y1="0" x2="1" y2="0">
        <stop offset="0%" stopColor="#D4B86A"/>
        <stop offset="50%" stopColor="#8B6914"/>
        <stop offset="100%" stopColor="#D4B86A"/>
      </linearGradient>
      <linearGradient id="trepicGoldSm" x1="0" y1="0" x2="1" y2="1">
        <stop offset="0%" stopColor="#D4B86A"/>
        <stop offset="100%" stopColor="#B8963E"/>
      </linearGradient>
    </defs>
  </svg>
);

const Navbar = ({ route, setRoute, navStyle }) => {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const on = () => setScrolled(window.scrollY > 40);
    on();
    window.addEventListener("scroll", on, { passive: true });
    return () => window.removeEventListener("scroll", on);
  }, []);

  // Home + thanks pages overlay the hero; other pages get a solid-always nav.
  const overlayHero = route === "home" || route === "thanks";
  let cls = "nav";
  if (!overlayHero) cls += " solid-always";
  else if (route === "home" && navStyle === "solid-on-scroll") cls += scrolled ? " solid" : " transparent";
  else cls += scrolled ? " solid" : " transparent";

  const go = (r) => (e) => { e.preventDefault(); setRoute(r); window.scrollTo(0, 0); };
  const links = [
    ["how", "How It Works"],
    ["travelers", "Travelers"],
    ["creators", "Creators"],
    ["brands", "Hotels & Brands"],
    ["about", "About"],
  ];
  return (
    <header className={cls}>
      <a href="#home" onClick={go("home")} aria-label="Trepic home">
        <TrepicLogo height={48}/>
      </a>
      <nav className="nav-links">
        {links.map(([k, l]) => (
          <a key={k} href={"#" + k} onClick={go(k)} className={"nav-link" + (route === k ? " active" : "")}>{l}</a>
        ))}
        <a href="/trepicstories/" className="nav-link">Trepic Stories</a>
      </nav>
      <div className="nav-right">
        <a href="#waitlist" onClick={go("waitlist")} className="nav-cta">Join Waitlist</a>
      </div>
    </header>
  );
};

const Footer = ({ setRoute }) => {
  const go = (r) => (e) => { e.preventDefault(); setRoute(r); window.scrollTo(0, 0); };
  return (
    <footer className="footer">
      <div className="footer-inner">
        <div className="brand-col">
          <TrepicLogo height={40}/>
          <p>Travel is a story. Yours deserves to be told.</p>
          <div className="tiny domains">
            <a href="https://trepic.co" onClick={(e)=>{e.preventDefault();setRoute("home");window.scrollTo(0,0);}}>trepic.co</a>
            <span aria-hidden="true">·</span>
            <a href="https://trepic.app" target="_blank" rel="noopener noreferrer">trepic.app</a>
            <span aria-hidden="true">·</span>
            <a href="/trepicstories/">trepicstories.com</a>
          </div>
        </div>
        <div>
          <h4>Platform</h4>
          <ul>
            <li><a href="#how" onClick={go("how")}>How it works</a></li>
            <li><a href="#travelers" onClick={go("travelers")}>For travelers</a></li>
            <li><a href="#creators" onClick={go("creators")}>For creators</a></li>
            <li><a href="#brands" onClick={go("brands")}>For hotels & brands</a></li>
            <li><a href="#waitlist" onClick={go("waitlist")}>Join the waitlist</a></li>
          </ul>
        </div>
        <div>
          <h4>Explore</h4>
          <ul>
            <li><a href="/trepicstories/">Trepic Stories →</a></li>
            <li><a href="https://trepic.app" target="_blank" rel="noopener noreferrer">Open the app</a></li>
            <li><a href="#about" onClick={go("about")}>About</a></li>
          </ul>
        </div>
        <div>
          <h4>Company</h4>
          <ul>
            <li><a href="#" onClick={(e)=>e.preventDefault()}>Press</a></li>
            <li><a href="#" onClick={(e)=>e.preventDefault()}>Careers</a></li>
            <li><a href="#" onClick={(e)=>e.preventDefault()}>Contact</a></li>
            <li><a href="#" onClick={(e)=>e.preventDefault()}>Instagram</a></li>
          </ul>
        </div>
      </div>
      <div className="footer-bottom">
        <div>© 2026 Trepic, Inc.</div>
        <div>Mindful travel, beautifully told.</div>
        <div>Privacy · Terms</div>
      </div>
    </footer>
  );
};

// IntersectionObserver-driven reveal
const useReveal = () => {
  React.useEffect(() => {
    const els = document.querySelectorAll(".reveal:not(.in)");
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          e.target.classList.add("in");
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.12, rootMargin: "0px 0px -40px 0px" });
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  });
};

// Scroll parallax — attaches to element with [data-parallax]
const useHeroParallax = () => {
  React.useEffect(() => {
    const el = document.querySelector("[data-parallax]");
    if (!el) return;
    let raf = 0;
    const update = () => {
      const y = window.scrollY;
      el.style.transform = `translate3d(0, ${y * 0.35}px, 0)`;
      raf = 0;
    };
    const on = () => { if (!raf) raf = requestAnimationFrame(update); };
    window.addEventListener("scroll", on, { passive: true });
    update();
    return () => { window.removeEventListener("scroll", on); cancelAnimationFrame(raf); };
  });
};

// Image bank — Unsplash direct URLs.
const IMG = {
  hero: [
    "assets/hero/hero-1.jpg",
    "assets/hero/hero-2.jpg",
    "assets/hero/hero-3.jpg",
    "assets/hero/hero-4.jpg",
  ],
  mission: "assets/mission.jpg",
  creators: "https://images.unsplash.com/photo-1482192505345-5655af888cc4?w=2000&q=80&auto=format&fit=crop",
  brands: "assets/hotels/cappadocia.webp",
  destinations: [
    { name: "Amalfi",    country: "Italy",       stories: 182, img: "assets/web/positano/villa-ocean.jpg" },
    { name: "Kyoto",     country: "Japan",       stories: 214, img: "assets/web/kyoto/torii-gates.jpg" },
    { name: "Marrakech", country: "Morocco",     stories: 128, img: "assets/web/marrakech/sunset-market.jpg" },
    { name: "Big Sur",   country: "California",  stories: 156, img: "assets/web/big-sur/coastline.jpg" },
    { name: "Patagonia", country: "Chile",       stories:  94, img: "assets/web/patagonia/torres-puerto-natales.jpg" },
    { name: "New York",  country: "United States", stories: 241, img: "assets/web/new-york/central-park.jpg" },
  ],
  journal: [
    { cat: "Mindful Travel", title: "The Quiet Villages of the Amalfi Coast", img: "https://images.unsplash.com/photo-1471922694854-ff1b63b20054?w=1400&q=80&auto=format&fit=crop", excerpt: "Away from Positano's crowds, a handful of villages still measure time in afternoons, lemon harvests, and the rhythm of the sea.", read: "8 min read" },
    { cat: "Destinations",   title: "Forty-Eight Hours in Kanazawa",          img: "https://images.unsplash.com/photo-1528164344705-47542687000d?w=1400&q=80&auto=format&fit=crop", excerpt: "A love letter to Japan's most underrated city — gilded tea houses, samurai gardens, and the country's finest sushi.", read: "11 min read" },
    { cat: "Creator Economy",title: "Why Real Experiences Outrank Perfect Photos", img: "https://images.unsplash.com/photo-1493558103817-58b2924bce98?w=1400&q=80&auto=format&fit=crop", excerpt: "The travel creators thriving in 2026 aren't the most polished ones. They're the most honest.", read: "6 min read" },
    { cat: "Reflection",     title: "The Hotel Room That Changed How I Travel", img: "https://images.unsplash.com/photo-1455587734955-081b22074882?w=1400&q=80&auto=format&fit=crop", excerpt: "Sometimes a single view is enough to recalibrate your entire definition of luxury.", read: "5 min read" },
    { cat: "Destinations",   title: "A Slow Week in the Atlas Mountains",      img: "https://images.unsplash.com/photo-1489749798305-4fea3ae63d43?w=1400&q=80&auto=format&fit=crop", excerpt: "Where Marrakech's noise dissolves into mint tea, red earth, and Berber hospitality.", read: "9 min read" },
    { cat: "Industry",       title: "The New Economics of Travel Storytelling",img: "https://images.unsplash.com/photo-1469854523086-cc02fe5d8800?w=1400&q=80&auto=format&fit=crop", excerpt: "How direct bookings through trusted voices are quietly rewriting the hospitality playbook.", read: "7 min read" },
  ],
};

Object.assign(window, { TrepicLogo, GoldDefs, Navbar, Footer, useReveal, useHeroParallax, IMG });