// v5 sections —
//  • Invitation: restored "An Invitation" title; body unchanged
//  • Pillars: new "lens" lines (no duplicate essences)
//  • Bio (StoryV5): "Imagine standing on a beach" storm rewrite + portrait photo
//  • New: WhyTheRavenV5 quiet block
//  • New: BridgeV5 line between bio and gatherings
//  • Gatherings: honesty line about dates
//  • Contact: hope@unchartedpathways.com, Instagram + Substack wired, MailerLite form
//  • New: PrivacyNoticeV5 (GDPR-friendly, expandable in footer)
//  • Footer: © Uncharted Pathways

const { useState: useStateS5, useRef: useRefS5 } = React;

// ----- Sigil divider -----
function SigilDividerV5() {
  return (
    <div className="sigil-divider" aria-hidden="true">
      <svg viewBox="0 0 200 40" fill="none">
        <line x1="0" y1="20" x2="70" y2="20" stroke="currentColor" strokeWidth="0.5" opacity="0.6"/>
        <line x1="130" y1="20" x2="200" y2="20" stroke="currentColor" strokeWidth="0.5" opacity="0.6"/>
        <g transform="translate(100, 20)">
          <path d="M -8 -4 Q -6 -8 -2 -8 Q 4 -8 8 -4 L 14 0 L 8 2 L 4 6 L 0 5 L -4 7 L -8 4 Z" fill="currentColor" opacity="0.9"/>
        </g>
        <g transform="translate(80, 20)"><rect x="0" y="-2" width="2" height="4" transform="rotate(45 1 0)" fill="currentColor" opacity="0.5"/></g>
        <g transform="translate(120, 20)"><rect x="0" y="-2" width="2" height="4" transform="rotate(45 1 0)" fill="currentColor" opacity="0.5"/></g>
      </svg>
    </div>
  );
}

// Small ornament — for the Invitation header
function OrnamentV5() {
  return (
    <div className="ornament-v5" aria-hidden="true">
      <span className="ornament-line"></span>
      <span className="ornament-diamond"></span>
      <span className="ornament-line"></span>
    </div>
  );
}

// ----- Nav -----
function NavV5({ theme, toggleTheme }) {
  const next = theme === 'twilight' ? 'Day' : 'Night';
  return (
    <nav className="nav">
      <div className="nav-brand">
        {/* Compact logo lockup: flying raven + gold rule + Cinzel wordmark.
            Tagline is omitted at nav size — reserved for hero/social. */}
        <a className="logo-fa compact" href="#" aria-label="Uncharted Pathways">
          <img className="lf-mark" src="assets/raven-frames/flap-1.png" alt="" />
          <div className="lf-rule"></div>
          <div className="lf-wm">Uncharted&nbsp;&nbsp;Pathways</div>
        </a>
      </div>
      <div className="nav-right">
        <div className="nav-links">
          <a href="#invitation">Invitation</a>
          <a href="#pillars">Pillars</a>
          <a href="#draw">Draw</a>
          <a href="#story">Story</a>
          <a href="#gatherings">Gatherings</a>
          <a href="#contact">Reach</a>
        </div>
        <button
          className="theme-toggle"
          onClick={toggleTheme}
          aria-label={`Switch to ${next.toLowerCase()} mode`}
          title={`Switch to ${next.toLowerCase()} mode`}
        >
          <span className="toggle-icon" aria-hidden="true">
            {theme === 'twilight' ? (
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
                <circle cx="12" cy="12" r="4"/>
                <path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41"/>
              </svg>
            ) : (
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
                <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
              </svg>
            )}
          </span>
          <span className="toggle-label">{next}</span>
        </button>
      </div>
    </nav>
  );
}

// ----- Hero -----
function HeroV5() {
  return (
    <section className="hero">
      <div>
        {/* Hero centerpiece: large perched raven (the original, beautiful art),
            with the wordmark + tagline set below as a Flight-Above-style lockup
            sans flying mark. The nav keeps the flying-raven compact lockup. */}
        <img
          src="assets/raven.png"
          alt="A raven — the symbol of Uncharted Pathways"
          className="hero-raven"
        />
        <div className="hero-wordmark">
          <div className="hero-wm-rule"></div>
          <div className="hero-wm-name">Uncharted&nbsp;&nbsp;Pathways</div>
          <div className="hero-wm-tag">a place to find your hope</div>
        </div>
        <h1 className="hero-title" data-section-title>
          Come as you are.<br />
          Leave remembering <span className="amp">who</span> you are meant to be.
        </h1>
        <p className="hero-tag">
          A place to help you find your hope — as it means to you.
        </p>
        <div className="hero-quote">
          Hope is the bedrock you can never fall through into the void —<br/>
          and the star, the light to follow in the darkest days.
        </div>
        <div className="hero-cta">
          <a className="btn solid" href="#draw">Draw Your Card</a>
          <a className="btn ghost" href="#invitation">Read More</a>
        </div>
      </div>
      <div className="scroll-hint">Scroll · Walk Onward</div>
    </section>
  );
}

// ----- The Invitation — RESTORED original title -----
function InvitationV5() {
  return (
    <section id="invitation">
      <div className="container narrow invitation fade-in">
        <OrnamentV5 />
        <div className="smallcaps invitation-label" data-section-title>An Invitation</div>

        <p className="lead">
          Things feel heavy. It's a lot. And it's not just you —
          but you're also <span className="glow">not helpless</span>.
        </p>

        <ul className="star-list">
          <li>
            <span className="star-lead">Joy is your quiet rebellion</span>
            The world is built to make you feel small. Joy is something they cannot take. It is yours.
          </li>
          <li>
            <span className="star-lead">Observe — don't absorb</span>
            Ask: whose fear is this, really? If it isn't yours, give it back to the earth.
          </li>
          <li>
            <span className="star-lead">Find your people</span>
            You are not meant to do this alone. Welcome each other home, no questions asked.
          </li>
        </ul>

        <p className="lead">
          Choose love. Seek joy. <span className="glow">Find your hope.</span> Watch what happens next.
        </p>
        <div className="signoff">— Kerry, your Hope Wayfinder</div>
      </div>
    </section>
  );
}

// ----- Pillars — new "lens" lines, no duplicate essences -----
// Each pillar describes what KIND of attention it asks of you,
// so that when a card lands in that pillar, the reader already knows the room.
const PILLAR_LENS_LINES_V5 = {
  awareness: {
    lens: "The clarity of seeing what is yours, and what is not.",
    reveal: "The world is loud. Awareness is the quiet of noticing which weights belong to you, and which were handed to you."
  },
  presence: {
    lens: "The return to this breath, this moment, this life.",
    reveal: "The past does not exist. The future does not exist. Only here. Your power lives in the only place you can ever actually be."
  },
  joy: {
    lens: "The part of you that remembers how to feel infinite.",
    reveal: "Joy is not silly. It is the body's memory of being alive. Sing in the rain. Dance in your kitchen. It is yours."
  },
  connection: {
    lens: "The people, the table, the circle that holds you.",
    reveal: "Hope, once found, must be held. We were never meant to do this alone. A small circle is enough."
  }
};

function PillarsV5() {
  const PILLARS = window.PILLARS_V4;
  return (
    <section id="pillars" className="pillars-section">
      <div className="container">
        <div className="section-label smallcaps fade-in">The Four Pillars</div>
        <div className="section-title-wrap fade-in">
          <h2 className="section-title" data-section-title>Four Pillars. One Path.</h2>
        </div>
        <p className="section-sub fade-in">
          Hope is not one thing. It is found, grown, and kept through four pillars —
          each turning into the next, the way seasons turn.
        </p>

        <div className="pillars-hero fade-in">
          <img src="assets/raven-with-columns.png" alt="A raven hovering above four ornate seasonal pillars" />
        </div>

        <div className="pillar-row fade-in">
          {PILLARS.map((p) => {
            const lens = PILLAR_LENS_LINES_V5[p.id] || { lens: p.essence, reveal: p.reveal };
            return (
              <div
                key={p.id}
                className="pillar-item"
                style={{ ['--accent']: p.accent }}
                tabIndex={0}
              >
                <div className="pillar-season">{p.season}</div>
                <div className="pillar-name">{p.name}</div>
                <div className="pillar-lens">{lens.lens}</div>
                <div className="pillar-reveal">{lens.reveal}</div>
                <div className="pillar-hover-hint">hover to read</div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

// ----- THE BIO — "Imagine standing on a beach" storm rewrite -----
function StoryV5() {
  return (
    <section id="story" className="story-section">
      <div className="container">
        <div className="section-label smallcaps fade-in" style={{ textAlign: 'center' }}>How I Found My Hope</div>
        <div className="section-title-wrap fade-in">
          <h2 className="section-title" data-section-title>The Path That Led Here</h2>
        </div>

        <div className="story-grid fade-in" style={{ marginTop: 56 }}>
          <div className="story-portrait">
            <img
              src="assets/kerry-portrait.jpg"
              alt="Kerry Robarge, founder of Uncharted Pathways, smiling in a forest"
              className="story-portrait-img"
            />
          </div>

          <div className="story-content">
            {/* --- THE STORM --- */}
            <p className="lead">Imagine standing on a beach.</p>

            <p>
              The sky has been changing for a while now. You felt it before you had words for it —
              a heaviness in the air, a pressure that does not lift when you sleep.
            </p>

            <p>And then the waves begin to grow.</p>

            <p>
              One wave is the cost of everything — rent, groceries, the small dignities that used to
              be ordinary, now out of reach.
            </p>
            <p>
              Another is the distance between us — neighbours who no longer speak, families splintered
              by what they believe, strangers we have been taught to fear.
            </p>
            <p>
              Another rolls in faster: the headlines you cannot finish, the fires you can smell from
              a continent away, the summers that no longer feel like summers.
            </p>
            <p>
              Another, heavier still: the children, the wars, the helplessness of watching from a screen.
            </p>

            <p>
              The storm has been brewing for a long time. Now it is here, and it is louder than before.
            </p>

            <p className="lead beach-bookend">
              Imagine standing on this beach, holding your shoes in your hand,
              wondering how you are supposed to keep going.
            </p>

            <div className="story-rule" aria-hidden="true"></div>

            {/* --- HOW I FOUND MYSELF THERE --- */}
            <p className="lead">I have stood on that beach too.</p>

            <p>
              In October of 2023, I started to lose my hope. Slowly, then all at once.
              By January 2024, I had my first panic attack — out in the cold and the snow,
              laying on the earth until my heart remembered how to beat at a normal pace.
            </p>

            <p>
              I am not someone who scares easily. I have spent my life in the humanitarian world.
              I have sat with the dying. I have walked through grief that broke me open before I was
              old enough to have language for it. I know hard things.
            </p>

            <p>
              But that winter, the weight of what I was seeing in the world caught up with what I
              was carrying inside. I lost my footing. I lost my purpose. I lost the thread.
            </p>

            <div className="story-rule" aria-hidden="true"></div>

            {/* --- WHAT I FOUND --- */}
            <p>
              In April of 2024, I walked the Camino de Santiago. Eight hundred kilometres. Six weeks.
              One step at a time.
            </p>

            <p>
              I did not walk it to find an answer. I walked it because I did not know what else to do.
            </p>

            <p>
              And somewhere along that road — between the villages, the strangers who became friends,
              the rain on my face, the wild quiet of being a small body moving across a large world —
              I found my hope again. Not the optimistic kind. Not the kind that pretends. The kind that holds.
            </p>

            <div className="pullquote">
              Hope, as I came to know it, is two things.<br/>
              The bedrock I can never fall through into the void.<br/>
              And the star — the light to follow in the darkest of nights.
            </div>

            <div className="story-rule" aria-hidden="true"></div>

            {/* --- WHAT I BUILT --- */}
            <p className="lead what-built">
              Uncharted Pathways is what I built from that walk.
            </p>

            <p>
              It is not coaching. It is not therapy. It is not a course or a programme or a thing you finish.
            </p>

            <p>
              It is a place to find your hope — as it means to <em>you</em>. A place that holds tools,
              and gatherings, and a quiet, honest community of people who have also been standing on
              the beach, and have decided they are ready to walk.
            </p>

            <p>
              I do not have all the answers. I have my hope, the road I walked to find it, and the
              four pillars that held me along the way. The rest, we figure out together.
            </p>

            <p>
              The old maps used to mark the unknown parts of the world with the words <em>hic sunt dracones</em> —
              <em> here be dragons</em>. We are walking those edges now. The map ends where we are standing.
            </p>

            <p>
              So we walk together. We make the path as we go.
            </p>

            <p className="story-close">
              The door is open. Come as you are.
            </p>

            <div className="story-signoff">— Kerry, your Hope Wayfinder</div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ----- NEW: Why the Raven — quiet block -----
function WhyTheRavenV5() {
  return (
    <section id="raven" className="raven-note-section">
      <div className="container narrow raven-note fade-in">
        <img src="assets/raven.png" alt="" className="raven-note-img" />
        <div className="smallcaps raven-note-label" data-section-title>A note about the raven</div>

        <p>
          Yes — the raven is often mistaken for a symbol of death.
        </p>

        <p>
          But look closer.
        </p>

        <p>
          She is fiercely intelligent. A problem-solver. One of the few wild creatures who chooses,
          again and again, to make friends with humans. She remembers faces. She brings small gifts. She plays.
        </p>

        <p className="raven-note-emph">
          When the storm rolls in and everything else takes shelter, she keeps flying.
        </p>

        <p>
          In the Celtic stories she is the Morrigan — not the ending, but the rebirth that hides
          inside what <em>looks</em> like one. In the Norse, she is memory and thought, riding on the
          shoulder of the seeker. In some Indigenous traditions, she is the one who carried the light
          into the world.
        </p>

        <p className="raven-note-emph">
          A bringer of light. A storm-flyer. A symbol of transformation, and of hope.
        </p>

        <p className="raven-note-close">
          That is who I want to walk with through the dark.<br/>
          That is who I hope you see when you see her, too.
        </p>
      </div>
    </section>
  );
}

// ----- NEW: Bridge between bio and gatherings -----
function BridgeV5() {
  return (
    <div className="bridge-v5 fade-in">
      <div className="container narrow">
        <p>If something in you said yes — here is how we are gathering.</p>
      </div>
    </div>
  );
}

// ----- Gatherings — with honest dates line -----
const GATHERINGS_V5 = [
  {
    name: 'Community Walk & Talks',
    desc: "Wander a new Madrid neighbourhood. Trade what's heavy for what's hopeful.",
    meta: 'Recurring · Madrid'
  },
  {
    name: 'Tap & Teach',
    desc: "An evening with someone brilliant, sharing the most extraordinary thing they have learned. Drinks in hand.",
    meta: 'Series · In-Person'
  },
  {
    name: 'Campfire Comradere',
    desc: "A small circle around a fire. We drop the small talk and speak what is true.",
    meta: 'Quarterly · Intimate'
  },
  {
    name: 'Portraits',
    desc: "Three painters. One subject. A study of how we are seen, and how we see ourselves.",
    meta: 'Workshop · Visual'
  },
  {
    name: 'Play',
    desc: "A half-day for the part of you that knew how to jump in puddles. Permission slips included.",
    meta: 'Half-Day · Madrid'
  },
  {
    name: 'The Flow Game',
    desc: "A facilitated practice for clarity on the question you have been carrying.",
    meta: 'Half-Day · Small Group'
  }
];

function GatheringsV5() {
  return (
    <section id="gatherings">
      <div className="container">
        <div className="section-label smallcaps fade-in">Coming Alive in Madrid</div>
        <div className="section-title-wrap fade-in">
          <h2 className="section-title" data-section-title>Gatherings on the Horizon</h2>
        </div>
        <p className="section-sub fade-in">
          A table is being set. Quiet, intentional places to meet — where small talk is traded
          for the real thing.
        </p>

        <div className="gatherings-grid fade-in">
          {GATHERINGS_V5.map((g, i) => (
            <div key={i} className="gathering">
              <div className="gathering-meta">{g.meta}</div>
              <div className="gathering-title">{g.name}</div>
              <div className="gathering-desc">{g.desc}</div>
            </div>
          ))}
        </div>

        <p className="gatherings-note fade-in">
          These are forming. Dates land in the newsletter when they are set —
          <a href="#contact"> leave your email below</a> to be first to know.
        </p>
      </div>
    </section>
  );
}

// ----- Contact: MailerLite-wired form, hope@, Instagram + Substack -----
function ContactV5() {
  const [email, setEmail] = useStateS5('');
  const [status, setStatus] = useStateS5('idle'); // idle | submitting | success | error
  const formRef = useRefS5(null);

  // MailerLite endpoint extracted from the embed snippet
  const MAILERLITE_ACTION = 'https://assets.mailerlite.com/jsonp/2473785/forms/191381786530415771/subscribe';

  const onSubmit = async (e) => {
    e.preventDefault();
    if (!email.trim() || status === 'submitting') return;
    setStatus('submitting');

    // Build form data for MailerLite (matches their expected fields)
    const formData = new FormData();
    formData.append('fields[email]', email);
    formData.append('ml-submit', '1');
    formData.append('anticsrf', 'true');

    try {
      // MailerLite uses a JSONP endpoint; a no-cors POST still delivers the subscription.
      // We treat any non-network outcome as success because MailerLite handles
      // the double opt-in email on their side.
      await fetch(MAILERLITE_ACTION, {
        method: 'POST',
        mode: 'no-cors',
        body: formData
      });

      // Local backup so Kerry has a redundant record in dev/preview
      try {
        const list = JSON.parse(localStorage.getItem('up_newsletter') || '[]');
        list.push({ email, at: new Date().toISOString() });
        localStorage.setItem('up_newsletter', JSON.stringify(list));
      } catch {}

      setStatus('success');
    } catch (err) {
      console.warn('Newsletter submit error', err);
      setStatus('error');
    }
  };

  return (
    <section id="contact" className="contact-section">
      <div className="container">
        <div className="section-label smallcaps fade-in">Reach Out</div>
        <div className="section-title-wrap fade-in">
          <h2 className="section-title" data-section-title>Walk With Me</h2>
        </div>
        <p className="section-sub fade-in">
          For questions, gatherings, collaborations — or simply to say hello.
        </p>

        <div className="contact-grid fade-in">
          <div className="contact-block">
            <span className="smallcaps">Kerry Robarge</span>
            <div className="contact-line">Hope Wayfinder &amp; Founder</div>
            <div className="contact-line">Madrid, Spain</div>
            <div className="contact-line">
              <a href="mailto:hope@unchartedpathways.com">hope@unchartedpathways.com</a>
            </div>
            <div className="contact-line">
              <a href="tel:+34691814555">+34 691 814 555</a>
            </div>
            <div className="socials">
              <a
                href="https://instagram.com/unchartedpathways4u"
                target="_blank"
                rel="noopener noreferrer"
                aria-label="Uncharted Pathways on Instagram"
                title="Instagram"
              >
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4">
                  <rect x="3" y="3" width="18" height="18" rx="5"/>
                  <circle cx="12" cy="12" r="4"/>
                  <circle cx="17.5" cy="6.5" r="0.8" fill="currentColor"/>
                </svg>
              </a>
              <a
                href="https://unchartedpathways4u.substack.com"
                target="_blank"
                rel="noopener noreferrer"
                aria-label="Uncharted Pathways on Substack"
                title="Substack"
              >
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4">
                  <line x1="5" y1="7" x2="19" y2="7"/>
                  <line x1="5" y1="11" x2="19" y2="11"/>
                  <path d="M5 15h14v5l-7-4-7 4z"/>
                </svg>
              </a>
            </div>
          </div>

          <div className="contact-block">
            <span className="smallcaps">Stay Close</span>
            <p style={{ fontFamily: "'EB Garamond', serif", fontSize: 19, color: 'var(--ink-soft)', lineHeight: 1.55, margin: '0 0 18px' }}>
              The first to hear of new gatherings, new tools, new pathways. One letter a month at most.
            </p>
            <div className="newsletter">
              {status !== 'success' ? (
                <form ref={formRef} onSubmit={onSubmit} noValidate>
                  <input
                    type="email"
                    value={email}
                    onChange={(e) => setEmail(e.target.value)}
                    placeholder="your@email"
                    aria-label="Email address"
                    required
                    disabled={status === 'submitting'}
                  />
                  <button type="submit" disabled={status === 'submitting'}>
                    {status === 'submitting' ? 'Sending…' : 'Join'}
                  </button>
                </form>
              ) : (
                <div className="newsletter-thanks">
                  Thank you. Watch for a confirmation email — once you click the link, you are on the list.
                </div>
              )}
            </div>
            <p className="newsletter-privacy">
              Your email stays with us. Never shared, never sold. Unsubscribe anytime.
            </p>
            {status === 'error' && (
              <p className="newsletter-error">
                Something went wrong sending that. Try again, or write to <a href="mailto:hope@unchartedpathways.com">hope@unchartedpathways.com</a>.
              </p>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

// ----- NEW: Privacy Notice — expandable in footer -----
function PrivacyNoticeV5() {
  const [open, setOpen] = useStateS5(false);
  return (
    <div className="privacy-block">
      <button
        type="button"
        className="privacy-toggle"
        onClick={() => setOpen(o => !o)}
        aria-expanded={open}
        aria-controls="privacy-content"
      >
        <span>Privacy &amp; how we honour your trust</span>
        <span className="privacy-chevron" aria-hidden="true">{open ? '−' : '+'}</span>
      </button>
      {open && (
        <div id="privacy-content" className="privacy-content">
          <p>
            We collect as little as possible, and we treat what you give us with care.
          </p>

          <p>
            <strong>What we collect.</strong> Only your email address, and only if you choose to
            join the newsletter. Nothing else is gathered, watched, or sold.
          </p>

          <p>
            <strong>Why we collect it.</strong> So we can write to you when a gathering is forming,
            when a new tool or letter is ready, or when there is news from the path. One letter
            a month at most — often less.
          </p>

          <p>
            <strong>Where it lives.</strong> Your email is held by <em>MailerLite</em>, our
            newsletter service. They store it securely and process it under their own
            GDPR-compliant terms. We never share, sell, or trade your address with anyone.
          </p>

          <p>
            <strong>Your rights.</strong> Under GDPR, you can ask us at any time to see what
            we hold about you, to correct it, or to delete it entirely. Every newsletter we
            send has an unsubscribe link — one click and you are off the list, with no
            questions asked. Or write to <a href="mailto:hope@unchartedpathways.com">hope@unchartedpathways.com</a>.
          </p>

          <p>
            <strong>Cookies.</strong> This site sets none. We use a small amount of browser
            storage to remember if you have drawn your card today, and to remember whether
            you prefer the night or day theme — that is it. Nothing is tracked, nothing
            leaves your device.
          </p>

          <p>
            <strong>If anything changes.</strong> If this notice changes meaningfully, we will
            say so in a letter — not bury it.
          </p>

          <p className="privacy-signoff">
            With care, <br/>
            — Kerry
          </p>
        </div>
      )}
    </div>
  );
}

// ----- Footer -----
function FooterV5() {
  return (
    <footer>
      <img src="assets/raven.png" alt="" className="foot-raven" />
      <div className="foot-name">Uncharted Pathways</div>
      <div className="foot-tag">A place to find your hope — as it means to you.</div>

      <PrivacyNoticeV5 />

      <div className="foot-copy">© {new Date().getFullYear()} · Uncharted Pathways · Madrid</div>
    </footer>
  );
}

Object.assign(window, {
  NavV5, HeroV5, InvitationV5, PillarsV5, StoryV5, WhyTheRavenV5, BridgeV5,
  GatheringsV5, ContactV5, FooterV5, SigilDividerV5
});
