const DAYS = [
  {
    n: "0", g: "island", t: (<>Arrival <span className="amp">&amp;</span> Doing Nothing</>),
    w: "The soft beginning. The pause before the adventure.",
    body: [
      "We arrive on the island with our whole beings.",
      "This is the day of landing, breathing out, and slowly leaving the outside world behind. No pressure. No big plans. No need to perform, explain yourself, or immediately become “the best version of you.”",
      "We do nothing.",
      "We rest, meet each other, feel the space, look around, maybe talk, maybe stay quiet. Maybe we make a fire and simply sit together, letting the island slowly pull us in.",
      "We let our bodies understand that we are here now.",
      "This is the soft beginning. The pause before the adventure. The moment when Neverland starts to open.",
    ],
  },
  {
    n: "1", g: "△", t: "Wild Humans",
    w: "Nature, fire, water, hands, hunger, instinct.",
    body: [
      "This is the moment when we leave the outside world behind and step deeper into Neverland. Nature, fire, water, hands, hunger, instinct.",
      "We become humans in the wild. We catch fish, prepare them together, and cook them over the fire. This is the day of arrival, survival, connection, simplicity, and remembering that we are not only minds, plans, and screens.",
      "We are bodies. We are instinct. We are nature too.",
    ],
  },
  {
    n: "2", g: "wolf", t: "Animal Instinct",
    w: "Less polite. More alive. The one who knows before thinking.",
    body: [
      "This day is about becoming less polite and more alive.",
      "We embody animals, paint our bodies, move through instinct, and reconnect with the primal parts of ourselves. It is also a day to discover what animal lives inside you — the one that moves, feels, protects, desires, hides, hunts, rests, or roars in its own way.",
      "No perfection. No pretty performance. Just raw expression, movement, color, skin, breath, and freedom.",
      "The animal inside you is invited. The wild one. The one who knows before thinking.",
    ],
  },
  {
    n: "3", g: "anchor", t: "Pirate Day",
    w: "Adventure mode: on. The map is not the point — the journey is.",
    body: [
      "Adventure mode: on.",
      "We become pirates and set off by boat in search of treasure. But in Neverland, treasure is not only gold. Sometimes the treasure is something hidden inside you — something that limits you, stops you, blocks your freedom, or keeps you from becoming fully yourself.",
      "This day is about finding it, looking at it, and maybe turning it into art. Because in Neverland, even what holds us back can become part of creation.",
      "This is a day for play, courage, rebellion, and following the unknown.",
      "Bring your inner pirate. The map is not the point. The journey is.",
    ],
  },
  {
    n: "4", g: "eye", t: "Your Own Vision",
    w: "Your space. Free creation. No rules.",
    body: [
      "This is your space.",
      "A day for free creation, where everyone can bring their own artistic vision to life — photography, painting, movement, performance, writing, whatever wants to come through you.",
      "No rules about what it should look like. No pressure to make it beautiful. No need to make sense.",
      "Just you, your vision, and the courage to let it exist.",
    ],
  },
  {
    n: "5", g: "▽", t: "No Words, Just Art",
    w: "No talking. Literally. The body speaks. The art answers.",
    body: [
      "No talking. Literally.",
      "This is a day of silence, embodiment, presence, and creation without explanation. No need to describe what you feel. No need to make it sound wise. No need to translate your inner world into words.",
      "You move. You feel. You create.",
      "The body speaks. The art answers.",
    ],
  },
  {
    n: "6", g: "campfire", t: "Integration Day",
    w: "Tarot, intuition, symbols, and hidden answers. Ask the question.",
    body: [
      "A day for integration, intuition, questions, symbols, and hidden answers.",
      "Through tarot, we open a space to ask, listen, reflect, and receive guidance. It is not about fortune-telling, but about looking deeper. A mirror. A ritual. A conversation with the parts of ourselves that already know more than we think.",
      "This is the day to gather everything we have lived, felt, created, discovered, and transformed during the journey. We give space to the experiences, let them settle in the body, and see what wants to stay with us after Neverland.",
      "Ask the question. Pull the card. Listen deeper.",
    ],
  },
];

// ────── DAY GLYPHS (inline SVG, all use currentColor so they inherit gold) ──────

const SVG_PROPS = {
  className: "glyph-svg",
  viewBox: "0 0 100 100",
  xmlns: "http://www.w3.org/2000/svg",
  fill: "none",
  stroke: "currentColor",
  strokeWidth: 2,
  strokeLinecap: "round",
  strokeLinejoin: "round",
  "aria-hidden": "true",
};

function IslandIcon() {
  // Top-down island silhouette, like a map plate. Irregular coastline,
  // forest as dots, small inland clearing, faint water contours outside.
  return (
    <svg {...SVG_PROPS}>
      {/* outer water-contour ring (dashed, very faint) */}
      <path d="M 6 50 Q 8 18 30 12" strokeWidth="0.8" strokeDasharray="2 3" opacity="0.45" />
      <path d="M 94 50 Q 92 82 70 88"  strokeWidth="0.8" strokeDasharray="2 3" opacity="0.45" />
      {/* coastline blob */}
      <path d="M 50 14 Q 64 14 74 22 Q 84 28 86 40 Q 92 50 86 60 Q 84 72 76 80 Q 64 90 50 86 Q 36 90 24 82 Q 14 74 14 60 Q 8 50 14 38 Q 18 24 32 18 Q 40 14 50 14 Z"
            fill="currentColor" fillOpacity="0.14" />
      {/* inland clearing / small lake */}
      <ellipse cx="52" cy="52" rx="7" ry="4.5" fill="currentColor" fillOpacity="0.5" strokeWidth="1.4" />
      {/* forest dots — small, scattered */}
      {[[40,32],[52,28],[62,34],[32,44],[42,42],[64,42],[72,48],
        [34,58],[38,68],[48,72],[60,70],[68,60],[58,80],[44,78]].map(([x,y], i) => (
        <circle key={i} cx={x} cy={y} r="1.4" fill="currentColor" />
      ))}
    </svg>
  );
}

function WolfIcon() {
  // Front-facing wolf head — pointed ears, triangular muzzle, slit eyes.
  return (
    <svg {...SVG_PROPS}>
      {/* left ear */}
      <path d="M 22 30 L 28 8 L 40 28 Z" fill="currentColor" fillOpacity="0.22" />
      {/* right ear */}
      <path d="M 78 30 L 72 8 L 60 28 Z" fill="currentColor" fillOpacity="0.22" />
      {/* head outline */}
      <path d="M 22 30 Q 22 56 30 70 Q 38 80 50 80 Q 62 80 70 70 Q 78 56 78 30 Q 70 24 50 22 Q 30 24 22 30 Z"
            fill="currentColor" fillOpacity="0.08" />
      {/* left eye (slit) */}
      <path d="M 32 42 L 40 40 L 42 46 L 34 48 Z" fill="currentColor" />
      {/* right eye (slit) */}
      <path d="M 68 42 L 60 40 L 58 46 L 66 48 Z" fill="currentColor" />
      {/* muzzle / snout */}
      <path d="M 42 58 Q 50 64 58 58 L 55 72 Q 50 76 45 72 Z" fill="currentColor" fillOpacity="0.18" strokeWidth="1.6" />
      {/* nose */}
      <path d="M 46 58 L 54 58 L 50 64 Z" fill="currentColor" />
      {/* mouth line below nose */}
      <path d="M 50 64 L 50 70" strokeWidth="1.2" />
    </svg>
  );
}

function EyeIcon() {
  // All-seeing eye — almond lens, iris, pupil, surrounding rays.
  return (
    <svg {...SVG_PROPS}>
      {/* surrounding rays */}
      <g strokeWidth="1.4" opacity="0.7">
        <path d="M 50 8  L 50 18" />
        <path d="M 50 82 L 50 92" />
        <path d="M 8 50  L 18 50" />
        <path d="M 82 50 L 92 50" />
        <path d="M 22 22 L 30 30" />
        <path d="M 78 22 L 70 30" />
        <path d="M 22 78 L 30 70" />
        <path d="M 78 78 L 70 70" />
      </g>
      {/* eye almond shape */}
      <path d="M 12 50 Q 32 26 50 26 Q 68 26 88 50 Q 68 74 50 74 Q 32 74 12 50 Z"
            fill="currentColor" fillOpacity="0.08" strokeWidth="2.2" />
      {/* iris */}
      <circle cx="50" cy="50" r="14" strokeWidth="1.8" />
      {/* pupil */}
      <circle cx="50" cy="50" r="6" fill="currentColor" />
      {/* catch-light */}
      <circle cx="46" cy="46" r="1.6" fill="currentColor" stroke="none" />
    </svg>
  );
}

function AnchorIcon() {
  // Classical ship anchor — ring, stock crossbar with dot caps, shank,
  // curving arms, fluke barbs at tips. Same stroke/fill rhythm as the
  // other day glyphs (currentColor + light fill accents).
  return (
    <svg {...SVG_PROPS}>
      {/* ring at top */}
      <circle cx="50" cy="14" r="6" strokeWidth="2.5" />
      {/* ring-to-stock connector */}
      <line x1="50" y1="20" x2="50" y2="26" />
      {/* stock — horizontal crossbar with rounded dot caps */}
      <line x1="32" y1="30" x2="68" y2="30" strokeWidth="3" />
      <circle cx="32" cy="30" r="2" fill="currentColor" stroke="none" />
      <circle cx="68" cy="30" r="2" fill="currentColor" stroke="none" />
      {/* shank — main vertical bar from stock down to the crown */}
      <line x1="50" y1="26" x2="50" y2="68" strokeWidth="3" />
      {/* left arm — J-curve out and back up */}
      <path d="M 50 68 Q 38 88 22 80 Q 18 78 16 70" strokeWidth="2.5" />
      {/* right arm — mirrored */}
      <path d="M 50 68 Q 62 88 78 80 Q 82 78 84 70" strokeWidth="2.5" />
      {/* left fluke / barb at arm tip */}
      <path d="M 16 70 L 22 62 L 28 70 Z" fill="currentColor" fillOpacity="0.4" />
      {/* right fluke / barb */}
      <path d="M 84 70 L 78 62 L 72 70 Z" fill="currentColor" fillOpacity="0.4" />
      {/* subtle wash under the curve for visual weight */}
      <path d="M 22 80 Q 50 92 78 80 L 78 76 Q 50 84 22 76 Z"
            fill="currentColor" fillOpacity="0.10" strokeWidth="0" />
    </svg>
  );
}

function CampfireIcon() {
  // Bonfire — three flame layers + crossed logs at base + a few sparks above.
  return (
    <svg {...SVG_PROPS}>
      {/* sparks */}
      <circle cx="34" cy="22" r="1.2" fill="currentColor" stroke="none" />
      <circle cx="64" cy="14" r="1.4" fill="currentColor" stroke="none" />
      <circle cx="72" cy="28" r="1"   fill="currentColor" stroke="none" />
      <circle cx="22" cy="34" r="1"   fill="currentColor" stroke="none" />
      {/* outer flame */}
      <path d="M 50 82 Q 28 70 30 50 Q 32 30 50 18 Q 68 30 70 50 Q 72 70 50 82 Z"
            fill="currentColor" fillOpacity="0.12" />
      {/* middle flame */}
      <path d="M 50 76 Q 36 66 38 52 Q 42 38 50 30 Q 58 38 62 52 Q 64 66 50 76 Z"
            fill="currentColor" fillOpacity="0.22" strokeWidth="1.6" />
      {/* inner flame */}
      <path d="M 50 68 Q 44 60 46 52 Q 48 44 50 40 Q 52 44 54 52 Q 56 60 50 68 Z"
            fill="currentColor" fillOpacity="0.45" strokeWidth="1.2" />
      {/* logs at base — crossed sticks */}
      <path d="M 14 84 L 86 80" strokeWidth="2.6" />
      <path d="M 14 80 L 86 84" strokeWidth="2.6" />
    </svg>
  );
}

const DAY_ICONS = {
  island:   IslandIcon,
  wolf:     WolfIcon,
  anchor:   AnchorIcon,
  eye:      EyeIcon,
  campfire: CampfireIcon,
};

function Day({ day, isOpen, onToggle }) {
  const Icon = DAY_ICONS[day.g];
  return (
    <div className={"day" + (isOpen ? " open" : "")}>
      <button
        className="day__head"
        onClick={onToggle}
        aria-expanded={isOpen}
        aria-controls={`day-${day.n}-body`}
      >
        <span className="glyph" aria-hidden="true">
          {Icon ? <Icon /> : day.g}
        </span>
        <span className="day__head-text">
          <span className="num">Day {day.n}</span>
          <span className="name">{day.t}</span>
        </span>
        <span className="what">{day.w}</span>
        <span className="day__toggle" aria-hidden="true">{isOpen ? "—" : "+"}</span>
      </button>
      <div className="reveal-schedule" id={`day-${day.n}-body`}>
        <div className="reveal-inner">
          {day.body.map((p, i) => (
            <p key={i}>{p}</p>
          ))}
        </div>
      </div>
    </div>
  );
}

function Happenings() {
  const [open, setOpen] = React.useState(0);
  return (
    <section className="dark" id="happenings">
      <div className="grain"></div>
      <div className="container">
        <SectionHead
          eyebrow="Seven Days · One Neverland · IV"
          title={<>
            Happenings.
            <img className="title-char title-char--right" src="./characters/jack-sparrow.webp" alt="" aria-hidden="true" />
          </>}
          lede="Seven chapters. From the soft beginning to the integrating moon. Tap a day to open it."
          ornaments={["moon-star", "butterfly", "moon-star"]}
        />
        <div className="days">
          {DAYS.map((d, i) => (
            <Reveal key={d.n} delay={i * 60}>
              <Day day={d} isOpen={open === i} onToggle={() => setOpen(open === i ? -1 : i)} />
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Happenings, Day, DAYS });
