/* global React, Photo, Eyebrow, Rule, CTABand, Disclosure, useIsPhone */

function AboutIntro() {
  return (
    <section className="about-intro">
      <div className="about-intro__inner">
        <div className="about-intro__figure">
          <Photo src="assets/ahp-photos/about-branding.jpg" aspect="4/5" />
          <div className="about-polaroid about-polaroid--tr">
            <Photo src="assets/ahp-photos/abby-and-daniel.jpg" aspect="1/1" position="50% 40%" />
            <div className="about-polaroid__cap">Me and my husband</div>
          </div>
          <div className="about-polaroid about-polaroid--bl">
            <Photo src="assets/ahp-photos/sebastian.jpg" aspect="1/1" position="50% 45%" />
            <div className="about-polaroid__cap">Sebastian</div>
          </div>
        </div>
        <div>
          <Eyebrow>About Abby</Eyebrow>
          <h1 className="kit-headline kit-headline--xl about-intro__title">
            Nice to<br />
            <em>meet you!</em>
          </h1>
          <Rule />
          <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
            <p className="kit-lede page-lede">
              My work is quiet, unhurried, and gently prompted. I take my lattes
              with vanilla, my walks long, and my approach with care. Most of all,
              I'm here to be a calm, grounding presence, guiding you when you need
              it and stepping back for the held hand, the laughter around the table,
              and the quiet moments that make up real life.
            </p>
          </div>
          <div style={{ marginTop: 40, display: 'flex', alignItems: 'center', gap: 32, flexWrap: 'wrap' }}>
            <span style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: 26, color: 'var(--clay)' }}>
              — Abby
            </span>
          </div>
        </div>
      </div>
    </section>
  );
}

function AboutStory() {
  return (
    <section className="about-story">
      <div className="about-story__pattern" />
      <div className="about-story__inner">
        <div>
          <span className="kit-eyebrow" style={{ color: 'var(--rose)' }}>The Longer Story</span>
          <h2 className="kit-headline kit-headline--md" style={{ marginTop: 32, color: 'var(--cream)' }}>
            How I got <em style={{ color: 'var(--rose)' }}>here.</em>
          </h2>
          <hr className="kit-rule" style={{ background: 'var(--rose)', marginTop: 32 }} />
        </div>
        <div className="about-story__prose">
          <p>
            I grew up right here in the Athens area, seeing the world
            in frames long before I ever picked up a professional camera.
            My photography journey officially began with a hot pink
            Nikon Coolpix. Even with a tiny point-and-shoot, I fell
            completely in love with composition: noticing light, balance,
            and the quiet symmetry of everyday moments.
          </p>
          <p>
            After graduating from UGA (Go Dawgs!), what started as a
            passion project and a side hustle eventually grew into my
            full-time life's work. I've never looked back.
          </p>
          <p>
            Today, my husband Daniel and I live in Watkinsville with our
            dog, Sebastian. When I'm not behind the camera, you can
            usually find me out on a walk, trying a new recipe, attempting
            to crochet, or perfecting my at-home vanilla latte.
          </p>
          <p className="about-story__pull">
            "The best photographs are the ones you don't notice being taken."
          </p>
        </div>
      </div>
    </section>
  );
}

function AboutValues() {
  const isPhone = useIsPhone();
  const items = [
    { n: '01', title: <>An <em>unhurried</em> day.</>,    body: "Your wedding morning shouldn't feel like a production. I work slowly, quietly, and stay out of the way — present without being a presence." },
    { n: '02', title: <>Photographs that <em>feel right.</em></>, body: "Warm tones, soft contrast, a bit of grain. I deliver an editorial gallery that looks like the day actually felt, not a Pinterest board." },
    { n: '03', title: <>Real <em>partnership.</em></>,    body: "We'll plan the timeline together. I'll send a sketch of the day, talk you through golden-hour windows, and answer every question — no matter how small." },
    { n: '04', title: <>Intentional <em>delivery.</em></>, body: "A private online gallery that is fully yours to share, print, and cherish. I always send options for printing and purchasing photo albums as well." },
    { n: '05', title: <>The <em>small things.</em></>,    body: "The shoes by the chair. Your grandmother's earrings. Your dad wiping his eyes during the toast. These are the photographs you'll keep." },
    { n: '06', title: <>Forever <em>quiet.</em></>,        body: "No upsells, no aggressive sales calls, no last-minute fees. One transparent investment guide, an honest conversation, and a long handshake." },
  ];
  return (
    <section className="values">
      <div className="values__inner">
        <div className="values__top">
          <div>
            <Eyebrow>What to Expect</Eyebrow>
            <h2 className="kit-headline kit-headline--lg" style={{ marginTop: 24 }}>
              Six <em>small promises.</em>
            </h2>
          </div>
          <p className="kit-lede" style={{ margin: 0 }}>
            These are the things I quietly hold myself to — the
            atmosphere of every wedding, every session, every email I
            send. If they read like the kind of day you'd like to have,
            we're probably a good fit.
          </p>
        </div>
        <div className="values__grid">
          {items.map(it => (
            <Disclosure
              key={it.n}
              className="value"
              collapsible={isPhone}
              title={<h3 className="value__title">{it.title}</h3>}
            >
              <p className="value__body">{it.body}</p>
            </Disclosure>
          ))}
        </div>
      </div>
    </section>
  );
}

function AboutGear() {
  const cols = [
    { label: 'In the bag', items: ['Dual-card digital gear', 'Backup gear for peace of mind', 'A quiet, unhurried pace', 'A collection of lenses (mainly my 35 & 85)'] },
    { label: 'On the playlist', items: ['The Band Camino', 'Ben Rector', 'Musical Theater Showtunes', 'Whatever you walk down the aisle to'] },
    { label: 'Home Base', items: ['Slow walks', 'Coffee brewing', 'Prepared to travel', "Ready for the day you're planning"] },
  ];
  return (
    <section className="gear">
      <div className="gear__inner">
        <div style={{ textAlign: 'center', marginBottom: 'clamp(40px, 5vw, 72px)' }}>
          <Eyebrow center>Studio Notes</Eyebrow>
          <h2 className="kit-headline kit-headline--md" style={{ marginTop: 24 }}>
            For the <em>curious.</em>
          </h2>
        </div>
        <div className="gear__grid">
          {cols.map(c => (
            <div key={c.label}>
              <div className="gear__label">{c.label}</div>
              <ul className="gear__list">
                {c.items.map(i => <li key={i}>{i}</li>)}
              </ul>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function AboutPage({ onNav }) {
  return (
    <React.Fragment>
      <AboutIntro />
      <AboutStory />
      <AboutValues />
      <AboutGear />
      <CTABand
        onNav={onNav}
        secondary={false}
        title={<>I'd love to <em>meet you.</em></>}
        body="Send a note with a few details about your day and I'll write back personally — usually within 48 hours."
      />
    </React.Fragment>
  );
}

window.AboutPage = AboutPage;