/* global React, ReactDOM, useTweaks, TweaksPanel, TweakSection, TweakSelect, TweakToggle, TweakText */
const { useState, useEffect } = React;

// ---------------- Bella's favorite friends ----------------
// Uses cropped regions of Bella's uploaded photos as portraits, so each card
// shows the actual character she loves. (User-supplied imagery.)
// Each friend gets a tinted "character chip" portrait — initial + decorative emoji,
// no shared-image cropping (the source image is a packed group shot so per-character
// crops don't reliably line up).
// Bella's top 5 — using her uploaded images as portraits.
const FRIENDS = [
  { id: "cinna",  name: "Cinnamoroll",   rank: 1, role: "main bestie",   bio: "the floppiest little flying puppy. literally my whole heart ☁️♡", chip: "linear-gradient(135deg, #e0f1ff 0%, #b6dcff 100%)", emoji: "☁️", img: "images/cinnamoroll.png" },
  { id: "pompom", name: "Pompompurin",   rank: 2, role: "pudding king",  bio: "the beret. the booty. lives for snacks just like me 🍮",          chip: "linear-gradient(135deg, #fff3b0 0%, #ffe18a 100%)", emoji: "🍮", img: "images/pompompurin.webp" },
  { id: "cogi",   name: "Cogimyun",      rank: 3, role: "cherry cloud",  bio: "tiny flour fairy with a cherry on top. precious precious precious", chip: "linear-gradient(135deg, #ffe0e8 0%, #ffc4d0 100%)", emoji: "🍒", img: "images/cogimyun.jpeg" },
  { id: "hana",   name: "Hanamaruobake", rank: 4, role: "study buddy",   bio: "ghost holding a giant red pencil. my entire homework aesthetic ✏️",  chip: "linear-gradient(135deg, #f4f4f4 0%, #ffd1d1 100%)", emoji: "✏️", img: "images/hanamaruobake-2.jpeg" },
  { id: "gude",   name: "Gudetama",      rank: 5, role: "mood forever",  bio: "the lazy egg himself. on bad days i feel deeply spiritually aligned", chip: "linear-gradient(135deg, #fff7d6 0%, #ffd97a 100%)", emoji: "🍳", img: "images/gudetama.webp" },
];

// ---------------- Nav ----------------
function Nav({ name }) {
  return (
    <nav className="nav">
      <div className="nav-inner">
        <a href="#top" className="brand">
          <span className="brand-mark">✿</span>
          {name}<span className="heart">'s</span>&nbsp;World
        </a>
        <ul className="nav-links">
          <li><a href="#about">about me</a></li>
          <li><a href="#friends">my faves</a></li>
          <li><a href="#diary">diary</a></li>
          <li><a href="#wall">photos</a></li>
          <li><a href="#guest">guestbook</a></li>
        </ul>
        <a href="#guest" className="nav-cta">sign my page <span>♡</span></a>
      </div>
    </nav>
  );
}

// ---------------- Marquee ----------------
function Marquee() {
  const items = [
    "♡ welcome to my world ♡",
    "✦ best viewed with snacks ✦",
    "★ kawaii forever ★",
    "♡ sign my guestbook!! ♡",
    "✿ thx 4 visiting ✿",
    "✦ sparkle sparkle ✦",
  ];
  const all = [...items, ...items, ...items];
  return (
    <div className="marquee">
      <div className="marquee-track">
        {all.map((t, i) => <span key={i}>{t}</span>)}
      </div>
    </div>
  );
}

// ---------------- Hero ----------------
function Hero({ name, tagline }) {
  return (
    <section className="hero" id="top">
      <div className="container">
        <div className="hero-eyebrow">
          <span className="dot"></span>
          ♡ a personal corner of the internet ♡
        </div>
        <h1>
          welcome to <span className="name">{name}'s</span><br />
          world <span className="swirl">✿</span>
        </h1>
        <p className="lede">{tagline}</p>
        <div className="hero-actions">
          <a href="#friends" className="btn btn-primary">see my favorite characters →</a>
          <a href="#diary" className="btn btn-ghost">read my diary</a>
        </div>

        <div className="hero-banner">
          <div className="tape t1"></div>
          <div className="tape t2"></div>
          <span className="sparkle s1">✦</span>
          <span className="sparkle s2">♡</span>
          <span className="sparkle s3">✿</span>
          <span className="sparkle s4">✦</span>
          <span className="sparkle s5">★</span>
          <span className="sparkle s6">♡</span>
          <img src="images/banner-thankchu.webp" alt="Bella's favorite cute character collage" />
        </div>
      </div>
    </section>
  );
}

// ---------------- About Bella ----------------
function About({ name, age, location, mood, useUploadedSelfie }) {
  return (
    <section className="section" id="about">
      <div className="container">
        <div className="section-head">
          <span className="section-eyebrow">hi hi hi !!</span>
          <h2>a little about me <span className="heart">♡</span></h2>
          <p className="section-sub">your friendly neighborhood sanrio enjoyer.</p>
        </div>
        <div className="about-grid">
          <div className="about-photo">
            <div className="polaroid">
              <span className="heart-sticker">♡</span>
              {useUploadedSelfie ? (
                <image-slot id="bella-selfie" shape="rect" placeholder="drop a selfie here ♡"></image-slot>
              ) : (
                <img src="images/hanamaruobake.jpeg" alt="bella's profile pic" style={{ width: 280, height: 280, objectFit: "cover", display: "block", borderRadius: 4 }} />
              )}
              <div className="caption">that's me ♡</div>
            </div>
          </div>
          <div className="about-card">
            <h3>hi, i'm {name}!! ♡</h3>
            <p>
              i'm 8 years old and i live in west chester, pa! i go to <b>episcopal academy</b>
              and i'm in <b>second grade</b>. my teachers are <b>mrs. wylam</b> and <b>mr. l</b>
              and they are the BEST.
            </p>
            <p>
              my best friends in the whole world are <b>lou</b> and <b>clara</b> 💖 — we read
              books together, trade stickers, and i make them sign my guestbook all the time.
              welcome to my little corner of the internet, make yourself comfy!! ✿
            </p>
            <div className="tag-row">
              <span className="tag">2nd grade</span>
              <span className="tag b">strawberry milk</span>
              <span className="tag y">stickers</span>
              <span className="tag g">reading</span>
              <span className="tag v">cinnamoroll!!</span>
              <span className="tag p">my besties</span>
              <span className="tag">plushies</span>
            </div>
            <div className="about-stats">
              <div className="stat"><div className="label">age</div><div className="val">{age}</div></div>
              <div className="stat"><div className="label">grade</div><div className="val">2nd</div></div>
              <div className="stat"><div className="label">school</div><div className="val">EA</div></div>
              <div className="stat"><div className="label">teachers</div><div className="val" style={{ fontSize: 16 }}>Mrs. Wylam<br/>+ Mr. L</div></div>
              <div className="stat"><div className="label">based in</div><div className="val" style={{ fontSize: 16 }}>{location}</div></div>
              <div className="stat"><div className="label">mood</div><div className="val" style={{ fontSize: 18 }}>{mood}</div></div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------------- Friends section ----------------
function FriendsSection() {
  return (
    <section className="section" id="friends">
      <div className="container">
        <div className="section-head">
          <span className="section-eyebrow">my top 5 ♡</span>
          <h2>my favorite characters <span className="heart">♡</span></h2>
          <p className="section-sub">ranked, but the order changes every week.</p>
        </div>
        <div className="friends-grid">
          {FRIENDS.map(f => (
            <div className="friend-card" key={f.id} style={{ "--bg-tint": f.tint }}>
              <span className="rank">#{f.rank}</span>
              <span className="heart-mini">♡</span>
              <div className="friend-portrait" style={{ background: f.chip }}>
                <span className="deco-sparkle">✦</span>
                <img src={f.img} alt={f.name} className="portrait-img" />
                <span className="deco-emoji">{f.emoji}</span>
              </div>
              <h3>{f.name}</h3>
              <div className="role">{f.role}</div>
              <p>{f.bio}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------------- Diary ----------------
function Diary() {
  return (
    <section className="section" id="diary" style={{ paddingTop: 40 }}>
      <div className="container">
        <div className="section-head">
          <span className="section-eyebrow">today's entry</span>
          <h2>bella's diary</h2>
          <p className="section-sub">a tiny update, every now & then.</p>
        </div>
        <div className="diary-wrap">
          <div className="diary-card">
            <div className="diary-tape"></div>
            <div className="diary-date">★ sunday, may 10th ★</div>
            <h3>i finally got the strawberry plushie!!!</h3>
            <p>
              ok so today was kind of perfect?? i woke up early (rare), made strawberry pancakes,
              and then me + sof + jules walked to the new sanrio cafe downtown. the matcha latte
              had a little kitty foam print on top — i nearly cried. i didn't even drink it for
              like ten minutes i just stared at it.
            </p>
            <p>
              after, i FINALLY found the limited edition strawberry plush i've been hunting for
              months 🍓 i'm putting it right next to my reading nook. she fits perfectly. life
              is good. xoxo
            </p>
            <div>
              <span className="diary-mood">today's mood · giddy 🍓</span>
              <span className="diary-mood">soundtrack · soft pop ☁</span>
            </div>
          </div>
          <div className="diary-photo">
            <div className="polaroid">
              <img src="images/group-cream.png" alt="bella's character collage" style={{ width: 320, height: 320, objectFit: "cover", display: "block", borderRadius: 4 }} />
              <div className="caption">my whole crew ♡</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------------- Faves grid ----------------
const FAVES = [
  { icon: "🍓", lbl: "favorite snack",    name: "strawberry milk",       desc: "ideally in a bottle with a tiny straw. obsessed.",       bg: "#ffd1dc" },
  { icon: "🎶", lbl: "current song",      name: "soft pop on repeat",    desc: "the kind that makes walking feel like a music video.", bg: "#d9c8ff" },
  { icon: "📚", lbl: "now reading",       name: "magical girl manga",    desc: "i'm 6 volumes deep & emotionally invested.",            bg: "#cfe8ff" },
  { icon: "🎨", lbl: "favorite color",    name: "bubblegum pink",        desc: "specifically the pink on a strawberry milk carton.",   bg: "#ffb6d5" },
  { icon: "🎀", lbl: "current obsession", name: "deco-ing my phone case", desc: "rhinestones every-where. no surface is safe.",         bg: "#fff3b0" },
  { icon: "🍰", lbl: "best dessert",      name: "strawberry shortcake",  desc: "if it's pink and has whipped cream i'm in.",          bg: "#ffd6b8" },
  { icon: "🌙", lbl: "dream destination", name: "tokyo (specifically harajuku)", desc: "saving every penny. one day, takeshita street.", bg: "#c4ecd5" },
  { icon: "✨", lbl: "lucky charm",       name: "tiny star sticker",     desc: "i put one on every notebook i own.",                   bg: "#ffe9a8" },
];
function Faves() {
  return (
    <section className="section" id="faves">
      <div className="container">
        <div className="section-head">
          <span className="section-eyebrow">a few of my favorite things</span>
          <h2>bella's faves</h2>
          <p className="section-sub">updated whenever i discover something new.</p>
        </div>
        <div className="faves-grid">
          {FAVES.map((f, i) => (
            <div className="fave-card" key={i}>
              <div className="icon" style={{ background: f.bg }}>{f.icon}</div>
              <div className="lbl">{f.lbl}</div>
              <h4>{f.name}</h4>
              <p>{f.desc}</p>
              <span className="deco">{f.icon}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------------- Photo wall ----------------
function PhotoWall() {
  return (
    <section className="section" id="wall">
      <div className="container">
        <div className="section-head">
          <span className="section-eyebrow">collection corner</span>
          <h2>my photo wall <span className="heart">♡</span></h2>
          <p className="section-sub">snapshots from my plush shelf, my desk, and the sanrio store haul of dreams.</p>
        </div>
        <div className="photo-wall">
          <div className="wall-photo p1"><img src="images/group-rainbow.webp" alt="rainbow group" /><div className="caption">in the clerb ✨</div></div>
          <div className="wall-photo p2"><img src="images/banner-thankchu.webp" alt="thank chu collage" /><div className="caption">thank chu ♡</div></div>
          <div className="wall-photo p3"><img src="images/group-cream.png" alt="cream group" /><div className="caption">the whole gang!!</div></div>
          <div className="wall-photo p4"><img src="images/hanamaruobake.jpeg" alt="cute mascot" /><div className="caption">study buddy 📓</div></div>
          <div className="wall-photo p5"><img src="images/group-rainbow.webp" alt="rainbow group" style={{ objectPosition: "left center" }} /><div className="caption">kuromi era</div></div>
          <div className="wall-photo p6"><img src="images/banner-thankchu.webp" alt="thank chu" style={{ objectPosition: "right center" }} /><div className="caption">heart attack ♡</div></div>

          <span className="wall-sticker heart">♡</span>
          <span className="wall-sticker star">★</span>
          <span className="wall-sticker bow">✿</span>
        </div>
      </div>
    </section>
  );
}

// ---------------- Guestbook ----------------
const TONES = ["", "alt", "alt2", "alt3"];
const RT_WS_URL = "wss://bellas-guestbook-rt.quake0day.workers.dev/ws";
const TYPING_TTL = 3500;        // how long a typing indicator stays visible
const TYPING_THROTTLE = 1500;   // min ms between outbound typing pings

function timeAgo(ts) {
  const s = Math.max(1, Math.floor((Date.now() - ts) / 1000));
  if (s < 60) return "just now";
  const m = Math.floor(s / 60);
  if (m < 60) return `${m} min${m === 1 ? "" : "s"} ago`;
  const h = Math.floor(m / 60);
  if (h < 24) return `${h} hr${h === 1 ? "" : "s"} ago`;
  const d = Math.floor(h / 24);
  if (d === 1) return "yesterday";
  if (d < 30) return `${d} days ago`;
  return new Date(ts).toLocaleDateString();
}

function formatTypers(names) {
  if (names.length === 0) return "";
  if (names.length === 1) return `${names[0]} is typing`;
  if (names.length === 2) return `${names[0]} & ${names[1]} are typing`;
  return `${names[0]}, ${names[1]} & ${names.length - 2} more are typing`;
}

function Guestbook() {
  const [name, setName] = useState("");
  const [msg, setMsg] = useState("");
  const [list, setList] = useState([]);
  const [loading, setLoading] = useState(true);
  const [posting, setPosting] = useState(false);
  const [error, setError] = useState("");
  const [connected, setConnected] = useState(false);
  const [typers, setTypers] = useState([]);   // [{who, expiresAt}]

  const wsRef = React.useRef(null);
  const lastTypingSentRef = React.useRef(0);
  const stopTypingTimerRef = React.useRef(null);
  const tickRef = React.useRef(0);
  const [, forceTick] = useState(0);

  // Initial load
  useEffect(() => {
    fetch("/api/guestbook")
      .then(r => r.json())
      .then(d => setList(d.messages || []))
      .catch(() => setError("couldn't load messages :("))
      .finally(() => setLoading(false));
  }, []);

  // WebSocket lifecycle (with reconnect + visibility pause)
  useEffect(() => {
    let cancelled = false;
    let retryDelay = 1000;

    const connect = () => {
      if (cancelled) return;
      const ws = new WebSocket(RT_WS_URL);
      wsRef.current = ws;

      ws.addEventListener("open", () => {
        retryDelay = 1000;
        setConnected(true);
      });

      ws.addEventListener("message", (e) => {
        let data;
        try { data = JSON.parse(e.data); } catch { return; }

        if (data.type === "new" && data.message) {
          setList(prev => {
            if (prev.some(m => m.id === data.message.id)) return prev;
            return [data.message, ...prev];
          });
          // clear that author's typing indicator if any
          setTypers(prev => prev.filter(t => t.who !== data.message.who));
        } else if (data.type === "typing" && data.who) {
          const expiresAt = Date.now() + TYPING_TTL;
          setTypers(prev => {
            const others = prev.filter(t => t.who !== data.who);
            return [...others, { who: data.who, expiresAt }];
          });
        } else if (data.type === "stop-typing" && data.who) {
          setTypers(prev => prev.filter(t => t.who !== data.who));
        }
      });

      ws.addEventListener("close", () => {
        setConnected(false);
        if (cancelled) return;
        setTimeout(connect, retryDelay);
        retryDelay = Math.min(retryDelay * 2, 15000);
      });

      ws.addEventListener("error", () => {
        try { ws.close(); } catch {}
      });
    };

    connect();
    return () => {
      cancelled = true;
      if (wsRef.current) try { wsRef.current.close(); } catch {}
    };
  }, []);

  // Tick to expire stale typers (keeps the indicator self-cleaning)
  useEffect(() => {
    if (typers.length === 0) return;
    const id = setInterval(() => {
      setTypers(prev => prev.filter(t => t.expiresAt > Date.now()));
      tickRef.current++;
      forceTick(tickRef.current);
    }, 700);
    return () => clearInterval(id);
  }, [typers.length]);

  const sendTyping = (currentName) => {
    const ws = wsRef.current;
    if (!ws || ws.readyState !== 1) return;
    const who = (currentName || "someone").trim().slice(0, 40) || "someone";
    const now = Date.now();
    if (now - lastTypingSentRef.current < TYPING_THROTTLE) return;
    lastTypingSentRef.current = now;
    try { ws.send(JSON.stringify({ type: "typing", who })); } catch {}

    // schedule a stop-typing ping after a short pause
    if (stopTypingTimerRef.current) clearTimeout(stopTypingTimerRef.current);
    stopTypingTimerRef.current = setTimeout(() => {
      try { ws.send(JSON.stringify({ type: "stop-typing", who })); } catch {}
    }, TYPING_TTL);
  };

  const handleMsgChange = (e) => {
    setMsg(e.target.value);
    if (e.target.value.trim()) sendTyping(name);
  };

  const submit = async (e) => {
    e.preventDefault();
    if (!name.trim() || !msg.trim() || posting) return;
    setPosting(true);
    setError("");
    try {
      const res = await fetch("/api/guestbook", {
        method: "POST",
        headers: { "content-type": "application/json" },
        body: JSON.stringify({ who: name.trim(), msg: msg.trim() }),
      });
      const data = await res.json();
      if (!res.ok) throw new Error(data.error || "post failed");
      // Optimistic add (WS broadcast will be deduped by id)
      setList(prev => prev.some(m => m.id === data.message.id) ? prev : [data.message, ...prev]);
      setMsg("");
      // proactively tell others I'm done typing
      const ws = wsRef.current;
      if (ws && ws.readyState === 1) {
        try { ws.send(JSON.stringify({ type: "stop-typing", who: name.trim() })); } catch {}
      }
    } catch (err) {
      setError(err.message || "couldn't post :(");
    } finally {
      setPosting(false);
    }
  };

  const visibleTypers = typers
    .filter(t => t.expiresAt > Date.now() && t.who !== name.trim())
    .map(t => t.who);

  return (
    <section className="section" id="guest">
      <div className="container">
        <div className="section-head">
          <span className="section-eyebrow">leave me a note</span>
          <h2>guestbook <span className="heart">♡</span></h2>
          <p className="section-sub">sign before u go!! tell me your favorite character ✿</p>
        </div>
        <div className="guestbook">
          <form className="gb-form" onSubmit={submit}>
            <h3>
              say hi to bella ✦
              <span className={`gb-dot ${connected ? "live" : "off"}`} title={connected ? "live" : "reconnecting…"} />
            </h3>
            <p>your message will appear right over there →</p>
            <input
              className="field"
              placeholder="your name (or a cute alias)"
              value={name}
              maxLength={40}
              onChange={e => setName(e.target.value)}
            />
            <textarea
              className="field"
              placeholder="leave a sweet note..."
              value={msg}
              maxLength={500}
              onChange={handleMsgChange}
            />
            <button type="submit" disabled={posting}>{posting ? "posting…" : "post message →"}</button>
            {error && <p style={{ color: "#d6336c", marginTop: 8 }}>{error}</p>}
          </form>
          <div className="gb-list">
            <div className={`gb-typing ${visibleTypers.length ? "show" : ""}`}>
              {visibleTypers.length > 0 && (
                <span>
                  {formatTypers(visibleTypers)}
                  <span className="gb-dots"><span>.</span><span>.</span><span>.</span></span>
                </span>
              )}
            </div>
            {loading && <p>loading sweet notes…</p>}
            {!loading && list.length === 0 && <p>be the first to sign!! ♡</p>}
            {list.map((m, i) => (
              <div key={m.id ?? i} className={`gb-msg ${TONES[i % TONES.length]}`}>
                <div className="who"><span>{m.who} ♡</span><span className="when">{timeAgo(m.created_at)}</span></div>
                <p>{m.msg}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------------- Newsletter ----------------
function Mailbox() {
  const [email, setEmail] = useState("");
  const [sent, setSent] = useState(false);
  const submit = (e) => {
    e.preventDefault();
    if (!email.includes("@")) return;
    setSent(true);
    setEmail("");
    setTimeout(() => setSent(false), 4000);
  };
  return (
    <section className="section" id="mail">
      <div className="container">
        <div className="mailbox">
          <div className="mailbox-inner">
            <h3>get bella mail ♡</h3>
            <p>occasionally i send a tiny letter with new faves, doodles, & sanrio finds.</p>
            <form className="mail-form" onSubmit={submit}>
              <input
                type="email"
                placeholder="your@email.cute"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
              />
              <button type="submit">subscribe →</button>
            </form>
            <div className={`mail-confirm ${sent ? "show" : ""}`}>
              ✿ yay!! a tiny letter is on its way ♡
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------------- Footer ----------------
function Footer({ name }) {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          <div className="footer-brand">
            <div className="brand">
              <span className="brand-mark">✿</span>
              {name}'s World
            </div>
            <p>a tiny corner of the internet, made with too much pink & not enough sleep.</p>
            <div className="socials">
              <a href="#" aria-label="instagram">📷</a>
              <a href="#" aria-label="tiktok">🎵</a>
              <a href="#" aria-label="pinterest">📌</a>
              <a href="#" aria-label="email">✉</a>
            </div>
          </div>
          <div>
            <h5>visit</h5>
            <ul>
              <li><a href="#about">about me</a></li>
              <li><a href="#friends">my faves</a></li>
              <li><a href="#diary">diary</a></li>
              <li><a href="#wall">photo wall</a></li>
            </ul>
          </div>
          <div>
            <h5>♡</h5>
            <ul>
              <li><a href="#faves">favorite things</a></li>
              <li><a href="#guest">guestbook</a></li>
              <li><a href="#mail">bella mail</a></li>
              <li><a href="#">link to my page</a></li>
            </ul>
          </div>
          <div>
            <h5>now playing</h5>
            <ul>
              <li>🎵 sparkle pop mix</li>
              <li>🍓 strawberry milk</li>
              <li>📚 vol 6 of my manga</li>
              <li>☁️ daydreaming</li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 {name}'s World · made with ♡ at 2am</span>
          <span className="visit-counter">visitors: 042,069</span>
        </div>
      </div>
    </footer>
  );
}

// ---------------- Tweaks ----------------
const PALETTES = {
  bubblegum: { bg: "#ffeaf4", pink: "#ffb6d5", pinkDeep: "#ff6fa8", pinkHot: "#ff3d8c", sky: "#b6e0ff", skyDeep: "#6fb3e8", ink: "#4a2a5b" },
  blueberry: { bg: "#e6f0ff", pink: "#cfd6ff", pinkDeep: "#7a8fff", pinkHot: "#4a6bff", sky: "#b6e0ff", skyDeep: "#6fb3e8", ink: "#2a3a6b" },
  matcha:    { bg: "#eaf7e8", pink: "#c9e8b8", pinkDeep: "#7fb86b", pinkHot: "#4f9836", sky: "#cfe8ff", skyDeep: "#6fb3e8", ink: "#2a4a2b" },
  butter:    { bg: "#fff8e6", pink: "#ffe9a8", pinkDeep: "#e6b94a", pinkHot: "#c89320", sky: "#ffd1dc", skyDeep: "#ff7fa6", ink: "#5a3a1b" },
  lilac:     { bg: "#f0eaff", pink: "#d9c8ff", pinkDeep: "#9d7ee0", pinkHot: "#7a5ad0", sky: "#ffd1f0", skyDeep: "#e87fc6", ink: "#3a2a5b" },
};
function applyPalette(key) {
  const p = PALETTES[key] || PALETTES.bubblegum;
  const r = document.documentElement.style;
  r.setProperty("--bg", p.bg);
  r.setProperty("--pink", p.pink);
  r.setProperty("--pink-deep", p.pinkDeep);
  r.setProperty("--pink-hot", p.pinkHot);
  r.setProperty("--sky", p.sky);
  r.setProperty("--sky-deep", p.skyDeep);
  r.setProperty("--ink", p.ink);
}

function App() {
  const [t, setTweak] = useTweaks({
    name: "Bella",
    age: "8",
    location: "West Chester, PA",
    mood: "happy ♡",
    tagline: "i'm bella, i'm 8, i go to episcopal academy, and i LOVE sanrio!! this is my little corner of the internet — i'm so glad you're here ♡",
    palette: "bubblegum",
    motion: true,
    useUploadedSelfie: false,
  });

  useEffect(() => { applyPalette(t.palette); }, [t.palette]);
  useEffect(() => { document.body.classList.toggle("no-motion", !t.motion); }, [t.motion]);

  return (
    <>
      <Marquee />
      <div className="sky" aria-hidden="true">
        <div className="cloud c1"></div>
        <div className="cloud c2"></div>
        <div className="cloud c3"></div>
      </div>

      <Nav name={t.name} />
      <main>
        <Hero name={t.name} tagline={t.tagline} />
        <About name={t.name} age={t.age} location={t.location} mood={t.mood} useUploadedSelfie={t.useUploadedSelfie} />
        <FriendsSection />
        <Diary />
        <Faves />
        <PhotoWall />
        <Guestbook />
        <Mailbox />
      </main>
      <Footer name={t.name} />

      <TweaksPanel title="Tweaks">
        <TweakSection title="About">
          <TweakText label="Name"     value={t.name}     onChange={(v) => setTweak("name", v)} />
          <TweakText label="Age"      value={t.age}      onChange={(v) => setTweak("age", v)} />
          <TweakText label="Location" value={t.location} onChange={(v) => setTweak("location", v)} />
          <TweakText label="Mood"     value={t.mood}     onChange={(v) => setTweak("mood", v)} />
        </TweakSection>
        <TweakSection title="Vibe">
          <TweakSelect
            label="Palette"
            value={t.palette}
            onChange={(v) => setTweak("palette", v)}
            options={[
              { value: "bubblegum", label: "Bubblegum 🍓" },
              { value: "blueberry", label: "Blueberry 💙" },
              { value: "matcha",    label: "Matcha 🍵" },
              { value: "butter",    label: "Butter 🧈" },
              { value: "lilac",     label: "Lilac 💜" },
            ]}
          />
          <TweakToggle label="Motion" value={t.motion} onChange={(v) => setTweak("motion", v)} />
          <TweakToggle label="Custom selfie" value={t.useUploadedSelfie} onChange={(v) => setTweak("useUploadedSelfie", v)} />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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