// Services page — exact session list + pricing from emotional.pdf

const SESSIONS = [
  { name: "1:1 Single Integrated Attachment Theory Coaching Session", meta: "1 hr 15 mins · $150", featured: false },
  { name: "6-Week Coaching Package ($75 off!)", sub: "1:1 Integrated Attachment Theory Coaching Sessions", meta: "1 hr 15 mins · $825", featured: false },
  { name: "12-Week Coaching Package ($200 off!)", sub: "1:1 Integrated Attachment Theory Coaching Sessions", meta: "1 hr 15 mins · $1,600", featured: true },
  { name: "Discover Your Attachment Style in a Free 15-Minute Consultation", meta: "15 mins · Free", featured: false },
];

const FAQ_SHORT = [
  ["How do I book a session?", "Pick the package or single session that fits, then click Reserve Your Spot. You'll be taken to my booking calendar to pick a time. Once confirmed, I'll send you a Zoom link and a short Client Discovery Questionnaire to fill out before we meet."],
  ["How much do sessions cost?", "Single sessions are $150. The 6-Week Package is $825 ($75 off the per-session rate). The 12-Week Package is $1,600 ($200 off). The free 15-minute consultation is exactly that — free, no obligation, no script."],
  ["When is payment due?", "Payment for single sessions is due at the time of booking. Coaching packages are paid up front, with a 2-pay or 3-pay split available on request — see below."],
  ["Do you offer payment plans or packages?", "Yes. The 6-Week and 12-Week packages are designed to make consistent work more affordable. If you need a custom payment plan, email Brittney.Edwards@alignedattachments.com and we'll work it out."],
  ["What is your cancellation policy?", "I ask for at least 24 hours' notice for any reschedule. Cancellations within 24 hours of the session are non-refundable, but I'll always do my best to find another time within the same week."],
  ["How long does the personalized program last?", "Most clients work with me for 6 to 12 weeks of weekly sessions. The 12-week container is the deepest version of the work — long enough for your nervous system to actually integrate the changes."],
  ["Do you offer refunds?", "Single sessions are non-refundable once booked. Packages can be partially refunded for unused sessions if you need to step away — just reach out."],
];

const ServicesPage = () => (
  <main>
    <section className="page-header">
      <div className="container-narrow">
        <Eyebrow>Services</Eyebrow>
        <h1>Transform your life <em>today.</em></h1>
        <p>
          These 1:1 sessions are designed to help you regulate your emotions, reprogram
          your subconscious mind, and heal your attachment wounds at the root. My coaching
          is based in Integrated Attachment Theory and personalized to meet your unique
          patterns. <strong>Only 2 coaching spots left.</strong>
        </p>
      </div>
    </section>

    {/* SESSION LIST */}
    <section className="section section-cream" style={{ paddingTop: 32 }}>
      <div className="container" style={{ maxWidth: 980 }}>
        <div style={{ marginBottom: 32, textAlign: "center" }}>
          <Eyebrow>Book Your Session</Eyebrow>
          <h2 className="h-display" style={{ fontSize: 36, margin: "14px 0 0" }}>
            Choose the path that fits.
          </h2>
        </div>
        {SESSIONS.map((s) => (
          <div key={s.name} className={"session-row" + (s.featured ? " featured" : "")}>
            <div>
              <h3>{s.name}</h3>
              {s.sub ? <div className="body-md" style={{ marginTop: 4 }}>{s.sub}</div> : null}
              <div className="meta" style={{ marginTop: 8 }}>{s.meta}</div>
            </div>
            <Btn variant={s.featured ? "dark" : "outline"} href="#/work-with-me" onClick={navTo("work-with-me")}>Reserve Your Spot</Btn>
          </div>
        ))}
      </div>
    </section>

    {/* DEEPER CONSULT EXPLANATION */}
    <section className="section section-white">
      <div className="container" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64, alignItems: "center" }}>
        <div>
          <Eyebrow>Free Consultation</Eyebrow>
          <h2 className="h-display" style={{ fontSize: 40, margin: "14px 0 20px" }}>
            Discover your attachment style in a free 15-minute consultation.
          </h2>
          <p className="body-lg" style={{ marginBottom: 18 }}>
            Understanding your attachment style is the first step toward building healthier
            relationships. Book a free 15-minute consultation with me to uncover your
            unique attachment style and gain insight into how it shapes your connections.
          </p>
          <p className="body-lg" style={{ marginBottom: 28 }}>
            This no-obligation session is designed to help you explore your personal growth
            journey and see how I can support you.
          </p>
          <Btn variant="dark" href="#/work-with-me" onClick={navTo("work-with-me")}>Reserve Your Spot</Btn>
        </div>
        <div className="card-soft" style={{ background: "var(--aa-mint-200)" }}>
          <Eyebrow>1:1 Coaching</Eyebrow>
          <h3 className="h-display" style={{ fontSize: 32, margin: "12px 0 14px" }}>
            Integrated Attachment Theory coaching session
          </h3>
          <p className="body-md" style={{ marginBottom: 20 }}>
            Transform your relationships by healing attachment wounds and reprogramming
            your subconscious mind. This personalized coaching program is designed to guide
            you through deep self-discovery, emotional regulation, and reprogramming negative
            patterns over multiple weeks.
          </p>
          <p className="body-md" style={{ marginBottom: 24 }}>
            Each session provides practical tools you can use right away, while also
            creating lasting change over time. You'll leave every session with actionable
            steps to move forward on your journey to secure and fulfilling relationships.
          </p>
          <div style={{
            background: "var(--aa-ink-1000)", color: "var(--aa-cyan-glow)",
            padding: "14px 18px", borderRadius: 12,
            fontFamily: "var(--aa-font-headline)", fontSize: 11, letterSpacing: "0.22em",
            textTransform: "uppercase", textAlign: "center", marginBottom: 20,
          }}>
            Only 2 Spots Left For This Month
          </div>
          <Btn variant="dark" href="#/work-with-me" onClick={navTo("work-with-me")}>Claim Your Spot Now</Btn>
        </div>
      </div>
    </section>

    {/* SHORT FAQ */}
    <section className="section section-cream">
      <div className="container" style={{ maxWidth: 880 }}>
        <div style={{ textAlign: "center", marginBottom: 40 }}>
          <Eyebrow>Frequently Asked Questions</Eyebrow>
          <h2 className="h-display" style={{ fontSize: 40, margin: "14px 0 14px" }}>
            Pricing &amp; logistics.
          </h2>
          <p className="body-md" style={{ maxWidth: 560, margin: "0 auto" }}>
            Visit the <a href="#/faq" onClick={navTo("faq")} style={{ color: "var(--aa-teal-700)", fontWeight: 600 }}>FAQ page</a> for the
            full method overview, or reach me at <a href="mailto:support@alignedattachments.com" style={{ color: "var(--aa-teal-700)", fontWeight: 600 }}>support@alignedattachments.com</a> if you can't find an answer.
          </p>
        </div>
        <div className="faq-list">
          {FAQ_SHORT.map(([q, a], i) => (
            <details key={i} className="faq-item" open={i === 0}>
              <summary>{q}</summary>
              <div className="faq-body"><p>{a}</p></div>
            </details>
          ))}
        </div>
      </div>
    </section>
  </main>
);

window.ServicesPage = ServicesPage;