// Terms & Conditions page for Little Bloom Photo Studio

function TermsPage({ setPage }) {
  return (
    <main data-screen-label="04 Terms">
      <TermsHero />
      <TermsContent />
      <TermsCTA setPage={setPage} />
    </main>
  );
}

function TermsHero() {
  return (
    <section style={{ paddingTop: 'calc(var(--lb-section) * 1.2)', paddingBottom: 'var(--lb-section)', background: 'var(--lb-cream-3)' }}>
      <div className="lb-container" style={{ maxWidth: 860 }}>
        <Reveal>
          <div className="lb-eyebrow">Studio Policies</div>
          <h1 className="lb-display" style={{ fontSize: 'clamp(44px, 7vw, 100px)', marginTop: 20 }}>
            <span className="rom">Terms &amp;</span><br />
            <span className="scr">Conditions</span>
          </h1>
          <p className="lb-lead" style={{ marginTop: 30, maxWidth: 640 }}>
            Please read these guidelines carefully before your session. By booking the studio
            you agree to the following terms. We appreciate your care for the space — it allows
            us to keep it beautiful for everyone.
          </p>
        </Reveal>
      </div>
    </section>
  );
}

function TermsContent() {
  const terms = [
    {
      n: '01',
      title: 'Respect the space',
      body: 'Please be respectful of the studio space, the props, and the property. Take care of the props, clean up after yourself, and be aware of your time. Do NOT use props on top of the cabinets, in the cabinets, or on the outside floor of the cabinets.',
    },
    {
      n: '02',
      title: 'Be courteous with time',
      body: 'Please only enter the studio at your scheduled time and leave promptly so the next session can begin. If you go over your scheduled time, you will automatically be charged $100. You must allocate time within your rental to reset the studio EXACTLY as you found it — bed, blankets, pillows, and props returned to their original spots. Failure to reset will result in a $100 charge.',
    },
    {
      n: '03',
      title: 'No glitter. No food on furniture.',
      body: 'GLITTER IS NOT ALLOWED in the studio. No food on the rug or couch.',
    },
    {
      n: '04',
      title: 'Parking',
      body: 'The studio has limited parking spaces directly in front. If additional spots are needed, please park on the street.',
    },
    {
      n: '05',
      title: 'Cancellations & rescheduling',
      body: 'You may reschedule your appointment up until 48 hours prior. No refunds will be given for cancellations. The photographer is not included in your rental.',
    },
    {
      n: '06',
      title: 'Cleanliness & stains',
      body: 'Please remove dirty shoes upon entering the studio — no shoes on the rug, daybed, or couch areas unless clean. Be mindful of body oils, lotions, tanner, and makeup. If stains occur, please notify the owners as quickly as possible. A $50 fee applies for stains left on the bed or couch.',
    },
    {
      n: '07',
      title: 'Damages & cleaning supplies',
      body: 'Please inform the owners of any damages or soiled items requiring attention. Cleaning supplies are in the shower by the bathroom.',
    },
    {
      n: '08',
      title: 'Diapers',
      body: 'Diapers must be taken with you or the trash must be taken out. The dumpster is located on the right side of the studio down the sidewalk.',
    },
    {
      n: '09',
      title: 'Snack bar',
      body: 'Please be courteous with the snack bar — 1 item per person. Top drawer of the snack bar: 1 prize per child ON THE WAY OUT. No open suckers.',
    },
    {
      n: '10',
      title: 'Owner\'s cabinets — hands off',
      body: 'The white cabinets at the back of the studio and by the fridge are owner\'s cabinets. Do not use the props, wraps, baskets, or any items in the cabinets, on top of the cabinets, on the floor next to the cabinets, or the client closet gowns. Items available for use are listed on the Instagram highlight. Using owner\'s items will result in a $200 charge — even if discovered after your session. You will also be banned from the studio. DO NOT move the large pampas arrangement or curtains on the main wall above the daybed — it is extremely delicate and expensive to replace. Damaging the pampas arrangement will result in a $500+ charge.',
    },
    {
      n: '11',
      title: 'Locking up',
      body: 'To unlock the door, punch in the code. The door requires a firm push to open and will automatically lock after 15 seconds — please verify it is locked before you leave. Failure to lock the door, turn off the lights, or put the shades down will result in a $50 charge.',
    },
    {
      n: '12',
      title: 'AC / Heat unit',
      body: 'The AC/Heat unit can be turned on and off using the remote pointed at the right side of the unit. Do not change the schedule. If using heat, ensure the drapes are out of the way and turn it OFF when you leave. Failure to turn off the unit will result in a $100 charge.',
    },
    {
      n: '13',
      title: 'Weekend bookings',
      body: 'Weekends are extremely limited. Please book during the week when possible. If a weekend is necessary, reach out to see if a specific time and date is available.',
    },
    {
      n: '14',
      title: 'No pets',
      body: 'NO PETS. Bringing any pet without written consent from the owners will result in a $250 fine.',
    },
  ];

  return (
    <section style={{ paddingBlock: 'var(--lb-section)', background: 'var(--lb-cream)' }}>
      <div className="lb-container" style={{ maxWidth: 900 }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 0 }}>
          {terms.map((t, i) => (
            <Reveal key={t.n} delay={i * 30} style={{
              display: 'grid',
              gridTemplateColumns: '80px 1fr',
              gap: '0 40px',
              paddingBlock: 36,
              borderTop: '1px solid var(--lb-rule)',
              ...(i === terms.length - 1 ? { borderBottom: '1px solid var(--lb-rule)' } : {}),
            }}>
              <div style={{ fontFamily: 'var(--lb-script)', fontSize: 48, color: 'var(--lb-tan)', lineHeight: 1, paddingTop: 4 }}>{t.n}</div>
              <div>
                <h3 className="lb-h3" style={{ fontStyle: 'italic', marginBottom: 14 }}>{t.title}</h3>
                <p className="lb-body" style={{ fontSize: 15, lineHeight: 1.8 }}>{t.body}</p>
              </div>
            </Reveal>
          ))}
        </div>

        <Reveal style={{ marginTop: 72, padding: '36px 40px', background: 'var(--lb-cream-3)', border: '1px solid var(--lb-rule)', display: 'flex', gap: 20, alignItems: 'flex-start' }}>
          <div style={{ width: 32, height: 32, borderRadius: 999, background: 'var(--lb-tan)', color: 'var(--lb-cream-3)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, fontSize: 16 }}>✿</div>
          <div>
            <h4 className="lb-caps-title" style={{ marginBottom: 10 }}>Summary of fees</h4>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: '8px 40px' }}>
              {[
                ['Overtime', '$100'],
                ['Studio reset failure', '$100'],
                ['Stains on bed/couch', '$50'],
                ['Forgot to lock/lights/shades', '$50'],
                ['Using owner\'s items', '$200 + ban'],
                ['Pampas damage', '$500+'],
                ['Unauthorized pet', '$250'],
                ['AC/heat left on', '$100'],
              ].map(([label, fee]) => (
                <div key={label} style={{ display: 'flex', justifyContent: 'space-between', gap: 12, paddingBlock: 8, borderBottom: '1px dashed var(--lb-rule)' }}>
                  <span className="lb-body" style={{ fontSize: 14 }}>{label}</span>
                  <span style={{ fontFamily: 'var(--lb-caps)', fontSize: 11, letterSpacing: '0.2em', color: 'var(--lb-brown)', whiteSpace: 'nowrap' }}>{fee}</span>
                </div>
              ))}
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function TermsCTA({ 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: 760, marginInline: 'auto' }}>
          Ready to <span className="scr">book the studio</span>?
        </h2>
        <p className="lb-body lg" style={{ marginTop: 24, maxWidth: 500, marginInline: 'auto' }}>
          By booking you agree to these terms. We take great care of the space
          and trust you will too — it's what keeps it beautiful for everyone.
        </p>
        <div style={{ marginTop: 40, display: 'flex', gap: 16, justifyContent: 'center', flexWrap: 'wrap' }}>
          <button className="lb-btn" onClick={() => { setPage('booking'); window.scrollTo({ top: 0, behavior: 'instant' }); }}>Book the studio <span className="arrow"></span></button>
          <button className="lb-btn ghost" onClick={() => { setPage('about'); window.scrollTo({ top: 0, behavior: 'instant' }); }}>About the studio</button>
        </div>
      </Reveal>
    </section>
  );
}

window.TermsPage = TermsPage;