// EventsPage — "Upcoming Events". A featured event up top, a what's-on grid,
// and ongoing programs that can be booked any time.

function EventsPage() {
  const featured = {
    type: "Webinar",
    title: "Kids, Teens, and Digital Tech: Essentials for Clinicians",
    dateLabel: "Monday 6 July 2026",
    where: "Online · 4:30–7:30pm AEST",
    desc: "A practical webinar for paediatric clinicians on supporting healthy digital technology use with children and teens (ages 2 to 18). Get the current evidence on tech's developmental impact, strategies that go beyond screen-time limits, and ready-to-use intervention tools. Presented by Caitlyn Cowie and Danni Gheorghe. Includes a 2.5 hour live session, an interactive workbook, case study application, a 30 minute Q&A, and 45 day access to the recording.",
    link: "https://www.eventbrite.com.au/e/1989626822385?aff=oddtdtcreator",
  };

  const events = [
    {
      tbc: true,
      type: "Group program", accent: "var(--kl-leaf-dark)",
      title: "Regulate with Macy",
      where: "Mitcham Clinic · Melbourne VIC",
      desc: "A therapy dog group that supports regulation, connection and confidence, run alongside Macy, our Kid Link therapy dog. Dates are being finalised now. Register your interest and we'll be in touch as soon as they're confirmed.",
    },
  ];

  return (
    <>
      {/* Hero */}
      <Hero
        eyebrow="Upcoming Events"
        title={<>Learn with us: <span style={{ color: "var(--kl-sun)" }}>webinars</span>, <span style={{ color: "var(--kl-sun)" }}>workshops</span> and <span style={{ color: "var(--kl-sun)" }}>talks</span></>}
        body="Professional learning and family sessions across the year, for parents, educators, clinicians and partner organisations."
        image="../../assets/images/events-hero-generated.jpg"
        imageFocus="55% 45%"
        primaryLabel="Enquire Now"
      />

      {/* Featured event */}
      <Section scheme="scheme-2">
        <div style={{ background: "var(--kl-plum)", color: "#fff", borderRadius: "var(--kl-radius-card-lg)", padding: "clamp(28px, 5vw, 56px)", boxShadow: "var(--kl-card-shadow)" }}>
          <img
            src="../../assets/images/events-digital-tech.jpg"
            alt=""
            style={{ width: "100%", maxWidth: 480, height: "auto", display: "block", margin: "0 auto 28px", borderRadius: "var(--kl-radius-card)" }}
          />
          <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 24, flexWrap: "wrap" }}>
            <span style={{ fontWeight: 800, fontSize: "0.72rem", letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--kl-sun)" }}>Featured event</span>
            <span style={{ padding: "4px 12px", borderRadius: 999, fontSize: 12, fontWeight: 600, background: "rgba(255,255,255,0.18)", color: "#fff" }}>{featured.type}</span>
          </div>
          <div className="kl-split" style={{ gap: 48, alignItems: "center" }}>
            <div>
              <h2 style={{ fontSize: "var(--kl-text-h2)", lineHeight: 1.12, marginBottom: 20, color: "#fff" }}>{featured.title}</h2>
              <p style={{ display: "flex", alignItems: "center", gap: 10, fontWeight: 600, marginBottom: 8 }}>
                <MIcon name="event" size={20} color="var(--kl-sun)" /> {featured.dateLabel}
              </p>
              <p style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 20, color: "rgba(255,255,255,0.85)" }}>
                <MIcon name="schedule" size={20} color="var(--kl-sun)" /> {featured.where}
              </p>
              <p style={{ fontSize: "var(--kl-text-medium)", lineHeight: 1.6, color: "rgba(255,255,255,0.92)" }}>{featured.desc}</p>
            </div>
            <div style={{ display: "flex", flexDirection: "column", alignItems: "flex-start", gap: 14 }}>
              <a
                href={featured.link}
                target="_blank"
                rel="noopener noreferrer"
                style={{ display: "inline-flex", alignItems: "center", gap: 8, background: "var(--kl-sun)", color: "var(--kl-ink)", fontWeight: 700, padding: "15px 26px", borderRadius: "var(--kl-radius-button)", textDecoration: "none" }}
              >
                Register on Eventbrite <ChevronRight />
              </a>
              <p style={{ fontSize: "var(--kl-text-small)", color: "rgba(255,255,255,0.8)" }}>45 day recording included.</p>
            </div>
          </div>
        </div>
      </Section>

      {/* What's on grid */}
      <Section scheme="scheme-1">
        <SectionHeader
          eyebrow="What's on"
          title="More upcoming events"
          lede="In-person and online events across Melbourne and Australia-wide. Places are limited, so register early."
        />
        <div className="kl-cols-3" style={{ gap: 32 }}>
          {events.map((e) => (
            <Card key={e.title} style={{ display: "flex", flexDirection: "column", padding: 32 }}>
              <div style={{ display: "flex", alignItems: "center", gap: 16, marginBottom: 20 }}>
                {/* Date block */}
                <div style={{ flexShrink: 0, width: 64, textAlign: "center", borderRadius: "var(--kl-radius-button)", border: "1px solid var(--kl-border)", padding: "8px 0", lineHeight: 1.1 }}>
                  {e.tbc ? (
                    <>
                      <div style={{ fontFamily: "var(--kl-font-display)", fontWeight: 600, fontSize: "1.25rem", color: e.accent }}>TBC</div>
                      <div style={{ fontSize: "var(--kl-text-tiny)", textTransform: "uppercase", letterSpacing: "0.08em", color: "var(--kl-fg-2)" }}>dates</div>
                    </>
                  ) : (
                    <>
                      <div style={{ fontFamily: "var(--kl-font-display)", fontWeight: 600, fontSize: "1.5rem", color: e.accent }}>{e.day}</div>
                      <div style={{ fontSize: "var(--kl-text-tiny)", textTransform: "uppercase", letterSpacing: "0.08em", color: "var(--kl-fg-2)" }}>{e.mon} {e.year}</div>
                    </>
                  )}
                </div>
                <span style={{ padding: "4px 12px", borderRadius: 999, fontSize: 12, fontWeight: 600, color: "#fff", background: e.accent }}>{e.type}</span>
              </div>
              <h3 style={{ fontSize: "var(--kl-text-h5)", marginBottom: 12, lineHeight: 1.2 }}>{e.title}</h3>
              <p style={{ display: "flex", alignItems: "center", gap: 8, fontSize: "var(--kl-text-small)", color: "var(--kl-fg-2)", marginBottom: 16 }}>
                <MIcon name="location_on" size={18} /> {e.where}
              </p>
              <p style={{ fontSize: "var(--kl-text-regular)", lineHeight: 1.55, marginBottom: 24 }}>{e.desc}</p>
              <div style={{ marginTop: "auto" }}>
                {e.tbc ? (
                  <a className="kl-btn kl-btn--alternate kl-btn--sm" href="#contact">Register interest</a>
                ) : e.link ? (
                  <a className="kl-btn kl-btn--alternate kl-btn--sm" href={e.link} target="_blank" rel="noopener noreferrer">Register</a>
                ) : (
                  <Button variant="alternate" size="sm">Register</Button>
                )}
              </div>
            </Card>
          ))}
        </div>
      </Section>

      {/* Book anytime — ongoing programs */}
      <Section scheme="scheme-2">
        <div style={{ maxWidth: 760, marginBottom: 48 }}>
          <Eyebrow>Book anytime</Eyebrow>
          <h2 style={{ fontSize: "var(--kl-text-h2)", marginTop: 12, marginBottom: 16, lineHeight: 1.15 }}>Programs you can join any time</h2>
          <p style={{ fontSize: "var(--kl-text-medium)", lineHeight: 1.6, color: "var(--kl-fg-2)" }}>
            Some of our programs run year-round with no fixed date. Book in whenever the timing is right for you.
          </p>
        </div>
        <Card style={{ padding: 0, overflow: "hidden" }}>
          <div className="kl-split" style={{ gap: 0, alignItems: "stretch" }}>
            <img
              src="../../assets/images/link-to-sleep-bedtime.webp"
              alt="A parent and child reading together at bedtime"
              style={{ width: "100%", height: "100%", minHeight: 300, objectFit: "cover", display: "block" }}
            />
            <div style={{ padding: 40, display: "flex", flexDirection: "column" }}>
              <span style={{ alignSelf: "flex-start", padding: "4px 12px", borderRadius: 999, fontSize: 12, fontWeight: 600, color: "#fff", background: "var(--kl-plum)", marginBottom: 16 }}>Sleep program</span>
              <h3 style={{ fontSize: "var(--kl-text-h4)", marginBottom: 12, lineHeight: 1.2 }}>Link to Sleep</h3>
              <p style={{ fontSize: "var(--kl-text-regular)", lineHeight: 1.6, color: "var(--kl-fg-2)", marginBottom: 24 }}>
                Our sleep program for families, available to book whenever you're ready. There's no fixed date, simply book in and we'll help you support better settling, fewer night wakings, and healthier sleep routines across the household.
              </p>
              <div style={{ marginTop: "auto" }}>
                <a className="kl-btn kl-btn--primary" href="https://sleep.kidlink.net.au" target="_blank" rel="noopener noreferrer">Book your spot</a>
              </div>
            </div>
          </div>
        </Card>
      </Section>

      {/* Newsletter / stay-in-touch strip */}
      <MailingListSignup
        scheme="scheme-1"
        eyebrow="Never miss an event"
        heading="Get new dates in your inbox"
        blurb="Join our mailing list to hear about new webinars and workshops as they're scheduled, plus other Kid Link updates. No spam, unsubscribe anytime."
      />

      <Contact
        showBooking={false}
        intro="Questions about an event, or want to bring one to your setting? Send us a message and our team will respond within 1-2 business days."
      />
    </>
  );
}

window.EventsPage = EventsPage;
