/* Sections: Nav, Hero, About, Lodging */

const NAV_ITEMS = [
  { id: "about", label: "About our Ranch" },
  { id: "lodging", label: "Lodging" },
  { id: "hunting", label: "Hunting" },
  { id: "gallery", label: "Gallery" },
  { id: "contact", label: "Get in Touch" },
];

const Nav = ({ navStyle }) => {
  const [scrolled, setScrolled] = React.useState(false);
  const [open, setOpen] = React.useState(false);
  React.useEffect(() => {
    const on = () => setScrolled(window.scrollY > 60);
    on();
    window.addEventListener("scroll", on, { passive: true });
    return () => window.removeEventListener("scroll", on);
  }, []);
  // Mobile menu: close on Escape or when the viewport grows past the breakpoint
  React.useEffect(() => {
    if (!open) return;
    const onKey = (e) => e.key === "Escape" && setOpen(false);
    const mq = window.matchMedia("(min-width: 961px)");
    const onMq = (e) => e.matches && setOpen(false);
    document.addEventListener("keydown", onKey);
    mq.addEventListener("change", onMq);
    return () => {
      document.removeEventListener("keydown", onKey);
      mq.removeEventListener("change", onMq);
    };
  }, [open]);
  const close = () => setOpen(false);
  return (
    <nav
      className={`nav ${scrolled ? "is-scrolled" : ""} ${open ? "is-open" : ""}`}
      data-nav-style={navStyle}
    >
      <div className="container nav-inner">
        <a href="#top" className="nav-logo" aria-label="O.D.'s Chula Vista Ranch" onClick={close}>
          <img src="assets/logo-nav.png" alt="O.D.'s Chula Vista Ranch" className="nav-logo-img" />
        </a>
        <button
          type="button"
          className="nav-toggle"
          aria-expanded={open}
          aria-controls="nav-links"
          aria-label={open ? "Close menu" : "Open menu"}
          onClick={() => setOpen(!open)}
        >
          <span className="nav-toggle-label">{open ? "Close" : "Menu"}</span>
          <span className="nav-toggle-bars" aria-hidden><span /><span /></span>
        </button>
        <div className="nav-links" id="nav-links">
          {NAV_ITEMS.map((i) => (
            <a key={i.id} href={`#${i.id}`} onClick={close}>
              {i.label}
            </a>
          ))}
          <a href="#contact" className="nav-cta" onClick={close}>
            Book a Hunt
          </a>
        </div>
      </div>
    </nav>
  );
};

const Hero = () => (
  <header className="hero" id="top">
    <HeroBackground />
    <div className="hero-content">
      <div className="hero-logo reveal">
        <img
          src="assets/logo-full.png"
          alt="O.D.'s Chula Vista Ranch"
          className="hero-logo-img"
        />
      </div>

      <h1 className="display-xxl reveal d1">
        Hunt World&nbsp;Class
        <br />
        Trophy Whitetail
        <br />
        <em>in the Heart</em> of South&nbsp;Texas.
      </h1>

      <p className="sub reveal d2">
        A private ranch in the Golden Triangle — managed for age and genetics
        over decades, hunted one‑on‑one with a guide who knows every sendero.
      </p>

      <div className="hero-actions reveal d3">
        <a href="#about" className="btn">
          Learn More <span className="arrow">↓</span>
        </a>
        <a href="#contact" className="btn btn-ghost">
          Plan Your Visit
        </a>
      </div>
    </div>

    <div className="hero-meta">
      <div className="item"><Star size={10} style={{marginRight:4, opacity:0.5}} /> Freer · Duval County</div>
      <div className="item"><Star size={10} style={{marginRight:4, opacity:0.5}} /> Golden Triangle</div>
      <div className="item"><Star size={10} style={{marginRight:4, opacity:0.5}} /> By Reservation</div>
    </div>
    <div className="hero-scrollcue">Scroll · 01/05</div>
  </header>
);

const About = () => (
  <section className="section" id="about">
    <div className="container">
      <div className="section-head">
        <div className="head-left">
          <div className="section-num"><Star size={12} style={{marginRight:8, opacity:0.8}} />§ 01 · About the Ranch</div>
          <h2 className="display-xl">
            A True <em>South&nbsp;Texas</em>
            <br />
            Experience.
          </h2>
        </div>
        <div className="head-right">
          <p>
            O.D.'s Chula Vista Ranch sits in the Golden Triangle — a stretch of
            South Texas that consistently puts up some of the biggest B&C bucks
            taken anywhere. Every hunt is guided one‑on‑one, and most guests
            come back.
          </p>
        </div>
      </div>

      <div className="about-body">
        <div>
          <p className="pull">
            "Built on decades of land and herd management — one guide per
            hunter, every time. The genetics are the proof."
          </p>
          <p>
            Our program is small by design. Limited tags, deeply invested
            guides, and a landscape we've stewarded for generations. Guests
            return season after season — for the hunt, and for the company.
          </p>
        </div>
        <div className="features">
          {[
            ["01", "Golden Triangle Whitetail", "The Triangle puts up some of the biggest B&C bucks taken anywhere in the country."],
            ["02", "Trophy Whitetail, Texas", "Dense brush, tight timber, and senderos that demand patience and real shooting."],
            ["03", "Expert Guided Hunts", "Knowledgeable, experienced, personable guides — every hunt."],
            ["04", "Customized Experience", "Tailored to your preferences, schedule, and skill level."],
            ["05", "Superior Genetics", "Decades of herd management for age, mass, and antler."],
            ["06", "Pristine Landscape", "Thousands of acres of South Texas brush — managed for wildlife, hunted under strict limits."],
            ["07", "Rifle or Bow", "Every stand is set for either. Come the way you hunt."],
          ].map(([i, t, d]) => (
            <div className="feature" key={i}>
              <div className="idx">{i}</div>
              <div className="ttl">{t}</div>
              <div className="desc">{d}</div>
            </div>
          ))}
        </div>
      </div>

      <div className="about-stats">
        {[
          ["Private", "Access Only"],
          ["1:1", "Guide Ratio"],
          ["B&C", "Class Bucks"],
          ["Family", "Owned · Operated"],
        ].map(([n, l]) => (
          <div className="about-stat" key={l}>
            <div className="num">{n}</div>
            <div className="lbl">{l}</div>
          </div>
        ))}
      </div>

      <div className="photostrip">
        <img src="assets/brush-country-sunrise.jpg" alt="South Texas brush country at sunrise" className="photo" />
        <img src="assets/sendaro-at-first-light.jpg" alt="Sendero through the brush at first light" className="photo" />
        <img src="assets/ranch-gate.jpg" alt="Front gate at O.D.'s Chula Vista Ranch" className="photo" />
        <img src="assets/prickly-pear.jpg" alt="Mesquite and prickly pear in the South Texas brush" className="photo" />
      </div>
    </div>
  </section>
);

const Lodging = () => (
  <section className="section alt" id="lodging">
    <div className="container">
      <div className="section-head">
        <div className="head-left">
          <div className="section-num"><Star size={12} style={{marginRight:8, opacity:0.8}} /> § 02 · Lodging</div>
          <h2 className="display-xl">
            Camaraderie,
            <br />
            <em>After the Hunt.</em>
          </h2>
        </div>
        <div className="head-right">
          <p>
            After a day in the field, you come back to good food, cold drinks,
            and company worth keeping. The back porch earns its reputation
            every evening.
          </p>
        </div>
      </div>

      <div className="lodging-grid">
        <div className="lodging-hero">
          <img src="assets/kitchen-main.jpg" alt="Open eat-in kitchen and dining area at the lodge" className="photo" />
        </div>
        <div className="lodging-body">
          <p className="pull">
            A ranch‑style lodge sleeping up to <strong>15 guests</strong> —
            built for groups that hunt hard and eat well.
          </p>
          <p>
            Nine rooms, each with a private bath. The back porch looks out over
            the ranch — there's no better place to have your coffee before the
            morning hunt.
          </p>
          <p>
            Open kitchen, dining room, living room, and Wi‑Fi throughout.
            Corporate groups, families, and old friends keep coming back — for
            the hunting, and for the place.
          </p>

          <div className="lodging-amenities">
            <div className="amenity">
              <div className="big">15</div>
              <div className="lbl">Guests</div>
              <div className="desc">Sleeps comfortably across the lodge and main house.</div>
            </div>
            <div className="amenity">
              <div className="big">9</div>
              <div className="lbl">Bedrooms</div>
              <div className="desc">Nine rooms throughout the lodge.</div>
            </div>
            <div className="amenity">
              <div className="big">Full</div>
              <div className="lbl">Board Available</div>
              <div className="desc">Home‑cooked meals and Texas hospitality.</div>
            </div>
            <div className="amenity">
              <div className="big">4K</div>
              <div className="lbl">Media Room</div>
              <div className="desc">Television, players, and comfortable lounge.</div>
            </div>
            <div className="amenity">
              <div className="big">Wi‑Fi</div>
              <div className="lbl">Throughout</div>
              <div className="desc">Stay connected when you need to.</div>
            </div>
            <div className="amenity">
              <div className="big">∞</div>
              <div className="lbl">Back Porch</div>
              <div className="desc">Sunsets, cold drinks, long conversations.</div>
            </div>
          </div>
        </div>
      </div>

      <div className="photostrip">
        <img src="assets/kitchen.jpg" alt="Open eat-in kitchen and dining area at the lodge" className="photo" />
        <img src="assets/bunk-house-1.jpg" alt="Guest bunk room at O.D.'s Chula Vista Ranch lodge" className="photo" />
        <img src="assets/bunk-house-2.jpg" alt="Bunk house interior at the ranch lodge" className="photo" />
        <img src="assets/great-room-fireplace.jpg" alt="Great room with fireplace at the main lodge" className="photo" />
        <img src="assets/my-room.jpg" alt="Guest suite in the main house" className="photo" />
        <img src="assets/bunk-house-3.jpg" alt="Bunk house guest quarters" className="photo" />
        <img src="assets/bunk-house-4.jpg" alt="Bunk house bedroom at the ranch lodge" className="photo" />
        <img src="assets/bunk-house-5.jpg" alt="Bunk house sleeping room" className="photo" />
      </div>
    </div>
  </section>
);

Object.assign(window, { Nav, Hero, About, Lodging, NAV_ITEMS });