// Into the Wild — Hero, Nav, Manifesto, Stats
const { useState, useEffect, useRef } = React;

function Logo({ size = 28 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 40 40" fill="none">
      <circle cx="20" cy="20" r="19" stroke="currentColor" strokeWidth="1.5" />
      <path d="M6 28 L14 16 L18 22 L24 12 L34 28 Z" fill="currentColor" />
      <circle cx="29" cy="11" r="3" fill="currentColor" />
    </svg>);

}

function Nav({ solid }) {
  return (
    <nav className={`nav ${solid ? 'nav-solid' : ''}`}>
      <a href="#top" className="nav-logo">
        <img
          className="nav-wordmark nav-wordmark-positive"
          src="assets/logo-positive.png"
          alt="Into the Wild" />
        <img
          className="nav-wordmark nav-wordmark-negative"
          src="assets/logo-negative.png"
          alt="" aria-hidden="true" />
      </a>
      <div className="nav-links">
        <a href="#manifesto" className="nav-link">Manifesto</a>
        <a href="#adventure" className="nav-link">Edition 04</a>
        <a href="#partners" className="nav-link">Coalition</a>
        <a href="https://xeracion.typeform.com/intothewildIV" target="_blank" rel="noopener" className="nav-cta">Apply ↗</a>
      </div>
    </nav>);

}

function Hero() {
  const [time, setTime] = useState('');
  useEffect(() => {
    const t = () => {
      const d = new Date();
      setTime(d.toUTCString().slice(17, 22) + ' UTC');
    };
    t();
    const i = setInterval(t, 30000);
    return () => clearInterval(i);
  }, []);

  return (
    <section className="hero paper-grain" id="top">
      <div className="hero-bg" />
      <div className="hero-topo" />

      <div className="hero-top">
        <span><span className="dot" /> Edition 04 · Fragas do Eume, Galicia · Summer 2026</span>
        <span>{''}</span>
      </div>

      <h1 className="hero-headline">
        <span className="line">Leave the</span>
        <span className="line outline">algorithm.</span>
        <span className="line">
          Find an <span className="accent">Atlantic</span>
        </span>
        <span className="line">
          <span className="marker"><span>rainforest,</span></span>
        </span>
        <span className="line">
          and your <em>better self.</em>
        </span>
      </h1>

      <div className="hero-bottom">
        <p className="hero-blurb">
          <em>Into the Wild</em> is an Erasmus+ adventure project that has
          walked three Caminos. For our <em>fourth edition</em> we're trading
          waymarked paths for the deep Atlantic forest of Fragas do Eume.
          Six days. You show up with a backpack. We handle the rest.
        </p>
        <div className="hero-meta">
          <div className="meta-block">
            <span className="meta-label">DATES</span>
            <span className="meta-val">17 · 24 July 2026</span>
          </div>
          <div className="meta-block">
            <span className="meta-label">Length</span>
            <span className="meta-val">6 days</span>
          </div>
          <div className="meta-block">
            <span className="meta-label">Location</span>
            <span className="meta-val">Galicia</span>
          </div>
          <div className="meta-block">
            <span className="meta-label">Cost to you</span>
            <span className="meta-val">€0</span>
          </div>
        </div>
      </div>
    </section>);

}

function Marquee() {
  const items = [
  "No wifi · No agenda · No phones after 9pm",
  "Cooked on fire",
  "Slept under stars",
  "Walked with strangers",
  "Got lost. On purpose.",
  "Funded by Erasmus+",
  "Est. 2023"];

  const full = [...items, ...items, ...items, ...items];
  return (
    <div className="marquee">
      <div className="marquee-track">
        {full.map((t, i) =>
        <React.Fragment key={i}>
            <span>{t}</span>
            <span className="star">✶</span>
          </React.Fragment>
        )}
      </div>
    </div>);

}

function Manifesto() {
  return (
    <section className="section manifesto paper-grain" id="manifesto">
      <div style={{ maxWidth: 1400, margin: '0 auto' }}>
        <div className="section-tag">
          <span className="tag-num">01</span>
          <span>The Idea</span>
        </div>
        <h2 className="section-title">
          We think <span className="outline">Europe</span> is
          <br />better learned <em>outside.</em>
        </h2>

        <div className="manifesto-grid">
          <p className="manifesto-lead">
            The best classroom has <em>no roof</em>, no power outlet, and
            no-one asking whether you've done the reading. Just a path,
            a map that's slightly wrong, and strangers who will be
            friends by Wednesday.
          </p>
          <div className="manifesto-body">
            <p>
              Into the Wild is an Erasmus+ experiment that began in 2023 on the
              Camino de Santiago. Three editions already, over 60 participants
              thirsty of adventure. Each edition left us with the same question...
              what if we make it even more challenging?
            </p>
            <p>
              So this year we're staying in one forest. Edition 04 is six days
              in Fragas do Eume, the last Atlantic rainforest in continental
              Europe. Three days of teambuilding, two days of experiential
              adventure, one day of reflection. Nobody graduates. Everyone leaves
              changed.
            </p>
            <div className="manifesto-sig">The Xeracion team</div>
          </div>
        </div>
      </div>
    </section>);

}

function Stats() {
  const stats = [
  { val: "04", unit: "edition", label: "Fourth gathering since 2023" },
  { val: "6", unit: "days", label: "In the Fragas do Eume forest" },
  { val: "20", unit: "participants", label: "Ages 18–30, 5 countries" },
  { val: "€0", unit: "", label: "Erasmus+ covers everything" }];

  return (
    <div className="stats">
      {stats.map((s, i) =>
      <div key={i}>
          <div className="stat-val">{s.val}<span className="unit">{s.unit}</span></div>
          <div className="stat-label">{s.label}</div>
        </div>
      )}
    </div>);

}

Object.assign(window, { Nav, Hero, Marquee, Manifesto, Stats, Logo });