// Main sections for Savannah Tails & Trails landing page

// ============================================================
// NAV
// ============================================================
const scrollToBookingForm = () => {
  const el = document.getElementById("booking-form");
  if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
};

const Nav = () => {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 20);
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <nav className={`nav ${scrolled ? "nav--scrolled" : ""}`}>
      <div className="nav__inner">
        <a className="logo" href="#top">
          <span className="logo__mark"><DogBadge size={30} color="#C86B4A"/></span>
          <span className="logo__words">
            <span className="logo__serif">Savannah</span>
            <span className="logo__sub">Tails & Trails · Algarve</span>
          </span>
        </a>
        <ul className="nav__links">
          <li><a href="#experience">The Retreat</a></li>
          <li><a href="#day">A Day Here</a></li>
          <li><a href="#dogs">Meet the Trio</a></li>
          <li><a href="#gallery">Gallery</a></li>
          <li><a href="#booking">Visit</a></li>
        </ul>
        <Button variant="primary" size="sm" onClick={scrollToBookingForm}>Join waiting list</Button>
      </div>
    </nav>
  );
};

// ============================================================
// HERO
// ============================================================
const Hero = ({ variant }) => {
  if (variant === "editorial") return <HeroEditorial/>;
  if (variant === "postcard") return <HeroPostcard/>;
  return <HeroGarden/>;
};

const HeroGarden = () => (
  <header className="hero hero--garden" id="top">
    <div className="hero__bg">
      <img src="photos/lawn-side.jpg" alt="The lawn at Savannah"/>
      <div className="hero__wash"/>
    </div>
    <div className="hero__content">
      <div className="hero__eyebrow">
        <span className="hero__eyebrow-dot"/>
        A boutique dog retreat · Portimão, Algarve
      </div>
      <h1 className="hero__title">
        A better day<br/>
        <em>in the sun</em><br/>
        for your dog.
      </h1>
      <p className="hero__lede">
        Sun-warmed terraces, half an acre of soft lawn, and three resident hosts who
        make sure every guest leaves a little happier than they arrived.
      </p>
      <div className="hero__ctas">
        <Button variant="primary" size="lg" icon={<span>→</span>} onClick={scrollToBookingForm}>Join waiting list</Button>
        <Button variant="ghost" size="lg" onClick={scrollToBookingForm}>See pricing</Button>
      </div>
      <div className="hero__meta">
        <div className="hero__meta-item">
          <strong>4–6</strong>
          <span>guests at a time</span>
        </div>
        <div className="hero__meta-divider"/>
        <div className="hero__meta-item">
          <strong>2,400 m²</strong>
          <span>fenced garden</span>
        </div>
        <div className="hero__meta-divider"/>
        <div className="hero__meta-item">
          <strong>24/7</strong>
          <span>human on site</span>
        </div>
      </div>
    </div>

    {/* Floating dog check-in chip */}
    <div className="hero__chip">
      <img src="photos/nutmeg.jpg" alt=""/>
      <div>
        <div className="hero__chip-label">Checked in today</div>
        <div className="hero__chip-name">Sparky · 3rd visit</div>
      </div>
      <div className="hero__chip-status">
        <span className="pulse"/> napping
      </div>
    </div>
  </header>
);

const HeroEditorial = () => (
  <header className="hero hero--editorial" id="top">
    <div className="hero-e__left">
      <div className="hero-e__kicker">
        <OliveSprig size={50}/> Sun, grass, and three resident dogs
      </div>
      <h1 className="hero-e__title">
        Where city dogs<br/>
        <span className="ink-italic">learn to be</span><br/>
        country dogs.
      </h1>
      <p className="hero-e__lede">
        A calm, sun-filled home on the hills above Portimão. Half an acre of
        lawn, a shaded terrace, and three resident hosts on welcome duty.
      </p>
      <div className="hero-e__ctas">
        <Button variant="primary" size="lg" onClick={scrollToBookingForm}>Join waiting list</Button>
        <a className="hero-e__link" href="#day">How a day unfolds →</a>
      </div>
      <div className="hero-e__stats">
        <div><strong>4–6</strong><span>guests a day</span></div>
        <div><strong>2,400m²</strong><span>fenced lawn</span></div>
        <div><strong>24/7</strong><span>human on site</span></div>
      </div>
    </div>
    <div className="hero-e__right">
      <div className="hero-e__blob">
        <div className="hero-e__blob--inner">
          <img src="photos/brutus.jpg" alt="Lula, our Head of Security"/>
        </div>
      </div>
      <div className="hero-e__frame hero-e__frame--2">
        <img src="photos/pip.jpg" alt="Splodge on the terrace"/>
      </div>
      <div className="hero-e__frame hero-e__frame--3">
        <img src="photos/nutmeg.jpg" alt="Sparky"/>
      </div>
      <svg className="hero-e__scribble" viewBox="0 0 200 200" aria-hidden>
        <path d="M20 100 Q 40 40, 100 40 Q 170 40, 180 110 Q 175 170, 110 175 Q 30 175, 20 100 Z"
              fill="none" stroke="var(--olive)" strokeWidth="2" strokeDasharray="0" />
      </svg>
    </div>

    <div className="hero-chips">
      <div className="hero-chip hero-chip--lime">
        <div className="hero-chip__scribble"/>
        <div className="hero-chip__title">Day care</div>
        <p>Drop off in the morning, pick up at sundown.</p>
      </div>
      <div className="hero-chip hero-chip--sky">
        <div className="hero-chip__photo"><img src="photos/pip.jpg" alt=""/></div>
        <div className="hero-chip__title">Meet & greet</div>
        <p>Free first visit. The trio's approval required.</p>
      </div>
      <div className="hero-chip hero-chip--terra">
        <div className="hero-chip__scribble"/>
        <div className="hero-chip__title">Sun & shade</div>
        <p>Covered terrace by day, cool tiles for siestas.</p>
      </div>
      <div className="hero-chip hero-chip--lilac">
        <div className="hero-chip__scribble"/>
        <div className="hero-chip__title">Weekly & monthly</div>
        <p>Regular rates for dogs who settle in and stay part of the routine.</p>
      </div>
      <div className="hero-chip hero-chip--mint">
        <div className="hero-chip__scribble"/>
        <div className="hero-chip__title">Photo updates</div>
        <p>A daily snap so you know they're winning.</p>
      </div>
    </div>
  </header>
);

const HeroPostcard = () => (
  <header className="hero hero--postcard" id="top">
    <div className="postcard">
      <div className="postcard__stamp">
        <div className="postcard__stamp-inner">
          <DogBadge size={32} color="#C86B4A"/>
          <div>SAVANNAH<br/>ALGARVE</div>
        </div>
      </div>
      <div className="postcard__photo">
        <img src="photos/garden-flowers.jpg" alt="Villa garden"/>
      </div>
      <div className="postcard__text">
        <div className="postcard__from">Greetings from</div>
        <h1 className="postcard__title">Savannah</h1>
        <div className="postcard__sub">Tails & Trails · a boutique dog retreat</div>
        <p className="postcard__body">
          Your dog is sunbathing. Your dog is winning at fetch. Your dog is
          sound asleep on a striped cushion under the terrace.
        </p>
        <Button variant="primary" size="lg" onClick={scrollToBookingForm}>Join waiting list</Button>
      </div>
      <div className="postcard__postmark">
        <div className="postcard__postmark-ring"/>
        <div className="postcard__postmark-text">PORTIMÃO · 19·04·26</div>
      </div>
    </div>
  </header>
);

// ============================================================
// EXPERIENCE — the space
// ============================================================
const Experience = () => {
  const cards = [
    {
      title: "The lawn",
      sub: "2,400 m² of soft grass",
      body: "Half an acre, fully fenced, with shade trees along two sides. Zoomie-certified.",
      src: "photos/lawn-side.jpg",
      tone: "olive",
      icon: "🟢",
    },
    {
      title: "The terrace",
      sub: "Covered, always cool",
      body: "Terracotta tile, arched columns, deep striped cushions. The post-lunch nap venue of choice.",
      src: "photos/villa-front.jpg",
      tone: "ochre",
    },
    {
      title: "The pool",
      sub: "For brave paws only",
      body: "Not a swimming pool for dogs, but a cool spot to lie beside. Supervised splash sessions on request.",
      src: "photos/pool.jpg",
      tone: "sky",
    },
    {
      title: "The garden",
      sub: "Flowers, olive, wild grass",
      body: "Paths to sniff, a birdbath to guard, geraniums to ignore politely. Dogs welcome in all of it.",
      src: "photos/garden-flowers.jpg",
      tone: "terra",
    },
  ];
  return (
    <section className="section experience" id="experience" data-screen-label="02 Experience">
      <div className="section__head">
        <Kicker>The retreat</Kicker>
        <h2 className="section__title">
          Half a hectare of <em>Algarve</em>,<br/>
          shaped around four paws.
        </h2>
        <p className="section__lede">
          An old Portuguese farmhouse, a big fenced garden, and the kind of quiet
          you only get up in the hills. Not a kennel. Not a cage in sight.
        </p>
      </div>
      <div className="exp-grid">
        {cards.map((c, i) => (
          <article key={i} className={`exp-card exp-card--${c.tone} exp-card--${i % 2 ? "tall" : "short"}`}>
            <div className="exp-card__photo">
              <img src={c.src} alt={c.title}/>
            </div>
            <div className="exp-card__body">
              <div className="exp-card__sub">{c.sub}</div>
              <h3 className="exp-card__title">{c.title}</h3>
              <p>{c.body}</p>
            </div>
          </article>
        ))}
      </div>
    </section>
  );
};

// ============================================================
// A DAY IN THEIR LIFE — timeline
// ============================================================
const DayInLife = () => {
  const beats = [
    { time: "8:00", label: "Arrival", body: "Sniff inspection at the gate. A proper hello from Lula.", tone: "sky", icon: "◐" },
    { time: "9:30", label: "Morning play", body: "Zoomies on the lawn. Occasional theft of a tennis ball.", tone: "olive", icon: "◉" },
    { time: "12:00", label: "Terrace lunch", body: "Lunch in the shade. Water topped up. One communal sigh.", tone: "ochre", icon: "◑" },
    { time: "14:00", label: "Siesta", body: "Striped cushions. Ceiling fan. Deep, deep sleep.", tone: "terra", icon: "☾" },
    { time: "16:30", label: "Garden walk", body: "A loop through the olives and the flower beds.", tone: "olive", icon: "◐" },
    { time: "19:00", label: "Golden hour", body: "Last ball throw before the sun dips behind the hills.", tone: "ochre", icon: "✦" },
  ];
  return (
    <section className="section day" id="day" data-screen-label="03 A day here">
      <div className="section__head section__head--center">
        <Kicker>A day here</Kicker>
        <h2 className="section__title">
          From first sniff<br/>
          to last <em>yawn</em>.
        </h2>
      </div>

      <div className="timeline">
        <div className="timeline__rail"/>
        {beats.map((b, i) => (
          <div key={i} className={`timeline__beat timeline__beat--${b.tone} ${i % 2 ? "timeline__beat--right" : "timeline__beat--left"}`}>
            <div className="timeline__time">{b.time}</div>
            <div className="timeline__node">
              <span>{b.icon}</span>
            </div>
            <div className="timeline__card">
              <h3>{b.label}</h3>
              <p>{b.body}</p>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
};

// ============================================================
// TRUST & SAFETY
// ============================================================
const Trust = () => {
  const pillars = [
    { t: "Always supervised", b: "A human is on site, awake, every hour of every day. We never leave a guest alone.", i: "eye" },
    { t: "Small groups", b: "Four to six dogs at a time, never a crowded kennel. Introductions are gentle.", i: "group" },
    { t: "Fully fenced", b: "The entire 2,400 m² garden is secured. Two gates, both locked, before the lawn.", i: "fence" },
    { t: "Vet on call", b: "A trusted local vet, five minutes away, on call for our guests seven days a week.", i: "cross" },
  ];
  const Icon = ({ kind }) => {
    const s = { width: 28, height: 28, fill: "none", stroke: "currentColor", strokeWidth: 1.6, strokeLinecap: "round", strokeLinejoin: "round" };
    if (kind === "eye") return (<svg {...s} viewBox="0 0 24 24"><path d="M2 12s4-7 10-7 10 7 10 7-4 7-10 7S2 12 2 12z"/><circle cx="12" cy="12" r="3"/></svg>);
    if (kind === "group") return (<svg {...s} viewBox="0 0 24 24"><circle cx="8" cy="10" r="3"/><circle cx="16" cy="10" r="3"/><path d="M2 20c0-3 3-5 6-5s6 2 6 5M12 20c0-3 3-5 6-5s4 2 4 5"/></svg>);
    if (kind === "fence") return (<svg {...s} viewBox="0 0 24 24"><path d="M4 20V8l2-3 2 3v12M10 20V8l2-3 2 3v12M16 20V8l2-3 2 3v12M2 11h20M2 16h20"/></svg>);
    if (kind === "cross") return (<svg {...s} viewBox="0 0 24 24"><path d="M12 4v16M4 12h16"/><circle cx="12" cy="12" r="10"/></svg>);
    return null;
  };
  return (
    <section className="section trust" data-screen-label="04 Trust">
      <div className="section__head">
        <Kicker color="#C86B4A">The promises</Kicker>
        <h2 className="section__title">
          The boring bits,<br/>
          taken <em>very</em> seriously.
        </h2>
      </div>
      <div className="trust__grid">
        {pillars.map((p, i) => (
          <div key={i} className="trust__card">
            <div className="trust__icon"><Icon kind={p.i}/></div>
            <h3>{p.t}</h3>
            <p>{p.b}</p>
          </div>
        ))}
      </div>
    </section>
  );
};

// ============================================================
// MEET THE DOGS
// ============================================================
const MeetTheDogs = () => {
  const dogs = [
    {
      name: "Sparky",
      role: "Head of Guest Relations",
      age: "2 years · Portuguese terrier mix",
      pullquote: "Will sit on the cushion you wanted.",
      body: "Expert welcomer. Has written a thesis on which cushion has the best sun. Gives every new guest a full tour of the terrace, whether they want one or not.",
      src: "photos/nutmeg.jpg",
      tone: "ochre",
      since: "Since 2022",
    },
    {
      name: "Lula",
      role: "Head of Security",
      age: "6 years · Saint Bernard mix",
      pullquote: "Can sleep in 14 different postures.",
      body: "A 45kg lady with the soul of a cat. Her job is to lie somewhere nearby and make the whole house feel calmer. She is very good at her job.",
      src: "photos/brutus.jpg",
      tone: "olive",
      since: "Since 2019",
    },
    {
      name: "Splodge",
      role: "Chief Snack Supervisor",
      age: "6 years · English springer spaniel",
      pullquote: "Ball. Ball. Ball. Ball. Ball.",
      body: "The official welcome committee's athletic wing. Splodge's job is to show new guests where the best grass is, where the best stick is, and where the ball went (usually under the terrace).",
      src: "photos/pip.jpg",
      tone: "sky",
      since: "Since 2023",
    },
  ];
  return (
    <section className="section dogs" id="dogs" data-screen-label="05 Meet the dogs">
      <div className="section__head">
        <Kicker color="#6B7A4B">The ambassadors</Kicker>
        <h2 className="section__title">
          Three very<br/>
          opinionated <em>hosts</em>.
        </h2>
        <p className="section__lede">
          Every guest is welcomed, inspected, and unofficially assigned a buddy
          from the trio. Here's who's on staff.
        </p>
      </div>

      <div className="dogs__grid">
        {dogs.map((d, i) => (
          <article key={i} className={`dog-card dog-card--${d.tone}`}>
            <div className="dog-card__photo-wrap">
              <div className="dog-card__blob"/>
              <div className="dog-card__photo">
                <img src={d.src} alt={d.name}/>
              </div>
              <div className="dog-card__since">{d.since}</div>
            </div>
            <div className="dog-card__body">
              <div className="dog-card__role">{d.role}</div>
              <h3 className="dog-card__name">{d.name}</h3>
              <div className="dog-card__age">{d.age}</div>
              <blockquote>"{d.pullquote}"</blockquote>
              <p>{d.body}</p>
            </div>
          </article>
        ))}
      </div>
    </section>
  );
};

// ============================================================
// GALLERY
// ============================================================
const Gallery = () => {
  const shots = [
    { src: "photos/garden-flowers.jpg", span: "tall", cap: "Geraniums, mostly ignored by the dogs" },
    { src: "photos/pip.jpg", span: "wide", cap: "Splodge, mid-smile" },
    { src: "photos/pool.jpg", span: "reg", cap: "The poolside, their favourite shade" },
    { src: "photos/nutmeg.jpg", span: "reg", cap: "Sparky holding court" },
    { src: "photos/fence-garden.jpg", span: "wide", cap: "Fully fenced on every side" },
    { src: "photos/brutus.jpg", span: "tall", cap: "Lula, off duty" },
    { src: "photos/lawn-side.jpg", span: "wide", cap: "The main lawn, golden hour" },
    { src: "photos/villa-front.jpg", span: "reg", cap: "The terrace at 10am" },
  ];
  return (
    <section className="section gallery" id="gallery" data-screen-label="06 Gallery">
      <div className="section__head section__head--row">
        <div>
          <Kicker color="#8FB8D4">Postcards</Kicker>
          <h2 className="section__title">A sunny week, <em>in pictures</em>.</h2>
        </div>
        <a href="#" className="gallery__more">See all 184 photos →</a>
      </div>
      <div className="gallery__grid">
        {shots.map((s, i) => (
          <figure key={i} className={`gallery__tile gallery__tile--${s.span}`}>
            <img src={s.src} alt={s.cap}/>
            <figcaption>{s.cap}</figcaption>
          </figure>
        ))}
      </div>
    </section>
  );
};

// ============================================================
// BOOKING
// ============================================================
const Booking = () => {
  return (
    <section className="section booking" id="booking" data-screen-label="07 Booking">
      <div className="booking__inner">
        <div className="booking__left">
          <Kicker color="#F6EEDD">Waiting list now open</Kicker>
          <h2 className="booking__title">
            Join the waiting list.<br/>
            <em>A simple first step.</em>
          </h2>
          <p className="booking__lede">
            Fill in the short waitlist form and Savannah will be in touch to arrange
            a meet-and-greet. We always meet you and your dog before a first day.
            A coffee on the terrace, a lap of the garden, and a chance for the trio
            to give their verdict. Usually positive.
          </p>
          <ul className="booking__list">
            <li><span>→</span> Free meet-and-greet, no obligation</li>
            <li><span>→</span> €15 per day · weekly and monthly rates available</li>
            <li><span>→</span> You drop off and collect at the villa, gate always manned</li>
          </ul>
          <div className="booking__contact">
            <div>
              <small>Call or WhatsApp</small>
              <strong>+351 910 417 254</strong>
            </div>
            <div>
              <small>Write</small>
              <strong>savannahtailsandtrails@gmail.com</strong>
            </div>
          </div>
          <a
            className="booking__maplink"
            href="https://maps.app.goo.gl/hSDd85sRftEqLN8J6?g_st=ic"
            target="_blank"
            rel="noopener noreferrer"
            aria-label="Open Savannah Tails and Trails in Google Maps"
          >
            📍 Get directions on Google Maps
          </a>
        </div>

        <div className="booking__card" id="booking-form">
          <div className="booking__form-head">
            <h3>Join the waiting list</h3>
            <span className="booking__availability"><span className="pulse"/> Form live</span>
          </div>

          <p className="booking__card-copy">
            The form asks for the basics so Savannah can understand your dog,
            your ideal start timing, and the kind of care you need.
          </p>

          <ul className="booking__card-list">
            <li>Dog details, size, and temperament</li>
            <li>Preferred start date and routine</li>
            <li>Anything Savannah should know before a meet-and-greet</li>
          </ul>

          <a
            className="btn btn--primary btn--lg booking__cta"
            href="https://tally.so/r/81JLpx"
            target="_blank"
            rel="noopener noreferrer"
            aria-label="Open the Savannah Tails and Trails waiting list form"
          >
            <span>Open waitlist form</span>
            <span className="btn__icon">→</span>
          </a>

          <small className="booking__fine">
            Opens the secure Tally form in a new tab. Prefer email instead? Write to
            {" "}<strong>savannahtailsandtrails@gmail.com</strong>.
          </small>
        </div>
      </div>
    </section>
  );
};

// ============================================================
// FOOTER
// ============================================================
const Footer = () => (
  <footer className="footer">
    <div className="footer__top">
      <div className="footer__brand">
        <a className="logo" href="#top">
          <span className="logo__mark"><DogBadge size={34} color="#F6EEDD"/></span>
          <span className="logo__words">
            <span className="logo__serif" style={{ color: "#F6EEDD" }}>Savannah</span>
            <span className="logo__sub" style={{ color: "#d3c8a8" }}>Tails & Trails</span>
          </span>
        </a>
        <p>A sun-filled retreat for dogs in the hills above Portimão, Algarve.</p>
        <div className="footer__socials" aria-label="Social links">
          <a
            className="footer__social"
            href="https://www.instagram.com/savannahtailsandtrails"
            target="_blank"
            rel="noopener noreferrer"
            aria-label="Savannah Tails & Trails on Instagram"
            title="Instagram"
          >
            <svg viewBox="0 0 24 24" aria-hidden="true">
              <rect x="3.25" y="3.25" width="17.5" height="17.5" rx="5"></rect>
              <circle cx="12" cy="12" r="4.25"></circle>
              <circle cx="17.35" cy="6.7" r="1.1" className="footer__social-dot"></circle>
            </svg>
          </a>
        </div>
      </div>
      <div className="footer__col">
        <h4>Visit</h4>
        <a href="#booking-form">Waiting list</a>
        <a href="#booking">Meet & greet</a>
        <a href="#booking-form">Weekly & monthly rates</a>
      </div>
      <div className="footer__col">
        <h4>The place</h4>
        <a href="#experience">The retreat</a>
        <a href="#day">A day here</a>
        <a href="#dogs">Meet the trio</a>
      </div>
      <div className="footer__col">
        <h4>Find us</h4>
        <a href="https://maps.app.goo.gl/hSDd85sRftEqLN8J6?g_st=ic" target="_blank" rel="noopener noreferrer">📍 Portimão, Algarve</a>
        <a href="mailto:savannahtailsandtrails@gmail.com">savannahtailsandtrails@gmail.com</a>
        <a href="tel:+351910417254">+351 910 417 254</a>
      </div>
    </div>
    <div className="footer__bottom">
      <span>© 2026 Savannah Tails & Trails · Licensed by IPDJ · Est. 2022</span>
      <span>Made with sun, grass, and three good dogs.</span>
    </div>
  </footer>
);

Object.assign(window, {
  Nav, Hero, Experience, DayInLife, Trust, MeetTheDogs, Gallery, Booking, Footer,
});