// Into the Wild — Itinerary, Map, Gallery
const { useState: useStateMid } = React;

function Itinerary() {
  const [open, setOpen] = useState(0);
  const days = [
    {
      n: "01", title: "Arrivals & Circle", loc: "Pontedeume · Teambuilding",
      phase: "I · Teambuilding",
      tags: ["Arrivals", "Icebreakers", "Kit check"],
      body: "Eighteen strangers pile off planes, trains and a rickety bus from Santiago. We meet at a rural albergue on the edge of the forest, share a stew, hand out headlamps and walk a short opening ritual down to the estuary.",
      stats: [{k:"Distance", v:"0 km"}, {k:"Sleep", v:"Das Nest"}, {k:"Dinner", v:"Caldo galego"}]
    },
    {
      n: "02", title: "Names, Knots, Nerves", loc: "Caaveiro basecamp · Teambuilding",
      phase: "I · Teambuilding",
      tags: ["Cooperative games", "Roles"],
      body: "A full day of non-formal facilitation. We work through name-learning games, trust exercises, cooking rotations, and the contract the group will live by for the rest of the week. Everyone leaves with a task and a partner.",
      stats: [{k:"Sessions", v:"4"}, {k:"Groups of", v:"3"}, {k:"Sleep", v:"Albergue"}]
    },
    {
      n: "03", title: "Into the Fragas", loc: "River Eume · Teambuilding",
      phase: "I · Teambuilding",
      tags: ["First hike", "Peer learning"],
      body: "Our first proper walk into the forest canopy. Skill-share in clearings — map-reading, fire-lighting, conflict transformation, singing badly in six languages. Return to the albergue for a cultural-exchange dinner: one dish per country.",
      stats: [{k:"Distance", v:"9 km"}, {k:"Workshops", v:"3"}, {k:"Plates", v:"54"}]
    },
    {
      n: "04", title: "Deep Forest", loc: "Caaveiro → Monfero · Experiential",
      phase: "II · Experiential",
      tags: ["Bivouac", "Navigation"],
      body: "Phase two begins. We leave the albergue with everything on our backs and cross the Eume valley on foot. You take turns leading with the map. First night out — tarps and hammocks under three-hundred-year-old oaks.",
      stats: [{k:"Distance", v:"16 km"}, {k:"Ascent", v:"+520m"}, {k:"Sleep", v:"Bivouac"}]
    },
    {
      n: "05", title: "Silent Morning, Loud Night", loc: "Monfero waterfalls · Experiential",
      phase: "II · Experiential",
      tags: ["Solo time", "Wild swim", "Campfire"],
      body: "Four hours walking without speaking — harder than it sounds. A cold swim under the Cabalar falls. Ends in a circle around the fire where everyone shares one thing the silence said to them. Some cry. It's fine.",
      stats: [{k:"Distance", v:"12 km"}, {k:"Words", v:"~0"}, {k:"Songs", v:"∞"}]
    },
    {
      n: "06", title: "Descent & Debrief", loc: "Back to Pontedeume · Reflection",
      phase: "III · Reflection",
      tags: ["Youthpass", "Closing"],
      body: "Off the ridge, into a borrowed farmhouse. We run Youthpass reflection workshops, swap contacts, plan the winter reunion, cry again, then have the best dinner of our lives. Goodbyes at the train station the next morning.",
      stats: [{k:"Distance", v:"8 km"}, {k:"Youthpass", v:"Signed"}, {k:"Goodbyes", v:"Tearful"}]
    },
  ];

  return (
    <section className="section itinerary" id="adventure">
      <div style={{maxWidth: 1400, margin: '0 auto'}}>
        <div className="section-tag">
          <span className="tag-num">02</span>
          <span>Edition 04 · Fragas do Eume · six days in three phases</span>
        </div>
        <h2 className="section-title">
          Three <em>phases.</em>
          <br/>Six days in <span className="outline">one forest.</span>
        </h2>
        <div className="phase-legend">
          <span><b>I</b> Teambuilding <i>(days 1–3)</i></span>
          <span><b>II</b> Experiential adventure <i>(days 4–5)</i></span>
          <span><b>III</b> Reflection <i>(day 6)</i></span>
        </div>
      </div>
    </section>
  );
}

function RouteMap() {
  const [hover, setHover] = useState(null);
  const pins = [
    { n: 1, name: "Pontedeume", code: "Start · Estuary", x: 140, y: 470 },
    { n: 2, name: "Albergue Caaveiro", code: "Basecamp · Days 1–3", x: 280, y: 380 },
    { n: 3, name: "Monastery of Caaveiro", code: "Day 3 · Riverbend", x: 420, y: 320 },
    { n: 4, name: "Cabalar Falls", code: "Day 5 · Wild swim", x: 560, y: 230 },
    { n: 5, name: "Monfero ridge", code: "Day 4–5 · Bivouac", x: 680, y: 180 },
    { n: 6, name: "Farmhouse A Capela", code: "Day 6 · Reflection", x: 780, y: 350 },
  ];

  const path = "M 140 470 Q 200 430 280 380 Q 360 340 420 320 Q 480 280 560 230 Q 620 200 680 180 Q 740 250 780 350";

  return (
    <section className="map-section" id="route">
      <div className="map-head">
        <div>
          <div className="section-tag">
            <span className="tag-num">03</span>
            <span>The Route — one forest, six pinned moments</span>
          </div>
          <h2 className="section-title" style={{color:'var(--cream)'}}>
            The <em>Fragas</em>
            <br/>do <span style={{WebkitTextStroke:'1.5px var(--cream)', color:'transparent', fontStyle:'normal'}}>Eume.</span>
          </h2>
        </div>
      </div>

      <div className="map-wrap">
        <svg className="map-svg" viewBox="0 0 900 600" preserveAspectRatio="xMidYMid meet">
          {/* Grid */}
          <defs>
            <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
              <path d="M 40 0 L 0 0 0 40" fill="none" stroke="#1A1F16" strokeWidth="0.4" opacity="0.12"/>
            </pattern>
            <pattern id="topo" width="120" height="120" patternUnits="userSpaceOnUse">
              <circle cx="60" cy="60" r="12" fill="none" stroke="#2D4A2B" strokeWidth="0.6" opacity="0.25"/>
              <circle cx="60" cy="60" r="28" fill="none" stroke="#2D4A2B" strokeWidth="0.6" opacity="0.2"/>
              <circle cx="60" cy="60" r="45" fill="none" stroke="#2D4A2B" strokeWidth="0.6" opacity="0.15"/>
            </pattern>
          </defs>
          <rect width="900" height="600" fill="url(#grid)"/>
          <rect width="900" height="600" fill="url(#topo)"/>

          {/* River */}
          <path d="M 0 350 Q 150 330 300 360 T 600 340 Q 750 330 900 360"
                fill="none" stroke="#7FA9B8" strokeWidth="4" opacity="0.5"/>
          <path d="M 400 0 Q 420 150 380 280 Q 360 400 340 550 L 340 600"
                fill="none" stroke="#7FA9B8" strokeWidth="3" opacity="0.4"/>

          {/* Forest icons */}
          {[[80,120],[130,260],[50,420],[160,520],[420,80],[580,150],[780,100],[800,260],[860,480],[460,510],[240,480],[520,240]].map(([x,y], i) =>
            <g key={i} transform={`translate(${x} ${y})`}>
              <path d="M 0 -12 L 10 8 L -10 8 Z" fill="#2D4A2B" opacity="0.4"/>
              <rect x="-2" y="6" width="4" height="6" fill="#2D4A2B" opacity="0.4"/>
            </g>
          )}

          {/* Compass */}
          <g transform="translate(840 80)" opacity="0.6">
            <circle r="28" fill="none" stroke="#1A1F16" strokeWidth="1"/>
            <path d="M 0 -24 L 4 0 L 0 24 L -4 0 Z" fill="#C44A1B"/>
            <text y="-32" textAnchor="middle" fontFamily="'JetBrains Mono', monospace" fontSize="10" fill="#1A1F16">N</text>
          </g>

          {/* Route */}
          <path d={path} fill="none" stroke="#C44A1B" strokeWidth="2.5" strokeDasharray="6 5"/>
          <path d={path} fill="none" stroke="#C44A1B" strokeWidth="6" opacity="0.15"/>

          {/* Pins */}
          {pins.map((p) => (
            <g key={p.n} transform={`translate(${p.x} ${p.y})`}
               onMouseEnter={() => setHover(p.n)}
               onMouseLeave={() => setHover(null)}
               style={{cursor:'pointer'}}>
              <circle r={hover === p.n ? 16 : 12} fill="#EFE7D6" stroke="#1A1F16" strokeWidth="2"/>
              <circle r={hover === p.n ? 7 : 5} fill="#C44A1B"/>
              <text y="-22" textAnchor="middle"
                    fontFamily="'Fraunces', serif"
                    fontStyle="italic"
                    fontWeight="700"
                    fontSize={hover === p.n ? 20 : 16}
                    fill="#1A1F16">
                {p.name}
              </text>
              <text y="-6" textAnchor="middle"
                    fontFamily="'JetBrains Mono', monospace"
                    fontSize="9"
                    letterSpacing="1"
                    fill="#1A1F16" opacity="0.6">
                {p.code.toUpperCase()}
              </text>
            </g>
          ))}
        </svg>

        <ul className="map-pins-list">
          {pins.map(p => (
            <li key={p.n}
                className={hover === p.n ? 'active' : ''}
                onMouseEnter={() => setHover(p.n)}
                onMouseLeave={() => setHover(null)}>
              <span className="pin-dot"/>
              <span className="pin-num">{String(p.n).padStart(2,'0')}</span>
              <span>{p.name} — {p.code}</span>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}

// Polaroid placeholder background generator
function poloBg(i, label) {
  const palettes = [
    ['#2D4A2B','#4A6B3F','#E8B84C'],
    ['#7FA9B8','#EFE7D6','#C44A1B'],
    ['#C44A1B','#E8B84C','#2D4A2B'],
    ['#1E3320','#8A8577','#EFE7D6'],
    ['#4A6B3F','#7FA9B8','#FAF5E6'],
    ['#E8B84C','#C44A1B','#1A1F16'],
  ];
  const [a,b,c] = palettes[i % palettes.length];
  const svg = `<svg xmlns='http://www.w3.org/2000/svg' width='480' height='520' viewBox='0 0 240 260'>
    <rect width='240' height='260' fill='${a}'/>
    <g opacity='0.6'>
      <path d='M 0 180 L 60 120 L 110 160 L 160 90 L 240 180 L 240 260 L 0 260 Z' fill='${b}'/>
      <path d='M 0 220 L 80 170 L 140 200 L 240 150 L 240 260 L 0 260 Z' fill='${c}' opacity='0.7'/>
    </g>
    <circle cx='200' cy='50' r='22' fill='${c}' opacity='0.9'/>
    <g stroke='${b}' stroke-width='0.5' opacity='0.3' fill='none'>
      <path d='M 0 40 L 240 80'/><path d='M 0 60 L 240 100'/><path d='M 0 80 L 240 60'/>
    </g>
    <text x='12' y='244' font-family='monospace' font-size='8' fill='${c}' opacity='0.7'>// ${label}</text>
  </svg>`;
  return `url("data:image/svg+xml;utf8,${encodeURIComponent(svg)}")`;
}

function Gallery() {
  const photos = [
    { label: "Dinner, Day 3", date: "16·07·2025", x: 8, y: 30, r: -7 },
    { label: "River crossing", date: "19·07·2025", x: 25, y: 10, r: 4 },
    { label: "Marta's song", date: "20·07·2025", x: 42, y: 38, r: -3 },
    { label: "The summit push", date: "22·07·2025", x: 58, y: 8, r: 6 },
    { label: "Youthpass ritual", date: "24·07·2025", x: 74, y: 32, r: -5 },
    { label: "Lac Blanc, 06:04", date: "17·07·2025", x: 90, y: 12, r: 3 },
  ];

  return (
    <section className="section gallery" id="dispatches">
      <div className="section-head">
        <div className="section-tag">
          <span className="tag-num">04</span>
          <span>Dispatches — field notes from cohort 03</span>
        </div>
        <h2 className="section-title">
          Twelve days,
          <br/>six <em>thousand</em> <span className="outline">photos.</span>
        </h2>
        <p style={{maxWidth: 580, fontFamily:'var(--serif)', fontSize:20, fontStyle:'italic', marginTop: 16}}>
          Here are six of them. Drag the edges, hover to see the back of the card.
        </p>
      </div>

      <div className="polaroid-wall">
        {photos.map((p, i) => (
          <div
            key={i}
            className="polaroid"
            style={{
              left: `${p.x}%`,
              top: `${p.y}%`,
              transform: `translate(-50%,-50%) rotate(${p.r}deg)`,
              zIndex: i + 1,
            }}
          >
            <div className="polaroid-img" style={{backgroundImage: poloBg(i, p.label)}} />
            <div className="polaroid-label">
              {p.label}
              <span className="date">{p.date}</span>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

Object.assign(window, { Itinerary, RouteMap, Gallery });