/* global React, Photo, Eyebrow, Rule, CTABand, Disclosure, useIsPhone */
const { useState: useStateInv } = React;

function InvestmentHeader() {
  return (
    <header className="page-header page-header--wide">
      <div className="page-header__inner">
        <Eyebrow center>Investment & Experience</Eyebrow>
        <h1 className="kit-headline kit-headline--xl headline-oneline" style={{ margin: '32px 0 24px' }}>
          <em>let's</em> <span className="stroke">begin.</span>
        </h1>
        <Rule center />
        <p className="kit-lede page-lede page-lede--center">
          I believe in transparency in pricing and clear expectations
          from the beginning.
        </p>
      </div>
    </header>
  );
}

/* Session pricing, deliberately quiet.

   It reads as the same single line of italic type that used to sit here, so a
   couple scanning wedding pricing scrolls past it exactly as before. A family
   looking for their own number finds it named, directly under the wedding
   panel, and one tap away — no second page to hunt for. That balance is the
   whole point of the disclosure; making it a card of its own would give family
   pricing equal billing with the wedding collection. */
function SessionPricing({ onNav }) {
  const [open, setOpen] = useStateInv(false);
  return (
    <div className="sessions">
      <button
        className="sessions__toggle"
        aria-expanded={open}
        aria-controls="session-pricing"
        onClick={() => setOpen(o => !o)}
      >
        Portraits, families, &amp; lifestyle sessions
        <span className="sessions__mark" aria-hidden="true">+</span>
      </button>

      <div id="session-pricing" className={`sessions__panel ${open ? 'is-open' : ''}`}>
        <div className="sessions__inner">
          <div className="sessions__card">
            <div>
              <h3 className="sessions__name">Portraits, Families <em>&amp; Lifestyle</em></h3>
              <div className="sessions__price">Starting at $525</div>
            </div>
            <p className="sessions__blurb">
              Sessions for families, seniors, engagements outside a wedding
              collection, and anything else worth keeping. Please reach out for
              more information regarding your session — I'll send availability
              and everything that comes with it.
            </p>
            <button
              className="kit-btn kit-btn--ghost"
              tabIndex={open ? 0 : -1}
              onClick={() => onNav('contact')}
            >
              Ask About a Session
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

function Collections({ onNav }) {
  return (
    <section className="collections">
      <div style={{ maxWidth: 'var(--maxw)', margin: '0 auto' }}>
        <div style={{ marginBottom: 24 }}>
          <Eyebrow>The Wedding Collection</Eyebrow>
        </div>
        {/* One wedding offering, centered — see .collection--single in site.css */}
        <div className="collection collection--single">
          <div className="collection__col collection__col--featured">
            <div className="collection__body">
              <div className="collection__intro">
                <div className="collection__head">
                  <div>
                    <h3 className="collection__name">
                      The Abby Harper Photo<br /><em>Wedding Experience</em>
                    </h3>
                    <div className="collection__price">Starting at $5,500</div>
                  </div>
                  <img src={asset("assets/ahp-logo/Symbol-clay.png")} alt="" style={{ width: 44, flex: 'none', opacity: 0.9 }} />
                </div>
                <p className="collection__blurb">
                  Full-day coverage from getting ready to your grand exit. Always
                  with me as your main photographer and a trusted colleague by my
                  side to help document.
                </p>
              </div>
              <ul className="collection__list">
              <li>Full day coverage (on average, 8&ndash;10 hours)</li>
              <li>Second photographer</li>
              <li>Online gallery &mdash; 800+ images</li>
              <li>Engagement session included</li>
              <li>4&ndash;6 week gallery delivery</li>
                <li>Timeline and shot-list consultation</li>
              </ul>
            </div>
          </div>
        </div>

        <SessionPricing onNav={onNav} />
      </div>
    </section>
  );
}

function Experience() {
  const isPhone = useIsPhone();
  const steps = [
    { n: '01', title: <>The first <em>hello.</em></>, body: "You send a note through the inquire form. I read every word, write back within 48 hours, and attach the full investment guide. No automated replies, no sales funnels." },
    { n: '02', title: <>The <em>consultation.</em></>, body: "We'll connect over Zoom or coffee to talk through details, review session options, and make sure you feel completely confident moving forward together." },
    { n: '03', title: <>Reserving your <em>date.</em></>, body: "Securing your spot is seamless: a quick digital contract, a 25% retainer, and you're on my calendar. I intentionally limit how much I book each week so I can show up completely rested and focused for you." },
    { n: '04', title: <>Planning, <em>unhurried.</em></>, body: "I send a planning workbook six months out and a timeline sketch eight weeks before. We walk venues together when we can. Your engagement session slots in here." },
    { n: '05', title: <>The <em>day itself.</em></>, body: "I always arrive early with gear ready to go and shoes that don't squeak. Most of the time you won't even notice I'm there as I'm working to capture your favorite moments." },
    { n: '06', title: <>The <em>delivery.</em></>, body: "A private online gallery in four to six weeks, fully yours to share and print. I'll send options for prints and albums with it, so you can turn the day into something you can hold." },
  ];
  return (
    <section className="exp">
      <div className="exp__inner">
        <div style={{ textAlign: 'center', marginBottom: 40 }}>
          <Eyebrow center>The Experience</Eyebrow>
          <h2 className="kit-headline kit-headline--md" style={{ marginTop: 16 }}>
            What working <em>together</em><br />
            actually looks like.
          </h2>
        </div>
        <div className="exp__timeline">
          {steps.map(s => (
            <Disclosure
              key={s.n}
              className="exp__step"
              collapsible={isPhone}
              lead={s.n}
              title={<h3 className="exp__title">{s.title}</h3>}
            >
              <p className="exp__body">{s.body}</p>
            </Disclosure>
          ))}
        </div>
      </div>
    </section>
  );
}

function FAQItem({ n, q, a }) {
  const [open, setOpen] = useStateInv(false);
  return (
    <div className={`faq__item ${open ? 'faq__item--open' : ''}`} onClick={() => setOpen(!open)}>
      <div className="faq__item-head">
        <h3 className="faq__q">{q}</h3>
        <div className="faq__toggle">+</div>
      </div>
      <div className="faq__a">
        <div className="faq__a-inner"><p>{a}</p></div>
      </div>
    </div>
  );
}

function FAQ() {
  const items = [
    { n: '01', q: <>Do you travel <em>outside Athens?</em></>, a: "Absolutely. While I'm rooted in Watkinsville and Athens, I regularly travel throughout Georgia and in recent years, as far as Washington D.C and LA! Whether you're planning a session nearby or a plane ride away, I'm always happy to pack my bags and come to you." },
    { n: '02', q: <>Do you shoot <em>digital or film?</em></>, a: "I'm fully digital! I haven't ventured into film for my work yet. I love the speed, responsiveness, and peace of mind that high-end digital gear gives me during a session or wedding day." },
    { n: '03', q: <>Are you the one photographing <em>our day?</em></>, a: "Yes, always. I limit my calendar to one wedding per weekend so I can give you my full energy and focus. When a second shooter is part of the day, I'll be joined by a trusted friend and close colleague who shares my unhurried, gentle approach." },
    { n: '04', q: <>What's your <em>turnaround</em> time?</>, a: "Weddings: You'll receive a sneak peek preview within 48 hours, with your full gallery delivered within 4 to 6 weeks. Family and Lifestyle: Full galleries are delivered within 2 weeks. I know how eager you'll be to see your photos, so getting that early preview to you quickly while giving your full gallery the careful editing time it deserves is always a top priority." },
    { n: '05', q: <>What if it <em>rains?</em></>, a: "Then we shoot in the rain. Some of my favorite sessions have been the wet ones. I bring backup gear, towels, a few umbrellas, and a very calm disposition." },
  ];
  return (
    <section className="faq">
      <div className="faq__inner">
        <div className="faq__top">
          <Eyebrow center>Frequent Asks</Eyebrow>
          <h2 className="kit-headline kit-headline--lg" style={{ marginTop: 24 }}>
            A few <em>intentional</em> answers.
          </h2>
        </div>
        <div className="faq__list">
          {items.map(i => <FAQItem key={i.n} {...i} />)}
        </div>
      </div>
    </section>
  );
}

function InvestmentPage({ onNav }) {
  return (
    <React.Fragment>
      <InvestmentHeader />
      <Collections onNav={onNav} />
      <Experience />
      <FAQ />
      <CTABand
        onNav={onNav}
        title={<>Want <em>more information?</em></>}
        body="A full investment guide, sample timelines, and galleries. Sent within 48 hours of your inquiry."
        primaryLabel="Request the Guide"
      />
    </React.Fragment>
  );
}

window.InvestmentPage = InvestmentPage;