// Into the Wild — Past Editions (Camino 01, 02, 03)

function PastEditions() {
  const editions = [
  {
    n: "01",
    year: "2023",
    name: "Into the Wild I",
    sub: "The pioneers",
    days: "4 days · 115 km",
    cohort: "16 adventurers · 4 teams",
    body: "Our first edition. A classic introduction on the last stretch of the French Way. We learned that waymarks are a gift and that priests can be your best ally to sleep under a roof",
    tags: ["Yellow arrows", "Yellow arrows", "First cohort"],
    a: '#E8B84C', b: '#C44A1B', c: '#2D4A2B'
  },
  {
    n: "02",
    year: "2024",
    name: "Into the Wild I",
    sub: "The pioneers",
    days: "4 days · 115 km",
    cohort: "16 adventurers · 4 teams",
    body: "Our first edition. A classic introduction on the last stretch of the French Way. We learned that waymarks are a gift and that blisters build faster friendships than any icebreaker.",
    tags: ["Yellow arrows", "Ocean swims", "Yellow arrows"],
    a: '#7FA9B8', b: '#E8B84C', c: '#C44A1B'
  },
  {
    n: "03",
    year: "2025",
    name: "Into the Wild I",
    sub: "The pioneers",
    days: "4 days · 115 km",
    cohort: "16 adventurers · 4 teams",
    body: "Our first edition. A classic introduction on the last stretch of the French Way. We learned that waymarks are a gift and that priests can be your best ally to sleep under a roof",
    tags: ["Yellow arrows", "Quiet route", "The turn"],
    a: '#1E3320', b: '#EFE7D6', c: '#7FA9B8'
  }];


  const cover = (e) => {
    const svg = `<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 200'>
      <rect width='320' height='200' fill='${e.a}'/>
      <g opacity='0.85'>
        <path d='M 0 140 L 60 90 L 110 130 L 180 70 L 240 120 L 320 80 L 320 200 L 0 200 Z' fill='${e.c}'/>
        <path d='M 0 170 L 80 135 L 160 160 L 240 130 L 320 150 L 320 200 L 0 200 Z' fill='${e.b}' opacity='0.8'/>
      </g>
      <circle cx='260' cy='45' r='18' fill='${e.b}'/>
      <g stroke='${e.b}' stroke-width='0.5' opacity='0.35' fill='none'>
        <path d='M 0 30 L 320 60'/><path d='M 0 50 L 320 80'/><path d='M 0 70 L 320 40'/>
      </g>
      <text x='16' y='184' font-family='monospace' font-size='9' fill='${e.b}' opacity='0.8'>// edition ${e.n} · ${e.year}</text>
    </svg>`;
    return `url("data:image/svg+xml;utf8,${encodeURIComponent(svg)}")`;
  };

  return (
    <section className="section editions" id="editions">
      <div style={{ maxWidth: 1400, margin: '0 auto' }}>
        <div className="section-tag">
          <span className="tag-num">08</span>
          <span>Past editions — three Caminos, one growing collective</span>
        </div>
        <h2 className="section-title">
          Three <em>Caminos</em>
          <br />before the <span className="outline">forest.</span>
        </h2>
        <p style={{ maxWidth: 620, fontFamily: 'var(--serif)', fontSize: 20, fontStyle: 'italic', marginTop: 8, marginBottom: 40 }}>Editions 01, 02 and 03 walked the yellow arrows to Santiago. Each generation added alumni, partners, and better answers to the same question: what do we actually need from an adventure?



        </p>

        <div className="editions-grid">
          {editions.map((e, i) =>
          <article key={i} className="edition-card">
              <div className="edition-cover" style={{ backgroundImage: cover(e) }}>
                <span className="edition-num">Nº {e.n}</span>
                <span className="edition-year">{e.year}</span>
              </div>
              <div className="edition-body">
                <h3 className="edition-name">{e.name}</h3>
                <div className="edition-sub">{e.sub}</div>
                <div className="edition-meta">
                  <span>{e.days}</span>
                  <span>{e.cohort}</span>
                </div>
                <p className="edition-text">{e.body}</p>
                <div className="edition-tags">
                  {e.tags.map((t, j) => <span key={j} className="chip-dark">{t}</span>)}
                </div>
              </div>
            </article>
          )}

          <article className="edition-card edition-card-next">
            <div className="edition-cover edition-cover-next">
              <span className="edition-num">Nº 04</span>
              <span className="edition-year">2026</span>
            </div>
            <div className="edition-body">
              <h3 className="edition-name">Fragas do Eume</h3>
              <div className="edition-sub">One forest, six days</div>
              <div className="edition-meta">
                <span>6 days · ~45 km</span>
                <span>18 YOUTH · 5 COUNTRIES</span>
              </div>
              <p className="edition-text">The turn. No waymarks this time. Teambuilding, experiential adventure, reflection... all in one of the last Atlantic rainforests in Europe.


              </p>
              <a href="https://xeracion.typeform.com/intothewildIV" target="_blank" rel="noopener" className="edition-apply">Apply to edition 04 →</a>
            </div>
          </article>
        </div>
      </div>
    </section>);

}

Object.assign(window, { PastEditions });