/* ============================================================
   Parent Corner page
   ============================================================ */
const { useEffect: useParentsEffect, useState: useParentsState } = React;

const CIRCULARS = [
  { date: "May 08", c: "var(--pink)",      tag: "Urgent",   title: "Summer break dates revised — please read",
    body: "Updated school calendar attached. Last day of term is now Friday May 24. Reopens June 12." },
  { date: "May 05", c: "var(--mint)",      tag: "Event",    title: "Annual Day rehearsals begin next week",
    body: "Costumes and props list shared on the parent group. Please drop them off by May 12." },
  { date: "May 02", c: "var(--yellow)",    tag: "Holiday",  title: "Buddha Purnima — school closed Thursday",
    body: "School will remain closed on May 23 for Buddha Purnima. Regular classes resume Friday." },
  { date: "Apr 28", c: "var(--sky)",       tag: "Health",   title: "Seasonal flu — symptom watch reminder",
    body: "If your child has fever or runny nose, please keep them home for 24 hours symptom-free." },
  { date: "Apr 22", c: "var(--grape)",     tag: "PTM",      title: "Parent–Teacher meet on May 10",
    body: "Slot booking opens this Friday at 9 AM. 15-min slots available between 9 AM and 1 PM." },
  { date: "Apr 15", c: "var(--tangerine)", tag: "Reminder", title: "Updated drop-off / pick-up timings",
    body: "Drop-off window is 8:45–9:10 AM. Pickup is 12:20–12:40 PM. Please share with caregivers." },
];

const INFO = [
  { icon: "⏰", title: "School Timings", body: "Mon–Fri · 9:00 AM – 12:30 PM\nExtended daycare available until 6:00 PM",  c: "var(--pink)" },
  { icon: "🍱", title: "Lunch & Snacks",  body: "Fresh vegetarian meals from our in-house kitchen\nWeekly menu shared via WhatsApp group",  c: "var(--mint)" },
  { icon: "📅", title: "Academic Calendar", body: "Term 1: Jun – Sep · Term 2: Oct – Dec\nTerm 3: Jan – Mar · Summer: Apr – May",   c: "var(--yellow)" },
  { icon: "🚌", title: "Transport",        body: "Optional school bus available across most sectors\nRoute requests via the admin desk",       c: "var(--sky)" },
  { icon: "🩺", title: "Health & Safety",  body: "On-call pediatrician + nurse on premises\nEmergency contacts shared at enrolment",         c: "var(--grape)" },
  { icon: "🎒", title: "What to Pack",     body: "Spare clothes · water bottle · sun hat\nLabel everything! Lost items shelf at reception",   c: "var(--tangerine)" },
];

const EVENTS = [
  { m: "JUN", d: 12, c: "var(--pink)",      name: "First Day Welcome Picnic",  meta: "9:00 AM · All grades · Garden lawn", tag: "Open House" },
  { m: "JUL", d: 5,  c: "var(--mint)",      name: "Parent–Teacher Meet",        meta: "By appointment · 9 AM – 1 PM",       tag: "PTM" },
  { m: "AUG", d: 15, c: "var(--yellow)",    name: "Independence Day Parade",    meta: "Dress in white · 10 AM start",       tag: "Festival" },
  { m: "SEP", d: 22, c: "var(--sky)",       name: "Grandparents' Day",          meta: "Cookies + stories · 10 AM",          tag: "Family" },
  { m: "OCT", d: 28, c: "var(--grape)",     name: "Diwali Mela",                meta: "Lights, food stalls, dance · 5 PM",  tag: "Festival" },
  { m: "NOV", d: 14, c: "var(--tangerine)", name: "Children's Day Carnival",    meta: "Bouncy castles, paint, music · 10 AM", tag: "Carnival" },
];

const BLOG = [
  { cat: "Sleep", icon: "😴", c: "var(--sky)",      title: "Why bedtime tantrums spike at age 3 (and what to do)",
    body: "A pediatric psychologist explains what's developmentally normal — and a 4-step routine that helps." },
  { cat: "Food", icon: "🥕", c: "var(--tangerine)", title: "The picky-eater playbook: 5 sneaky veggie wins",
    body: "From cauliflower 'rice cream' to spinach-stuffed muffins — strategies that respect kid autonomy." },
  { cat: "Screen Time", icon: "📺", c: "var(--pink)", title: "Screens before 6: the surprising research",
    body: "AAP guidelines + what the recent meta-analysis actually says about preschoolers and tablets." },
  { cat: "Talking", icon: "🗣️", c: "var(--mint)",   title: "Three phrases that make tantrums shorter",
    body: "Validating without giving in — language tools borrowed from emotion-coaching research." },
  { cat: "Big Feelings", icon: "💛", c: "var(--grape)", title: "Building a 'feelings wheel' you can hang on the fridge",
    body: "A 20-minute craft that gives your kid the vocabulary to name what's happening inside." },
  { cat: "Playtime", icon: "🧩", c: "var(--yellow)", title: "Open-ended play: why fewer toys = more learning",
    body: "A research-backed argument for the dusty wooden blocks at the back of the cupboard." },
];

const TAG_C = {
  Urgent:"var(--pink)", Event:"var(--mint)", Holiday:"var(--yellow)",
  Health:"var(--sky)",  PTM:"var(--grape)",  Reminder:"var(--tangerine)",
};

const ParentsContent = () => {
  const [adminCirculars, setAdminCirculars] = useParentsState([]);

  useParentsEffect(() => {
    if (typeof XCELA_DB === "undefined") return;
    XCELA_DB.getAll("circulars").then(rows =>
      setAdminCirculars(rows)  // server returns newest first
    ).catch(() => {});
  }, []);

  /* Re-run reveal observer so admin-uploaded circulars animate in correctly */
  useParentsEffect(() => {
    if (adminCirculars.length === 0) return;
    const t = setTimeout(initReveal, 80);
    return () => clearTimeout(t);
  }, [adminCirculars]);

  const attachIcon = (filename) => {
    const name = (filename || "").toLowerCase();
    if (name.endsWith(".pdf"))  return "📄";
    if (name.endsWith(".doc") || name.endsWith(".docx")) return "📝";
    if (name.match(/\.(jpg|jpeg|png|gif|webp)$/)) return "🖼️";
    return "📎";
  };

  return (
  <>
    <PageHero
      eyebrow="Parent Corner"
      title="Stay |close|, even when you're at work."
      titleColor="var(--sky)"
      subtitle="Latest circulars, school info, upcoming events and parenting reads — everything you need to feel in-the-loop."
      bg="color-mix(in oklab, var(--sky) 50%, var(--paper))"
      icon="smile"
    />

    {/* Latest circulars */}
    <section style={{ paddingTop: 40 }}>
      <div className="wrap">
        <div className="section-head reveal">
          <span className="eyebrow"><span className="dot" /> Latest Circulars</span>
          <h2>Notices from <span className="stamp stamp-pink" style={{ color: "white" }}>school</span></h2>
          <p>Everything we've shared with parents this month. Newest at the top.</p>
        </div>

        <div className="circulars">
          {/* Admin-uploaded circulars appear first */}
          {adminCirculars.map((c, i) => (
            <article key={"a" + c.id} className="circular reveal" style={{ "--c": TAG_C[c.tag] || "var(--sky)", transitionDelay: `${i * 40}ms` }}>
              <div className="circ-date">
                <div className="m">{String(c.date).split(" ")[0]}</div>
                <div className="d">{String(c.date).split(" ")[1]}</div>
              </div>
              <div className="circ-body">
                <span className="circ-tag">{c.tag}</span>
                <h3>{c.title}</h3>
                <p>{c.body}</p>
                {c.attachment_url
                  ? <a className="circ-link" href={c.attachment_url} target="_blank" rel="noopener noreferrer">
                      {attachIcon(c.attachment_original)} Download attachment →
                    </a>
                  : null
                }
              </div>
            </article>
          ))}
          {/* Hardcoded sample circulars */}
          {CIRCULARS.map((c, i) => (
            <article key={i} className="circular reveal" style={{ "--c": c.c, transitionDelay: `${(adminCirculars.length + i) * 40}ms` }}>
              <div className="circ-date">
                <div className="m">{c.date.split(" ")[0]}</div>
                <div className="d">{c.date.split(" ")[1]}</div>
              </div>
              <div className="circ-body">
                <span className="circ-tag">{c.tag}</span>
                <h3>{c.title}</h3>
                <p>{c.body}</p>
                <a className="circ-link" href="contact.html">Contact school for full circular →</a>
              </div>
            </article>
          ))}
        </div>

        <div style={{ textAlign: "center", marginTop: 30 }}>
          <a href="parents.html" className="btn btn-yellow">View All Circulars →</a>
        </div>
      </div>
    </section>

    {/* School Info */}
    <section>
      <div className="wrap">
        <div className="section-head reveal">
          <span className="eyebrow"><span className="dot" /> Quick Info</span>
          <h2>Things you'll <span className="stamp stamp-mint">want to know</span></h2>
          <p>The most-asked-about details, all in one place.</p>
        </div>

        <div className="feature-grid">
          {INFO.map((f, i) => (
            <div key={i} className="feature reveal" style={{ transitionDelay: `${i * 60}ms` }}>
              <div className="fic" style={{ "--c": f.c }}>{f.icon}</div>
              <div>
                <h3>{f.title}</h3>
                <p style={{ whiteSpace: "pre-line" }}>{f.body}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>

    {/* Events calendar */}
    <section>
      <div className="wrap">
        <div className="section-head reveal">
          <span className="eyebrow"><span className="dot" /> What's Happening</span>
          <h2>This year's <span className="stamp stamp-mint">big events</span></h2>
          <p>Open invites to parents wherever possible. Bring grandparents too.</p>
        </div>

        {EVENTS.map((e, i) => (
          <div key={i} className="events reveal" style={{ "--c": e.c, transitionDelay: `${i * 40}ms` }}>
            <div className="ev-date">
              <div className="m">{e.m}</div>
              <div className="d">{e.d}</div>
            </div>
            <div>
              <div className="ev-name">{e.name}</div>
              <div className="ev-meta">{e.meta}</div>
            </div>
            <div className="ev-tag">{e.tag}</div>
          </div>
        ))}

        <div style={{ textAlign: "center", marginTop: 30 }}>
          <a href="https://calendar.google.com" target="_blank" rel="noopener noreferrer" className="btn btn-yellow">📅 Add to Calendar</a>
        </div>
      </div>
    </section>

    {/* Blog */}
    <section>
      <div className="wrap">
        <div className="section-head reveal">
          <span className="eyebrow"><span className="dot" /> Resources for Parents</span>
          <h2>Real talk from <span className="stamp stamp-pink" style={{ color: "white" }}>real experts</span></h2>
          <p>Pediatricians, psychologists and our most veteran teachers, on the questions you'd Google at 2am.</p>
        </div>

        <div className="blog-grid">
          {BLOG.map((b, i) => (
            <article key={i} className="blog reveal" style={{ transitionDelay: `${i * 40}ms` }}>
              <div className="blog-thumb" style={{ "--c": b.c }}>{b.icon}</div>
              <div className="blog-body">
                <span className="cat">{b.cat}</span>
                <h3>{b.title}</h3>
                <p>{b.body}</p>
                <a className="read" href="contact.html">Read more →</a>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>

    {/* Newsletter */}
    <section>
      <div className="wrap">
        <div className="newsletter reveal">
          <div className="cta-deco float" style={{ top: 20, left: 30, "--r": "-12deg" }}>
            <Sticker shape="balloon" size={80} fill="var(--yellow)" />
          </div>
          <div className="cta-deco bob" style={{ top: 30, right: 50 }}>
            <Sticker shape="spark" size={60} fill="var(--mint)" />
          </div>
          <div className="cta-deco wiggle" style={{ bottom: 20, right: "25%" }}>
            <Sticker shape="heart" size={50} fill="var(--paper)" />
          </div>

          <span className="eyebrow" style={{ background: "var(--paper)", color: "var(--ink)" }}>
            <span className="dot" /> Weekly newsletter
          </span>
          <h2 style={{ marginTop: 18 }}>The Tiny Times</h2>
          <p>One short, warm email every Friday. Activity of the week, parenting tip, one photo to make you smile.</p>
          <form className="newsletter-form" onSubmit={(e) => {
            e.preventDefault();
            const r = e.currentTarget.getBoundingClientRect();
            fireConfetti(r.left + r.width / 2, r.top);
            e.currentTarget.reset();
          }}>
            <input type="email" placeholder="you@example.com" required />
            <button className="btn btn-yellow" type="submit">Subscribe →</button>
          </form>
        </div>
      </div>
    </section>
  </>
  );
};

renderPage("parents.html", ParentsContent);