// Services / Process page
function Services({ navigate }) {
  const isMobile = useIsMobile();
  return (
    <main style={{ paddingTop: isMobile ? '100px' : '160px' }}>
      <section className="container" style={{ paddingBottom: isMobile ? '64px' : '120px' }}>
        <Reveal>
          <div className="eyebrow" style={{ display: 'flex', alignItems: 'center', gap: '14px' }}>
            <span style={{ width: '24px', height: '1px', background: 'var(--ink-3)' }} />
            Services & Process
          </div>
        </Reveal>
        <Reveal delay={80}>
          <h1 className="serif" style={{ fontSize: 'clamp(56px, 10vw, 160px)', lineHeight: 0.94, letterSpacing: '-0.03em', margin: '24px 0 0', fontWeight: 300, maxWidth: '1200px' }}>
            How we <em style={{ fontWeight: 400 }}>work</em>,<br />
            and how we <span className="script" style={{ color: 'var(--accent-2)', fontSize: '0.8em' }}>begin</span>.
          </h1>
        </Reveal>
        <Reveal delay={160}>
          <p style={{ maxWidth: '560px', color: 'var(--ink-2)', fontSize: '16px', marginTop: '40px', lineHeight: 1.7 }}>
            Three services, one philosophy: the right pieces in the right places, chosen with precision and care.
          </p>
        </Reveal>
      </section>

      {/* Services */}
      <section style={{ background: 'var(--bg-cream)', padding: isMobile ? '64px 0' : '120px 0' }}>
        <div className="container">
          {SERVICES.map((s, i) => (
            <Reveal key={s.key} delay={i * 80}>
              <div style={{
                display: 'grid',
                gridTemplateColumns: isMobile ? '1fr' : '0.6fr 1.4fr 1fr',
                gap: isMobile ? '24px' : '64px',
                padding: isMobile ? '48px 0' : '72px 0',
                borderTop: i === 0 ? '1px solid var(--rule)' : 'none',
                borderBottom: '1px solid var(--rule)',
                alignItems: 'start'
              }}>
                <div className="serif" style={{ fontSize: '48px', fontStyle: 'italic', fontWeight: 300, color: 'var(--ink-3)' }}>{s.number}</div>
                <div>
                  <h2 className="serif" style={{ fontSize: 'clamp(36px, 4.8vw, 64px)', margin: 0, fontWeight: 300, letterSpacing: '-0.02em' }}>
                    <em style={{ fontWeight: 400 }}>{s.name}</em>
                  </h2>
                  <p style={{ marginTop: '20px', color: 'var(--ink-2)', maxWidth: '520px', fontSize: '16px', lineHeight: 1.7 }}>{s.blurb}</p>
                  <button className="btn" onClick={() => navigate('inquiry')} style={{ marginTop: '32px' }}>
                    Inquire <span>→</span>
                  </button>
                </div>
                <div style={{ marginTop: isMobile ? '8px' : '0' }}>
                  <div className="eyebrow" style={{ marginBottom: '20px' }}>What's included</div>
                  <ul style={{ listStyle: 'none', padding: 0, margin: 0 }}>
                    {s.included.map((it, j) => (
                      <li key={j} style={{ padding: '12px 0', borderBottom: '1px solid var(--rule)', fontSize: '14px', color: 'var(--ink-2)', display: 'flex', alignItems: 'flex-start', gap: '12px' }}>
                        <span style={{ color: 'var(--accent-2)', fontFamily: 'serif' }}>—</span>
                        {it}
                      </li>
                    ))}
                  </ul>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </section>

      <PartnershipsSection navigate={navigate} />

      {/* Process */}
      <section style={{ padding: isMobile ? '80px 0' : '160px 0', background: 'var(--bg)' }}>
        <div className="container">
          <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 2fr', gap: isMobile ? '40px' : '80px' }}>
            <Reveal>
              <div style={isMobile ? {} : { position: 'sticky', top: '140px' }}>
                <div className="eyebrow">The process</div>
                <h2 className="serif" style={{ fontSize: 'clamp(40px, 5vw, 72px)', lineHeight: 1, letterSpacing: '-0.02em', margin: '24px 0 0', fontWeight: 300 }}>
                  From <em style={{ fontWeight: 400 }}>first note</em><br />
                  to final <span className="script" style={{ color: 'var(--accent-2)', fontSize: '0.8em' }}>photo</span>.
                </h2>
                <p style={{ marginTop: '32px', color: 'var(--ink-3)', maxWidth: '360px', lineHeight: 1.7 }}>
                  Four steps, thoroughly planned. No surprises, no rushed decisions.
                </p>
              </div>
            </Reveal>
            <div>
              {PROCESS.map((p, i) => (
                <Reveal key={p.n} delay={i * 60}>
                  <div style={{
                    display: 'grid', gridTemplateColumns: '64px 1fr', gap: '24px',
                    padding: '40px 0',
                    borderTop: i === 0 ? '1px solid var(--rule)' : 'none',
                    borderBottom: '1px solid var(--rule)'
                  }}>
                    <div className="serif" style={{ fontSize: '36px', fontWeight: 300, color: 'var(--accent-2)' }}>{p.n}</div>
                    <div>
                      <h3 className="serif" style={{ fontSize: '28px', margin: 0, fontWeight: 400, letterSpacing: '-0.01em' }}>{p.t}</h3>
                      <p style={{ marginTop: '10px', color: 'var(--ink-2)', maxWidth: '520px' }}>{p.d}</p>
                    </div>
                  </div>
                </Reveal>
              ))}
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

function FAQItem({ q, a }) {
  const [open, setOpen] = useState(false);
  return (
    <Reveal>
      <button onClick={() => setOpen(!open)} style={{
        width: '100%', background: 'none', border: 'none', textAlign: 'left',
        padding: '28px 0', cursor: 'pointer',
        borderBottom: '1px solid var(--rule)',
        display: 'grid', gridTemplateColumns: '1fr auto', gap: '24px', alignItems: 'center'
      }}>
        <span className="serif" style={{ fontSize: '24px', fontWeight: 400, color: 'var(--ink)' }}>{q}</span>
        <span style={{ fontSize: '20px', color: 'var(--accent-2)', transform: open ? 'rotate(45deg)' : 'rotate(0)', transition: 'transform .4s' }}>+</span>
      </button>
      <div style={{
        maxHeight: open ? '300px' : '0', overflow: 'hidden', transition: 'max-height .5s ease, padding .5s',
        paddingBottom: open ? '28px' : '0',
      }}>
        <p style={{ margin: 0, color: 'var(--ink-2)', maxWidth: '680px', lineHeight: 1.75 }}>{a}</p>
      </div>
    </Reveal>
  );
}

const PARTNERSHIP_TIERS = [
  {
    key: 'essential', badge: 'Essential', name: 'Essential',
    target: 'The realtor testing the relationship', featured: false,
    features: ['Priority scheduling', '$75 off every install fee', '10 portfolio-style photos per staged listing'],
    savings: 'Pays off at 3+ installs/year'
  },
  {
    key: 'preferred', badge: 'Preferred — Most Popular', name: 'Preferred',
    target: 'The realtor doing 2–3 listings/month', featured: true,
    features: ['Priority scheduling', '$100 off every install fee', '10 portfolio-style photos per staged listing', '1 complimentary add-on/month (patio, guest room, study, or breakfast nook)', 'Rollover credit if unused (up to 1 month)'],
    savings: 'Saves $200–$350/month vs. pay-per-job'
  },
  {
    key: 'premier', badge: 'Premier', name: 'Premier',
    target: 'The high-volume realtor or small team', featured: false,
    features: ['Priority scheduling', '$125 off every install fee', '15 portfolio-style photos per staged listing', '2 complimentary add-ons/month (patio, guest room, study, or breakfast nook)', 'Rollover credit if unused (up to 1 month)'],
    savings: "Locks in capacity — you're their stager"
  }
];

function PartnershipsSection({ navigate }) {
  const isMobile = useIsMobile();
  return (
    <section style={{ background: 'var(--ink)', color: 'var(--bg-cream)', padding: isMobile ? '80px 0' : '160px 0' }}>
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: isMobile ? '32px' : '80px', alignItems: 'end', marginBottom: isMobile ? '56px' : '96px' }}>
          <Reveal>
            <div>
              <div className="eyebrow" style={{ color: '#a89a8f', display: 'flex', alignItems: 'center', gap: '14px' }}>
                <span style={{ width: '24px', height: '1px', background: '#a89a8f' }} />
                Partnerships
              </div>
              <h2 className="serif" style={{ fontSize: 'clamp(44px, 6vw, 96px)', lineHeight: 0.96, letterSpacing: '-0.02em', margin: '24px 0 0', fontWeight: 300 }}>
                The stager in<br />your corner,<br /><em style={{ fontWeight: 400, color: '#e8d6c3' }}>every listing.</em>
              </h2>
            </div>
          </Reveal>
          <Reveal delay={120}>
            <p style={{ color: '#a89a8f', fontSize: '16px', lineHeight: 1.75, maxWidth: '480px' }}>
              Built for realtors who stage consistently — and want the process to feel effortless.
              <br /><br />
              <em style={{ color: '#c9bab0', fontFamily: 'Cormorant Garamond, serif', fontSize: '17px' }}>Monthly furniture rental is billed separately per job.</em>
            </p>
          </Reveal>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr 1fr', gap: isMobile ? '16px' : '2px' }}>
          {PARTNERSHIP_TIERS.map((tier, i) => (
            <Reveal key={tier.key} delay={i * 80}>
              <div style={{
                background: tier.featured ? 'var(--bg-cream)' : 'rgba(255,255,255,0.04)',
                color: tier.featured ? 'var(--ink)' : 'var(--bg-cream)',
                padding: isMobile ? '36px 28px 44px' : '48px 40px 56px',
                border: tier.featured ? 'none' : '1px solid rgba(255,255,255,0.08)',
                display: 'flex', flexDirection: 'column'
              }}>
                <div style={{
                  display: 'inline-flex', alignItems: 'center', padding: '6px 14px',
                  background: tier.featured ? 'var(--ink)' : 'rgba(255,255,255,0.1)',
                  color: tier.featured ? 'var(--bg-cream)' : '#a89a8f',
                  fontFamily: 'Manrope, sans-serif', fontSize: '10px', letterSpacing: '0.28em', textTransform: 'uppercase',
                  marginBottom: '32px', alignSelf: 'flex-start'
                }}>{tier.badge}</div>
                <div className="serif" style={{ fontSize: 'clamp(32px, 3vw, 48px)', fontWeight: 300, letterSpacing: '-0.02em', lineHeight: 1 }}>
                  <em style={{ fontWeight: 400 }}>{tier.name}</em>
                </div>
                <div style={{ marginTop: '8px', fontSize: '13px', color: tier.featured ? 'var(--ink-3)' : '#7a6e66', lineHeight: 1.4 }}>{tier.target}</div>
                <div style={{ margin: '32px 0', borderBottom: `1px solid ${tier.featured ? 'var(--rule)' : 'rgba(255,255,255,0.1)'}` }} />
                <ul style={{ listStyle: 'none', padding: 0, margin: '0 0 32px', flex: 1 }}>
                  {tier.features.map((f, j) => (
                    <li key={j} style={{
                      padding: '12px 0',
                      borderBottom: `1px solid ${tier.featured ? 'var(--rule)' : 'rgba(255,255,255,0.07)'}`,
                      fontSize: '14px', display: 'flex', gap: '14px', alignItems: 'flex-start',
                      color: tier.featured ? 'var(--ink-2)' : '#c9bab0', lineHeight: 1.5
                    }}>
                      <span style={{ color: tier.featured ? 'var(--accent-2)' : '#a98a6a', flexShrink: 0 }}>—</span>
                      {f}
                    </li>
                  ))}
                </ul>
                <div style={{
                  padding: '12px 16px',
                  background: tier.featured ? 'var(--bg-soft)' : 'rgba(255,255,255,0.05)',
                  fontStyle: 'italic', fontFamily: 'Cormorant Garamond, serif', fontSize: '15px',
                  color: tier.featured ? 'var(--ink-3)' : '#7a6e66', marginBottom: '32px'
                }}>{tier.savings}</div>
                <button onClick={() => navigate('inquiry')} style={{
                  width: '100%', padding: '16px',
                  border: `1px solid ${tier.featured ? 'var(--ink)' : 'rgba(255,255,255,0.25)'}`,
                  background: tier.featured ? 'var(--ink)' : 'transparent',
                  color: 'var(--bg-cream)',
                  fontFamily: 'Manrope, sans-serif', fontSize: '11px', letterSpacing: '0.22em', textTransform: 'uppercase',
                  cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '10px',
                  transition: 'all .3s'
                }}>Inquire <span>→</span></button>
              </div>
            </Reveal>
          ))}
        </div>

        <Reveal>
          <div style={{
            marginTop: isMobile ? '16px' : '2px', padding: isMobile ? '28px 24px' : '32px 40px',
            border: '1px solid rgba(255,255,255,0.1)',
            display: 'flex', flexDirection: isMobile ? 'column' : 'row',
            alignItems: isMobile ? 'flex-start' : 'center',
            justifyContent: 'space-between', gap: '24px', flexWrap: 'wrap'
          }}>
            <div>
              <div className="eyebrow" style={{ color: '#a89a8f', marginBottom: '8px' }}>Annual commitment</div>
              <p className="serif" style={{ fontSize: isMobile ? '20px' : '22px', fontStyle: 'italic', fontWeight: 300, margin: 0, color: '#e8d6c3' }}>
                Pay for 10 months, get 12 — two months free on any tier.
              </p>
            </div>
            <button onClick={() => navigate('inquiry')} style={{
              display: 'inline-flex', alignItems: 'center', gap: '10px', padding: '14px 24px',
              background: 'rgba(244,237,227,0.1)', border: '1px solid rgba(244,237,227,0.25)', color: '#f4ede3',
              fontFamily: 'Manrope, sans-serif', fontSize: '11px', letterSpacing: '0.22em', textTransform: 'uppercase', cursor: 'pointer',
              flexShrink: 0, whiteSpace: 'nowrap'
            }}>
              Ask about annual pricing <span>→</span>
            </button>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

Object.assign(window, { Services });