// Seminars — group education offering. Cream section. Audience is an
// organisation (workplace, club, community group). Progressive disclosure: each
// card leads with a one-line summary; the topic list is behind a toggle, and
// enquiries open the shared modal pre-tagged "Seminar".
const SEM_INK    = '#201C12';
const SEM_ACCENT = '#FF6C00';
const SEM_CREAM  = '#EAE6D7';

const SEMINAR_AUDIENCES_DEFAULT = [
  {
    eyebrow: '01 · WORKPLACE',
    title: 'CORPORATE & WORKPLACE',
    body: 'Practical nutrition education for teams who want more consistent energy through the working day. Cuts through diet noise with evidence-based guidance staff can actually use — no fads, no restriction.',
    bullets: [
      'Energy, focus and the 3pm slump',
      'Eating well around shift work and travel',
      'Fuelling for staff who train before or after work',
      'Cutting through nutrition misinformation',
    ],
    tags: ['LUNCH & LEARN', 'WELLBEING DAYS', 'ONLINE OR ON SITE'],
  },
  {
    eyebrow: '02 · CLUBS & TEAMS',
    title: 'SPORTING CLUBS & TEAMS',
    body: 'Squad-wide fuelling education that lifts the whole group at once. Built around your sport, your season and your competition demands — so athletes turn up to game day already knowing the plan.',
    bullets: [
      'Training-day and game-day fuelling',
      'Recovery nutrition between sessions',
      'Hydration and travel for away fixtures',
      'Supporting junior and developing athletes',
    ],
    tags: ['PRE-SEASON', 'SQUAD SESSIONS', 'PARENT NIGHTS'],
  },
  {
    eyebrow: '03 · COMMUNITY',
    title: 'COMMUNITY & EVENTS',
    body: 'Guest speaking for run clubs, tri clubs, gyms and event expos. An engaging, jargon-free session that leaves the room with something they can apply to their next session or start line.',
    bullets: [
      'Race-week and race-day fuelling',
      'Gut training and avoiding GI issues',
      'Everyday eating for recreational athletes',
      'Q&A tailored to the room',
    ],
    tags: ['RUN & TRI CLUBS', 'GYMS', 'EXPO TALKS'],
  },
];

const SEMINAR_INCLUSIONS_DEFAULT = [
  'A pre-session consult to tailor content to your group',
  'A 45–60 minute presentation, in person (Perth) or online',
  'Live Q&A so questions get answered in the room',
  'Take-home resource pack for every attendee',
  'Optional follow-up session or discounted 1-on-1 rate for attendees',
];

// Optional photos per seminar card — drop { avif, jpg, alt } here later, keyed
// by slug of the card title.
const SEMINAR_IMAGES = {};

function Seminars({ theme }) {
  const [expanded, setExpanded] = React.useState({});
  const audiences = C('seminars.audiences', null) || SEMINAR_AUDIENCES_DEFAULT;
  const cards = SEMINAR_AUDIENCES_DEFAULT.map((d, i) => (audiences[i] ? { ...d, ...audiences[i] } : d));
  const inclusions = C('seminars.inclusions', SEMINAR_INCLUSIONS_DEFAULT);
  const toggle = (slug) => setExpanded(e => ({ ...e, [slug]: !e[slug] }));

  return (
    <section id="seminars" data-screen-label="04 Seminars" className="relative noise" style={{ background: SEM_CREAM, color: SEM_INK, paddingBlock: 'var(--pad-y, 96px)' }}>
      {/* Masthead backdrop — the event photo sits behind the header and fades
          into the cream before the cards start, so it reads as atmosphere rather
          than a figure. Decorative only, hence alt="" and aria-hidden. */}
      <div
        aria-hidden="true"
        className="pointer-events-none"
        style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 'clamp(380px, 56vh, 680px)', overflow: 'hidden' }}
      >
        <picture>
          <source srcSet="assets/images/seminars/community-event.avif" type="image/avif" />
          <img
            src="assets/images/seminars/community-event.jpg"
            alt=""
            style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 32%', display: 'block' }}
          />
        </picture>
        {/* Cream wash — heavier at the bottom so the copy and cards keep contrast */}
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(234,230,215,.78) 0%, rgba(234,230,215,.86) 40%, rgba(234,230,215,1) 88%)' }} />
        {/* Extra veil on narrow screens: the crop lands on a busier part of the
            photo and the intro copy wraps over more of it. */}
        <div className="md:hidden" style={{ position: 'absolute', inset: 0, background: 'rgba(234,230,215,.34)' }} />
      </div>

      <div className="relative max-w-[1400px] mx-auto px-5 md:px-8">

        {/* Header */}
        <div className="flex flex-wrap items-end justify-between gap-4">
          <div>
            <div className="font-mono text-[11px] uppercase tracking-[.22em]" style={{ color: SEM_ACCENT }}>{C('seminars.eyebrow', 'Group Education')}</div>
            <h2 className="mt-3 font-display leading-[.88]" style={{ fontSize: 'clamp(48px, 9vw, 140px)' }}>
              <span className="skew-italic">SEMINARS</span>
            </h2>
          </div>
          <button onClick={() => openEnquiry('Seminar')} className="hidden md:inline-flex items-center gap-2 font-mono text-[11px] uppercase tracking-[.18em] mb-2 opacity-80 hover:opacity-100" style={{ color: SEM_INK }} data-blob-hover>
            Enquire about a seminar <span style={{ fontFamily: 'Anton' }}>↗</span>
          </button>
        </div>

        {/* Short intro */}
        <p className="mt-6 text-[15px] md:text-[16px] leading-relaxed max-w-[56ch]" style={{ color: 'rgba(32,28,18,.7)' }}>
          {C('seminars.intro', 'One session, a whole room better fuelled. Practical, evidence-based nutrition education for workplaces, clubs and community groups — built around your group. Tap a card for the topics covered.')}
        </p>

        {/* Audience cards */}
        <div className="mt-10 grid grid-cols-1 md:grid-cols-3 gap-4 items-start">
          {cards.map((card) => {
            const slug = slugify(card.title);
            return (
              <ExpandableCard
                key={slug}
                card={{ ...card, image: SEMINAR_IMAGES[slug] }}
                scheme="light"
                displayName={card.title}
                brandTag={card.eyebrow}
                cta={{ type: 'enquiry', topic: 'Seminar', label: 'Enquire about this' }}
                expanded={!!expanded[slug]}
                onToggle={() => toggle(slug)}
              />
            );
          })}
        </div>

        {/* What's included + guide request */}
        <div className="mt-4 grid grid-cols-1 md:grid-cols-12 gap-4">
          <div className="md:col-span-7 rounded-2xl p-6 md:p-8" style={{ background: '#fff', border: '1px solid rgba(32,28,18,.1)' }}>
            <div className="font-mono text-[11px] uppercase tracking-[.22em]" style={{ color: SEM_ACCENT }}>What's included</div>
            <ul className="mt-5 space-y-3" aria-label="Every seminar includes">
              {inclusions.map((item, i) => (
                <li key={i} className="flex items-start gap-3 text-[14px] leading-relaxed" style={{ color: 'rgba(32,28,18,.8)' }}>
                  <span className="mt-[6px] flex-shrink-0 w-1.5 h-1.5 rounded-full" style={{ background: SEM_ACCENT }} aria-hidden />
                  {item}
                </li>
              ))}
            </ul>
          </div>

          <div className="md:col-span-5 rounded-2xl p-6 md:p-8 flex flex-col" style={{ background: SEM_INK, color: SEM_CREAM }}>
            <div className="font-mono text-[11px] uppercase tracking-[.22em]" style={{ color: SEM_ACCENT }}>Seminar guide</div>
            <h3 className="mt-3 font-display leading-[.9]" style={{ fontSize: 'clamp(24px, 2.4vw, 34px)' }}>
              <span className="skew-italic">REQUEST THE FULL OVERVIEW</span>
            </h3>
            <p className="mt-4 text-[14px] leading-relaxed" style={{ color: 'rgba(234,230,215,.72)' }}>
              {C('seminars.deckCopy', 'A short guide covering session formats, topics, what your group walks away with, and pricing for your size and setting. Tell Lauren a little about your group and she\'ll send it through.')}
            </p>
            <button onClick={() => openEnquiry('Seminar')} className="btn-shine mt-auto self-start inline-flex items-center gap-3 px-6 py-3.5 rounded-full font-mono text-[12px] uppercase tracking-[.18em] font-bold" style={{ background: SEM_ACCENT, color: SEM_CREAM, marginTop: 24 }} data-blob-hover>
              Request the seminar guide →
            </button>
          </div>
        </div>

        {/* Footer note — secondary */}
        <div className="mt-6 flex items-start gap-4">
          <div className="w-0.5 flex-shrink-0 rounded-full self-stretch" style={{ background: SEM_ACCENT }}></div>
          <p className="text-[13px] leading-relaxed max-w-[70ch]" style={{ color: 'rgba(32,28,18,.6)' }}>
            {C('seminars.footerNote', 'Pricing is quoted per group based on size, format and travel — get in touch for a tailored quote. Seminars are available in person across Perth, WA or online anywhere in Australia. Attendees receive a discounted rate on 1-on-1 consultations.')}
          </p>
        </div>

      </div>
    </section>
  );
}

window.Seminars = Seminars;