// Into the Wild — Testimonials, Partners, Apply, Footer, Tweaks

function Testimonials() {
  const quotes = [
  {
    q: "I learned that asking for help doesn't make you weak. I teamed up with 3 strangers from different cultures to achieve one same goal — and learned how cool it is to have the opportunity to do projects like this.",
    who: "Maria, 26", country: "Spain", edition: "Edition II", flag: "#AA151B",
    rot: "-1.5deg"
  },
  {
    q: "I don't need a phone to live fully. Europe and its people are wonderful.",
    who: "Léo, 24", country: "France", edition: "Edition II", flag: "#0055A4",
    rot: "1.2deg"
  },
  {
    q: "You don't need much to be happy. Disconnect, have less stimulation from outside — it's a very valuable way to reconnect to your true self.",
    who: "Clara, 27", country: "Italy", edition: "Edition I", flag: "#009246",
    rot: "-0.6deg"
  },
  {
    q: "To be more compassionate and collaborative. To enjoy the journey more than the goal. How important the connection with people is to our mental well-being. How empathy can be magical.",
    who: "Afonso, 28", country: "Portugal", edition: "Edition I", flag: "#006600",
    rot: "0.8deg"
  },
  {
    q: "I learnt I am much more resilient than I thought. I learnt to never give up. I learnt that most people are actually kind in their essence, even if they don't always act like it.",
    who: "Dimitra, 25", country: "Greece", edition: "Edition III", flag: "#0D5EAF",
    rot: "-1.1deg"
  },
  {
    q: "Most of our fears are a product of our limiting beliefs. We can almost always prove them wrong. Life is more interesting and intense without a smart phone in your pocket.",
    who: "Marta, 29", country: "Spain", edition: "Edition II", flag: "#AA151B",
    rot: "1.5deg"
  }];

  return (
    <section className="section testimonials" style={{ backgroundColor: 'rgb(77, 70, 52)' }}>
      <div style={{ maxWidth: 1400, margin: '0 auto' }}>
        <div className="section-tag">
          <span className="tag-num">05</span>
          <span>WHAT PREVIOUS ADVENTURERS SAY</span>
        </div>
        <h2 className="section-title" style={{ color: 'var(--cream)' }}>
          Don't take it <em>from us.</em>
        </h2>

        <div className="testi-grid">
          {quotes.map((t, i) =>
          <div key={i} className="testi-card" style={{ '--rot': t.rot }}>
              <p className="testi-quote">{t.q}</p>
              <div className="testi-author">
                <span className="flag" style={{ background: t.flag }} />
                <span>{t.who} · {t.country} · {t.edition}</span>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

function Partners() {
  const countries = [
    {
      code: "ES",
      name: "Spain",
      sub: "Lead · Xeracion",
      flag: (
        <svg viewBox="0 0 6 4" preserveAspectRatio="none" aria-hidden="true">
          <rect width="6" height="4" fill="#AA151B" />
          <rect y="1" width="6" height="2" fill="#F1BF00" />
        </svg>
      )
    },
    {
      code: "IT",
      name: "Italy",
      sub: "Partner",
      flag: (
        <svg viewBox="0 0 3 2" preserveAspectRatio="none" aria-hidden="true">
          <rect width="1" height="2" x="0" fill="#009246" />
          <rect width="1" height="2" x="1" fill="#F1F2F1" />
          <rect width="1" height="2" x="2" fill="#CE2B37" />
        </svg>
      )
    },
    {
      code: "PT",
      name: "Portugal",
      sub: "Partner",
      flag: (
        <svg viewBox="0 0 5 3" preserveAspectRatio="none" aria-hidden="true">
          <rect width="2" height="3" fill="#006600" />
          <rect width="3" height="3" x="2" fill="#FF0000" />
          <circle cx="2" cy="1.5" r="0.55" fill="#FFCC29" stroke="#000" strokeWidth="0.03" />
          <circle cx="2" cy="1.5" r="0.32" fill="#FFFFFF" stroke="#000" strokeWidth="0.025" />
        </svg>
      )
    },
    {
      code: "FR",
      name: "France",
      sub: "Partner",
      flag: (
        <svg viewBox="0 0 3 2" preserveAspectRatio="none" aria-hidden="true">
          <rect width="1" height="2" x="0" fill="#0055A4" />
          <rect width="1" height="2" x="1" fill="#FFFFFF" />
          <rect width="1" height="2" x="2" fill="#EF4135" />
        </svg>
      )
    },
    {
      code: "GR",
      name: "Greece",
      sub: "Partner",
      flag: (
        <svg viewBox="0 0 27 18" preserveAspectRatio="none" aria-hidden="true">
          <rect width="27" height="18" fill="#0D5EAF" />
          {[1,3,5,7].map((i) => (
            <rect key={i} y={i*2} width="27" height="2" fill="#FFFFFF" />
          ))}
          <rect x="0" y="0" width="10" height="10" fill="#0D5EAF" />
          <rect x="4" y="0" width="2" height="10" fill="#FFFFFF" />
          <rect x="0" y="4" width="10" height="2" fill="#FFFFFF" />
        </svg>
      )
    }
  ];

  return (
    <section className="section countries" id="partners">
      <div style={{ maxWidth: 1400, margin: '0 auto' }}>
        <div className="section-tag">
          <span className="tag-num">06</span>
          <span>THE COALITION — FIVE COUNTRIES, ONE FOREST</span>
        </div>
        <h2 className="section-title">
          Five <em>flags,</em>
          <br />one <span className="outline">handshake.</span>
        </h2>

        <div className="countries-grid">
          {countries.map((c, i) => (
            <div key={c.code} className="country-cell">
              <div className="country-flag">{c.flag}</div>
              <div className="country-meta">
                <span className="country-num">0{i + 1}</span>
                <div>
                  <div className="country-name">{c.name}</div>
                  <div className="country-sub">{c.code} · {c.sub}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>);

}

function Apply() {
  return (
    <section className="section apply" id="apply">
      <div className="section-tag" style={{ justifyContent: 'center', color: 'var(--terra)' }}>
        <span className="tag-num">07</span>
        <span>Applications — closing June 17, 2026</span>
      </div>
      <h2 className="big-title">
        Come <em>find out.</em>
      </h2>
      <p className="apply-sub">
        Six questions. One short video. No CV, no GPA, no "tell us about a time
        you demonstrated leadership." We want to know if you'd share your last apple.
      </p>

      <a href="https://xeracion.typeform.com/intothewildIV" target="_blank" rel="noopener" className="apply-btn">
        Start your application <span className="arrow">→</span>
      </a>

      <div className="apply-meta">
        <span>Age
          <strong>18 – 30</strong>
        </span>
        <span>Cost
          <strong>€0</strong>
        </span>
        <span>Deadline
          <strong>17 · 06 · 26</strong>
        </span>
        <span>Spots available
          <strong>20</strong>
        </span>
      </div>
    </section>);

}

function Footer() {
  return (
    <footer className="footer">
      <div className="footer-top">
        <div className="footer-word">
          <img
            className="footer-wordmark"
            src="assets/logo-negative.png"
            alt="Into the Wild" />
        </div>
        <div className="footer-col">
          <h4>The Project</h4>
          <ul>
            <li><a href="#manifesto">Manifesto</a></li>
            <li><a href="#adventure">Adventure</a></li>
            <li>
              <a
                href="https://www.youtube.com/watch?v=M60l-IGsPkw&list=PLGqbOK8rCMslB8xaT9ZzqBiePgBYvK8nz"
                target="_blank"
                rel="noopener">Videos</a>
            </li>
          </ul>
        </div>
        <div className="footer-col">
          <h4>Practical</h4>
          <ul>
            <li><a href="#apply">Apply</a></li>
            <li>
              <a
                href="https://canva.link/intothewildIV"
                target="_blank"
                rel="noopener">Infopack</a>
            </li>
          </ul>
        </div>
        <div className="footer-col">
          <h4>Reach us</h4>
          <ul>
            <li><a href="mailto:info@xeracion.org">info@xeracion.org</a></li>
            <li><a href="https://instagram.com/xeracion" target="_blank" rel="noopener">Instagram · @xeracion</a></li>
            <li><a href="https://xeracion.org" target="_blank" rel="noopener">xeracion.org</a></li>
          </ul>
        </div>
      </div>
      <div className="footer-bottom">
        <span>© 2023–2026 INTO THE WILD PROJECT · MADE BY XERACION TEAM</span>
        <span className="erasmus-badge">
          Co-funded by Erasmus+ · EU programme
        </span>
      </div>
    </footer>);
}

function TweaksPanel({ state, setState, visible }) {
  if (!visible) return null;
  const palettes = [
  { id: 'forest', label: 'Forest', swatches: ['#2D4A2B', '#C44A1B', '#E8B84C', '#EFE7D6'],
    vars: { '--forest': '#2D4A2B', '--forest-deep': '#1E3320', '--terra': '#C44A1B', '--terra-soft': '#D96A3A', '--sun': '#E8B84C', '--cream': '#EFE7D6', '--paper': '#FAF5E6', '--ink': '#1A1F16' } },
  { id: 'sage', label: 'Sage', swatches: ['#3B4A3F', '#8B5A3C', '#D4722A', '#F5F1E8'],
    vars: { '--forest': '#3B4A3F', '--forest-deep': '#2B3A2F', '--terra': '#8B5A3C', '--terra-soft': '#D4722A', '--sun': '#D4A24C', '--cream': '#F5F1E8', '--paper': '#FBF7EB', '--ink': '#1E2520' } },
  { id: 'night', label: 'Campfire', swatches: ['#0F1A14', '#D4A24C', '#C24A2C', '#E8DCC4'],
    vars: { '--forest': '#0F1A14', '--forest-deep': '#080E0B', '--terra': '#C24A2C', '--terra-soft': '#D4722A', '--sun': '#D4A24C', '--cream': '#E8DCC4', '--paper': '#F0E7D0', '--ink': '#0F1A14' } },
  { id: 'poster', label: 'Poster', swatches: ['#1E3A2E', '#E86A3C', '#F4C430', '#FDFBF4'],
    vars: { '--forest': '#1E3A2E', '--forest-deep': '#122620', '--terra': '#E86A3C', '--terra-soft': '#F0885A', '--sun': '#F4C430', '--cream': '#FDFBF4', '--paper': '#FFFEF6', '--ink': '#15261D' } }];


  const setPalette = (id) => {
    const pal = palettes.find((p) => p.id === id);
    Object.entries(pal.vars).forEach(([k, v]) => document.documentElement.style.setProperty(k, v));
    const next = { ...state, palette: id };
    setState(next);
    postEdit(next);
  };

  const setTone = (v) => {
    document.documentElement.style.setProperty('--serif',
    v === 'serif' ? "'Fraunces', Georgia, serif" :
    v === 'mono' ? "'JetBrains Mono', ui-monospace, monospace" :
    "'Archivo Narrow', 'Oswald', sans-serif");
    const next = { ...state, headlineFont: v };
    setState(next);
    postEdit(next);
  };

  const postEdit = (next) => {
    window.parent.postMessage({
      type: '__edit_mode_set_keys',
      edits: { palette: next.palette, headlineFont: next.headlineFont, grainOn: next.grainOn }
    }, '*');
  };

  const toggleGrain = () => {
    const grainOn = !state.grainOn;
    document.body.classList.toggle('grain-off', !grainOn);
    const next = { ...state, grainOn };
    setState(next);
    postEdit(next);
  };

  return (
    <div className="tweaks-panel">
      <h5>Tweaks</h5>

      <div className="tweaks-row">
        <label>Palette</label>
        <div className="tweaks-swatches">
          {palettes.map((p) =>
          <div
            key={p.id}
            className={`swatch ${state.palette === p.id ? 'active' : ''}`}
            title={p.label}
            onClick={() => setPalette(p.id)}
            style={{
              background: `conic-gradient(${p.swatches[0]} 0 25%, ${p.swatches[1]} 0 50%, ${p.swatches[2]} 0 75%, ${p.swatches[3]} 0)`
            }} />

          )}
        </div>
      </div>

      <div className="tweaks-row">
        <label>Headline font</label>
        <select value={state.headlineFont} onChange={(e) => setTone(e.target.value)}>
          <option value="serif">Editorial italic serif</option>
          <option value="display">Condensed grotesk</option>
          <option value="mono">Mono (typewriter)</option>
        </select>
      </div>

      <div className="tweaks-row">
        <label style={{ display: 'flex', alignItems: 'center', gap: 8, cursor: 'pointer' }}
        onClick={toggleGrain}>
          <span style={{
            width: 14, height: 14,
            border: '1.5px solid var(--ink)',
            background: state.grainOn ? 'var(--ink)' : 'transparent',
            borderRadius: 2
          }} />
          <span>Paper grain</span>
        </label>
      </div>

      <div style={{ fontSize: 10, opacity: 0.6, marginTop: 10, lineHeight: 1.4 }}>
        Tip · Toggle <strong>Tweaks</strong> in the toolbar to hide this.
      </div>
    </div>);

}

Object.assign(window, { Testimonials, Partners, Apply, Footer, TweaksPanel, Brandmark });

function Brandmark() {
  return (
    <section className="brandmark-section" id="brandmark">
      <div className="brandmark-inner">
        <div className="section-tag" style={{ color: 'var(--terra)' }}>
          <span className="tag-num">★</span>
          <span>THE MARK · stamped on every backpack</span>
        </div>

        <div className="brandmark-grid">
          <figure className="brandmark-card brandmark-positive">
            <div className="brandmark-stage">
              <img src="assets/logo-positive.png" alt="Into the Wild — positive" />
            </div>
            <figcaption>
              <span className="bm-num">01</span>
              <span className="bm-label">Positive</span>
              <span className="bm-spec">forest ink · paper #FAF5E6</span>
            </figcaption>
          </figure>

          <figure className="brandmark-card brandmark-negative">
            <div className="brandmark-stage">
              <img src="assets/logo-negative.png" alt="Into the Wild — negative" />
            </div>
            <figcaption>
              <span className="bm-num">02</span>
              <span className="bm-label">Negative</span>
              <span className="bm-spec">cream #EFE7D6 · ink #1A1F16</span>
            </figcaption>
          </figure>
        </div>

        <p className="brandmark-foot">
          Use the <strong>positive</strong> on paper, cream and pale stocks ·
          the <strong>negative</strong> over forest, campfire night
          and any photograph darker than coffee. Never recolour. Never stretch.
          Never lay it over moss without breathing room.
        </p>
      </div>
    </section>);
}