const minis = [
  { season: 'Spring Florals', icon: '🌸', loc: 'Glencairn Garden', date: 'April 18–19, 2026', status: 'Sold Out', stat: 'status-wait', scene: 'springFloral', label: 'peonies, blush linen, golden light' },
  { season: 'Summer Golden Hour', icon: '🌞', loc: 'Anne Springs Close Greenway', date: 'June 20, 2026', status: '2 Spots Left', stat: 'status-open', scene: 'summerTrail', label: 'barefoot, trail, sun-kissed' },
  { season: 'Fall Pumpkin Patch', icon: '🎃', loc: 'Windy Hill Orchard', date: 'October 11–12, 2026', status: 'VIP Access Apr 26', stat: 'status-coming', scene: 'fallPumpkin', label: 'pumpkins, cozy sweaters, autumn light' },
  { season: 'Holiday Magic', icon: '🎄', loc: 'Twinkle Light Studio', date: 'December 6, 2026', status: 'VIP Access Nov 1', stat: 'status-coming', scene: 'holiday', label: 'christmas tree, fairy lights, plaid blankets' },
];

const MiniSessions = () => {
  const [submitted, setSubmitted] = React.useState(false);
  return (
    <>
      <section className="page-hero container reveal">
        <div className="eyebrow" style={{marginBottom: 16}}>Mini Sessions</div>
        <h1>Small session.<br/><span className="script" style={{color: 'var(--rose-deep)', fontSize: '1.05em'}}>Big magic.</span> Limited spots.</h1>
        <p className="sub">Seasonal mini sessions at South Carolina's most magical locations.</p>
      </section>

      <section className="container" style={{paddingBottom: 80}}>
        <div className="grid-2 reveal" style={{gap: 80, alignItems: 'center'}}>
          <div>
            <p>Here's the honest truth: full sessions aren't always the right fit. Sometimes you just need gorgeous, timeless photos of your kids, without the stress, the wardrobe panic, or the investment of a full portrait session.</p>
            <p className="serif" style={{fontSize: 30, lineHeight: 1.25, color: 'var(--charcoal)', margin: '24px 0', fontStyle: 'italic'}}>Enter the mini.</p>
            <p>Twenty minutes. A stunning seasonal backdrop. Me, making your kids laugh while I quietly capture every beautiful moment. You, walking away with a gallery of images that could easily pass for a full session, and a holiday card sorted for the next six months.</p>
          </div>
          <div style={{background: 'var(--blush)', borderRadius: 20, padding: 40, border: '1px solid var(--blush-deep)'}}>
            <div className="eyebrow" style={{marginBottom: 18}}>What's Included</div>
            {[
              '20-minute mini session at a curated seasonal location',
              '10+ professionally edited high-resolution images',
              'Private online gallery with download access',
              'Styling and wardrobe guidance before your session',
              'Print release for all images',
              'Warm, kid-friendly direction from a mom who truly gets it',
            ].map((v, i) => (
              <div key={i} style={{display: 'flex', gap: 14, padding: '10px 0', borderBottom: i === 5 ? 'none' : '1px solid rgba(201,155,124,.25)', fontSize: 15, color: 'var(--charcoal)'}}>
                <span style={{color: 'var(--rose-deep)', fontFamily: 'Fraunces'}}>✓</span>
                <span>{v}</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section bg-cream-deep">
        <div className="container">
          <div className="center reveal" style={{marginBottom: 60}}>
            <div className="eyebrow eyebrow-sage" style={{marginBottom: 14}}>2026 Calendar</div>
            <h2 style={{fontSize: 'clamp(34px, 4vw, 52px)'}}>Upcoming mini sessions</h2>
          </div>
          <div className="grid-4 grid-4-tab">
            {minis.map((m, i) => (
              <div key={i} className="mini-card reveal">
                <div style={{height: 280}}><window.Photo scene={m.scene} label={m.label} round={0} style={{width: '100%', height: '100%'}}/></div>
                <div className="mini-card-body">
                  <span className={`status ${m.stat}`}>{m.status}</span>
                  <h3 style={{fontSize: 22, marginBottom: 6}}>{m.icon} {m.season}</h3>
                  <div style={{fontSize: 13, color: 'var(--charcoal-soft)', marginBottom: 4}}>{m.loc}</div>
                  <div className="mono" style={{color: 'var(--gold)', marginBottom: 20}}>{m.date}</div>
                  <a href="#/contact" className="btn btn-ghost" style={{fontSize: 11}}>{m.status === 'Sold Out' ? 'Join Waitlist' : 'Reserve Spot'} →</a>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section container">
        <div className="reveal" style={{background: 'var(--charcoal)', color: 'var(--cream)', borderRadius: 24, padding: 'clamp(40px, 6vw, 80px)', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 60, alignItems: 'center'}}>
          <div>
            <div className="eyebrow" style={{color: 'var(--gold-soft)', marginBottom: 16}}>A Note On Availability</div>
            <h2 style={{color: 'var(--cream)', fontSize: 'clamp(32px, 3.6vw, 46px)', lineHeight: 1.15, marginBottom: 20}}>
              Limited to <span className="script" style={{color: 'var(--gold-soft)'}}>6–8 families</span> per date.
            </h2>
            <p style={{color: 'var(--cream-deep)', opacity: .8}}>
              Minis consistently sell out within 48 hours of announcement. The best way to snag a spot? Join the VIP list. You'll get first access 24 hours before public booking opens.
            </p>
          </div>
          <div>
            {submitted ? (
              <div style={{background: 'rgba(255,255,255,.05)', border: '1px solid rgba(255,255,255,.15)', borderRadius: 16, padding: 32, textAlign: 'center'}}>
                <div className="script" style={{fontSize: 'clamp(32px, 4vw, 42px)', color: 'var(--gold-soft)', lineHeight: 1, marginBottom: 12}}>You're in!</div>
                <p style={{color: 'var(--cream-deep)', margin: 0, opacity: .8}}>Watch your inbox. I'll email you 24 hours before the next release.</p>
              </div>
            ) : (
              <form onSubmit={(e) => { e.preventDefault(); setSubmitted(true); }} style={{display: 'flex', flexDirection: 'column', gap: 14}}>
                <div className="field" style={{marginBottom: 0}}>
                  <label style={{color: 'var(--gold-soft)'}}>Name</label>
                  <input required placeholder="First name" style={{borderBottom: '1px solid rgba(255,255,255,.25)', color: 'var(--cream)'}} />
                </div>
                <div className="field" style={{marginBottom: 10}}>
                  <label style={{color: 'var(--gold-soft)'}}>Email</label>
                  <input required type="email" placeholder="your@email.com" style={{borderBottom: '1px solid rgba(255,255,255,.25)', color: 'var(--cream)'}} />
                </div>
                <button type="submit" className="btn btn-rose">Join The VIP List</button>
              </form>
            )}
          </div>
          <style>{`@media (max-width: 800px) { .reveal[style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; } }`}</style>
        </div>
      </section>
    </>
  );
};

Object.assign(window, { MiniSessions });