/* global React, ReactDOM, useTweaks, TweaksPanel, TweakSection, TweakColor, TweakRadio, LOGO_VARIANTS, PawIcon */

const { useState, useEffect, useRef, useMemo } = React;

// ─── Palettes ───
const PALETTES = /*EDITMODE-BEGIN*/{
  "palette": "sunny",
  "logo": "wordmark"
}/*EDITMODE-END*/;

const PALETTE_DEFS = {
  sunny: {
    name: "Sunny Mapleton",
    "--c-bg": "#FFF4E4",
    "--c-bg-soft": "#FFE3C2",
    "--c-card": "#FFFFFF",
    "--c-ink": "#1B2240",
    "--c-ink-soft": "#4A547A",
    "--c-primary": "#F77A2E",
    "--c-primary-dark": "#D85F18",
    "--c-accent": "#4F9BD8",
    "--c-accent-dark": "#2E72B0",
    "--c-tertiary": "#FFD4A8",
  },
  terracotta: {
    name: "Terracotta + Navy",
    "--c-bg": "#FAF0E2",
    "--c-bg-soft": "#F2DDC2",
    "--c-card": "#FFFFFF",
    "--c-ink": "#16243F",
    "--c-ink-soft": "#445170",
    "--c-primary": "#D9663A",
    "--c-primary-dark": "#A84B23",
    "--c-accent": "#3A5A85",
    "--c-accent-dark": "#22436A",
    "--c-tertiary": "#EFC9A8",
  },
  peach: {
    name: "Peach + Denim",
    "--c-bg": "#FFF1EA",
    "--c-bg-soft": "#FFDFCD",
    "--c-card": "#FFFFFF",
    "--c-ink": "#1F2E4D",
    "--c-ink-soft": "#516084",
    "--c-primary": "#FF8B5C",
    "--c-primary-dark": "#E16A37",
    "--c-accent": "#5D89C7",
    "--c-accent-dark": "#3D6BAA",
    "--c-tertiary": "#FFCBAE",
  },
  campfire: {
    name: "Campfire & Sky",
    "--c-bg": "#FFEFD9",
    "--c-bg-soft": "#FFD9A8",
    "--c-card": "#FFFFFF",
    "--c-ink": "#0F2B45",
    "--c-ink-soft": "#3F5874",
    "--c-primary": "#EF6C20",
    "--c-primary-dark": "#C24E0E",
    "--c-accent": "#3C8DC4",
    "--c-accent-dark": "#1F6FA6",
    "--c-tertiary": "#FFC58A",
  },
};

// ─── apply palette to :root ───
function usePaletteEffect(paletteKey) {
  useEffect(() => {
    const def = PALETTE_DEFS[paletteKey] || PALETTE_DEFS.sunny;
    const root = document.documentElement;
    Object.entries(def).forEach(([k, v]) => {
      if (k.startsWith("--")) root.style.setProperty(k, v);
    });
  }, [paletteKey]);
}

// ─── Reveal on scroll ───
function useReveal() {
  useEffect(() => {
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          e.target.classList.add("in");
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.12 });
    document.querySelectorAll(".reveal").forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, []);
}

// ─── Section header ───
const SectionHead = ({ kicker, title, sub }) => (
  <div className="section-head reveal">
    <div className="kicker">{kicker}</div>
    <h2>{title}</h2>
    {sub && <p>{sub}</p>}
  </div>
);

// ─── Nav ───
const Nav = ({ logoKey }) => {
  const { Comp } = LOGO_VARIANTS[logoKey] || LOGO_VARIANTS.wordmark;
  return (
    <nav className="nav">
      <div className="wrap nav-inner">
        <a href="#top" style={{ textDecoration: "none", display: "block", color: "var(--c-ink)" }}>
          <Comp size={0.95} accent="var(--c-primary)" color="var(--c-ink)" />
        </a>
        <div className="nav-links">
          <a href="#services">Services</a>
          <a href="#about">About</a>
          {/* <a href="#gallery">Gallery</a> */}
          <a href="#faq">FAQ</a>
          <a className="nav-cta" href="sms:8018756360">Text Me</a>
        </div>
      </div>
    </nav>
  );
};

// ─── Hero ───
const Hero = () => (
  <section className="hero" id="top">
    <PawIcon size={56} color="var(--c-primary)" style={{ position: "absolute", top: "12%", right: "6%", opacity: 0.15, transform: "rotate(22deg)" }} />
    <PawIcon size={36} color="var(--c-accent)" style={{ position: "absolute", bottom: "18%", left: "3%", opacity: 0.18, transform: "rotate(-14deg)" }} />
    <div className="wrap hero-grid">
      <div className="reveal">
        <div className="eyebrow"><span className="dot" /> Now booking · Mapleton, UT</div>
        <h1>
          Happy tails,<br />
          <span className="wag">happy trails.</span>
        </h1>
        <p className="lede">
          Hi, I'm Kaitlynn — a 13-year-old dog lover taking your best friend on the best walk of their week. Reliable, friendly, and right around the corner.
        </p>
        <div className="hero-cta">
          <a className="btn btn-primary" href="sms:8018756360">
            <PawIcon size={18} color="white" /> Book a free trial walk
          </a>
          <a className="btn btn-ghost" href="#services">See pricing →</a>
        </div>
      </div>
      <div className="reveal">
        <div className="hero-photo">
          <div className="photo-tag">happy client 🐾</div>
          <img src="./dog.webp" alt="Kaitlynn with a happy dog" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
          <div className="photo-badge">
            <div>
              <small>FREE</small>
              trial<br/>walk!
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
);

// ─── Services ───
const CheckIcon = ({ color }) => (
  <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
    <circle cx="12" cy="12" r="11" fill={color || "var(--c-primary)"} />
    <path d="M7 12.5 L10.5 16 L17 9" stroke="white" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
  </svg>
);

const Services = () => (
  <section id="services">
    <SectionHead
      kicker="what I offer"
      title="Simple, snout-to-tail care"
      sub="One package keeps it easy — five walks a week, every week. Need something custom? Just ask."
    />
    <div className="wrap">
      <div className="services">
        <div className="services-grid">
          <div className="service-card featured reveal">
            <div className="ribbon">MOST POPULAR</div>
            <h3>Weekly Walking Package</h3>
            <p style={{ opacity: 0.8, marginTop: 0 }}>Five walks a week, every week. Like clockwork.</p>
            <div className="price">$30<small>/ week</small></div>
            <ul className="feature-list">
              <li><CheckIcon /> 5 walks per week</li>
              <li><CheckIcon /> 30 minutes per walk</li>
              <li><CheckIcon /> Morning <em>or</em> evening — your pick</li>
              <li><CheckIcon /> Free trial walk before you commit</li>
              <li><CheckIcon /> Flexible scheduling</li>
            </ul>
            <a className="btn btn-primary" href="sms:8018756360">
              Sign up →
            </a>
          </div>

          <div className="service-card reveal">
            <h3>Custom & Extras</h3>
            <p style={{ color: "var(--c-ink-soft)", marginTop: 0 }}>Need a one-off or a bigger pup? I've got you.</p>
            <ul className="feature-list" style={{ marginTop: 24 }}>
              <li><CheckIcon color="var(--c-accent)" /> Multiple dogs at once</li>
              <li><CheckIcon color="var(--c-accent)" /> Special rates for larger breeds</li>
              <li><CheckIcon color="var(--c-accent)" /> One-off walks &amp; weekend coverage</li>
              <li><CheckIcon color="var(--c-accent)" /> Vacation drop-ins</li>
            </ul>
            <a className="btn btn-ghost" href="sms:8018756360">Ask about pricing</a>
          </div>
        </div>
      </div>
    </div>
  </section>
);

// ─── About ───
const About = () => (
  <section id="about">
    <div className="wrap about-grid about">
      <div className="reveal">
        <div className="about-photo">
          <img src="./kaitlynn.jpg" alt="Kaitlynn with a happy dog" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
        </div>
      </div>
      <div className="reveal">
        <div className="kicker" style={{ fontFamily: "var(--ff-hand)", fontSize: 28, color: "var(--c-primary)" }}>hi, I'm Kaitlynn!</div>
        <h2>A neighborhood dog walker with a soft spot for every pup.</h2>
        <p>
          I'm 13 years old and an animal-lover through and through. I live in Mapleton and I'm passionate about caring for dogs — making sure they're happy, exercised, and ready to nap when you get home.
        </p>
        <p>
          I'd love to earn your trust with your furry family member. Every new client gets a <strong>free trial walk</strong> so we can make sure I'm a good match for your dog.
        </p>
        <div className="stats">
          <div className="stat"><div className="n">13</div><div className="l">Years young</div></div>
          <div className="stat"><div className="n">$30</div><div className="l">/ week, flat</div></div>
          <div className="stat"><div className="n">5 ⭐</div><div className="l">From every tail</div></div>
        </div>
      </div>
    </div>
  </section>
);

// ─── Gallery ───
const GALLERY_ITEMS = [
  { id: 1, caption: "Bella's morning sniffari 🌳", className: "g-half g-tall", hue: "30deg" },
  { id: 2, caption: "Cooper's first trail walk", className: "g-third", hue: "200deg" },
  { id: 3, caption: "Stick supervisor on duty", className: "g-third", hue: "20deg" },
  { id: 4, caption: "Best friends already", className: "g-third", hue: "190deg" },
  { id: 5, caption: "Treat time after a long walk", className: "g-half", hue: "40deg" },
  { id: 6, caption: "Maple street regulars", className: "g-half", hue: "210deg" },
];

const Gallery = ({ onOpen }) => (
  <section id="gallery">
    <SectionHead
      kicker="happy customers"
      title="My pack of pups"
      sub="A few of the regulars who let me hold the leash. Tap any photo for a closer look."
    />
    <div className="wrap">
      <div className="gallery-grid reveal">
        {GALLERY_ITEMS.map((item, i) => (
          <div
            key={item.id}
            className={`gallery-item ${item.className}`}
            onClick={() => onOpen(i)}
            style={{
              "--g-angle": `${45 + i * 25}deg`,
              "--g-bg": `linear-gradient(${180 + i * 20}deg, color-mix(in srgb, var(--c-primary) ${30 + (i%2)*20}%, var(--c-tertiary)), color-mix(in srgb, var(--c-accent) ${20 + (i%3)*10}%, var(--c-tertiary)))`,
            }}
          >
            <div className="placeholder">[ pup photo #{item.id} ]</div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

// ─── Lightbox ───
const Lightbox = ({ index, onClose, onPrev, onNext }) => {
  useEffect(() => {
    const onKey = (e) => {
      if (e.key === "Escape") onClose();
      if (e.key === "ArrowLeft") onPrev();
      if (e.key === "ArrowRight") onNext();
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [onClose, onPrev, onNext]);

  if (index == null) return null;
  const item = GALLERY_ITEMS[index];
  return (
    <div className="lb" onClick={onClose}>
      <div className="lb-inner" onClick={(e) => e.stopPropagation()}>
        <div className="placeholder" style={{
          width: "100%", height: "100%",
          background: `repeating-linear-gradient(45deg, transparent 0 18px, rgba(27,34,64,.08) 18px 19px), linear-gradient(180deg, var(--c-tertiary), var(--c-primary))`
        }}>[ pup photo #{item.id} — full view ]</div>
        <div className="lb-caption">{item.caption}</div>
      </div>
      <button className="lb-close" onClick={onClose} aria-label="Close">✕</button>
      <button className="lb-arrow prev" onClick={(e) => { e.stopPropagation(); onPrev(); }} aria-label="Previous">‹</button>
      <button className="lb-arrow next" onClick={(e) => { e.stopPropagation(); onNext(); }} aria-label="Next">›</button>
    </div>
  );
};

// ─── FAQ ───
const FAQ_ITEMS = [
  { q: "How does the free trial walk work?", a: "We pick a time that works for you, I come meet you and your dog, and we go on a short walk together — no charge. After that, you can decide if you'd like to sign up for the weekly package. No pressure!" },
  { q: "What areas do you cover?", a: "I walk in Mapleton, Utah and the surrounding neighborhoods. If you're a little further out, send me a text — I'm happy to check if it works." },
  { q: "What times of day are walks?", a: "During summer, almost any time is fine. During the school year, mornings and evenings are my regular slots. Weekends are flexible. You can pick a consistent time slot or mix it up week to week." },
  { q: "Can you walk multiple dogs at once?", a: "Yes! I love a small pack. There's a small additional fee per extra dog — just send me a text and I'll give you a quote." },
  { q: "How do I pay?", a: "Easy ways: cash at the start of the week, Venmo, or whatever's easiest for your family. We'll figure it out on the trial walk." },
  { q: "What if it's raining or snowing?", a: "Light rain or snow? We still walk — dogs love it (and I have a good rain jacket). For serious weather, we'll swap a walk for some indoor play, or reschedule. Your dog's comfort comes first." },
  { q: "What if my dog pulls on the leash or is shy?", a: "Totally fine — I'm patient and I take it slow. Just let me know what your dog is like and we'll work at their pace." },
];

const FAQ = () => {
  const [open, setOpen] = useState(0);
  return (
    <section id="faq" style={{ background: "var(--c-bg-soft)", borderRadius: 0 }}>
      <SectionHead
        kicker="curious?"
        title="Frequently asked questions"
        sub="If you don't see your question, just send me a text — I love hearing about new dogs."
      />
      <div className="wrap">
        <div className="faq reveal">
          {FAQ_ITEMS.map((item, i) => {
            const isOpen = open === i;
            return (
              <div key={i} className={`faq-item ${isOpen ? "open" : ""}`}>
                <button className="faq-q" onClick={() => setOpen(isOpen ? -1 : i)} aria-expanded={isOpen}>
                  <span>{item.q}</span>
                  <span className="chev">
                    <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
                      <path d="M3 5 L7 9 L11 5" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" />
                    </svg>
                  </span>
                </button>
                <div className="faq-a" style={{ maxHeight: isOpen ? 240 : 0 }}>
                  <div className="faq-a-inner">{item.a}</div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
};

// ─── Contact ───
const Contact = () => (
  <section id="contact">
    <div className="wrap">
      <div className="contact-card reveal">
        <PawIcon size={120} color="white" style={{ position: "absolute", top: "8%", left: "6%", opacity: 0.08, transform: "rotate(-14deg)" }} />
        <PawIcon size={140} color="white" style={{ position: "absolute", bottom: "8%", right: "6%", opacity: 0.08, transform: "rotate(20deg)" }} />
        <div className="kicker" style={{ fontFamily: "var(--ff-hand)", fontSize: 28, color: "var(--c-primary)" }}>let's meet!</div>
        <h2>Send me a text.</h2>
        <a className="phone" href="sms:8018756360">801-875-6360</a>
        <p>Questions, scheduling, or just to say hi — texting is the fastest way to reach me. I'll get back to you quickly.</p>
        <div style={{ marginTop: 32 }}>
          <a className="btn btn-primary" href="sms:8018756360">
            <PawIcon size={18} color="white" /> Text me now
          </a>
        </div>
      </div>
    </div>
  </section>
);

// ─── App ───
function App() {
  const [t, setTweak] = useTweaks(PALETTES);
  const [lbIndex, setLbIndex] = useState(null);

  usePaletteEffect(t.palette);
  useReveal();

  const openLb = (i) => setLbIndex(i);
  const closeLb = () => setLbIndex(null);
  const prevLb = () => setLbIndex((i) => (i - 1 + GALLERY_ITEMS.length) % GALLERY_ITEMS.length);
  const nextLb = () => setLbIndex((i) => (i + 1) % GALLERY_ITEMS.length);

  return (
    <>
      <Nav logoKey={t.logo} />
      <Hero />
      <Services />
      <About />
      {/* <Gallery onOpen={openLb} /> */}
      <FAQ />
      <Contact />
      <footer>
        <div className="wrap">
          © 2026 Kaitlynn's Dog Walking Service · Mapleton, UT · made with <span className="heart">♥</span> &amp; lots of treats
        </div>
      </footer>

      <Lightbox index={lbIndex} onClose={closeLb} onPrev={prevLb} onNext={nextLb} />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Color palette">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8 }}>
            {Object.entries(PALETTE_DEFS).map(([key, def]) => {
              const active = t.palette === key;
              return (
                <button
                  key={key}
                  onClick={() => setTweak("palette", key)}
                  style={{
                    background: def["--c-bg"],
                    border: active ? `2.5px solid ${def["--c-primary"]}` : "2px solid rgba(0,0,0,.1)",
                    borderRadius: 12,
                    padding: 10,
                    cursor: "pointer",
                    textAlign: "left",
                    color: def["--c-ink"],
                    fontFamily: "Nunito, sans-serif",
                    fontWeight: 700,
                    fontSize: 12,
                  }}
                >
                  <div style={{ display: "flex", gap: 4, marginBottom: 6 }}>
                    <div style={{ width: 18, height: 18, borderRadius: 6, background: def["--c-primary"] }} />
                    <div style={{ width: 18, height: 18, borderRadius: 6, background: def["--c-accent"] }} />
                    <div style={{ width: 18, height: 18, borderRadius: 6, background: def["--c-ink"] }} />
                  </div>
                  {def.name}
                </button>
              );
            })}
          </div>
        </TweakSection>

        <TweakSection label="Logo style">
          {Object.entries(LOGO_VARIANTS).map(([key, { label, Comp }]) => {
            const active = t.logo === key;
            return (
              <button
                key={key}
                onClick={() => setTweak("logo", key)}
                style={{
                  width: "100%",
                  background: active ? "var(--c-bg-soft)" : "white",
                  border: active ? "2.5px solid var(--c-primary)" : "2px solid rgba(0,0,0,.08)",
                  borderRadius: 12,
                  padding: 12,
                  cursor: "pointer",
                  marginBottom: 8,
                  display: "flex",
                  alignItems: "center",
                  gap: 12,
                  fontFamily: "Nunito, sans-serif",
                  fontWeight: 700,
                  fontSize: 12,
                  color: "var(--c-ink)",
                }}
              >
                <div style={{ flexShrink: 0, transform: "scale(0.7)", transformOrigin: "left center", width: 110 }}>
                  <Comp size={0.85} accent="var(--c-primary)" color="var(--c-ink)" />
                </div>
                <span style={{ marginLeft: "auto" }}>{label}</span>
              </button>
            );
          })}
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);