// Home page for Little Bloom Photo Studio

const { useState: useStateHome, useEffect: useEffectHome } = React;

function HomePage({ setPage }) {
  return (
    <main data-screen-label="01 Home">
      <HomeHero setPage={setPage} />
      <HomeAboutSnippet setPage={setPage} />
      <HomeStudioShowcase setPage={setPage} />
      <HomeProcess />
      <HomeMembership setPage={setPage} />
      <HomeBookingCTA setPage={setPage} />
    </main>
  );
}

/* ========== Hero ========== */
function HomeHero({ setPage }) {
  return (
    <section style={{
      minHeight: '100vh',
      display: 'flex', flexDirection: 'column', justifyContent: 'center',
      background: 'linear-gradient(rgba(30,22,14,0.58), rgba(30,22,14,0.58)), url("assets/NG5A0133.jpg") center/cover no-repeat',
      paddingTop: 'calc(var(--lb-section) * 1.4)',
      paddingBottom: 'calc(var(--lb-section) * 1.0)',
    }}>
      <div className="lb-container" style={{ textAlign: 'center' }}>
        <div className="lb-eyebrow" style={{ color: 'rgba(206,190,163,0.9)', marginBottom: 32 }}>
          Pleasant Grove, UT &nbsp;·&nbsp; Natural Light Studio
        </div>

        <h1 className="lb-display" style={{ fontSize: 'clamp(44px, 7vw, 110px)', color: 'var(--lb-cream-2)' }}>
          <span className="rom">A studio where </span>
          <br />
          <span className="scr" style={{ color: 'var(--lb-tan)' }}>creativity blooms</span>
          <br />
          <span className="rom">naturally.</span>
        </h1>

        <p className="lb-body lg" style={{ maxWidth: 560, marginTop: 38, marginInline: 'auto', color: 'rgba(245,238,224,0.82)' }}>
          Little Bloom is a warm, natural light space thoughtfully designed for
          photographers, creatives, and growing families. 500 sq ft of beautiful
          studio — soft, versatile, and all yours.
        </p>

        <div style={{ display: 'flex', gap: 18, marginTop: 44, flexWrap: 'wrap', justifyContent: 'center' }}>
          <button className="lb-btn" onClick={() => setPage('booking')}>
            Book a session <span className="arrow"></span>
          </button>
          <button className="lb-btn light" onClick={() => setPage('about')}>
            Meet the studio
          </button>
        </div>

        <div style={{ marginTop: 64, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 18, color: 'rgba(245,238,224,0.45)' }}>
          <span style={{ width: 36, height: 1, background: 'currentColor' }}></span>
          <span style={{ fontFamily: 'var(--lb-caps)', fontSize: 10, letterSpacing: '0.32em', textTransform: 'uppercase' }}>Now booking</span>
          <span style={{ width: 36, height: 1, background: 'currentColor' }}></span>
        </div>
      </div>
    </section>
  );
}

/* ========== Studio Showcase (carousel + accordion) ========== */
function HomeStudioShowcase({ setPage }) {
  const [current, setCurrent] = useStateHome(0);
  const [open, setOpen] = useStateHome(null);
  const [autoKey, setAutoKey] = useStateHome(0);

  const images = [
    { src: PHOTOS.hero,       label: 'Daybed' },
    { src: PHOTOS.maternity1, label: 'Daybed' },
    { src: PHOTOS.family1,    label: 'Couch' },
    { src: PHOTOS.family2,    label: 'Couch' },
    { src: PHOTOS.newborn1,   label: 'Windows' },
    { src: PHOTOS.child1,     label: 'Details' },
    { src: PHOTOS.newborn2,   label: 'Details' },
    { src: PHOTOS.couple1,    label: 'Details' },
    { src: PHOTOS.snackbar,   label: 'Snack Bar' },
  ];

  // Auto-slide every 3s; resets when user manually navigates
  useEffectHome(() => {
    const id = setInterval(() => setCurrent(c => (c + 1) % images.length), 3000);
    return () => clearInterval(id);
  }, [autoKey]);

  const resetAuto = () => setAutoKey(k => k + 1);
  const prev = () => { setCurrent(c => (c - 1 + images.length) % images.length); resetAuto(); };
  const next = () => { setCurrent(c => (c + 1) % images.length); resetAuto(); };
  const goTo = (i) => { setCurrent(i); resetAuto(); };
  const toggle = (i) => setOpen(o => o === i ? null : i);

  const items = [
    { title: 'Natural Light Windows', body: '7 beautiful natural light windows — including 5 large southwest-facing windows — fill the studio with dreamy, flattering light throughout the day. Perfect for maternity, newborn, family, branding, and motherhood sessions.' },
    { title: 'Light Control Drapes', body: 'Extra drapes let you soften or block harsh light when needed, giving you beautiful results in any season or time of day.' },
    { title: 'Curated Furniture & Props', body: 'The daybed, couch, antique bassinet, macramé wall hanging, and pampas arrangements are all available for use. A clean, minimal aesthetic designed to photograph beautifully for any session style.' },
    { title: 'Snack Bar', body: 'Complimentary drinks and snacks available for clients and photographers — one item per person per session.' },
    { title: 'Memberships & Punch Passes', body: 'Save on studio time with our Bloom Membership, Basic Membership, or 5-Hour Punch Pass. Members enjoy discounted rates and priority booking year-round.' },
  ];

  return (
    <section style={{ paddingTop: 'calc(var(--lb-section) * 0.3)', paddingBottom: 'var(--lb-section)', background: 'var(--lb-cream)', overflowX: 'hidden' }}>
      <div className="lb-container">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'clamp(40px, 7vw, 96px)', alignItems: 'start' }} className="lb-showcase-grid">

          {/* Left: Carousel */}
          <Reveal className="lb-showcase-carousel" style={{ minWidth: 0 }}>
            <div style={{ position: 'relative', width: '100%' }}>
              <div className="lb-img-wrap" style={{ width: '100%', aspectRatio: '4/3' }}>
                <img key={current} src={images[current].src} alt={images[current].label} className="lb-carousel-img" />
              </div>
              <button onClick={prev} aria-label="Previous" style={{ position: 'absolute', left: 14, top: '50%', transform: 'translateY(-50%)', background: 'rgba(251,247,236,0.92)', border: '1px solid var(--lb-rule)', width: 42, height: 42, borderRadius: 999, cursor: 'pointer', fontSize: 20, color: 'var(--lb-brown)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>‹</button>
              <button onClick={next} aria-label="Next" style={{ position: 'absolute', right: 14, top: '50%', transform: 'translateY(-50%)', background: 'rgba(251,247,236,0.92)', border: '1px solid var(--lb-rule)', width: 42, height: 42, borderRadius: 999, cursor: 'pointer', fontSize: 20, color: 'var(--lb-brown)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>›</button>
            </div>
            {/* Thumbnails */}
            <div style={{ display: 'flex', gap: 6, marginTop: 10, overflowX: 'auto', paddingBottom: 4, width: '100%' }}>
              {images.map((img, i) => (
                <button key={i} onClick={() => goTo(i)} style={{
                  flexShrink: 0, width: 56, height: 56, padding: 0, border: '2px solid ' + (i === current ? 'var(--lb-brown)' : 'transparent'),
                  background: 'none', cursor: 'pointer', overflow: 'hidden', transition: 'border-color .2s ease',
                }}>
                  <img src={img.src} alt={img.label} style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
                </button>
              ))}
            </div>
          </Reveal>

          {/* Right: Info + Accordion */}
          <Reveal delay={120} className="lb-showcase-content" style={{ minWidth: 0 }}>
            <div className="lb-eyebrow">The Studio</div>
            <h2 className="lb-h2" style={{ marginTop: 18 }}>
              Versatile &amp; <span className="scr">inspiring</span>.
            </h2>
            <p className="lb-body lg" style={{ marginTop: 24 }}>
              A warm, natural light space in Pleasant Grove, Utah — thoughtfully designed for
              photographers, creatives, and growing families. 500 sq ft with seven beautiful
              windows, including five large southwest-facing ones that fill the studio with
              dreamy light all day. A clean, minimal aesthetic that photographs beautifully
              for any style of session.
            </p>

            <div style={{ marginTop: 36 }}>
              {items.map((item, i) => (
                <div key={i} style={{ borderTop: '1px solid var(--lb-rule)', ...(i === items.length - 1 ? { borderBottom: '1px solid var(--lb-rule)' } : {}) }}>
                  <button onClick={() => toggle(i)} style={{
                    width: '100%', display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                    padding: '18px 0', background: 'none', border: 0, cursor: 'pointer', gap: 16,
                    fontFamily: 'var(--lb-body)', fontWeight: 500, fontSize: 16, color: 'var(--lb-brown)', textAlign: 'left',
                  }}>
                    {item.title}
                    <span style={{ fontSize: 22, color: 'var(--lb-tan)', flexShrink: 0, transition: 'transform .2s ease', display: 'inline-block', transform: open === i ? 'rotate(45deg)' : 'none' }}>+</span>
                  </button>
                  {open === i && (
                    <p className="lb-body" style={{ paddingBottom: 18, marginTop: -4, fontSize: 14.5, color: 'var(--lb-text-soft)' }}>{item.body}</p>
                  )}
                </div>
              ))}
            </div>

            <div style={{ marginTop: 40 }}>
              <button className="lb-btn" onClick={() => setPage('booking')}>Book the studio <span className="arrow"></span></button>
            </div>
          </Reveal>
        </div>
      </div>

      <style>{`
        @keyframes lb-fade-in { from { opacity: 0; } to { opacity: 1; } }
        .lb-carousel-img { animation: lb-fade-in 0.45s ease; }
        @media (max-width: 880px) {
          .lb-showcase-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
          .lb-showcase-carousel { order: 1; width: 100%; min-width: 0; }
          .lb-showcase-content { order: 2; min-width: 0; }
        }
      `}</style>
    </section>
  );
}

/* ========== About snippet ========== */
function HomeAboutSnippet({ setPage }) {
  return (
    <section style={{ background: 'var(--lb-cream)', paddingTop: 'var(--lb-section)', paddingBottom: 'calc(var(--lb-section) * 0.3)' }}>
      <div className="lb-container" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'clamp(40px, 7vw, 120px)', alignItems: 'center' }} >
        <Reveal style={{ position: 'relative' }}>
          <div className="lb-img-wrap r-3x4" style={{ maxWidth: 480 }}>
            <img src={PHOTOS.photographer} alt="Studio daybed area with natural window light" />
          </div>
          {/* signature overlay */}
          <div style={{ position: 'absolute', right: -20, bottom: 30, background: 'var(--lb-cream-3)', padding: '20px 28px', boxShadow: '0 18px 40px rgba(58,46,37,0.12)' }}>
            <div style={{ fontFamily: 'var(--lb-script)', fontSize: 44, color: 'var(--lb-tan)', lineHeight: 0.9 }}>Emilee &amp; Ciara</div>
            <div className="lb-eyebrow" style={{ marginTop: 4 }}>Studio Owners</div>
          </div>
        </Reveal>
        <Reveal delay={120}>
          <div className="lb-eyebrow">About the studio</div>
          <h2 className="lb-h2" style={{ marginTop: 18 }}>
            Built for <span className="scr">creatives</span>.
          </h2>
          <p className="lb-body lg" style={{ marginTop: 30, maxWidth: 520 }}>
            Little Bloom Photo Studio is a warm, natural light space in Pleasant Grove, Utah —
            thoughtfully designed for photographers, creatives, and growing families. With seven
            beautiful windows and a carefully curated aesthetic, it's a space where creativity
            can bloom naturally.
          </p>
          <div style={{ marginTop: 36 }}>
            <a className="lb-link" onClick={() => setPage('about')} style={{ cursor: 'pointer' }}>Learn more about the studio</a>
          </div>
        </Reveal>
      </div>

      <style>{`
        @media (max-width: 880px) {
          section > .lb-container[style*="1fr 1fr"] { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

/* ========== Process steps ========== */
function HomeProcess() {
  const steps = [
    { n: '01', t: 'Browse & book', d: "Choose your hours, pick a date, and reserve online. Memberships and punch passes available for frequent renters." },
    { n: '02', t: 'Plan your session', d: "Arrive with your vision. The studio is thoughtfully set up — furniture, props, and natural light ready to go." },
    { n: '03', t: 'Create freely', d: "Shoot in 500 sq ft of beautiful natural light space. Use the curated furniture, props, and backdrops included in every rental." },
    { n: '04', t: 'Leave inspired', d: "Reset the space, grab a snack, and head out with everything you need to deliver stunning work to your clients." },
  ];
  return (
    <section className="lb-section">
      <div className="lb-container">
        <Reveal style={{ textAlign: 'center', marginBottom: 80 }}>
          <div className="lb-eyebrow">How it works</div>
          <h2 className="lb-h2" style={{ marginTop: 18 }}>
            From <span className="scr">booking</span> to creating.
          </h2>
        </Reveal>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: 32 }}>
          {steps.map((s, i) => (
            <Reveal key={s.n} delay={i * 100} style={{ borderTop: '1px solid var(--lb-rule)', paddingTop: 32 }}>
              <div style={{ fontFamily: 'var(--lb-script)', fontSize: 48, color: 'var(--lb-tan)', lineHeight: 1 }}>{s.n}</div>
              <h3 className="lb-h3" style={{ marginTop: 14, fontStyle: 'italic' }}>{s.t}</h3>
              <p className="lb-body" style={{ marginTop: 14, fontSize: 15 }}>{s.d}</p>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ========== Membership preview ========== */
function HomeMembership({ setPage }) {
  return (
    <section style={{ background: 'var(--lb-forest-deep)', color: 'var(--lb-cream-2)', paddingBlock: 'var(--lb-section)', overflow: 'hidden' }}>
      <div className="lb-container lb-mship-grid" style={{ display: 'grid', gridTemplateColumns: '2fr 3fr', gap: 'clamp(40px, 7vw, 120px)', alignItems: 'center' }}>
        <Reveal>
          <div className="lb-eyebrow" style={{ color: 'var(--lb-tan-soft)' }}>Memberships &amp; Passes</div>
          <h2 className="lb-h2" style={{ marginTop: 18, color: 'var(--lb-cream-2)' }}>
            More hours, <span className="scr" style={{ color: 'var(--lb-tan-soft)' }}>better rates</span>.
          </h2>
          <p className="lb-body lg" style={{ marginTop: 28, color: 'rgba(245,240,227,0.78)', maxWidth: 520 }}>
            Whether you're booking a one-time session or looking to get more out of the studio,
            we offer the flexibility to make it work for you — from single rentals to memberships
            and punch passes designed for the regular creator.
          </p>

          <div style={{ marginTop: 48, display: 'flex', gap: 16, flexWrap: 'wrap' }}>
            <button className="lb-btn light" onClick={() => setPage('booking')}>Learn more <span className="arrow"></span></button>
          </div>
        </Reveal>

        <Reveal delay={120}>
          <iframe
            src="https://app.acuityscheduling.com/schedule.php?owner=37073613&ref=embedded_csp"
            title="Schedule Appointment"
            width="100%"
            height="560"
            frameBorder="0"
            allow="payment"
            style={{ display: 'block', borderRadius: 2 }}
          />
          <script src="https://embed.acuityscheduling.com/js/embed.js" type="text/javascript" />
        </Reveal>
      </div>

      <style>{`
        @media (max-width: 880px) {
          .lb-mship-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

/* ========== Final booking CTA ========== */
function HomeBookingCTA({ setPage }) {
  return (
    <section style={{ position: 'relative', overflow: 'hidden' }}>
      <div className="lb-img-wrap" style={{ position: 'absolute', inset: 0 }}>
        <img src={PHOTOS.studio2} alt="Inside the studio" />
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(58,46,37,.35), rgba(58,46,37,.7))' }}></div>
      </div>
      <div className="lb-container" style={{ position: 'relative', paddingBlock: 'clamp(120px, 16vw, 220px)', textAlign: 'center', color: 'var(--lb-cream-3)' }}>
        <Reveal>
          <div className="lb-eyebrow" style={{ color: 'var(--lb-tan-soft)' }}>The studio is open</div>
          <h2 className="lb-h2" style={{ marginTop: 18, color: 'var(--lb-cream-3)', maxWidth: 960, marginInline: 'auto' }}>
            Ready to create something <span className="scr" style={{ color: 'var(--lb-tan-soft)' }}>beautiful</span>?
          </h2>
          <p className="lb-body lg" style={{ marginTop: 28, color: 'rgba(251,247,236,0.82)', maxWidth: 540, marginInline: 'auto' }}>
            Book your hours online. Memberships and punch passes available for
            frequent renters. We'd love to have you in the studio.
          </p>
          <div style={{ marginTop: 44, display: 'flex', justifyContent: 'center', gap: 16, flexWrap: 'wrap' }}>
            <button className="lb-btn light" onClick={() => setPage('booking')}>Reserve your time <span className="arrow"></span></button>
            <button className="lb-btn ghost" onClick={() => setPage('about')} style={{ color: 'var(--lb-cream-3)', borderColor: 'var(--lb-cream-3)' }}>About the studio</button>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

window.HomePage = HomePage;