/* ===========================================================
   RealListener — lower sections
   =========================================================== */
const { Reveal, SectionHead, scrollToId, Moon } = window.NT;

/* ===========================================================
   PRICING
   =========================================================== */
function Pricing() {
  const plans = [
    { name: "Trial", price: "$15", unit: "15 minutes", desc: "Dip your toes in. 15 minutes is enough to know if this is for you.", cta: "Talk to someone — $15", featured: false },
    { name: "Standard", price: "$34", unit: "30 minutes", desc: "Enough time to actually get into it. Most people leave feeling lighter.", cta: "Book 30 minutes", featured: true },
    { name: "Deep Session", price: "$59", unit: "60 minutes", desc: "For when you really need to talk. No rush, no clock-watching.", cta: "Book 60 minutes", featured: false },
    { name: "Membership", price: "From $79", unit: "per month · 4 sessions", desc: "Priority booking and better value for recurring support.", cta: "Coming soon", featured: false, comingSoon: true },
  ];
  return (
    <section id="pricing" style={{ paddingTop: "var(--sect)", paddingBottom: "var(--sect)" }}>
      <div className="wrap">
        <SectionHead align="center" eyebrow="Pricing" title={<>Less than a dinner out. More than you'd expect.</>} intro="Start with $15. No commitment, no subscription." />
        <div style={{ marginTop: 60, display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(240px, 1fr))", gap: 22, alignItems: "stretch" }}>
          {plans.map((p, i) => (
            <Reveal key={p.name} delay={i * 80} className="card price-card" data-featured={p.featured}
              style={{
                padding: "32px 28px 30px", display: "flex", flexDirection: "column",
                position: "relative",
                border: p.featured ? "1px solid var(--accent-line)" : undefined,
                background: p.featured ? "linear-gradient(180deg, color-mix(in oklab, var(--accent) 7%, var(--surface-2)), var(--surface))" : undefined,
                boxShadow: p.featured ? "var(--shadow)" : undefined,
                opacity: p.comingSoon ? 0.5 : 1,
                filter: p.comingSoon ? "saturate(0.4)" : undefined,
              }}>
              {p.featured && (
                <span style={{
                  position: "absolute", top: -12, left: 28,
                  background: "var(--accent)", color: "#1a1306",
                  fontSize: "0.7rem", fontWeight: 700, letterSpacing: "0.1em", textTransform: "uppercase",
                  padding: "5px 12px", borderRadius: 999, whiteSpace: "nowrap",
                }}>Most popular</span>
              )}
              {p.comingSoon && (
                <span style={{
                  position: "absolute", top: -12, left: 28,
                  background: "var(--surface-hi)", color: "var(--text-mut)",
                  border: "1px solid var(--border-hi)",
                  fontSize: "0.7rem", fontWeight: 700, letterSpacing: "0.1em", textTransform: "uppercase",
                  padding: "5px 12px", borderRadius: 999, whiteSpace: "nowrap",
                }}>Coming soon</span>
              )}
              <h3 style={{ fontSize: "1.18rem", fontFamily: "var(--sans)", fontWeight: 600, letterSpacing: "-0.01em", color: p.comingSoon ? "var(--text-faint)" : "var(--text-soft)" }}>{p.name}</h3>
              <div style={{ display: "flex", alignItems: "baseline", gap: 8, marginTop: 14 }}>
                <span style={{ fontFamily: "var(--serif)", fontSize: "2.7rem", fontWeight: 500, lineHeight: 1, color: p.comingSoon ? "var(--text-mut)" : "var(--text)" }}>{p.price}</span>
              </div>
              <p style={{ color: p.comingSoon ? "var(--text-faint)" : "var(--accent)", fontSize: "0.9rem", fontWeight: 500, marginTop: 8 }}>{p.unit}</p>
              <p style={{ color: p.comingSoon ? "var(--text-faint)" : "var(--text-mut)", fontSize: "0.96rem", marginTop: 16, flex: 1 }}>{p.desc}</p>
              <button className={`btn ${p.featured ? "btn-primary" : "btn-ghost"}`}
                onClick={p.comingSoon ? undefined : () => scrollToId("final")}
                disabled={p.comingSoon}
                style={{ marginTop: 26, width: "100%", ...(p.comingSoon ? { pointerEvents: "none", cursor: "default" } : {}) }}>
                {p.cta}
              </button>
            </Reveal>
          ))}
        </div>
        <Reveal as="p" style={{ marginTop: 36, textAlign: "center", color: "var(--text-faint)", fontSize: "0.95rem" }}>
          Clear pricing. No hidden fees. Memberships can be paused or canceled anytime.
        </Reveal>
      </div>
    </section>
  );
}

/* ===========================================================
   TRUST & BOUNDARIES
   =========================================================== */
function Trust() {
  const cards = [
    ["Real humans, always", "No bots, no AI. Every session is a real person on the other end."],
    ["Private by design", "We don't record, sell, or share. Your conversations stay yours."],
    ["Not therapy or dating", "RealListener is human connection — nothing more, nothing less."],
    ["Consistent quality", "Every listener is vetted. Every session is held to the same standard."],
  ];
  return (
    <section id="trust" style={{ paddingTop: "var(--sect)", paddingBottom: "var(--sect)" }}>
      <div className="wrap">
        <SectionHead eyebrow="Safety & trust" title={<>We take this <em>seriously</em></>} />
        <div style={{ marginTop: 54, display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(240px, 1fr))", gap: 20 }}>
          {cards.map(([t, d], i) => (
            <Reveal key={i} delay={(i % 4) * 70} className="card" style={{ padding: "28px 26px" }}>
              <span style={{ display: "inline-flex", width: 34, height: 34, borderRadius: 9, alignItems: "center", justifyContent: "center", border: "1px solid var(--accent-line)", color: "var(--accent)", marginBottom: 18 }}>
                <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
                  <path d="M5 12.5l4.5 4.5L19 7" />
                </svg>
              </span>
              <h3 style={{ fontSize: "1.18rem", marginBottom: 10 }}>{t}</h3>
              <p style={{ color: "var(--text-mut)", fontSize: "0.96rem" }}>{d}</p>
            </Reveal>
          ))}
        </div>
        <Reveal style={{ marginTop: 26 }}>
          <p style={{
            color: "var(--text-faint)", fontSize: "0.9rem", lineHeight: 1.55, textAlign: "center",
            padding: "16px 20px", borderRadius: "var(--r-sm)",
            border: "1px solid var(--border)", background: "color-mix(in oklab, var(--surface) 60%, transparent)",
          }}>
            If you are in crisis or need mental health treatment, RealListener is not a replacement for emergency or clinical support.
          </p>
        </Reveal>
      </div>
    </section>
  );
}

/* ===========================================================
   TESTIMONIALS
   =========================================================== */
function Testimonials() {
  const items = [
    ["I didn't need advice. I just needed a real conversation with someone kind. It helped more than I expected.", "Melissa", "32"],
    ["After working remotely for months, I realized how little real conversation I actually had at night. This felt simple and human.", "Jordan", "29"],
    ["What I liked most was how calm and respectful it felt. No pressure, no weirdness, just a real person listening.", "Daniel", "41"],
  ];
  return (
    <section id="voices" style={{ paddingTop: "var(--sect)", paddingBottom: "var(--sect)" }}>
      <div className="wrap">
        <SectionHead eyebrow="In their words" title={<>What people come here for</>} />
        <div style={{ marginTop: 54, display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))", gap: 22 }}>
          {items.map(([quote, name, age], i) => (
            <Reveal key={i} delay={i * 90} className="card" style={{ padding: "32px 30px", display: "flex", flexDirection: "column" }}>
              <span style={{ fontFamily: "var(--serif)", fontSize: "3rem", lineHeight: 0.7, color: "var(--accent-line)", marginBottom: 6 }}>&ldquo;</span>
              <p style={{ fontFamily: "var(--serif)", fontSize: "1.22rem", lineHeight: 1.5, color: "var(--text)", flex: 1, letterSpacing: "-0.01em" }}>
                {quote}
              </p>
              <p style={{ marginTop: 22, fontSize: "0.92rem", color: "var(--text-mut)", fontWeight: 500 }}>
                — {name}, {age}
              </p>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ===========================================================
   FAQ (accordion)
   =========================================================== */
function FAQ() {
  const items = [
    ["Is this therapy?", "No. RealListener is a real human conversation — not clinical support, not advice. Think of it as talking to a thoughtful stranger who's genuinely there to listen."],
    ["Is this a dating service?", "No. All sessions are strictly non-romantic. Our listeners are here to talk, nothing else."],
    ["Can I choose who I talk to?", "Yes. You can set preferences for gender, age range, conversation style, and format before booking."],
    ["Is it private?", "Yes. We don't record, sell, or share your conversations. What you say stays between you and your listener."],
    ["Can I book for tonight?", "Yes — sessions are often available the same day. Choose a time that works and we'll confirm it."],
    ["Do you offer text chat too?", "Yes. You can choose voice or text when booking. Both are available depending on listener availability."],
  ];
  const [open, setOpen] = useState(0);
  return (
    <section id="faq" style={{ paddingTop: "var(--sect)", paddingBottom: "var(--sect)" }}>
      <div className="wrap" style={{ maxWidth: 820 }}>
        <SectionHead align="center" eyebrow="Good to know" title={<>Questions, answered</>} />
        <div style={{ marginTop: 48, borderTop: "1px solid var(--border)" }}>
          {items.map(([q, a], i) => {
            const isOpen = open === i;
            return (
              <div key={i} style={{ borderBottom: "1px solid var(--border)" }}>
                <button
                  onClick={() => setOpen(isOpen ? -1 : i)}
                  aria-expanded={isOpen}
                  style={{
                    width: "100%", display: "flex", alignItems: "center", justifyContent: "space-between", gap: 20,
                    background: "transparent", border: 0, padding: "22px 4px", textAlign: "left", color: "var(--text)",
                  }}>
                  <span style={{ flex: 1, fontFamily: "var(--serif)", fontSize: "1.22rem", fontWeight: 500, color: isOpen ? "var(--text)" : "var(--text-soft)", transition: "color .25s" }}>{q}</span>
                  <span style={{
                    flexShrink: 0, width: 26, height: 26, position: "relative", color: "var(--accent)",
                  }}>
                    <span style={{ position: "absolute", top: "50%", left: "50%", width: 13, height: 1.6, background: "currentColor", transform: "translate(-50%,-50%)" }}></span>
                    <span style={{ position: "absolute", top: "50%", left: "50%", width: 13, height: 1.6, background: "currentColor", transform: `translate(-50%,-50%) rotate(${isOpen ? 0 : 90}deg)`, transition: "transform .35s cubic-bezier(.2,.7,.3,1)" }}></span>
                  </span>
                </button>
                <div style={{ overflow: "hidden", maxHeight: isOpen ? 200 : 0, transition: "max-height .4s cubic-bezier(.2,.7,.3,1)" }}>
                  <p style={{ color: "var(--text-mut)", fontSize: "1rem", padding: "0 4px 24px", maxWidth: 640 }}>{a}</p>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

/* ===========================================================
   FINAL CTA
   =========================================================== */
function FinalCTA() {
  return (
    <section id="final" style={{ paddingTop: "var(--sect)", paddingBottom: "var(--sect)" }}>
      <div className="wrap">
        <Reveal className="card" style={{
          padding: "clamp(40px, 6vw, 78px) clamp(28px, 5vw, 64px)", textAlign: "center",
          display: "flex", flexDirection: "column", alignItems: "center",
          background: "radial-gradient(700px 400px at 50% -20%, var(--accent-tint), transparent 60%), linear-gradient(180deg, var(--surface-2), var(--surface))",
          borderColor: "var(--accent-line)",
        }}>
          <span style={{ color: "var(--accent)", marginBottom: 22 }}><Moon size={32} id="final" /></span>
          <h2 style={{ fontSize: "clamp(2rem, 4.6vw, 3.3rem)", maxWidth: "16ch", lineHeight: 1.06 }}>
            You don't have to sit with it <em style={{ color: "var(--accent)" }}>alone tonight.</em>
          </h2>
          <p style={{ marginTop: 22, color: "var(--text-soft)", fontSize: "1.12rem", maxWidth: 540, lineHeight: 1.6 }}>
            A real person. Tonight.
          </p>
          <div style={{ marginTop: 36, display: "flex", gap: 14, flexWrap: "wrap", justifyContent: "center" }}>
            <button className="btn btn-primary" onClick={() => scrollToId("pricing")} style={{ fontSize: "1.02rem", padding: "1em 1.7em" }}>
              Talk to someone tonight — $15 <span className="arrow">→</span>
            </button>
            <button className="btn btn-ghost" onClick={() => scrollToId("pricing")} style={{ fontSize: "1.02rem", padding: "1em 1.7em" }}>
              See pricing
            </button>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

/* ===========================================================
   FOOTER
   =========================================================== */
function Footer() {
  const links = [["How it works", "how"], ["Pricing", "pricing"], ["FAQ", "faq"], ["Privacy", null], ["Terms", null]];
  return (
    <footer style={{ borderTop: "1px solid var(--border)", paddingTop: 56, paddingBottom: 48, marginTop: 24 }}>
      <div className="wrap">
        <div style={{ display: "flex", flexWrap: "wrap", justifyContent: "space-between", gap: 30, alignItems: "flex-start" }}>
          <div style={{ maxWidth: 320 }}>
            <a href="#top" onClick={(e) => { e.preventDefault(); window.scrollTo({ top: 0, behavior: "smooth" }); }}
               style={{ display: "inline-flex", alignItems: "center", gap: 10, fontFamily: "var(--serif)", fontSize: "1.3rem", color: "var(--text)" }}>
              <span style={{ color: "var(--accent)" }}><Moon size={20} id="foot" /></span>
              Night<span style={{ color: "var(--text-soft)" }}>Talk</span>
            </a>
            <p style={{ marginTop: 14, color: "var(--text-mut)", fontSize: "0.98rem" }}>Someone to talk to.</p>
          </div>
          <nav style={{ display: "flex", flexWrap: "wrap", gap: "12px 28px" }}>
            {links.map(([label, id]) => (
              <a key={label} href={id ? `#${id}` : "#"} onClick={(e) => { e.preventDefault(); if (id) scrollToId(id); }}
                 style={{ color: "var(--text-mut)", fontSize: "0.94rem", fontWeight: 500, transition: "color .25s" }}
                 onMouseEnter={(e) => (e.currentTarget.style.color = "var(--text)")}
                 onMouseLeave={(e) => (e.currentTarget.style.color = "var(--text-mut)")}>
                {label}
              </a>
            ))}
          </nav>
        </div>
        <hr className="hair" style={{ margin: "36px 0 24px" }} />
        <div style={{ display: "flex", flexWrap: "wrap", justifyContent: "space-between", gap: 14 }}>
          <p style={{ color: "var(--text-faint)", fontSize: "0.84rem", maxWidth: 560 }}>
            RealListener is not therapy, not crisis support, and not a dating service.
          </p>
          <p style={{ color: "var(--text-faint)", fontSize: "0.84rem" }}>© {new Date().getFullYear()} RealListener</p>
        </div>
      </div>
    </footer>
  );
}

window.NT = Object.assign(window.NT || {}, {
  Pricing, Trust, FAQ, FinalCTA, Footer,
});
