/* VillaCash — Nav, OfferBar, Hero, Marquee */
const { useState: useStateT, useEffect: useEffectT } = React;

function Nav() {
  const [solid, setSolid] = useStateT(false);
  const [onHero, setOnHero] = useStateT(true);
  useEffectT(() => {
    const onScroll = () => {
      setSolid(window.scrollY > 40);
      const h = window.innerHeight * 0.86;
      setOnHero(window.scrollY < h);
    };
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <nav className={`nav ${solid ? 'solid' : ''} ${onHero ? 'on-hero' : ''}`}>
      <a className="brand" href="#top">
        <span className="mark" aria-hidden="true">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <path d="M6.5 13.5 a5.5 5.5 0 0 1 11 0" />
            <path d="M3.5 13.5 H20.5" />
            <path d="M6.5 17.5 H17.5" />
          </svg>
        </span>
        <span>VillaCash</span>
      </a>
      <div className="nav-links">
        <a href="#contents">Contents</a>
        <a href="#offer">Offer</a>
        <a href="#faq">Notes</a>
      </div>
      <div className="nav-cta">
        <a href="#offer" className="btn btn-primary" style={{ padding: '11px 20px', fontSize: 14 }}>
          Join <span className="arr">→</span>
        </a>
      </div>
    </nav>
  );
}

function OfferBar() {
  const [show, setShow] = useStateT(false);
  useEffectT(() => {
    const onScroll = () => {
      const y = window.scrollY;
      const max = document.body.scrollHeight - window.innerHeight;
      setShow(y > window.innerHeight * 0.9 && y < max - 420);
    };
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <div className={`offerbar ${show ? 'show' : ''}`}>
      <div className="offerbar-inner">
        <span className="ob-status"><span className="ob-dot"></span><span className="txt">VillaCash · Season 2026</span></span>
        <span className="ob-tag">60-day guarantee · lifetime access</span>
        <div className="ob-price">
          <span className="now">€3,999</span>
          <span className="ob-once">one-time</span>
        </div>
        <a href="/checkout-now" className="btn btn-primary" style={{ padding: '12px 22px' }}>Get instant access <span className="arr">→</span></a>
      </div>
    </div>
  );
}

function Hero() {
  const [lit, setLit] = useStateT(false);
  useEffectT(() => {
    const id = setTimeout(() => setLit(true), 200);
    return () => clearTimeout(id);
  }, []);
  const meta = [
    { k: 'Edition', v: 'Season 2026' },
    { k: 'For', v: 'Villa & private rental owners' },
    { k: 'Reading time', v: '~ 4 min' },
    { k: 'Status', v: <><span className="gdot"></span>Available now</> },
  ];
  return (
    <header className={`hero ${lit ? 'lit' : ''}`} id="top">
      <div className="hero-media">
        <div className="hero-fallback"></div>
        <BgVideo className="hero-video" src={`${VR}/videos/reel-villa-hero.mp4`} poster={`${VR}/images/reel-villa-hero.jpg`} />
      </div>
      <div className="hero-scrim"></div>
      <div className="hero-grain"></div>

      <div className="hero-inner wrap">
        <div className="hero-top">
          <div className="hero-vol">Vol. 01 · A field manual</div>
          <div className="masthead">
            {meta.map((m, i) => (
              <div className="cell" key={i}>
                <div className="k">{m.k}</div>
                <div className="v">{m.v}</div>
              </div>
            ))}
          </div>
        </div>

        <h1 className="hero-h1">
          Fully Booked.<br /><em>By design</em>, not&nbsp;by <span className="strike">Booking.com</span>.
        </h1>
        <p className="hero-sub">
          The full kit a villa owner actually uses: the videos, the booking site, the pricing,
          the review flow. <b>Set up once. Runs every season.</b>
        </p>
        <div className="hero-actions">
          <a href="#offer" className="btn btn-light">Read the offer <span className="arr">→</span></a>
          <a href="#contents" className="btn btn-ghost on-dark">What’s inside</a>
        </div>
        <div className="hero-trust">
          <span>● 60-day guarantee</span><span className="sep"></span>
          <span>Lifetime access</span><span className="sep"></span>
          <span>Set up in 2–3 weeks</span>
        </div>
      </div>

      <div className="scrollcue"><span>Scroll</span><span className="ln"></span></div>
    </header>
  );
}

function Marquee({ light = false }) {
  const items = MARQUEE;
  const run = [...items, ...items, ...items, ...items];
  return (
    <div className={`marquee ${light ? 'light' : ''}`} aria-hidden="true">
      <div className="marquee-track">
        {run.map((t, i) => (
          <span key={i}>{t}<span className="star">✦</span></span>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { Nav, OfferBar, Hero, Marquee });