// app.jsx — CHATONA Season X

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

const SUPABASE_URL = "https://whfrqyaohtexitvyjzrw.supabase.co";
const SUPABASE_KEY = "sb_publishable_3cKYXrmwYMJaYkr0fcS4jg_H_9ORUmb";
const db = window.supabase.createClient(SUPABASE_URL, SUPABASE_KEY);

// ---------- Crew ----------
// Each crew member has a phone number (digits only, with country code).
// REPLACE the "0000000000" placeholders with real numbers.
// Format: country code + area code + number (e.g. "14165551234" for +1 416 555 1234)
const CREW = [
  { id: "pat",     name: "Pat",     color: "#e8621a", phone: "16479226421", img: "assets/avatars/pat.jpg" },
  { id: "luisa",   name: "Luisa",   color: "#f0a830", phone: "14164070107", img: "assets/avatars/luisa.jpg" },
  { id: "feo",     name: "Feo",     color: "#d4506a", phone: "16477852454", img: "assets/avatars/feo.jpg" },
  { id: "adam",    name: "Adam",    color: "#3a8fa0", phone: "14169709126", img: "assets/avatars/adam.jpg" },
  { id: "howard",  name: "Howard",  color: "#4a8a3a", phone: "16477713378", img: "assets/avatars/howard.jpg" },
  { id: "tori",    name: "Tori",    color: "#e8621a", phone: "15142969029", img: "assets/avatars/tori.jpg" },
  { id: "eddie",   name: "Eddie",   color: "#f0a830", phone: "16139860289", img: "assets/avatars/eddie.jpg" },
  { id: "amanda",  name: "Amanda",  color: "#d4506a", phone: "16473393182", img: "assets/avatars/amanda.jpg" },
  { id: "danica",  name: "Danica",  color: "#3a8fa0", phone: "19054398156", img: "assets/avatars/danica.jpg" },
  { id: "ian",     name: "Ian",     color: "#4a8a3a", phone: "16475194658", img: "assets/avatars/ian.jpg" },
  { id: "joey",    name: "Joey",    color: "#e8621a", phone: "16473006619", img: "assets/avatars/joey.jpg" },
  { id: "aaron",   name: "Aaron",   color: "#f0a830", phone: "17053451567", img: "assets/avatars/aaron.jpg" },
  { id: "matt",    name: "Matt",    color: "#d4506a", phone: "16476541535", img: null },
];

const findCrew = (id) => CREW.find(c => c.id === id);
const initials = (name) => name.split(/\s+/).map(s => s[0]).join("").slice(0, 2).toUpperCase();

// Normalize a phone string to digits only. Strips spaces, dashes, parens, +.
// Compares against last 10 digits so users can enter w/ or w/o country code.
const normalizePhone = (raw) => (raw || "").replace(/\D/g, "");
const matchPhone = (raw) => {
  const digits = normalizePhone(raw);
  if (digits.length < 10) return null;
  const tail = digits.slice(-10);
  return CREW.find(c => normalizePhone(c.phone).slice(-10) === tail) || null;
};
const formatPhoneDisplay = (digits) => {
  const d = normalizePhone(digits);
  const last10 = d.slice(-10);
  if (last10.length < 4) return last10;
  if (last10.length < 7) return `(${last10.slice(0,3)}) ${last10.slice(3)}`;
  return `(${last10.slice(0,3)}) ${last10.slice(3,6)}-${last10.slice(6,10)}`;
};

// ---------- Episodes ----------
const EPISODES_INITIAL = [
  {
    id: "ep1",
    num: "01",
    title: "Opening Weekend",
    dates: "Jun 26 – 28, 2026",
    startDate: new Date("2026-06-26T15:00:00-04:00"),
    color: "orange",
    bgClass: "btn-orange",
    accent: "#e8621a",
    going: [],
  },
  {
    id: "ep2",
    num: "02",
    title: "Beerlympics",
    dates: "Aug 14 – 16, 2026",
    startDate: new Date("2026-08-14T15:00:00-04:00"),
    color: "teal",
    bgClass: "btn-teal",
    accent: "#3a8fa0",
    going: [],
  },
  {
    id: "ep3",
    num: "03",
    title: "The Finale",
    dates: "Sep 11 – 13, 2026",
    startDate: new Date("2026-09-11T15:00:00-04:00"),
    color: "coral",
    bgClass: "btn-coral",
    accent: "#d4506a",
    going: [],
  },
];

// ---------- Avatar ----------
const Avatar = ({ id, name, size = 48, fontSize, borderWidth = 2 }) => {
  const person = id ? findCrew(id) : { name, color: "#cccccc", img: null };
  if (!person) return null;
  if (person.img) {
    return (
      <span
        className="avatar avatar-img"
        style={{
          width: size, height: size,
          borderWidth,
          backgroundImage: `url("${person.img}")`,
        }}
        title={person.name}
        aria-label={person.name}
      />
    );
  }
  return (
    <span
      className="avatar"
      style={{
        width: size, height: size,
        background: person.color,
        fontSize: fontSize || Math.round(size * 0.36),
        borderWidth,
      }}
      title={person.name}
    >
      {initials(person.name)}
    </span>
  );
};

// ---------- Countdown ----------
const useCountdown = (target) => {
  const [now, setNow] = useState(() => new Date());
  useEffect(() => {
    const id = setInterval(() => setNow(new Date()), 1000);
    return () => clearInterval(id);
  }, []);
  const diff = Math.max(0, target.getTime() - now.getTime());
  const totalSec = Math.floor(diff / 1000);
  const days = Math.floor(totalSec / 86400);
  const hours = Math.floor((totalSec % 86400) / 3600);
  const minutes = Math.floor((totalSec % 3600) / 60);
  const seconds = totalSec % 60;
  return { days, hours, minutes, seconds, isLive: diff === 0 };
};

const pad = (n, w = 2) => String(n).padStart(w, "0");

const Countdown = ({ target }) => {
  const { days, hours, minutes, seconds } = useCountdown(target);
  const cells = [
    { num: pad(days, 3), lbl: "Days",    cls: "orange" },
    { num: pad(hours),    lbl: "Hours",   cls: "amber" },
    { num: pad(minutes),  lbl: "Minutes", cls: "coral" },
    { num: pad(seconds),  lbl: "Seconds", cls: "teal" },
  ];
  return (
    <div className="countdown">
      {cells.map((c) => (
        <div key={c.lbl} className={`cell ${c.cls}`}>
          <div className="corner" />
          <div className="num">{c.num}</div>
          <div className="lbl">{c.lbl}</div>
        </div>
      ))}
    </div>
  );
};

// ---------- Login ----------
const LoginScreen = ({ onLogin }) => {
  const [picked, setPicked] = useState(null); // crew member object, or null
  const [phone, setPhone] = useState("");
  const [error, setError] = useState(null);
  const [shake, setShake] = useState(false);
  const inputRef = useRef(null);

  useEffect(() => {
    if (picked && inputRef.current) inputRef.current.focus();
  }, [picked]);

  const back = () => {
    setPicked(null);
    setPhone("");
    setError(null);
  };

  const onChange = (e) => {
    const digits = normalizePhone(e.target.value).slice(0, 11);
    setPhone(digits);
    if (error) setError(null);
  };

  const submit = (e) => {
    e.preventDefault();
    if (!picked) return;
    const digits = normalizePhone(phone);
    if (digits.length < 10) {
      setError("Enter all 10 digits.");
      setShake(true); setTimeout(() => setShake(false), 400);
      return;
    }
    const expected = normalizePhone(picked.phone).slice(-10);
    if (digits.slice(-10) === expected) {
      onLogin(picked.id);
    } else {
      setError(`That number doesn't match ${picked.name}'s.`);
      setShake(true); setTimeout(() => setShake(false), 400);
    }
  };

  return (
    <div className="login-page">
      <div className="login-header">
        <div className="row">
          <div>Private · Crew only</div>
          <div>Est. 2017 · Beaver Lake, ON</div>
          <div>Season X · 2026</div>
        </div>
      </div>

      <div className="poster-wrap" style={{ marginTop: 28 }}>
        <img className="poster" src="assets/chatona-poster.jpg" alt="Chatona Season X — Kearney, Ontario 2026" />
      </div>

      <div className="who-block">
        {!picked && (
          <React.Fragment>
            <h3>Who's there?</h3>
            <div className="sub">Tap your face to enter the cottage</div>

            <div className="avatar-grid">
              {CREW.map((c) => (
                <button
                  key={c.id}
                  className="pick"
                  onClick={() => setPicked(c)}
                >
                  <Avatar id={c.id} size={96} borderWidth={3} />
                  <span className="name">{c.name}</span>
                </button>
              ))}
            </div>
          </React.Fragment>
        )}

        {picked && (
          <div className="phone-confirm">
            <button className="back-link" onClick={back}>← Not me</button>

            <div className="picked-card">
              <Avatar id={picked.id} size={120} borderWidth={4} />
              <h3 style={{ marginTop: 18 }}>Hey {picked.name}.</h3>
              <div className="sub">Prove it — punch in your number</div>
            </div>

            <form
              className={`phone-form ${shake ? "shake" : ""}`}
              onSubmit={submit}
              noValidate
            >
              <div className="phone-input-row">
                <span className="phone-cc">+1</span>
                <input
                  ref={inputRef}
                  className="phone-input"
                  type="tel"
                  inputMode="numeric"
                  autoComplete="tel"
                  placeholder="(416) 555 — 1234"
                  value={formatPhoneDisplay(phone)}
                  onChange={onChange}
                  maxLength={16}
                  aria-label="Phone number"
                />
              </div>
              <button type="submit" className="btn btn-orange phone-submit">
                Enter the cottage →
              </button>
              <div className={`phone-error ${error ? "show" : ""}`}>
                {error || "\u00A0"}
              </div>
            </form>
          </div>
        )}
      </div>
    </div>
  );
};

// ---------- TopNav ----------
const TopNav = ({ userId, onLogout, onNav, active }) => {
  return (
    <div className="topnav">
      <div className="topnav-inner">
        <div className="brand">
          Chatona<span className="tick">S·X</span>
        </div>
        <nav className="nav-links">
          {[
            ["hero", "Cottage"],
            ["episodes", "Episodes"],
            ["photos", "Photos"],
            ["merch", "Merch"],
          ].map(([k, l]) => (
            <a
              key={k}
              href={`#${k}`}
              className={`nav-link ${active === k ? "active" : ""}`}
              onClick={() => onNav(k)}
            >{l}</a>
          ))}
        </nav>
        <button className="user-chip" onClick={onLogout}>
          <Avatar id={userId} size={32} borderWidth={2} />
          <span>{findCrew(userId)?.name}</span>
          <span className="logout">EXIT</span>
        </button>
      </div>
    </div>
  );
};

// ---------- Hero ----------
const Hero = () => {
  const ep1 = EPISODES_INITIAL[0].startDate;
  return (
    <section id="hero" className="hero">
      <div className="container">
        <div className="hero-band">
          <div>★ Chatona · Year Ten</div>
          <div>Episode 01 incoming ★</div>
        </div>

        <div className="hero-wordmark">
          <div className="poster-stars">★ ★ ★ &nbsp; A CHATONA PRODUCTION &nbsp; ★ ★ ★</div>
          <h1 className="word" style={{ marginTop: 12 }}>Season X</h1>
          <div className="meta-row">
            <span>Beaver Lake</span>
            <span className="pip" />
            <span>Kearney, ON</span>
            <span className="pip" />
            <span>MMXXVI</span>
          </div>
        </div>

        <div className="hero-inline-row" style={{
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
          fontFamily: "JetBrains Mono, monospace",
          fontSize: 12,
          letterSpacing: "0.25em",
          textTransform: "uppercase",
          marginTop: 32,
        }}>
          <div>Hot Tub Starts Heating → Jun 26, 2026</div>
          <div>No Refunds</div>
        </div>
        <Countdown target={ep1} />
        <div className="countdown-caption">
          <div>★ Episode 01 — Opening Weekend ★</div>
          <div>BBQ ready. Bunkee swept. Beer cold.</div>
        </div>
      </div>

      <div style={{ borderTop: "4px solid var(--ink)" }}>
        <div className="hero-horizon" />
      </div>
    </section>
  );
};

// ---------- Ticket / RSVP ----------
const Ticket = ({ inIt, onClick, label }) => (
  <button className={`ticket ${inIt ? "in" : ""}`} onClick={onClick}>
    <span className="stub">ADMIT<br/>ONE</span>
    <span className="main">
      {inIt ? "✓ You're in" : "I'm in →"}
    </span>
  </button>
);

// ---------- Episodes ----------
const Episodes = ({ episodes, userId, onToggle }) => {
  return (
    <section id="episodes" className="section">
      <div className="container">
        <div className="section-head">
          <h2>Episodes</h2>
          <div className="meta">Three weekends · Season X · 2026</div>
        </div>

        <div className="ep-grid">
          {episodes.map((ep, i) => {
            const going = ep.going;
            const visible = going.slice(0, 6);
            const extra = going.length - visible.length;
            const inIt = going.includes(userId);
            return (
              <div key={ep.id} className="ep-card" style={{ "--accent": ep.accent }}>
                <span className="num-tag">EP·{ep.num}</span>
                <h3 className="ep-title">{ep.title}</h3>
                <div className="ep-dates">{ep.dates}</div>

                <div className="ep-featuring">
                  <div className="ep-featuring-label">Featuring</div>
                  <div className="ep-meta-row">
                    <div className="who-stack">
                      {visible.map(id => <Avatar key={id} id={id} size={32} borderWidth={2} fontSize={11} />)}
                      {extra > 0 && (
                        <span
                          className="avatar more"
                          style={{ width: 32, height: 32, borderWidth: 2 }}
                        >
                          +{extra}
                        </span>
                      )}
                    </div>
                    <div className="who-count">{going.length} going</div>
                  </div>
                </div>

                <Ticket
                  inIt={inIt}
                  onClick={() => onToggle(ep.id)}
                />
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
};

// ---------- Photos ----------
const ROTS = [-1.2, 0.8, -0.6, 1.4, -1.8, 0.4, 1.0, -1.0, 0.6, 1.6, -0.4, 0.2];
const FILLS = ["fill-teal","fill-orange","fill-green","fill-amber","fill-coral","fill-cream"];

const relativeTime = (iso) => {
  const sec = Math.floor((Date.now() - new Date(iso)) / 1000);
  if (sec < 60) return "just now";
  if (sec < 3600) return `${Math.floor(sec/60)}m ago`;
  if (sec < 86400) return `${Math.floor(sec/3600)}h ago`;
  return `${Math.floor(sec/86400)}d ago`;
};

const getPhotoUrl = (path) =>
  `https://whfrqyaohtexitvyjzrw.supabase.co/storage/v1/object/public/photos/${path}`;

const Lightbox = ({ photos, initialIndex, onClose }) => {
  const [idx, setIdx] = useState(initialIndex);
  const touchX = useRef(null);

  const prev = (e) => { e && e.stopPropagation(); setIdx(i => (i - 1 + photos.length) % photos.length); };
  const next = (e) => { e && e.stopPropagation(); setIdx(i => (i + 1) % photos.length); };

  useEffect(() => {
    const onKey = (e) => {
      if (e.key === "Escape") onClose();
      if (e.key === "ArrowLeft") prev();
      if (e.key === "ArrowRight") next();
    };
    document.addEventListener("keydown", onKey);
    return () => document.removeEventListener("keydown", onKey);
  }, []);

  const photo = photos[idx];
  const crew = findCrew(photo.user_id);

  return (
    <div className="lightbox-overlay" onClick={onClose}>
      <div
        className="lightbox-card"
        onClick={e => e.stopPropagation()}
        onTouchStart={e => { touchX.current = e.touches[0].clientX; }}
        onTouchEnd={e => {
          if (touchX.current === null) return;
          const dx = e.changedTouches[0].clientX - touchX.current;
          if (dx > 50) prev();
          else if (dx < -50) next();
          touchX.current = null;
        }}
      >
        <button className="lightbox-close" onClick={onClose}>✕</button>
        {photos.length > 1 && <button className="lightbox-nav lightbox-prev" onClick={prev}>‹</button>}
        <img src={getPhotoUrl(photo.storage_path)} alt="" className="lightbox-img" />
        {photos.length > 1 && <button className="lightbox-nav lightbox-next" onClick={next}>›</button>}
        <div className="lightbox-meta">
          <span>@{crew?.name?.toLowerCase() || photo.user_id}</span>
          <span>{photos.length > 1 ? `${idx + 1} / ${photos.length}` : relativeTime(photo.created_at)}</span>
        </div>
      </div>
    </div>
  );
};

const Photos = ({ userId, onToast, onLightbox }) => {
  const [photos, setPhotos] = useState([]);
  const [uploading, setUploading] = useState(false);
  const inputRef = useRef(null);

  const loadPhotos = () => {
    db.from("photos").select("*").order("created_at", { ascending: false })
      .then(({ data }) => setPhotos(data || []));
  };

  useEffect(() => { loadPhotos(); }, []);

  const handleFileChange = async (e) => {
    const file = e.target.files?.[0];
    if (!file) return;
    e.target.value = "";
    setUploading(true);
    onToast("Uploading…");

    const ext = file.name.split(".").pop().toLowerCase();
    const path = `${userId}/${Date.now()}.${ext}`;

    const { error: upErr } = await db.storage.from("photos").upload(path, file, { upsert: false });
    if (upErr) { onToast("Upload failed — try again"); setUploading(false); return; }

    const { error: dbErr } = await db.from("photos").insert({ user_id: userId, storage_path: path });
    if (dbErr) { onToast("Couldn't save photo"); setUploading(false); return; }

    onToast("Photo pinned!");
    setUploading(false);
    loadPhotos();
  };

  return (
    <section id="photos" className="section">
      <div className="container">
        <div className="section-head">
          <h2>Crew Photos</h2>
          <div className="meta">Pin it to the wall · Anyone can upload</div>
        </div>

        <input
          ref={inputRef}
          type="file"
          accept="image/*"
          style={{ display: "none" }}
          onChange={handleFileChange}
        />

        <div className="photo-grid">
          {photos.map((p, i) => {
            const crew = findCrew(p.user_id);
            return (
              <div
                key={p.id}
                className={`photo-tile ${FILLS[i % FILLS.length]} ${i % 3 === 0 ? "tape" : ""}`}
                style={{ "--rot": `${ROTS[i % ROTS.length]}deg`, cursor: "pointer" }}
                onClick={() => onLightbox({ photos, index: i })}
              >
                <img
                  src={getPhotoUrl(p.storage_path)}
                  alt={`Photo by ${crew?.name || p.user_id}`}
                  style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }}
                />
                <div className="caption">
                  <span>{relativeTime(p.created_at)}</span>
                  <span>@{crew?.name?.toLowerCase() || p.user_id}</span>
                </div>
              </div>
            );
          })}

          <button
            className="photo-tile empty"
            onClick={() => !uploading && inputRef.current?.click()}
            style={{ flexDirection: "column", opacity: uploading ? 0.5 : 1 }}
          >
            <span className="plus">{uploading ? "…" : "+"}</span>
            <span className="lbl">{uploading ? "Uploading" : "Pin a photo"}</span>
          </button>
        </div>
      </div>
    </section>
  );
};

// ---------- Merch ----------
const Merch = ({ onShop }) => {
  return (
    <section id="merch" className="merch">
      <div className="container">
        <div className="merch-inner">
          <div>
            <div className="pre">— Limited Run · Crew Only —</div>
            <h2>Season X<br/>Merch Is Here</h2>
            <div className="item-list" style={{ maxWidth: 460, marginTop: 26 }}>
              <div className="row"><span>★ Wordmark Tee · Cream</span><span>$32</span></div>
              <div className="row"><span>★ Tour Hoodie · Black</span><span>$58</span></div>
              <div className="row"><span>★ Enamel Mug · Orange</span><span>$18</span></div>
              <div className="row"><span>★ Beach Towel · Teal</span><span>$40</span></div>
            </div>
          </div>
          <div className="merch-cta">
            <button className="btn btn-ghost" onClick={onShop}>Shop Now →</button>
            <div style={{
              fontFamily: "JetBrains Mono, monospace",
              fontSize: 11,
              letterSpacing: "0.25em",
              textTransform: "uppercase",
            }}>
              Ships before<br/>Episode 01
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

// ---------- Footer ----------
const Footer = ({ userId }) => (
  <footer className="footer">
    <div className="container">
      <div className="footer-inner">
        <div>★ Chatona · Season X · MMXXVI</div>
        <div className="stamp">
          <span className="dot" /> Logged in as {findCrew(userId)?.name}
        </div>
        <div>Beaver Lake · Kearney · ON · 45°34'25"N 79°12'52"W</div>
      </div>
    </div>
  </footer>
);

// ---------- App shell ----------
const App = () => {
  // persist user across reloads
  const [userId, setUserId] = useState(() => {
    try { return localStorage.getItem("chatona_user") || null; } catch { return null; }
  });
  const [episodes, setEpisodes] = useState(EPISODES_INITIAL);
  const [toast, setToast] = useState(null);
  const [active, setActive] = useState("hero");
  const [lightbox, setLightbox] = useState(null);

  // Load RSVPs from Supabase on mount
  useEffect(() => {
    db.from("rsvps").select("user_id, episode_id").eq("going", true)
      .then(({ data, error }) => {
        if (error) { console.error("RSVP load error:", error); return; }
        setEpisodes(prev => prev.map(ep => ({
          ...ep,
          going: (data || []).filter(r => r.episode_id === ep.id).map(r => r.user_id),
        })));
      });
  }, []);

  useEffect(() => {
    try {
      if (userId) localStorage.setItem("chatona_user", userId);
      else localStorage.removeItem("chatona_user");
    } catch {}
  }, [userId]);

  // Always scroll to top on login / logout transition so users land on the hero,
  // not wherever they had scrolled to on the previous screen.
  useEffect(() => {
    window.scrollTo({ top: 0, left: 0, behavior: "auto" });
  }, [userId]);

  // active nav-link tracking by scroll
  useEffect(() => {
    if (!userId) return;
    const ids = ["hero", "episodes", "photos", "merch"];
    const handler = () => {
      const y = window.scrollY + 200;
      let cur = ids[0];
      for (const id of ids) {
        const el = document.getElementById(id);
        if (el && el.offsetTop <= y) cur = id;
      }
      setActive(cur);
    };
    window.addEventListener("scroll", handler, { passive: true });
    handler();
    return () => window.removeEventListener("scroll", handler);
  }, [userId]);

  const showToast = (msg) => {
    setToast(msg);
    clearTimeout(showToast._t);
    showToast._t = setTimeout(() => setToast(null), 2000);
  };

  const handleToggleRSVP = async (epId) => {
    const ep = episodes.find(e => e.id === epId);
    const has = ep.going.includes(userId);
    const newGoing = !has;

    // Optimistic update
    setEpisodes(prev => prev.map(e => {
      if (e.id !== epId) return e;
      const next = has ? e.going.filter(x => x !== userId) : [...e.going, userId];
      return { ...e, going: next };
    }));
    showToast(has ? `Out for ${ep.title}` : `You're in for ${ep.title}!`);

    // Persist to Supabase
    const { error } = await db.from("rsvps").upsert(
      { user_id: userId, episode_id: epId, going: newGoing, updated_at: new Date().toISOString() },
      { onConflict: "user_id,episode_id" }
    );
    if (error) {
      console.error("RSVP save error:", error);
      // Revert on failure
      setEpisodes(prev => prev.map(e => {
        if (e.id !== epId) return e;
        const reverted = newGoing ? e.going.filter(x => x !== userId) : [...e.going, userId];
        return { ...e, going: reverted };
      }));
      showToast("Couldn't save — try again");
    }
  };

  const handleShop = () => showToast("Merch shop opening soon");

  const handleNav = (id) => {
    setActive(id);
    const el = document.getElementById(id);
    if (el) window.scrollTo({ top: el.offsetTop - 90, behavior: "smooth" });
  };

  if (!userId) {
    return <LoginScreen onLogin={setUserId} />;
  }

  return (
    <div className="app-shell">
      <TopNav
        userId={userId}
        onLogout={() => setUserId(null)}
        onNav={handleNav}
        active={active}
      />
      <Hero />
      <Episodes episodes={episodes} userId={userId} onToggle={handleToggleRSVP} />
      <Photos userId={userId} onToast={showToast} onLightbox={setLightbox} />
      {lightbox && <Lightbox photos={lightbox.photos} initialIndex={lightbox.index} onClose={() => setLightbox(null)} />}
      <Merch onShop={handleShop} />
      <Footer userId={userId} />
      {toast && <div className="toast">{toast}</div>}
    </div>
  );
};

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