const Investment = () => (
  <>
    <section className="page-hero container reveal">
      <div className="eyebrow" style={{marginBottom: 16}}>Investment</div>
      <h1>Heirloom photography,<br/>at an <em>accessible</em> price point</h1>
      <p className="sub">Because every family deserves this.</p>
    </section>

    <section className="container" style={{paddingBottom: 60}}>
      <div className="container-narrow reveal" style={{padding: 0}}>
        <p style={{fontSize: 18}}>
          At Motherhood Lens Co., I believe beautiful photography of your family shouldn't be reserved for special occasions or stretched budgets. It should be woven into the rhythm of your family's life: annual family sessions, motherhood portraits when you need to feel seen, mini sessions for the seasons you want to remember.
        </p>
        <p style={{fontSize: 18, color: 'var(--rose-text)', fontFamily: 'Fraunces', fontStyle: 'italic'}}>
          My pricing is intentionally mid-range: elevated in quality and experience, approachable in price.
        </p>
      </div>
    </section>

    <section className="container" style={{paddingBottom: 120}}>
      <div className="reveal" style={{background: 'var(--cream)', border: '1px solid var(--line)', borderRadius: 20, padding: 'clamp(30px, 5vw, 70px)'}}>
        <div className="center" style={{marginBottom: 40}}>
          <div className="orn"><span className="mono" style={{color: 'var(--gold-text)'}}>Session Pricing · 2026</span></div>
        </div>

        {[
          { t: 'Mini Sessions', d: '20-minute session · 10+ edited images · private gallery', p: 100 },
          { t: 'Motherhood & Mommy + Me', d: '20-minute session · full gallery', p: 50 },
          { t: 'Family Session', d: '20-minute session · 50+ edited images', p: 150 },
          { t: 'Newborn / Maternity', d: '20-minute session · mom, baby, family, siblings · full gallery', p: 100 },
          { t: 'Graduation', d: '20-minute session · cap & gown portraits · full gallery', p: 100 },
        ].map((r, i) => (
          <div key={i} className="price-row" style={{borderBottom: i === 4 ? 'none' : '1px solid var(--line)'}}>
            <div>
              <h3>{r.t}</h3>
              <div className="desc">{r.d}</div>
            </div>
            <div className="amount">
              <small>Starting At</small>
              ${r.p}
            </div>
          </div>
        ))}

        <div style={{marginTop: 40, padding: 24, background: 'var(--blush)', borderRadius: 12, fontSize: 14, color: 'var(--charcoal-soft)', textAlign: 'center'}}>
          All sessions include professionally edited high-res images, a private online gallery, and full print release.<br/>
          <em>Custom album and wall art collections available upon request.</em>
        </div>
      </div>

      <div className="center reveal" style={{marginTop: 70}}>
        <p style={{maxWidth: 560, margin: '0 auto 28px', color: 'var(--charcoal-soft)'}}>
          Every session is a little different. The best next step is a quick inquiry so I can send you the full pricing guide and walk you through what's right for your family.
        </p>
        <a href="#/contact" className="btn btn-primary">Request The Full Pricing Guide</a>
      </div>
    </section>
  </>
);

const faqs = [
  { q: 'My toddler is… a lot. Will this even work?', a: "Yes. I promise. I'm a mom of three. I've seen every tantrum, tummy ache, and sudden mid-session nap in the book. I build extra time into every session specifically for the unpredictable nature of little ones. Trust me: the meltdowns make the magic." },
  { q: 'Where are sessions held?', a: "My favorite local spots are Anne Springs Close Greenway, Walter Elijah Park, and Daniel Stowe Botanical Garden, but I'm always open to your favorite location in the Fort Mill, Indian Land, and Rock Hill areas. Newborn sessions are held in-home." },
  { q: 'How far in advance should I book?', a: "Full sessions: 6–8 weeks ahead, especially for fall and holiday dates. Mini sessions: the moment they're announced. Newborn sessions: book during pregnancy with your due-date on hold." },
  { q: 'When will we receive our photos?', a: "Full sessions: 2–3 weeks. Mini sessions: within 7 days." },
  { q: 'Do you travel outside the Fort Mill / Indian Land / Rock Hill area?', a: "Yes, travel fees may apply for sessions outside a 20-mile radius. Just ask!" },
  { q: "What's your cancellation / rescheduling policy?", a: "Life with kids happens. I offer one complimentary reschedule with at least 48 hours notice. Full details are in the booking contract." },
  { q: 'I want to book. What happens next?', a: "Fill out the inquiry form, text or call, or DM me on social media." },
];

const FAQ = () => (
  <>
    <section className="page-hero container reveal">
      <div className="eyebrow" style={{marginBottom: 16}}>FAQ</div>
      <h1>Good questions,<br/><span className="script" style={{color: 'var(--rose-deep)'}}>honest</span> answers</h1>
    </section>

    <section className="container-narrow" style={{paddingBottom: 120}}>
      <div className="reveal">
        {faqs.map((f, i) => (
          <details className="faq" key={i}>
            <summary>{f.q}<span className="plus">+</span></summary>
            <div className="answer">{f.a}</div>
          </details>
        ))}
      </div>
      <div className="center" style={{marginTop: 70}}>
        <p style={{color: 'var(--charcoal-soft)', marginBottom: 24}}>Still have a question?</p>
        <a href="#/contact" className="btn btn-secondary">Send Me A Note</a>
      </div>
    </section>
  </>
);

Object.assign(window, { Investment, FAQ });