// Thank-you splash page shown after any form submission.
// Reads window.__thanks = { kind, firstName, email, code? } populated by the form.

const THANKS_CONFIG = {
  waitlist: {
    eyebrow: "You're In",
    headline: ({ first }) => `Welcome aboard, <em>${first}</em>.`,
    sub: "You've reserved your place. Beta begins in 2026 — we'll open invitations city by city.",
    heroImg: "assets/web/hotel-tulum.webp",
    nextSteps: [
      { n: "I.", h: "Check your inbox", p: "A confirmation with your referral code is on its way. If it doesn't arrive within five minutes, glance at your spam folder." },
      { n: "II.", h: "Move up the list", p: "Every friend who joins through your code shifts you closer to the front of the line." },
      { n: "III.", h: "Watch this space", p: "We open invitations gradually — not all at once. The first wave reaches London, New York, and Milan." },
    ],
  },
  creator: {
    eyebrow: "Application Received",
    headline: ({ first }) => `Thank you, <em>${first}</em>.`,
    sub: "Our editorial team reads every application personally. You'll hear back within seven business days.",
    heroImg: "assets/web/storyteller-portrait.png",
    nextSteps: [
      { n: "I.", h: "We're reading", p: "Editorial reviews each submission by hand — no algorithms. We're looking for storytellers who linger long enough to notice." },
      { n: "II.", h: "A short conversation", p: "If your work resonates, we'll invite you to a 30-minute call to walk through the founding creator program." },
      { n: "III.", h: "An invitation, if it's a fit", p: "Selected creators receive early access, scoring credits, and an invitation to the founding cohort." },
    ],
  },
  brand: {
    eyebrow: "Inquiry Received",
    headline: ({ first }) => `Thank you, <em>${first}</em>.`,
    sub: "Your partnership inquiry has reached our team. We'll respond within three business days with next steps.",
    heroImg: "https://images.unsplash.com/photo-1507525428034-b723cf961d3e?w=2400&q=85&auto=format&fit=crop",
    nextSteps: [
      { n: "I.", h: "Private review", p: "Your details are reviewed only by our partnerships team. Commercial terms are never shared on public channels." },
      { n: "II.", h: "A tailored proposal", p: "Within three business days we'll respond with a proposal shaped around your property — not a one-size template." },
      { n: "III.", h: "An introductory call", p: "If the fit is right, we'll book a 30-minute conversation with our partnerships lead in your region." },
    ],
  },
};

const THANKS_GALLERY = [
  { src: "assets/hotels/niyama-maldives.jpg",                                                              cap: "Niyama, Maldives" },
  { src: "assets/web/hotel-canaves.jpg",                                                                    cap: "Santorini, Greece" },
  { src: "assets/hotels/keemala-phuket.webp",                                                              cap: "Keemala, Phuket" },
  { src: "assets/hotels/aman.jpg",                                                                        cap: "Aman, Amangiri" },
  { src: "assets/hotels/grumeti-serengeti.png",                                                            cap: "Grumeti, Serengeti" },
  { src: "assets/web/hotel-giraffe.jpg",                                                                    cap: "Giraffe Manor, Kenya" },
];

const ThanksPage = () => {
  const data = (typeof window !== "undefined" && window.__thanks) || { kind: "waitlist", firstName: "Friend" };
  const cfg = THANKS_CONFIG[data.kind] || THANKS_CONFIG.waitlist;
  const first = data.firstName || "Friend";

  React.useEffect(() => { window.scrollTo(0, 0); }, []);

  return (
    <main>
      {/* ——— Hero splash ——— */}
      <section className="hero thanks-hero" data-screen-label="Thanks · Hero">
        <div className="hero-bg">
          <img src={cfg.heroImg} alt="" loading="eager" className="hero-slide on"/>
        </div>
        <div className="hero-content">
          <div className="eyebrow reveal">{cfg.eyebrow}</div>
          <h1 className="display reveal" dangerouslySetInnerHTML={{ __html: cfg.headline({ first }) }}/>
          <p className="lede reveal">{cfg.sub}</p>
          <div className="reveal" style={{ marginTop: 28, display: "inline-flex", alignItems: "center", gap: 12, padding: "12px 22px", border: "1px solid rgba(178,139,67,0.35)", borderRadius: 999, background: "rgba(255,255,255,0.55)", backdropFilter: "blur(6px)", WebkitBackdropFilter: "blur(6px)" }}>
            <span style={{ width: 8, height: 8, borderRadius: "50%", background: "var(--c-gold-1)", display: "inline-block" }}/>
            <span style={{ color: "var(--c-ink)", fontSize: 11, letterSpacing: "0.22em", textTransform: "uppercase", fontWeight: 500 }}>Email on its way to {data.email || "your inbox"}</span>
          </div>
        </div>
      </section>

      {/* ——— What happens next ——— */}
      <section className="section" data-screen-label="Thanks · Next steps">
        <div className="container">
          <div className="section-head reveal">
            <div>
              <div className="eyebrow" style={{ marginBottom: 18 }}>What Happens Next</div>
              <h2 className="h2">A slower kind of <em>welcome</em>.</h2>
            </div>
            <div className="lead">
              <p className="body-lg">We don't ship onboarding sequences — we send a short note, give it room to breathe, and then make a deliberate next move.</p>
            </div>
          </div>

          <div className="thanks-steps reveal">
            {cfg.nextSteps.map((s, i) => (
              <div className="thanks-step" key={i}>
                <div className="thanks-step-num">{s.n}</div>
                <h3 className="thanks-step-h">{s.h}</h3>
                <p className="thanks-step-p">{s.p}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ——— Why Trepic image-quote ——— */}
      <section className="section" style={{ paddingTop: 0 }} data-screen-label="Thanks · Why">
        <div className="container">
          <div className="thanks-quote reveal">
            <div className="thanks-quote-img">
              <img src="https://images.unsplash.com/photo-1528154291023-a6525fabe5b4?w=1400&q=80&auto=format&fit=crop" alt="A boat at anchor — noticing"/>
            </div>
            <div className="thanks-quote-body">
              <div className="eyebrow" style={{ marginBottom: 16 }}>Why Trepic Exists</div>
              <p className="oneliner" style={{ fontSize: "clamp(24px,2.6vw,36px)" }}>
                Travel content tells you <em>what</em> to see. Trepic is a slower way to share <em>what it felt like</em> to be there — and an honest path to discover places through people who actually went.
              </p>
              <div style={{ marginTop: 24, fontSize: 14, color: "var(--c-mute-ink)", letterSpacing: "0.04em" }}>
                Storytelling · Mindful journaling · Direct booking · Real-world earnings
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ——— Gallery ——— */}
      <section className="section" style={{ paddingTop: 0 }} data-screen-label="Thanks · Gallery">
        <div className="container">
          <div className="section-head reveal" style={{ marginBottom: 32 }}>
            <div>
              <div className="eyebrow" style={{ marginBottom: 18 }}>A Glimpse</div>
              <h2 className="h2">Stories already <em>unfolding</em>.</h2>
            </div>
            <div className="lead">
              <p className="body-lg">A handful of moments captured by founding creators — your inbox will start to fill with these once invitations open.</p>
            </div>
          </div>

          <div className="thanks-gallery reveal">
            {THANKS_GALLERY.map((g, i) => (
              <figure key={i} className={"thanks-tile thanks-tile-" + (i % 6)}>
                <img src={g.src} alt={g.cap} loading="lazy"/>
                <figcaption>{g.cap}</figcaption>
              </figure>
            ))}
          </div>
        </div>
      </section>

      {/* ——— Stats bar ——— */}
      <section className="section" style={{ paddingTop: 0 }} data-screen-label="Thanks · Numbers">
        <div className="container">
          <div className="thanks-stats reveal">
            <div className="thanks-stat">
              <div className="thanks-stat-n">2026</div>
              <div className="thanks-stat-l">Beta launch</div>
            </div>
            <div className="thanks-stat">
              <div className="thanks-stat-n">3 cities</div>
              <div className="thanks-stat-l">London · NYC · Milan</div>
            </div>
            <div className="thanks-stat">
              <div className="thanks-stat-n">100%</div>
              <div className="thanks-stat-l">Founding creator equity</div>
            </div>
            <div className="thanks-stat">
              <div className="thanks-stat-n">Zero</div>
              <div className="thanks-stat-l">Algorithmic feeds</div>
            </div>
          </div>
        </div>
      </section>

      {/* ——— Final reassurance + CTA ——— */}
      <section className="final section-light-cta">
        <div className="reveal" style={{ maxWidth: 720, margin: "0 auto", textAlign: "center" }}>
          <div className="eyebrow" style={{ marginBottom: 22 }}>Until We Meet</div>
          <h2 className="h2" style={{ marginBottom: 24 }}>The world rewards <em>those who linger</em>.</h2>
          <p className="body-lg" style={{ color: "var(--c-mute-ink)", marginBottom: 36, fontSize: 17, lineHeight: 1.65 }}>
            Keep an eye on your inbox — your confirmation should arrive within a few minutes. If you don't see it, check your spam folder, then add <strong>hello@trepic.co</strong> to your contacts so we land where you'll see us.
          </p>
          <div style={{ display: "flex", justifyContent: "center", gap: 16, flexWrap: "wrap" }}>
            <a href="#home" className="btn on-dark lg" onClick={(e)=>{e.preventDefault();window.__setRoute("home");window.scrollTo(0,0);}}>
              Back to Trepic <span className="arrow">→</span>
            </a>
            <a href="#how" className="btn ghost on-dark lg" onClick={(e)=>{e.preventDefault();window.__setRoute("how");window.scrollTo(0,0);}}>
              How it works
            </a>
          </div>
        </div>
      </section>
    </main>
  );
};

Object.assign(window, { ThanksPage });