/* Veld — extended sections: Fireflies, Chatham, Architects, Travelers, Crew, Tiers, FAQ */

const { useState: useState_v } = React;

/* ---------- FIREFLIES (magic / serendipity) ---------- */
function Fireflies() {
  return (
    <section className="fireflies-section" id="fireflies">
      <div className="firefly-bg parallax-active"></div>
      <div className="inner wrap">
        <span className="eyebrow">— Some of it on purpose. Some not. —</span>
        <h2>Magic blends with reality.<br/><em>After a while, you stop noticing</em>.</h2>

        <p className="body">
          Somewhere, on some evening, a cello will begin playing from a tower
          no map could find. A handwritten letter will be on your pillow
          answering a question you only asked yourself yesterday. A stranger
          will say the exact sentence you needed to hear, and disappear
          before you remember to ask their name.
        </p>
        <p className="body">
          Some of this is arranged. Some of it isn&rsquo;t.
          <em> By the third day you stop being able to tell which is which —
          and you stop wanting to.</em>
        </p>

        <div className="firefly-quote">
          Veld is the place we dreamed about as children. Where magic blends
          with reality, where every form of life arrives as its true self.
          We&rsquo;re not pretending it&rsquo;s real. <em>It is.</em>
          <span className="src">— Domnul ICS, on what Veld is</span>
        </div>

        <div className="firefly-sign">If a light appears in the corner of your eye — follow it.</div>
      </div>
    </section>
  );
}

/* ---------- THE PACT ---------- */
function Chatham() {
  return (
    <section className="chatham" id="pact">
      <div className="narrow">
        <span className="eyebrow">— The pact —</span>
        <div className="rule">
          What is shared here <em>stays</em> here.
        </div>
        <p className="meta">
          You may carry the idea home. The name belongs to the person
          who trusted you with it. This is the soil everything else grows from.
        </p>
        <div className="stamps">
          <span>No cameras</span>
          <span>No press</span>
          <span>No livestream</span>
          <span>No screenshots</span>
          <span>No quoting without asking</span>
        </div>
      </div>
    </section>
  );
}

/* ---------- ARCHITECTS ---------- */
function Architects() {
  return (
    <section className="architects" id="architects">
      <div className="wrap">
        <div className="sect-header header">
          <span className="eyebrow">— Who is holding the room —</span>
          <h2>Not a brand. A small <span className="accent">circle of humans</span>.</h2>
          <p className="sub">
            Veld isn&rsquo;t a company. It&rsquo;s a few people who kept noticing the same thing —
            that the conversations they wanted weren&rsquo;t happening anywhere — and decided
            to build the room.
          </p>
        </div>

        <div className="architects-grid">
          <div className="architect">
            <div className="role">Florin · The convener</div>
            <h3>Florin Bădiță</h3>
            <p className="credit">
              The kind of person who organises a midnight picnic for two hundred strangers
              and a protest for six hundred thousand — and finds both perfectly reasonable.
            </p>
            <p className="bio">
              He lives <em>between worlds</em>. He has put a country in the street, juggled fire
              at three in the morning, and built dinner tables where the keynote speaker
              ends up doing the dishes. Veld is the room he&rsquo;s been quietly
              rehearsing for, his whole life.
            </p>
            <div className="quote">
              &ldquo;The future is built in the spaces between rooms, not inside them.
              Veld is one of those spaces.&rdquo;
            </div>
          </div>

          <div className="architect">
            <div className="role">Aaron · The steward</div>
            <h3>Aaron Hsu</h3>
            <p className="credit">
              Has spent four years quietly making the same magic happen on four different
              continents — Vietnam, Greece, Medellín, Bermuda — for groups of fifteen to fifty.
            </p>
            <p className="bio">
              He believes the word &ldquo;retreat&rdquo; has been hollowed out, and that the
              actual thing — people living together for long enough to become real to each other —
              still works as well as it ever did. He brings the <em>quiet competence</em>
              that lets the magic happen on time.
            </p>
            <div className="quote">
              &ldquo;Everyone brings something. Everyone leaves with more.
              That&rsquo;s the only test that matters.&rdquo;
            </div>
          </div>

          <div className="architect">
            <div className="role">Priyanka · The keeper of the feeling</div>
            <h3>Priyanka</h3>
            <p className="credit">
              The one who keeps asking the harder question — &ldquo;but how will it feel?&rdquo; —
              until everyone in the room admits they don&rsquo;t yet know, and starts again.
            </p>
            <p className="bio">
              She holds the soft edges of Veld — the rituals, the care, the part of
              the week that has nothing to do with logistics and everything to do
              with whether you sleep well. <em>The connective tissue.</em>
            </p>
            <div className="quote">
              &ldquo;Other gatherings find people who are like-minded.
              We are looking for the like-hearted.&rdquo;
            </div>
          </div>

          <div className="architect">
            <div className="role">Domnul ICS · The keeper of the magic</div>
            <h3>Costin Ștefan Ignat</h3>
            <p className="credit">
              Community builder, trainer, musician. Believes a room with no music
              in it is a room half-built — and acts accordingly.
            </p>
            <p className="bio">
              He carries the part of Veld that resists being explained — the
              fairy-tale layer, the <em>place out of time</em>, the small impossible thing
              that turns a five-day event into something you keep meaning to write home about.
            </p>
            <div className="quote">
              &ldquo;Veld is the place we dreamed about as children.
              That is the only reason worth doing it.&rdquo;
            </div>
          </div>
        </div>

        <p style={{
          textAlign: 'center', marginTop: '64px',
          fontFamily: "'Cormorant', serif", fontStyle: 'italic', fontWeight: 300,
          fontSize: '20px', color: 'var(--ink-soft)'
        }}>
          With Ivan, Remy, and a quietly growing circle of hands you won&rsquo;t always see.
        </p>
      </div>
    </section>
  );
}

/* ---------- EARLY TRAVELERS (participant list) ---------- */
const TRAVELERS = [
  { mono: 'AD', name: 'Anahita Dalmia', title: 'CEO, Alterea Inc.',
    badge: 'Forbes 30 Under 30',
    tag: 'Interactive storytelling · NYC',
    blurb: 'Builds interactive narratives that change real-world behaviour. Strong fit for transformational experience design.' },
  { mono: 'AW', name: 'Alex Whitover', title: 'Artistic Director, Alterea',
    badge: 'Forbes 30 Under 30',
    tag: 'Narrative & theatre',
    blurb: 'Narrative and theatrical design specialist with deep game-design and creative direction expertise.' },
  { mono: 'JM', name: 'Jasper McEvoy', title: 'CSO, Alterea / Asset Mgr, NV5',
    badge: 'Forbes 30 Under 30',
    tag: 'Sustainability · Systems',
    blurb: 'Interdisciplinary strategist connecting sustainability, design, and systems thinking.' },
  { mono: 'AH', name: 'Aaron Hsu', title: 'Co-host. Investor, builder of rooms.',
    badge: 'Forbes 30 Under 30',
    tag: 'Founder residencies · Deeptech',
    blurb: 'Four years of founder residencies across four continents. Brings the quiet competence that lets the magic happen on time.' },
  { mono: 'FB', name: 'Florin Bădiță', title: 'Co-host. Activist, data scientist.',
    badge: 'Forbes 30 Under 30 · TEDx',
    tag: 'Civic tech · Romania',
    blurb: 'Brought 600,000 Romanians into the streets. Organises gatherings that weren\u2019t supposed to happen — movements, midnight picnics, dinners where the wait-staff and the speaker swap seats by dessert.' },
  { mono: 'CI', name: 'Costin Ștefan Ignat', title: 'Community builder, musician',
    badge: 'Project & event design',
    tag: 'Facilitation · Music',
    blurb: 'Blends culture, leadership, facilitation, and public participation to build experiences that strengthen communities.' },
  { mono: 'DK', name: 'Dorchess de Koning', title: 'Founder, Awe Academy',
    badge: 'COEE · Keynote speaker',
    tag: 'Learning journeys · L&D',
    blurb: 'Learning journeys for impact. Keynote on finding your why, with consultancy in L&D and experience design.' },
  { mono: 'SD', name: 'Sebastian Dobrescu', title: 'Screenwriter, actor, trainer',
    badge: 'TEDx · Participatory arts',
    tag: 'Story · Theatre',
    blurb: 'Making the world a more connected place through participatory art and storytelling.' },
  { mono: 'Hz', name: 'Hertz', title: 'Founder, StarCluster',
    badge: 'Security · Romania',
    tag: 'Hacking · Community',
    blurb: 'Romanian hacker and founder building at the intersection of security and community. Maker-and-breaker lens.' },
  { mono: 'AP', name: 'Alexandra Pînzariu', title: 'Civic-edupreneur, futurist',
    badge: 'WEF Global Shaper',
    tag: 'Futures · Education',
    blurb: 'Humanist shaping regenerative futures through intergenerational dialogue and speculative design.' },
  { mono: 'JO', name: 'Jean-Baptiste Odobestianu', title: 'Music therapist, TOTEM Method',
    badge: 'Music therapy',
    tag: 'Sound · Presence',
    blurb: 'Guides percussion, didgeridoo, flutes, strings — using sound as a path to presence and connection.' },
  { mono: 'P.', name: 'Priyanka', title: 'Co-host, keeper of the feeling',
    badge: 'Vision · Rituals',
    tag: 'Care · Hosting',
    blurb: 'The connective tissue. Holds the room, keeps the magic from being marketed.' },
];

function Travelers() {
  return (
    <section className="travelers" id="travelers">
      <div className="wrap">
        <div className="sect-header header">
          <span className="eyebrow">— Who belongs here —</span>
          <h2>Two kinds of people <span className="accent">find their way here</span>.</h2>
        </div>

        <div className="belong-routes">
          <div className="belong-route">
            <div className="route-label">Those who&rsquo;ve earned their seat</div>
            <p>
              Not by title, but by doing. Founders who&rsquo;ve built something real.
              Creators who&rsquo;ve made something that moved people. Thinkers who&rsquo;ve
              put ideas into the world. Community builders who know what it costs.
              <em> You don&rsquo;t need to explain yourself here; the room already knows.</em>
            </p>
          </div>
          <div className="belong-route">
            <div className="route-label">Those vouched for by someone inside</div>
            <p>
              Every participant carries one invitation for someone they&rsquo;d stake
              their reputation on. Not a colleague, not a contact:
              <em> someone they genuinely believe belongs in this room.</em>
            </p>
          </div>
        </div>

        <p className="belong-note">
          The faces below are a shorthand, not a hierarchy. They exist to protect
          the quality of the room, not to celebrate the people in it.
        </p>

        <div className="travelers-grid">
          {TRAVELERS.map((p, i) => (
            <div className="traveler" key={i}>
              <div className="monogram">{p.mono}</div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <span className="badge">{p.badge}</span>
                <h4 className="name">{p.name}</h4>
                <div className="title">{p.title}</div>
                <span className="tag">{p.tag}</span>
                <p className="blurb">{p.blurb}</p>
              </div>
            </div>
          ))}
        </div>

        <p className="travelers-footnote">
          12 confirmed of 80 · The remaining 68 are being chosen — quietly, one letter at a time.
        </p>
      </div>
    </section>
  );
}

/* ---------- THE CREW ---------- */
function Crew() {
  return (
    <section className="crew" id="crew">
      <div className="narrow inner">
        <span className="eyebrow">— The crew —</span>
        <h2>Twenty of us <span className="accent">arrive before you do</span>.</h2>
        <p>
          They are not staff. They are <em>co-conspirators</em> — artists, organisers,
          experience designers, fellow travellers — who set the tables, light
          the fires, hold space for what emerges, and disappear when they are
          not needed.
        </p>
        <p>
          Some will lead a workshop. Some will play music at 2am. Some will
          simply make sure the coffee appears at dawn.
        </p>
        <p>
          <em>You won&rsquo;t always know who they are. That is intentional.</em>
        </p>
        <p style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: '11px',
          letterSpacing: '0.22em', textTransform: 'uppercase',
          color: 'var(--accent)', marginTop: '32px' }}>
          Your contribution covers their travel, their meals, and the infrastructure that makes the magic possible.
        </p>
      </div>
    </section>
  );
}

/* ---------- TIERS ---------- */
const TIERS = [
  {
    name: 'Classic',
    flag: 'Founding · 4 of 10 left',
    price: '1,800',
    strikethrough: 'Standard €2,800',
    beds: '2 to 4 of you, in a simple shared chamber',
    bath: 'Bathroom usually shared, often just along the hall',
    desc: 'Baseline entry. A bed in a clean, modest, shared room — same complete arc as every other tier.',
    features: [
      'All five days, four nights',
      'Shared chamber (2–4 per room)',
      'Every feast, ritual, and dispatch',
      'Eligible for the private-room add-on',
    ],
    cta: 'Send your letter',
    featured: false,
  },
  {
    name: 'Deluxe',
    flag: 'Founding · 7 of 10 left',
    price: '2,500',
    strikethrough: 'Standard €3,900',
    beds: '2 to a room — you and one other traveller',
    bath: 'Bathroom shared between the two of you, or close by',
    desc: 'A larger, more comfortable shared room. Same arc; more elbow room and a quieter night.',
    features: [
      'All five days, four nights',
      'Larger shared room (2 per room)',
      'Every feast, ritual, and dispatch',
      'Priority above Classic for placement',
    ],
    cta: 'Send your letter',
    featured: true,
  },
  {
    name: 'Suite',
    flag: null,
    price: '4,750',
    strikethrough: null,
    beds: '2 to 4 of you, in a named room from the castle\u2019s legends',
    bath: 'Most named rooms have their own bathroom',
    desc: 'The themed rooms — Knight, Merlin, Hunter, Castelan\u2019s, Wizard — still shared, but with the character of a small museum.',
    features: [
      'All five days, four nights',
      'Named themed room (2–4 per room)',
      'Every feast, ritual, and dispatch',
      'First pick of the legendary rooms',
    ],
    cta: 'Send your letter',
    featured: false,
  },
];

function Tiers() {
  return (
    <section className="tiers" id="tiers">
      <div className="wrap">
        <div className="sect-header header">
          <span className="eyebrow">— Contribution —</span>
          <h2>Three <span className="accent">thresholds</span>. All shared. One arc.</h2>
          <p className="sub">
            Every chamber in Veld is shared, that is part of how the magic works.
            You sleep two, three, or four to a room, depending on which threshold
            you cross. The arc, the meals, the fireflies are identical for everyone.
          </p>
        </div>

        <div className="tiers-grid">
          {TIERS.map((t, i) => (
            <div className={`tier ${t.featured ? 'featured' : ''}`} key={i}>
              {t.flag && <div className="tier-flag">{t.flag}</div>}
              <div className="tier-name">{t.name}</div>
              <div className="tier-price">
                <span className="ccy">€</span>{t.price}
              </div>
              <div className="tier-strikethrough">
                {t.strikethrough ? <s>{t.strikethrough}</s> : <span>&nbsp;</span>}
              </div>
              <div className="tier-beds">· {t.beds}</div>
              {t.bath && <div className="tier-beds tier-bath">· {t.bath}</div>}
              <div className="tier-desc">{t.desc}</div>
              <ul>
                {t.features.map((f, j) => <li key={j}>{f}</li>)}
              </ul>
              <a href="#apply" className="tier-cta">{t.cta}</a>
            </div>
          ))}
        </div>

        <div className="private-note">
          <span className="eyebrow" style={{ display: 'block', marginBottom: '14px' }}>— A private room —</span>
          <p>
            Three private rooms exist in the entire castle. <strong>+€2,800</strong>, first-come,
            for those who genuinely cannot share. Available only to Classic applicants after acceptance.
            <em> If you can share, we hope you will — the conversations at 2am tend to start there.</em>
          </p>
        </div>

        <p className="tiers-footnote">
          Bathroom arrangements vary room to room &mdash; some are en-suite, some are
          shared along the hall. We confirm your exact room and its facilities before
          you arrive; never a surprise at the gate.
        </p>

        <p className="tiers-footnote">
          Every application is read by a human. A separate Castle Artist Exchange
          reserves ten seats at <strong style={{ color: 'var(--accent)', fontWeight: 500 }}>€500</strong> for
          practising artists, by application.
        </p>
      </div>
    </section>
  );
}

/* ---------- FAQ ---------- */
const FAQS = [
  {
    q: "What is Veld, exactly?",
    a: "Five days and four nights in a 13th-century castle with eighty people who would normally never share a dinner table. A <em>community of communities</em>. What you bring is the programme — every conversation, every fire-circle, every salon shaped by whoever shows up willing to bring something."
  },
  {
    q: "What kind of event is this, really?",
    a: "Closer to a residency than anything else. Veld is co-created — anchored by rituals that make strangers feel like collaborators by Tuesday night, and shaped by everyone who walks through the gate. Less program, more <em>place out of time</em>."
  },
  {
    q: "Who is this actually for?",
    a: "Doers, thinkers, and creators who are tired of explaining themselves. People who can hold a long conversation without checking their phone. People who would rather contribute than network. <em>You&rsquo;ll know.</em>"
  },
  {
    q: "How do I apply?",
    a: "Send your letter through the form below. Tell us who you are in your own words — not your résumé. We read every one, usually within a week. If we say yes, we send pricing details and a quiet onboarding call."
  },
  {
    q: "Veld accepts everyone — so why apply at all?",
    a: "Anyone can write to us, and we read every letter ourselves. But Veld only works at eighty. We&rsquo;re looking for a <em>blend</em> — not a hierarchy, not a gate. Selection is about how the room composes, not whose résumé wins."
  },
  {
    q: "What does my contribution actually pay for?",
    a: "The castle, the food on your plate, the crew&rsquo;s travel and meals, and the artists who quietly weave the week. Every euro stays inside the room. <em>That&rsquo;s the entire economy.</em>"
  },
  {
    q: "What is the Veld pact?",
    a: "What is shared at Veld stays at Veld. You may carry the idea home; the name belongs to the person who trusted you with it. No cameras, no press, no screenshots, no quoting without asking. <em>This is the soil everything else grows from.</em>"
  },
  {
    q: "What if I'm not accepted?",
    a: "You&rsquo;ll hear back honestly. Most no&rsquo;s are about how the eighty compose, not about worth — and we often suggest someone in our circle who hosts something closer to what you&rsquo;re looking for."
  },
  {
    q: "Will my life change?",
    a: "We make no promises. We&rsquo;ve seen weeks like this quietly rewrite careers, friendships, and a few life directions. We&rsquo;ve also seen people leave with one good idea and a tired smile. Both are legitimate outcomes."
  },
];

function FAQ() {
  const [open, setOpen] = useState_v(0);
  return (
    <section className="faq" id="faq">
      <div className="wrap">
        <div className="sect-header header">
          <span className="eyebrow">— Letters from the future —</span>
          <h2>Questions <span className="accent">we&rsquo;re asked</span>.</h2>
        </div>

        <div className="faq-list">
          {FAQS.map((f, i) => (
            <div className={`faq-item ${open === i ? 'open' : ''}`} key={i}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span>{f.q}</span>
                <span className="chev">+</span>
              </button>
              <div className="faq-a" dangerouslySetInnerHTML={{ __html: f.a }} />
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- SPIRIT (removed — section too academic; co-creation point lives in Movements) ---------- */
function Spirit() { return null; }

/* ---------- PATRONAGE ---------- */
const CLAIMS = [
  { n: '01', name: 'The Chronicle',
    price: '€45,000',
    desc: 'The legacy claim. Your name inscribed on the first page of the hand-bound chronicle that gets carried into every Veld that follows.',
    mark: '“Begun in the year of ___, by ___.” One line, on page one. Forever.' },
  { n: '02', name: 'The Feast',
    price: '€24,500',
    desc: 'Co-design one of the two candlelit dinners — the theme, the menu, the seating, the opening toast. Eighty people around one long table, your evening.',
    mark: 'Your name on every place setting, and a line in the chronicle. No banner, no logo.' },
  { n: '03', name: 'The Library',
    price: '€18,000',
    desc: 'Dedicate the castle library. Curate twenty to thirty books with custom bookplates carrying a phrase of your choosing. Participants are welcome to take them home.',
    mark: 'The bookplate inside each volume. Your phrase. Their hands. Their shelves, after.' },
  { n: '04', name: 'A Firefly',
    price: '€16,000',
    desc: 'Commission one Firefly for the full five days. You define the character brief, the tension they carry into a room, and the question they leave behind.',
    mark: 'Only the firefly knows your name. They will keep it.' },
  { n: '05', name: 'The Threshold Drink',
    price: '€5,200',
    desc: 'The herbal tea station at the entrance to the Confessional — the small ritual that slows people down before they cross. Warmth before honesty.',
    mark: 'One card. Your name. One sentence. The rest is steam and silence.' },
  { n: '06', name: 'The Wax Seal',
    price: '€4,500',
    desc: 'Steer the design of the official wax seal of Veld — used on every sealed envelope, the chronicle cover, and the departure letter we mail you a week later.',
    mark: 'Credited as the Keeper of the Seal in the chronicle. Eighty letters home, all stamped with your design.' },
];

function Patronage() {
  return (
    <section className="patronage" id="patronage">
      <div className="wrap">
        <div className="sect-header header">
          <span className="eyebrow">— Quiet patronage —</span>
          <h2>Light a fire, and let strangers <span className="accent">warm by it</span>.</h2>
        </div>

        <p className="patronage-intro">
          Not everyone can come to Veld. <em>Some can give it to others.</em>
          One claim, one patron — no logos, no banners, no sponsor decks.
          Every patronage leaves a single, honest mark inside the week.
        </p>

        <div className="patronage-grid">
          {CLAIMS.map((c, i) => (
            <div className="claim" key={i}>
              <div className="num">{c.n} · Claim</div>
              <h4>{c.name}</h4>
              <div className="price">{c.price}</div>
              <p>{c.desc}</p>
              <div className="mark">{c.mark}</div>
            </div>
          ))}
        </div>

        <p className="patronage-footnote">
          Patrons need not attend. Their presence is still <em>tangible</em>.
          More claims available on request.
        </p>
      </div>
    </section>
  );
}

/* ---------- NAMED ROOMS GALLERY ---------- */
const NAMED_ROOMS = [
  { name: 'The Knight',   meta: 'Suite · 2 sharing',
    legend: 'Heavy oak, a fireplace that pretends to be older than it is.',
    img: 'images/room-knight.jpg' },
  { name: 'Merlin',       meta: 'Suite · 3 sharing',
    legend: 'A small library annex. The window faces east on purpose.',
    img: 'images/room-merlin.jpg' },
  { name: 'The Hunter',   meta: 'Suite · 2 sharing',
    legend: 'Deer antlers, dark wood, the quietest corner of the second floor.',
    img: 'images/room-hunter.jpg' },
  { name: 'The Wizard',   meta: 'Suite · 4 sharing',
    legend: 'Star-patterned ceiling. Children would never sleep here.',
    img: 'images/room-wizard.jpg' },
  { name: 'Anna Maria’s', meta: 'Suite · 3 sharing',
    legend: 'Named for the last lady of the castle. She still has the better view.',
    img: 'images/room-anna-maria.jpg' },
  { name: 'The Wanderer', meta: 'Suite · 2 sharing',
    legend: 'Maps on every wall, none of them current. The right room for arriving.',
    img: 'images/room-podroznika.jpg' },
];

function NamedRooms() {
  return (
    <section className="rooms" id="rooms">
      <div className="wrap">
        <div className="sect-header header">
          <span className="eyebrow">— The named rooms —</span>
          <h2>Six chambers that <span className="accent">remember</span>.</h2>
          <p className="sub">
            The themed rooms in the Suite tier — each carries a name the castle has used
            for longer than any of us. Still shared, never solo. The bed under you
            comes with a small piece of legend.
          </p>
        </div>

        <div className="rooms-grid">
          {NAMED_ROOMS.map((r, i) => (
            <div className="room" key={i}>
              <div className="img" style={{ backgroundImage: `url("${r.img}")` }}></div>
              <div className="copy">
                <div className="meta">{r.meta}</div>
                <h4>{r.name}</h4>
                <div className="legend">{r.legend}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* Export to window so veld-app.jsx can use them */
Object.assign(window, {
  Fireflies, Chatham, Architects, Travelers, Crew, Tiers, FAQ,
  Spirit, Patronage, NamedRooms,
});
