/* =========================================================
   Batman, Schedule, Burning Man info, Travel, RSVP, FAQ, Footer
   (depends on helpers from components-a.jsx via window)
   ========================================================= */

/* =====================  BATMAN  ===================== */
const WOOFS = [
  "woof.", "borf!", "the people's dog ♥", "feed me, peasants",
  "i am the night.", "*judgmental stare*", "snack? snack.", "bork bork",
];
function Batman() {
  const [woofing, setWoofing] = useState(false);
  const [msg, setMsg] = useState("");
  const [hearts, setHearts] = useState([]);
  const woof = () => {
    setMsg(WOOFS[Math.floor(Math.random() * WOOFS.length)]);
    setWoofing(true);
    setTimeout(() => setWoofing(false), 600);
    const burst = Array.from({ length: 6 }, (_, i) => ({ id: Date.now() + i, x: 10 + Math.random() * 80, d: Math.random() * 0.3 }));
    setHearts((h) => [...h, ...burst]);
    setTimeout(() => setHearts((h) => h.slice(burst.length)), 1300);
  };
  const facts = [
    ["Title", "Honorary Best Dog"],
    ["Age", "15 going on forever"],
    ["Breed", "Yorkshire Terrier (mini)"],
    ["Weight", "4 lbs of pure attitude"],
    ["Likes", "Sunbeams, snacks, supervising plants"],
  ];
  return (
    <section className="section batman" id="batman">
      <div className="wrap batman__grid">
        <div className="batman__portrait reveal">
          <div className={"batman__stage" + (woofing ? " is-woofing" : "")}>
            <BatmanSVG petting={woofing} />
            {hearts.map((h) => (
              <span key={h.id} className="bat-heart" style={{ left: h.x + "%", animationDelay: h.d + "s" }}>♥</span>
            ))}
            <div className="batman__badge">Batman</div>
          </div>
          <button className={"woof" + (woofing ? " is-woofing" : "")} onClick={woof}>🐾 Pet Batman</button>
          <div className="woof-bubble">{msg}</div>
        </div>
        <div className="reveal">
          <span className="eyebrow">The real boss</span>
          <h2 className="section-title">Batman's Corner</h2>
          <p className="lede" style={{ margin: "14px 0 4px" }}>Every great love story needs a tiny, grumpy mascot. Meet Lily's 15-year-old Yorkie — and the real reason Igor made the cut.</p>
          <div className="batman__facts">
            {facts.map(([k, v]) => (
              <div className="fact" key={k}>
                <div className="fact__k">{k}</div>
                <div className="fact__v">{v}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* =====================  SCHEDULE  ===================== */
const EVENTS = [
  { time: "4:00 PM", day: "Wed · Sep 2", name: "Welcome Tea & Dust-Off", desc: "Find our camp, grab cold water and a hat, and say hello before the festivities." },
  { time: "5:30 PM", day: "Thu · Sep 3", name: "The Ceremony", desc: "We say 'I do' as the sun dips behind the mountains. Wear your most joyful playa best." },
  { time: "7:00 PM", day: "Thu · Sep 3", name: "Sunset Reception", desc: "Toasts, dancing, and a feast under string lights. Batman will be making a brief, regal appearance." },
  { time: "10:00 PM", day: "Thu · Sep 3", name: "Lantern Send-Off", desc: "We light the night and ride out into the city together. Bring your bike and your sparkle." },
  { time: "10:00 AM", day: "Fri · Sep 4", name: "Recovery Brunch", desc: "Coffee, shade, and stories from the night before. Stop by whenever you surface." },
];
function Schedule() {
  return (
    <section className="section" id="schedule">
      <div className="wrap">
        <div className="sched__head reveal">
          <span className="eyebrow">When &amp; where</span>
          <h2 className="section-title">The Celebration</h2>
          <p className="lede" style={{ margin: "16px auto 0" }}>Playa time is loose by nature — these are our anchors. We're celebrating with the people we love (that means you!); camp location &amp; exact coordinates will be shared closer to the burn.</p>
        </div>
        <div className="sched-list reveal">
          {EVENTS.map((e, i) => (
            <div className="event" key={i}>
              <div>
                <div className="event__time">{e.time}</div>
                <span className="event__day">{e.day}</span>
              </div>
              <div>
                <div className="event__name">{e.name}</div>
                <div className="event__desc">{e.desc}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* =====================  BURNING MAN INFO  ===================== */
const BM_CARDS = [
  { icon: "water", title: "Bring Your Own Everything", body: "Black Rock City sells nothing but ice and coffee. Pack all the food, water, shelter and supplies you'll need — you are radically self-reliant out here." },
  { icon: "money", title: "No Money, Just Gifting", body: "There's no buying or bartering. The economy runs on gifting — bring small things to share, and accept others' generosity with grace." },
  { icon: "dust", title: "Embrace the Dust", body: "The playa is fine alkaline dust that gets everywhere. Bring goggles, a dust mask or bandana, and lip balm. Dust storms pass — wait them out and hydrate." },
  { icon: "water", title: "Water Is Life", body: "Plan for ~1.5 gallons per person per day for drinking, cooking and washing. Hydration out here is not optional — sip constantly, even when you don't feel thirsty." },
  { icon: "bike", title: "A Bike Is Your Best Friend", body: "The city is huge. A sturdy, decorated bike with bright lights gets you everywhere. Lock it, light it, and never leave it dark at night." },
  { icon: "sun", title: "Sun by Day, Cold by Night", body: "Desert extremes: scorching afternoons and surprisingly cold nights. Layer up — think sun hat and SPF for day, cozy faux fur and warm boots after dark." },
  { icon: "leaf", title: "Leave No Trace", body: "Whatever you bring in, you pack out. No 'MOOP' (Matter Out Of Place) — not a sequin, not a pistachio shell. We leave the desert exactly as we found it." },
  { icon: "health", title: "Costumes & Self-Expression", body: "There are no rules, only good vibes. Wear what makes you feel radiant — bring layers, comfy closed-toe shoes, and at least one outfit you'd never wear anywhere else." },
];
const PRINCIPLES = ["Radical Inclusion", "Gifting", "Decommodification", "Radical Self-reliance", "Radical Self-expression", "Communal Effort", "Civic Responsibility", "Leaving No Trace", "Participation", "Immediacy"];

function BurningMan() {
  return (
    <section className="section section--green" id="burningman">
      <div className="wrap">
        <div className="bm__head reveal">
          <span className="eyebrow">First-timer? Read this</span>
          <h2 className="section-title" style={{ color: "#f4eedd" }}>Burning Man 101</h2>
          <p className="lede" style={{ margin: "16px auto 0", color: "#cdd3bb" }}>If you've never been to the playa, welcome — it's unlike anywhere on earth. Here's what every guest should know to arrive prepared, safe, and ready to play.</p>
        </div>
        <div className="bm-grid reveal">
          {BM_CARDS.map((c, i) => {
            const Icon = BMIcons[c.icon];
            return (
              <div className="bm-card" key={i}>
                <div className="bm-card__icon"><Icon s={30} /></div>
                <h3 className="bm-card__title">{c.title}</h3>
                <p className="bm-card__body">{c.body}</p>
              </div>
            );
          })}
        </div>

        <div className="bm-callout reveal">
          <div className="bm-callout__big">1.5 gal<small>water / person / day</small></div>
          <div style={{ color: "#dfe3d2", fontSize: "16.5px" }}>
            <strong style={{ color: "#fff", fontFamily: "var(--font-display)", fontSize: "21px", fontWeight: 600 }}>The single most important rule:</strong>
            <p style={{ margin: "8px 0 0" }}>Hydrate, shade up, and look after each other. Tickets to Burning Man and a vehicle pass are required and must be purchased separately — we'll share guidance on the sale dates and our camp details as the burn gets closer.</p>
          </div>
        </div>

        <div className="bm-principles reveal">
          {PRINCIPLES.map((p) => <span className="principle" key={p}>{p}</span>)}
        </div>
      </div>
    </section>
  );
}

/* =====================  TRAVEL  ===================== */
const TSTEPS = [
  { title: "Fly into Reno (RNO)", body: "The closest major airport, about 2.5 hours from the gate. Rent a 4×4 or high-clearance vehicle if you can — and stock up on supplies in Reno before you head out." },
  { title: "Drive to Black Rock City", body: "Head north on NV-447 through Gerlach, the last town with gas, food and a real bathroom. Fill the tank and grab any last-minute essentials here." },
  { title: "Enter through the Gate", body: "Have your ticket, vehicle pass and ID ready. Expect a wait — bring water and patience. First-timers get to ring the bell at the greeters station!" },
  { title: "Find our camp", body: "We'll send exact coordinates (street & clock position) and a what-to-pack checklist by email closer to the burn. Look for the green flags and string lights." },
];
function Travel() {
  return (
    <section className="section section--tint" id="travel">
      <div className="wrap">
        <div className="story__head reveal" style={{ textAlign: "center", marginBottom: "clamp(40px,6vw,64px)" }}>
          <span className="eyebrow">Getting there</span>
          <h2 className="section-title">Travel &amp; Logistics</h2>
        </div>
        <div className="travel__grid">
          <div className="travel__map reveal"><Ph label="MAP · reno → black rock city" /></div>
          <div className="travel__steps reveal">
            {TSTEPS.map((s, i) => (
              <div className="tstep" key={i}>
                <div className="tstep__num">{i + 1}</div>
                <div>
                  <div className="tstep__title">{s.title}</div>
                  <div className="tstep__body">{s.body}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* =====================  RSVP  ===================== */
function RSVP() {
  const [data, setData] = useState({ name: "", email: "", attending: "", guests: "1", notes: "" });
  const [errors, setErrors] = useState({});
  const [sent, setSent] = useState(false);
  const set = (k, v) => { setData((d) => ({ ...d, [k]: v })); setErrors((e) => ({ ...e, [k]: undefined })); };

  const submit = (e) => {
    e.preventDefault();
    const err = {};
    if (!data.name.trim()) err.name = "Please tell us your name";
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(data.email)) err.email = "A valid email, please";
    if (!data.attending) err.attending = "Let us know if you can make it";
    setErrors(err);
    if (Object.keys(err).length === 0) {
      try { localStorage.setItem("li-rsvp", JSON.stringify(data)); } catch (_) {}
      setSent(true);
    }
  };

  return (
    <section className="section rsvp" id="rsvp">
      <div className="wrap">
        <div className="rsvp__card reveal">
          {sent ? (
            <div className="rsvp__success">
              <Leaf size={40} />
              <div className="script">Hooray!</div>
              <p style={{ fontFamily: "var(--font-display)", fontSize: "22px", margin: "6px 0 4px" }}>
                {data.attending === "yes" ? `We can't wait to celebrate with you, ${data.name.split(" ")[0]}.` : `Thank you, ${data.name.split(" ")[0]} — we'll miss you dearly.`}
              </p>
              <p style={{ color: "var(--ink-soft)" }}>Your RSVP is saved. We'll send playa details &amp; our camp location to {data.email}.</p>
              {data.attending === "yes" && <p className="rsvp__stamp">Perfectos barabectos. — Igor</p>}
              <button className="btn btn--ghost" style={{ marginTop: 14 }} onClick={() => { setSent(false); setData({ name: "", email: "", attending: "", guests: "1", notes: "" }); }}>Edit response</button>
            </div>
          ) : (
            <React.Fragment>
              <div className="rsvp__head">
                <span className="eyebrow" style={{ justifyContent: "center" }}>Join us</span>
                <h2 className="section-title">RSVP</h2>
                <p style={{ color: "var(--ink-soft)", marginTop: 10 }}>Kindly respond by <strong>August 1, 2026</strong>.</p>
              </div>
              <form onSubmit={submit} noValidate>
                <div className={"field" + (errors.name ? " field--err" : "")}>
                  <label>Full name</label>
                  <input value={data.name} onChange={(e) => set("name", e.target.value)} placeholder="Your name" />
                  {errors.name && <div className="err-msg">{errors.name}</div>}
                </div>
                <div className={"field" + (errors.email ? " field--err" : "")}>
                  <label>Email</label>
                  <input type="email" value={data.email} onChange={(e) => set("email", e.target.value)} placeholder="you@email.com" />
                  {errors.email && <div className="err-msg">{errors.email}</div>}
                </div>
                <div className={"field" + (errors.attending ? " field--err" : "")}>
                  <label>Will you brave the playa with us?</label>
                  <div className="choice-row">
                    <label className={"choice" + (data.attending === "yes" ? " is-sel" : "")}>
                      <input type="radio" name="att" checked={data.attending === "yes"} onChange={() => set("attending", "yes")} />
                      🌵 Joyfully yes
                    </label>
                    <label className={"choice" + (data.attending === "no" ? " is-sel" : "")}>
                      <input type="radio" name="att" checked={data.attending === "no"} onChange={() => set("attending", "no")} />
                      💚 Sadly no
                    </label>
                  </div>
                  {errors.attending && <div className="err-msg">{errors.attending}</div>}
                </div>
                {data.attending === "yes" && (
                  <div className="field">
                    <label>Number in your party</label>
                    <select value={data.guests} onChange={(e) => set("guests", e.target.value)}>
                      {[1, 2, 3, 4, 5].map((n) => <option key={n} value={n}>{n}</option>)}
                    </select>
                  </div>
                )}
                <div className="field">
                  <label>A note for Lily &amp; Igor (optional)</label>
                  <textarea rows={3} value={data.notes} onChange={(e) => set("notes", e.target.value)} placeholder="Dietary needs, a song request, a message for Batman…" />
                </div>
                <button type="submit" className="btn btn--solid rsvp__submit">Send RSVP</button>
              </form>
            </React.Fragment>
          )}
        </div>
      </div>
    </section>
  );
}

/* =====================  FAQ  ===================== */
const FAQS = [
  { q: "Do I need a ticket to Burning Man to attend?", a: "Yes. Burning Man requires its own ticket and a vehicle pass, purchased separately through the official sale. We'll share sale dates and tips by email — grab yours early, as they sell out." },
  { q: "What should I wear to the wedding?", a: "Playa-formal! Think joyful, expressive, and dusty-friendly: flowing fabrics, faux fur for the cold nights, fun accessories, and closed-toe shoes you can bike and walk in. Heels and the playa do not get along." },
  { q: "Where exactly is the ceremony?", a: "At our camp in Black Rock City. The city is laid out by clock position and street name — we'll send our exact coordinates, a map, and arrival instructions closer to the burn." },
  { q: "Can I bring a plus-one?", a: "Of course — bring whoever you want! The more the merrier out on the playa. Just be sure to add them to your RSVP so we can plan for everyone." },
  { q: "Is Batman really going to be there?", a: "Sadly, no — the playa is brutal on little dogs, especially a distinguished 15-year-old. Batman will be holding down the fort at home, judging us from afar. He'll be there in spirit (and all over this website)." },
  { q: "I've never been to Burning Man. Is it safe?", a: "With preparation, absolutely. Read our Burning Man 101 section, come self-reliant, hydrate constantly, look out for your fellow burners, and you'll have the time of your life." },
];
function FAQ() {
  const [open, setOpen] = useState(0);
  return (
    <section className="section" id="faq">
      <div className="wrap">
        <div className="faq__head reveal">
          <span className="eyebrow">Good to know</span>
          <h2 className="section-title">Questions &amp; Answers</h2>
        </div>
        <div className="faq-list reveal">
          {FAQS.map((f, i) => (
            <div className={"faq-item" + (open === i ? " is-open" : "")} key={i}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)} aria-expanded={open === i}>
                {f.q}
                <span className="faq-q__icon">+</span>
              </button>
              <div className="faq-a"><div className="faq-a__inner">{f.a}</div></div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* =====================  FOOTER  ===================== */
function Footer() {
  return (
    <footer className="footer">
      <div className="wrap">
        <Sprig size={30} color="var(--green-500)" style={{ margin: "0 auto 18px" }} />
        <div className="footer__names">Lily &amp; Igor</div>
        <div className="footer__stamp">✦ perfectos barabectos ✦</div>
        <div className="footer__sub">See you on the playa · September 2026</div>
        <div className="footer__meta">Black Rock City, Nevada · lilyandigor.com</div>
        <Sprig size={26} color="var(--green-500)" className="footer__leaf" style={{ transform: "rotate(180deg)" }} />
      </div>
    </footer>
  );
}

Object.assign(window, { Batman, Schedule, BurningMan, Travel, RSVP, FAQ, Footer });