const Home = () => {
  return (
    <>
      {/* HERO */}
      <section className="hero container">
        <div className="reveal">
          <div className="orn" style={{marginBottom: 28}}>
            <span className="mono" style={{color: 'var(--gold)'}}>Fort Mill · Indian Land · Rock Hill</span>
          </div>
          <h1 style={{fontSize: 'clamp(46px, 6.2vw, 84px)', lineHeight: 1.02, marginBottom: 28}}>
            The years are short.<br/>
            <span className="script" style={{color: 'var(--rose-deep)', fontSize: '1.1em', lineHeight: 1}}>The photos</span> are forever.
          </h1>
          <p style={{fontSize: 19, color: 'var(--charcoal-soft)', maxWidth: 520, marginBottom: 40}}>
            Heirloom family, motherhood, and children's photography for the moms who know these little years are slipping by faster than anyone warned them.
          </p>
          <div style={{display: 'flex', gap: 16, flexWrap: 'wrap'}}>
            <a href="#/contact" className="btn btn-primary">Book Your Session</a>
            {/* Hidden pre-launch — mini-sessions page not ready. Restore when content is finalized.
            <a href="#/mini-sessions" className="btn btn-secondary">See Upcoming Minis</a>
            */}
          </div>
          <div className="hero-ratings" style={{marginTop: 60, display: 'flex', alignItems: 'center', gap: 18, color: 'var(--charcoal-mute)', fontSize: 13, letterSpacing: '0.12em'}}>
            <span style={{display: 'inline-flex', gap: 4, color: 'var(--gold)'}}>★★★★★</span>
            <span>Many happy families photographed this season</span>
          </div>
        </div>
        <div className="collage reveal">
          <div className="c1" style={{position: 'absolute', overflow: 'hidden', borderRadius: 16}}>
            <img src="assets/home-hero-back.jpg" alt="Newborn baby in Santa hat for Baby's first Christmas" style={{width: '100%', height: '100%', objectFit: 'cover', display: 'block'}}/>
          </div>
          <div className="c2" style={{position: 'absolute', overflow: 'hidden', borderRadius: 8}}>
            <img src="assets/home-hero-front.jpg" alt="Curly-haired toddler outdoors in dappled summer light" style={{width: '100%', height: '100%', objectFit: 'cover', display: 'block'}}/>
          </div>
        </div>
      </section>

      {/* MARQUEE */}
      <div className="marquee reveal">
        <div className="marquee-track">
          <span>Newborn</span><span>Motherhood</span><span>Family</span><span>Mini Sessions</span>
          <span>Newborn</span><span>Motherhood</span><span>Family</span><span>Mini Sessions</span>
          <span>Newborn</span><span>Motherhood</span><span>Family</span><span>Mini Sessions</span>
        </div>
      </div>

      {/* WELCOME / INTRO */}
      <section className="section container">
        <div className="grid-2" style={{alignItems: 'center', gap: 'clamp(40px, 8vw, 100px)'}}>
          <div className="reveal" style={{position: 'relative'}}>
            <div style={{borderRadius: '50% 50% 16px 16px', overflow: 'hidden', aspectRatio: '4/5'}}>
              <img src="assets/home-welcome.jpg" alt="Four siblings stacked together in golden hour light" style={{width: '100%', height: '100%', objectFit: 'cover', display: 'block'}}/>
            </div>
            <div style={{position: 'absolute', bottom: -20, right: -10, background: 'var(--cream)', padding: '14px 22px', borderRadius: 999, border: '1px solid var(--line)', boxShadow: '0 10px 40px -20px rgba(61,52,46,.3)'}}>
              <span className="script" style={{fontSize: 28, color: 'var(--rose-deep)'}}>xo, Abby</span>
            </div>
          </div>
          <div className="reveal">
            <div className="eyebrow" style={{marginBottom: 18}}>Welcome · Hi, I'm Abby</div>
            <h2 style={{fontSize: 'clamp(34px, 4vw, 52px)', lineHeight: 1.1, marginBottom: 28}}>
              A mom of three behind the lens, photographing <em>yours</em> with the tenderness I know mine deserve.
            </h2>
            <p>I'm a mom of three tiny humans (ages 3, 5, and 7), which means I know exactly what it feels like to look at your phone camera roll and think, <em>"How on earth did she get this big already?"</em></p>
            <p>That ache? That's why Motherhood Lens Co. exists.</p>
            <p>I'm not here to pose you stiffly under a tree and tell your toddler to "smile pretty." I'm here to capture the way she buries her face in your neck. The belly laughs. The way he still fits on your hip, <em>for now</em>.</p>
            <p style={{color: 'var(--rose-deep)', fontFamily: 'Fraunces', fontSize: 20, fontStyle: 'italic', marginTop: 28}}>Light, airy, and full of heart. That's the Motherhood Lens way.</p>
            <a href="#/about" className="btn btn-ghost" style={{marginTop: 20}}>Let's create something beautiful →</a>
          </div>
        </div>
      </section>

      {/* SERVICES GRID — hidden pre-launch. Restore when services page is ready. */}
      {false && (
      <section className="section bg-cream-deep">
        <div className="container">
          <div className="center reveal" style={{marginBottom: 70}}>
            <div className="eyebrow eyebrow-sage" style={{marginBottom: 16}}>The Sessions</div>
            <h2 style={{fontSize: 'clamp(36px, 4.4vw, 56px)', lineHeight: 1.1}}>Sessions made for this<br/>season of motherhood</h2>
          </div>
          <div className="grid-4 grid-4-tab">
            {[
              { scene: 'newbornHome', label: 'newborn, in-home', title: 'Newborn Sessions', copy: 'Soft, sleepy, and impossibly small. Captured in the comfort of your home during those precious first weeks.' },
              { scene: 'momKiss', label: 'mom + daughter, forehead kiss', title: 'Motherhood & Mommy + Me', copy: "Because one day she'll be too big to carry, and you deserve to be in the photo, not always behind the camera." },
              { scene: 'familyWalk', label: 'family walk, golden hour', title: 'Family Sessions', copy: "Relaxed, candid, and full of connection. The kind of portraits you'll actually hang on the wall." },
              { scene: 'springFloral', label: 'seasonal, garden florals', title: 'Seasonal Mini Sessions', copy: 'Spring florals. Fall pumpkin patches. Holiday magic. Limited spots, no stress, pure joy.' },
            ].map((s, i) => (
              <div key={i} className="card reveal" style={{background: 'var(--cream)', border: '1px solid var(--line)'}}>
                <div style={{aspectRatio: '3/4'}}><window.Photo scene={s.scene} label={s.label} style={{width: '100%', height: '100%'}} round={0}/></div>
                <div style={{padding: '28px 26px 32px'}}>
                  <div className="mono" style={{color: 'var(--gold)', marginBottom: 10}}>0{i+1}</div>
                  <h3 style={{fontSize: 22, marginBottom: 12}}>{s.title}</h3>
                  <p style={{fontSize: 15, color: 'var(--charcoal-soft)', marginBottom: 18}}>{s.copy}</p>
                  <a href="#/services" className="btn btn-ghost" style={{fontSize: 11}}>Learn More →</a>
                </div>
              </div>
            ))}
          </div>
          <div className="center reveal" style={{marginTop: 60}}>
            <a href="#/services" className="btn btn-secondary">View All Services</a>
          </div>
        </div>
      </section>
      )}

      {/* REVIEWS */}
      <section className="section container">
        <div className="center reveal" style={{marginBottom: 60}}>
          <div className="eyebrow" style={{marginBottom: 16}}>In Their Words</div>
          <h2 style={{fontSize: 'clamp(36px, 4.4vw, 56px)', lineHeight: 1.1, maxWidth: 700, margin: '0 auto'}}>What mamas are saying</h2>
        </div>
        <ReviewsCarousel />
      </section>

      {/* URGENCY */}
      <section className="section-sm container">
        <div className="urgency reveal">
          <div>
            <div className="script" style={{fontSize: 'clamp(36px, 5vw, 52px)', color: 'var(--rose-deep)', lineHeight: 1}}>48 hrs</div>
          </div>
          <div>
            <h3 style={{fontSize: 'clamp(22px, 3vw, 28px)', marginBottom: 10}}>Before the next milestone slips by.</h3>
            <p style={{color: 'var(--charcoal-soft)', margin: 0, fontSize: 15}}>
              Every season, mini session spots book out in 48 hours. Full family and newborn sessions are booked 6–8 weeks in advance. If you've been saying <em>"we really need to do photos soon"</em> for months, this is your sign.
            </p>
          </div>
          <a href="#/contact" className="btn btn-primary">Reserve Today</a>
        </div>
      </section>

      {/* VIP CAPTURE */}
      <section className="section bg-charcoal">
        <div className="container-narrow center">
          <div className="reveal">
            <div className="eyebrow" style={{color: 'var(--gold-soft)', marginBottom: 20}}>The VIP List</div>
            <h2 style={{fontSize: 'clamp(36px, 4.4vw, 54px)', lineHeight: 1.1, marginBottom: 24}}>
              First dibs on <span className="script" style={{color: 'var(--gold-soft)', fontSize: '1.1em'}}>every</span> seasonal release.
            </h2>
            <p style={{color: 'var(--cream-deep)', opacity: .8, maxWidth: 520, margin: '0 auto 36px'}}>
              VIPs get a 24-hour early booking window before mini sessions open to the public. First access, four times a year.
            </p>
            <form
              onSubmit={async (e) => {
                e.preventDefault();
                const formEl = e.currentTarget;
                const email = new FormData(formEl).get('email');
                try {
                  const res = await fetch('https://formsubmit.co/ajax/motherhoodlensco@gmail.com', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
                    body: JSON.stringify({
                      _subject: 'New VIP list signup — Motherhood Lens Co. (home page)',
                      _replyto: email,
                      Email: email,
                      Source: 'Home page VIP signup',
                    }),
                  });
                  if (!res.ok) throw new Error();
                  formEl.reset();
                  alert('Welcome to the VIP list! 💌');
                } catch {
                  alert("Sorry, that didn't go through. Please try again or email motherhoodlensco@gmail.com.");
                }
              }}
              style={{display: 'flex', gap: 12, maxWidth: 520, margin: '0 auto', flexWrap: 'wrap'}}
            >
              <input required name="email" type="email" placeholder="your@email.com" style={{flex: '1 1 220px', background: 'transparent', border: '1px solid rgba(255,255,255,.25)', borderRadius: 999, padding: '14px 22px', color: 'var(--cream)', fontFamily: 'Inter', fontSize: 16}} />
              <button type="submit" className="btn btn-rose">Join The List</button>
            </form>
          </div>
        </div>
      </section>
    </>
  );
};

const reviews = [
  { quote: "Abby didn't just take pictures of my kids. She saw them. I cried when I opened the gallery. These are the photos my grandchildren will pass down.", name: 'Sarah M.', loc: 'Fort Mill' },
  { quote: "My toddler is a tornado. Abby photographed him mid-spin, mid-giggle, mid-everything and somehow every image is gorgeous. She's magic with kids.", name: 'Lauren K.', loc: 'Indian Land' },
  { quote: "I almost skipped being in the photos like I always do. Abby gently insisted. Now those mother-son images are the most treasured thing I own.", name: 'Jessica R.', loc: 'Rock Hill' },
  { quote: "Booked the spring floral mini on a whim and it turned into our family Christmas card, our grandparents' gifts, and my new phone background. Worth every penny.", name: 'Megan T.', loc: 'Fort Mill' },
];

const ReviewsCarousel = () => {
  const [i, setI] = React.useState(0);
  React.useEffect(() => {
    const id = setInterval(() => setI(x => (x + 1) % reviews.length), 7000);
    return () => clearInterval(id);
  }, []);
  return (
    <div className="reveal" style={{position: 'relative'}}>
      <div style={{display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 24, marginBottom: 40}} className="reviews-grid">
        {[reviews[i], reviews[(i+1) % reviews.length]].map((r, k) => (
          <div key={`${i}-${k}`} className="tcard" style={{animation: 'fadeIn .8s ease'}}>
            <span className="qmark">"</span>
            <blockquote>{r.quote}</blockquote>
            <cite>{r.name}, {r.loc}</cite>
          </div>
        ))}
      </div>
      <div style={{display: 'flex', justifyContent: 'center', gap: 10}}>
        {reviews.map((_, k) => (
          <button key={k} onClick={() => setI(k)} aria-label={`Review ${k+1}`}
            style={{width: k === i ? 28 : 8, height: 8, borderRadius: 999, background: k === i ? 'var(--rose-deep)' : 'var(--line)', border: 'none', cursor: 'pointer', transition: 'all .4s'}} />
        ))}
      </div>
      <style>{`@keyframes fadeIn { from {opacity:0; transform: translateY(12px);} to {opacity:1; transform:none;} }
        @media (max-width: 800px) { .reviews-grid { grid-template-columns: 1fr !important; } }
      `}</style>
    </div>
  );
};

Object.assign(window, { Home });