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-deep)', 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)'}}>Session Pricing · 2026</span></div>
        </div>

        {[
          { t: 'Seasonal Mini Session', d: '20-minute session · 10+ edited images · private gallery', p: 275 },
          { t: 'Motherhood & Mommy + Me', d: '1-hour session · wardrobe guidance · full gallery', p: 375 },
          { t: 'Family Session', d: '1-hour session · 50+ edited images · styling guide', p: 450 },
          { t: 'Newborn (In-Home)', d: '1.5-hour session · mom, baby, family, siblings · full gallery', p: 550 },
        ].map((r, i) => (
          <div key={i} className="price-row" style={{borderBottom: i === 3 ? '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: 'What should we wear?', a: "Once you book, you'll get a full styling guide with Pinterest inspiration, wardrobe tips, and even local shop recommendations. The short version: soft neutrals, flowy textures, and no loud logos. I'm also happy to help you hand-pick outfits if you want a second opinion." },
  { 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, Glencairn Garden, and Walnut Creek, but I'm always open to your favorite location in the Fort Mill, Indian Land, and Rock Hill areas. Newborn sessions and many motherhood 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. Rush delivery is available if needed." },
  { 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. You'll hear back from me within 24 hours with next steps, pricing, and how to lock in your date." },
];

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 });