const services = [
  {
    num: '01',
    eye: 'In-Home · Newborn',
    title: 'The first two weeks go impossibly fast.',
    kicker: 'Newborn Sessions',
    body: [
      'In-home newborn sessions designed for sleepy, squishy, fresh-from-heaven babies and the mamas still tenderly finding their footing.',
      "I come to you, so you don't have to worry about packing a diaper bag, leaving the house, or anything beyond holding your baby and soaking it in. We'll capture those tiny fingers, the curl of her lashes, the way you already know exactly how to hold him.",
    ],
    meta: [
      ['Best Booked', 'Within 5–14 days of birth'],
      ['Location', 'In your home, natural light only'],
      ['Includes', '1.5-hour session, mom & baby, family portraits, sibling images, full high-res gallery'],
    ],
    cta: 'Reserve Your Due Date',
    scene: 'newbornHome',
    label: 'newborn in cream wrap, home nursery',
  },
  {
    num: '02',
    eye: 'Mommy + Me',
    kicker: 'Motherhood & Mommy + Me',
    title: 'Get in the photo, mama.',
    body: [
      "This session is for the mother who's always taking the pictures and never in them. For the mama who sighs and says, \"I don't look like myself right now.\" For the woman who forgets that her children don't see her flaws. They see home.",
      "We'll spend a quiet hour together capturing the bond only you two share. The forehead kisses. The way he melts into your chest. The way she looks up at you like you hung the moon, because mama, to her, you did.",
    ],
    meta: [
      ['Location', 'Anne Springs Close Greenway, Glencairn Garden, Walnut Creek, or in-home'],
      ['Includes', '1-hour session, curated wardrobe guidance, full high-res gallery'],
      ['Perfect For', "Mother's Day, post-partum healing, annual tradition, or \"just because\""],
    ],
    cta: 'Book Your Mommy + Me',
    scene: 'momKiss',
    label: 'mother + daughter, forehead to forehead',
  },
  {
    num: '03',
    eye: 'Family',
    kicker: 'Family Sessions',
    title: 'The annual tradition your future self will thank you for.',
    body: [
      'One hour. One golden-lit evening. One set of portraits that becomes the benchmark of another beautiful year.',
      "My family sessions are the opposite of stiff. We'll walk, explore, snuggle, tickle, and chase butterflies, and somewhere in the middle of all that real-life magic, I'll capture the images that stop your mother-in-law in her tracks.",
    ],
    meta: [
      ['Locations', 'Anne Springs Close Greenway, Glencairn Garden, Walnut Creek, or your favorite local spot'],
      ['Includes', '1-hour session, styling guide, full high-res gallery of 50+ edited images'],
      ['Best For', 'Growing families, annual portraits, milestone birthdays, holiday cards'],
    ],
    cta: 'Book Your Family Session',
    scene: 'familyWalk',
    label: 'family of five, walking, golden hour',
  },
  {
    num: '04',
    eye: 'Four Times A Year',
    kicker: 'Seasonal Mini Sessions',
    title: 'The fan favorite.',
    body: [
      "Four times a year, I open up a small batch of themed mini session spots at South Carolina's most magical locations. They sell out fast, because busy moms love them, and because there's truly nothing like them.",
    ],
    seasons: [
      ['Spring Florals', 'Peony blooms, blush tones, and garden dreams at Glencairn Garden.'],
      ['Summer Golden Hour', 'Barefoot and sun-kissed along the trails at Anne Springs Close Greenway.'],
      ['Fall Pumpkin Patch', 'Cozy sweaters, pumpkins galore, and that Carolina autumn light.'],
      ['Holiday Magic', 'Twinkle lights, Christmas trees, and the photos that make your holiday cards the ones everyone keeps.'],
    ],
    meta: [
      ['Includes', '20-minute session, 10+ fully edited high-res images, styling guidance'],
    ],
    cta: 'See Upcoming Mini Sessions',
    scene: 'springFloral',
    label: 'peonies, garden, spring mini setup',
  },
];

const Services = () => (
  <>
    <section className="page-hero container reveal">
      <div className="eyebrow" style={{marginBottom: 16}}>Services</div>
      <h1>Sessions made for<br/>this season of motherhood</h1>
      <p className="sub">Soft, sunlit, and full of the love you live every day.</p>
    </section>

    <section className="container">
      {services.map((s, i) => (
        <div key={i} className={`feature reveal ${i % 2 ? 'reverse' : ''}`} style={{borderTop: i === 0 ? 'none' : '1px solid var(--line)'}}>
          <div>
            <window.Photo scene={s.scene} label={s.label} aspect="4/5"/>
          </div>
          <div>
            <div className="mono" style={{color: 'var(--gold)', marginBottom: 10}}>{s.num} · {s.eye}</div>
            <h2 style={{fontSize: 'clamp(32px, 3.6vw, 46px)', lineHeight: 1.1, marginBottom: 10}}>{s.title}</h2>
            <div className="script" style={{fontSize: 22, color: 'var(--rose-deep)', marginBottom: 22}}>{s.kicker}</div>
            {s.body.map((p, k) => <p key={k}>{p}</p>)}
            {s.seasons && (
              <div className="seasons-grid">
                {s.seasons.map(([t, d], k) => (
                  <div key={k} style={{padding: 16, background: 'var(--cream-deep)', borderRadius: 12}}>
                    <div style={{fontFamily: 'Fraunces', fontSize: 17, marginBottom: 4, color: 'var(--charcoal)'}}>{t}</div>
                    <div style={{fontSize: 13, color: 'var(--charcoal-soft)'}}>{d}</div>
                  </div>
                ))}
              </div>
            )}
            <div className="feature-meta">
              {s.meta.map(([k, v], n) => (
                <div className="row" key={n}><strong>{k}</strong><span>{v}</span></div>
              ))}
            </div>
            <a href="#/contact" className="btn btn-secondary">{s.cta} →</a>
          </div>
        </div>
      ))}
    </section>

    <section className="section container">
      <div className="urgency reveal">
        <div><div className="script" style={{fontSize: 'clamp(34px, 4.5vw, 48px)', color: 'var(--rose-deep)', lineHeight: 1}}>One hour.</div></div>
        <div>
          <h3 style={{fontSize: 'clamp(20px, 3vw, 26px)', marginBottom: 8}}>Not sure which session is right for you?</h3>
          <p style={{color: 'var(--charcoal-soft)', margin: 0, fontSize: 15}}>Send a quick inquiry. I'll write back within 24 hours with the session that fits your family and the full pricing guide.</p>
        </div>
        <a href="#/contact" className="btn btn-primary">Inquire Now</a>
      </div>
    </section>
  </>
);

Object.assign(window, { Services });