// About page for Little Bloom Photo Studio

function AboutPage({ setPage }) {
  return (
    <main data-screen-label="02 About">
      <AboutHero />
      <AboutStory />
      <AboutFeatures />
      <AboutStudio setPage={setPage} />
      <AboutFAQ setPage={setPage} />
      <AboutCTA setPage={setPage} />
    </main>
  );
}

function AboutHero() {
  return (
    <section style={{ paddingTop: 'calc(var(--lb-section) * 1.2)', paddingBottom: 'calc(var(--lb-section) * 0.4)', background: 'var(--lb-cream-3)' }}>
      <div className="lb-container" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'clamp(40px, 7vw, 120px)', alignItems: 'center' }} >
        <Reveal>
          <div className="lb-eyebrow">About the studio</div>
          <h1 className="lb-display lb-about-h1" style={{ fontSize: 'clamp(44px, 7vw, 110px)', marginTop: 20 }}>
            <span className="rom">A warm,</span><br />
            <span className="scr">natural light</span><br />
            <span className="rom">studio.</span>
          </h1>
          <p className="lb-lead" style={{ marginTop: 34, maxWidth: 520 }}>
            Thoughtfully designed for photographers, creatives, and growing families —
            a cozy 500 sq ft space where creativity can bloom naturally.
          </p>
        </Reveal>
        <Reveal delay={120} style={{ position: 'relative' }}>
          <div className="lb-img-wrap r-3x4" style={{ maxWidth: 520, marginLeft: 'auto' }}>
            <img src={PHOTOS.studio1} alt="Little Bloom Photo Studio interior" />
          </div>
          <div style={{ position: 'absolute', bottom: 30, left: -30, background: 'var(--lb-cream-3)', padding: '18px 26px', boxShadow: '0 18px 50px rgba(58,46,37,0.14)' }}>
            <div style={{ fontFamily: 'var(--lb-script)', fontSize: 44, color: 'var(--lb-tan)', lineHeight: 0.9 }}>Little Bloom</div>
            <div className="lb-eyebrow" style={{ marginTop: 6 }}>Pleasant Grove, Utah</div>
          </div>
        </Reveal>
      </div>
      <style>{`
        @media (max-width: 880px) {
          section > .lb-container[style*="1fr 1fr"] { grid-template-columns: 1fr !important; }
          .lb-about-h1 { width: 100%; }
        }
      `}</style>
    </section>
  );
}

function AboutStory() {
  return (
    <section style={{ paddingTop: 'calc(var(--lb-section) * 0.4)', paddingBottom: 'var(--lb-section)' }}>
      <div className="lb-container" style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 'clamp(40px, 8vw, 120px)', alignItems: 'start' }}>
        <Reveal style={{ position: 'sticky', top: 120 }}>
          <img src="assets/logo.png" alt="Little Bloom Photo Studio" style={{ width: 160, height: 'auto', objectFit: 'contain' }} />
          <div className="lb-eyebrow" style={{ marginTop: 28 }}>Welcome</div>
          <h2 className="lb-h2" style={{ marginTop: 18 }}>
            Where <span className="scr">creativity</span> blooms.
          </h2>
        </Reveal>
        <Reveal delay={120} className="lb-body lg" style={{ fontSize: 18, lineHeight: 1.85, color: 'var(--lb-text)' }}>
          <p>
            Welcome to The Little Bloom Photo Studio — a warm, natural light space thoughtfully
            designed for photographers, creatives, and growing families.
          </p>
          <p>
            Our cozy 500 sq ft studio was created to feel inviting, versatile, and easy to create in.
            With 7 beautiful natural light windows — including 5 large southwest-facing windows —
            the studio fills with dreamy light throughout the day, making it perfect for maternity,
            newborn, family, branding, and motherhood sessions.
          </p>
          <p>
            To keep the space functional in every season, we also provide additional drapes to help
            soften or control harsh lighting when needed, giving you flexibility no matter the time
            of day.
          </p>
          <p style={{ fontFamily: 'var(--lb-display)', fontStyle: 'italic', fontSize: 24, color: 'var(--lb-brown)', lineHeight: 1.5, paddingLeft: 26, borderLeft: '2px solid var(--lb-tan)', marginTop: 40 }}>
            Whether you're documenting tiny newborn details, playful family moments, or building your
            creative business — The Little Bloom Photo Studio was made to be a space where creativity
            can bloom naturally.
          </p>
        </Reveal>
      </div>
    </section>
  );
}

function AboutFeatures() {
  const features = [
    { n: 'I.', t: '500 sq ft shooting space', d: "Cozy yet versatile — enough room for any style of session, from intimate newborn work to full family portraits." },
    { n: 'II.', t: '7 natural light windows', d: "Including 5 large southwest-facing windows that fill the studio with dreamy, flattering light throughout the day." },
    { n: 'III.', t: 'Light control drapes', d: "Extra drapes to soften or block harsh light when needed — giving you beautiful results in any season or time of day." },
    { n: 'IV.', t: 'Curated furniture & props', d: "A clean, minimal aesthetic designed to photograph beautifully, with carefully selected furniture and props for every session style." },
  ];
  return (
    <section style={{ background: 'var(--lb-cream)', paddingBlock: 'var(--lb-section)' }}>
      <div className="lb-container">
        <Reveal style={{ textAlign: 'center', maxWidth: 720, marginInline: 'auto' }}>
          <div className="lb-eyebrow">What's included</div>
          <h2 className="lb-h2" style={{ marginTop: 18 }}>
            Everything you need to <span className="scr">create</span>.
          </h2>
        </Reveal>
        <div style={{ marginTop: 80, display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))', gap: 8 }}>
          {features.map((v, i) => (
            <Reveal key={v.n} delay={i * 100} style={{ background: 'var(--lb-cream-3)', padding: '40px 32px 44px', minHeight: 300, display: 'flex', flexDirection: 'column' }}>
              <div style={{ fontFamily: 'var(--lb-script)', fontSize: 56, color: 'var(--lb-tan)', lineHeight: 1 }}>{v.n}</div>
              <h3 className="lb-h3" style={{ marginTop: 18, fontStyle: 'italic' }}>{v.t}</h3>
              <p className="lb-body" style={{ marginTop: 16, fontSize: 15 }}>{v.d}</p>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function AboutStudio({ setPage }) {
  return (
    <section className="lb-section">
      <div className="lb-container">
        <Reveal style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'end', gap: 30, flexWrap: 'wrap', marginBottom: 64 }}>
          <div>
            <div className="lb-eyebrow">The space</div>
            <h2 className="lb-h2" style={{ marginTop: 18, maxWidth: 720 }}>
              Beautiful light. <span className="scr">Beautiful space.</span>
            </h2>
          </div>
          <div className="lb-studio-meta">
            <p className="lb-body" style={{ marginBottom: 20 }}>
              43 S 1300 W St Suite 43A<br />
              Pleasant Grove, UT 84062
            </p>
            <button className="lb-btn" onClick={() => { setPage('booking'); window.scrollTo({ top: 0, behavior: 'instant' }); }}>Book a session <span className="arrow"></span></button>
          </div>
        </Reveal>

        <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr', gridAutoRows: '300px', gap: 12 }} className="lb-studio-grid">
          <Reveal className="lb-img-wrap" style={{ gridRow: 'span 2' }}>
            <img src={PHOTOS.studio1} alt="The studio space" />
          </Reveal>
          <Reveal delay={80} className="lb-img-wrap" style={{ gridRow: 'span 1', gridColumn: 'span 2' }}>
            <img src={PHOTOS.studio3} alt="Sofa area with macramé wall" />
          </Reveal>
          <Reveal delay={160} className="lb-img-wrap">
            <img src={PHOTOS.flowers} alt="Studio pampas wall arrangement" />
          </Reveal>
          <Reveal delay={240} className="lb-img-wrap">
            <img src={PHOTOS.light} alt="Natural window light with bassinet" />
          </Reveal>
        </div>

      </div>

      <style>{`
        @media (max-width: 880px) {
          .lb-studio-grid { grid-template-columns: 1fr !important; grid-auto-rows: 260px !important; }
          .lb-studio-grid > div { grid-row: auto !important; grid-column: auto !important; }
          .lb-studio-meta { width: 100%; }
        }
      `}</style>
    </section>
  );
}

function AboutFAQ({ setPage }) {
  const [open, setOpen] = React.useState(0);
  const faqs = [
    {
      q: "How do I book the studio?",
      a: "You can book online anytime through our Booking & Memberships page. Choose your hours, select a date and time, and complete your reservation.",
    },
    {
      q: "What's included in every rental?",
      a: "Every rental includes access to our curated furniture, props, and backdrops; the snack bar (one item per person); a private bathroom; and additional drapes for light control. The photographer is not included — this is a self-serve rental space.",
    },
    {
      q: "How much does it cost to rent?",
      a: (
        <div>
          <p style={{ marginBottom: 20 }}>Pricing varies by session type and membership level. Visit our Booking &amp; Memberships page for full details on single sessions, punch passes, and membership rates.</p>
          <button className="lb-btn" style={{ fontSize: 13, padding: '12px 24px' }} onClick={() => { setPage('booking'); window.scrollTo({ top: 0, behavior: 'instant' }); }}>View pricing &amp; book <span className="arrow"></span></button>
        </div>
      ),
    },
    {
      q: "Are pets allowed?",
      a: "No pets are allowed in the studio without written consent from the owners. Bringing a pet without permission results in a $250 fine.",
    },
    {
      q: "What is your cancellation policy?",
      a: (
        <span>
          You may reschedule your appointment up to 48 hours before your session. No refunds are given for cancellations. If you go over your scheduled time, a $100 overage charge applies automatically. For full details, see our{' '}
          <a onClick={() => { setPage('terms'); window.scrollTo({ top: 0, behavior: 'instant' }); }} style={{ color: 'var(--lb-brown)', textDecoration: 'underline', cursor: 'pointer' }}>Terms &amp; Conditions</a>.
        </span>
      ),
    },
  ];
  return (
    <section style={{ background: 'var(--lb-cream)', paddingBlock: 'var(--lb-section)' }}>
      <div className="lb-container" style={{ display: 'grid', gridTemplateColumns: '1fr 1.6fr', gap: 'clamp(40px, 7vw, 100px)', alignItems: 'start' }}>
        <Reveal>
          <div className="lb-eyebrow">Frequently asked</div>
          <h2 className="lb-h2" style={{ marginTop: 18 }}>
            Anything else <span className="scr">you'd</span> like to know?
          </h2>
          <p className="lb-body" style={{ marginTop: 24, maxWidth: 360 }}>
            And if your question isn't here, reach out — we're happy to help.
          </p>
        </Reveal>
        <Reveal delay={100}>
          {faqs.map((f, i) => (
            <div key={i} style={{ borderTop: '1px solid var(--lb-rule)', ...(i === faqs.length - 1 ? { borderBottom: '1px solid var(--lb-rule)' } : {}) }}>
              <button onClick={() => setOpen(open === i ? -1 : i)} style={{
                width: '100%', display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 20,
                padding: '28px 0', background: 'none', border: 0, textAlign: 'left',
                fontFamily: 'var(--lb-display)', fontSize: 22, fontStyle: 'italic', color: 'var(--lb-brown)',
                cursor: 'pointer',
              }}>
                <span>{f.q}</span>
                <span style={{ fontFamily: 'var(--lb-script)', fontSize: 36, color: 'var(--lb-tan)', transition: 'transform .3s', transform: open === i ? 'rotate(45deg)' : 'none', lineHeight: 0.4 }}>+</span>
              </button>
              <div style={{ maxHeight: open === i ? 400 : 0, overflow: 'hidden', transition: 'max-height .4s ease', paddingBottom: open === i ? 28 : 0 }}>
                <div className="lb-body" style={{ paddingRight: 60 }}>{f.a}</div>
              </div>
            </div>
          ))}
        </Reveal>
      </div>
      <style>{`@media (max-width: 880px) { section > .lb-container[style*="1.6fr"] { grid-template-columns: 1fr !important; } }`}</style>
    </section>
  );
}

function AboutCTA({ setPage }) {
  return (
    <section className="lb-section" style={{ textAlign: 'center' }}>
      <Reveal className="lb-container">
        <img src="assets/wreath.png" alt="" style={{ width: 130, height: 130, objectFit: 'contain' }} />
        <h2 className="lb-h2" style={{ marginTop: 24, maxWidth: 880, marginInline: 'auto' }}>
          Ready to create in the <span className="scr">best light</span>?
        </h2>
        <p className="lb-body lg" style={{ marginTop: 24, maxWidth: 540, marginInline: 'auto' }}>
          Book your hours online — single sessions, punch passes, and memberships all available.
          We can't wait to see what you create.
        </p>
        <div style={{ marginTop: 40 }}>
          <button className="lb-btn" onClick={() => { setPage('booking'); window.scrollTo({ top: 0, behavior: 'instant' }); }}>Book the studio <span className="arrow"></span></button>
        </div>
      </Reveal>
    </section>
  );
}

window.AboutPage = AboutPage;