// Rentals Page
const RentalsPage = ({ setCurrentPage }) => {
  const goContact = () => { setCurrentPage('contact'); window.scrollTo({ top: 0, behavior: 'smooth' }); };

  const pricing = [
    { type: "New 20'", rate: '$120/month' },
    { type: "New 40'", rate: '$145/month' },
    { type: "Used 20'", rate: '$85/month' },
    { type: "Used 40'", rate: '$110/month' },
  ];

  const buyoutTimeline = [
    { period: '6 months', label: 'Buyout option becomes available', highlight: false },
    { period: '12 months', label: '$2,350.31 estimated buyout', highlight: false },
    { period: '18 months', label: '$1,953.59 estimated buyout', highlight: false },
    { period: '24 months', label: '$1,556.87 estimated buyout', highlight: true },
    { period: '36+ months', label: '~$802 estimated buyout', highlight: false },
  ];

  const steps = [
    'Select your box type',
    'Get a delivery quote',
    'Provide valid ID',
    'Verify delivery and billing address',
    'Add card on file for auto-pay',
    'Pay delivery and pickup deposit',
    'Container is delivered, typically within 1-10 working days',
    'After 30 days, monthly rent begins',
    'After 6 months, buyout option becomes available',
  ];

  return (
    <div>
      {/* Hero */}
      <section style={{
        background: 'linear-gradient(160deg, #0F1D33 0%, #1B2A4A 100%)',
        padding: '140px 32px 72px',
      }}>
        <div style={{ maxWidth: '1200px', margin: '0 auto' }}>
          <span style={{ fontFamily: 'Inter, sans-serif', fontSize: '12px', fontWeight: '700', letterSpacing: '0.12em', textTransform: 'uppercase', color: '#4A9FD4', display: 'block', marginBottom: '12px' }}>
            Container Rentals
          </span>
          <h1 style={{ fontFamily: '"Barlow Condensed", sans-serif', fontSize: 'clamp(36px, 5vw, 64px)', fontWeight: '800', color: '#fff', margin: '0 0 20px 0', lineHeight: '1.05' }}>
            Rent Shipping Containers<br /><span style={{ color: '#4A9FD4' }}>With a Buyout Option</span>
          </h1>
          <p style={{ fontFamily: 'Inter, sans-serif', fontSize: '17px', color: 'rgba(255,255,255,0.7)', lineHeight: '1.65', maxWidth: '580px', margin: '0 0 32px 0' }}>
            Every Sea Steel Storage rental contract includes a buyout option after 6 months, helping you build equity every month instead of just paying rent.
          </p>
          <CTAButton variant="primary" size="lg" onClick={goContact}>Request a Rental Quote</CTAButton>
        </div>
      </section>

      {/* Pricing Table */}
      <Section bg="#F4F6F8">
        <SectionHeader eyebrow="Rental Rates" title="Simple, Transparent Pricing" subtitle="What you see is what you pay. No hidden fees — the only variable cost is the delivery and pickup deposit." />
        <div style={{ maxWidth: '600px', margin: '0 auto' }}>
          <div style={{ background: '#fff', border: '1px solid #E8EDF2', borderRadius: '12px', overflow: 'hidden', boxShadow: '0 4px 20px rgba(27,42,74,0.08)' }}>
            {/* Table header */}
            <div style={{
              display: 'grid', gridTemplateColumns: '1fr 1fr',
              background: '#1B2A4A', padding: '14px 28px',
            }}>
              <span style={{ fontFamily: 'Inter, sans-serif', fontSize: '12px', fontWeight: '700', color: 'rgba(255,255,255,0.6)', letterSpacing: '0.08em', textTransform: 'uppercase' }}>Container Type</span>
              <span style={{ fontFamily: 'Inter, sans-serif', fontSize: '12px', fontWeight: '700', color: 'rgba(255,255,255,0.6)', letterSpacing: '0.08em', textTransform: 'uppercase', textAlign: 'right' }}>Monthly Rate</span>
            </div>
            {pricing.map((row, i) => (
              <div key={row.type} style={{
                display: 'grid', gridTemplateColumns: '1fr 1fr',
                padding: '16px 28px',
                background: i % 2 === 0 ? '#fff' : '#F9FAFB',
                borderBottom: i < pricing.length - 1 ? '1px solid #EEF2F7' : 'none',
              }}>
                <span style={{ fontFamily: 'Inter, sans-serif', fontSize: '15px', fontWeight: '600', color: '#1B2A4A' }}>{row.type}</span>
                <span style={{ fontFamily: '"Barlow Condensed", sans-serif', fontSize: '20px', fontWeight: '700', color: '#4A9FD4', textAlign: 'right' }}>{row.rate}</span>
              </div>
            ))}
          </div>
          <div style={{ marginTop: '16px', padding: '14px 20px', background: 'rgba(74,159,212,0.06)', border: '1px solid rgba(74,159,212,0.15)', borderRadius: '8px' }}>
            <p style={{ fontFamily: 'Inter, sans-serif', fontSize: '13px', color: '#4A5568', lineHeight: '1.6', margin: 0 }}>
              <strong>Rental pricing includes taxes and fees.</strong> What you see is what you pay. The only variable cost is the delivery and pickup deposit. Rates are based on 6-month+ rental contracts. Shorter-term rentals are available but may be more expensive.
            </p>
          </div>
          <div style={{ textAlign: 'center', marginTop: '28px' }}>
            <CTAButton variant="primary" size="lg" onClick={goContact}>Start a Rental Quote</CTAButton>
          </div>
        </div>
      </Section>

      {/* Buyout Program */}
      <section style={{
        background: 'linear-gradient(135deg, #1B2A4A 0%, #243a5e 100%)',
        padding: '80px 32px',
      }}>
        <div style={{ maxWidth: '1200px', margin: '0 auto' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '60px', alignItems: 'start' }} className="buyout-detail-grid">
            <div>
              <span style={{ fontFamily: 'Inter, sans-serif', fontSize: '12px', fontWeight: '700', letterSpacing: '0.12em', textTransform: 'uppercase', color: '#4A9FD4', display: 'block', marginBottom: '12px' }}>
                Buyout Program
              </span>
              <h2 style={{ fontFamily: '"Barlow Condensed", sans-serif', fontSize: 'clamp(28px, 4vw, 44px)', fontWeight: '700', color: '#fff', margin: '0 0 20px 0', lineHeight: '1.1' }}>
                Build Equity Every Month
              </h2>
              <p style={{ fontFamily: 'Inter, sans-serif', fontSize: '16px', color: 'rgba(255,255,255,0.72)', lineHeight: '1.65', marginBottom: '16px' }}>
                50% of your monthly rental payment goes toward reducing the cost of your buyout option down to the residual value of the container.
              </p>
              <p style={{ fontFamily: 'Inter, sans-serif', fontSize: '15px', color: 'rgba(255,255,255,0.6)', lineHeight: '1.7', marginBottom: '28px' }}>
                Your buyout option becomes available after 6 months. Your buyout price updates every month after month 6. Call or email anytime to see where you are at.
              </p>

              {/* Example scenario box */}
              <div style={{ background: 'rgba(255,255,255,0.06)', border: '1px solid rgba(74,159,212,0.2)', borderRadius: '10px', padding: '24px' }}>
                <h4 style={{ fontFamily: '"Barlow Condensed", sans-serif', fontSize: '18px', fontWeight: '700', color: '#4A9FD4', margin: '0 0 14px 0' }}>
                  Example: New 20' in Kirkland, WA
                </h4>
                {[
                  ['Monthly Rental', '$120/month'],
                  ['Container Sale Price', '$3,125'],
                  ['Delivery', '$300'],
                  ['Residual Value', '$1,000'],
                  ['Delivery + Pickup Deposit', '$600'],
                ].map(([k, v]) => (
                  <div key={k} style={{ display: 'flex', justifyContent: 'space-between', padding: '7px 0', borderBottom: '1px solid rgba(255,255,255,0.06)', fontFamily: 'Inter, sans-serif', fontSize: '13px' }}>
                    <span style={{ color: 'rgba(255,255,255,0.6)' }}>{k}</span>
                    <span style={{ color: '#fff', fontWeight: '600' }}>{v}</span>
                  </div>
                ))}
                <div style={{ marginTop: '14px', padding: '12px', background: 'rgba(74,159,212,0.12)', borderRadius: '6px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                  <span style={{ fontFamily: 'Inter, sans-serif', fontSize: '13px', color: 'rgba(255,255,255,0.7)', fontWeight: '500' }}>6-month buyout est.</span>
                  <span style={{ fontFamily: '"Barlow Condensed", sans-serif', fontSize: '22px', fontWeight: '700', color: '#4A9FD4' }}>$2,747.03</span>
                </div>
              </div>
            </div>

            {/* Buyout timeline table */}
            <div>
              <h3 style={{ fontFamily: '"Barlow Condensed", sans-serif', fontSize: '22px', fontWeight: '700', color: '#fff', margin: '0 0 20px 0' }}>
                Your Buyout Price Over Time
              </h3>
              <div style={{ background: 'rgba(255,255,255,0.05)', border: '1px solid rgba(255,255,255,0.1)', borderRadius: '10px', overflow: 'hidden' }}>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', background: 'rgba(74,159,212,0.15)', padding: '12px 20px' }}>
                  <span style={{ fontFamily: 'Inter, sans-serif', fontSize: '11px', fontWeight: '700', color: 'rgba(255,255,255,0.5)', letterSpacing: '0.08em', textTransform: 'uppercase' }}>Rental Timeline</span>
                  <span style={{ fontFamily: 'Inter, sans-serif', fontSize: '11px', fontWeight: '700', color: 'rgba(255,255,255,0.5)', letterSpacing: '0.08em', textTransform: 'uppercase', textAlign: 'right' }}>Est. Out-of-Pocket Buyout</span>
                </div>
                {buyoutTimeline.map((row, i) => (
                  <div key={row.period} style={{
                    display: 'grid', gridTemplateColumns: '1fr 1fr',
                    padding: '14px 20px',
                    background: row.highlight ? 'rgba(74,159,212,0.15)' : 'transparent',
                    borderTop: '1px solid rgba(255,255,255,0.06)',
                  }}>
                    <span style={{ fontFamily: 'Inter, sans-serif', fontSize: '14px', color: 'rgba(255,255,255,0.7)', fontWeight: '500' }}>{row.period}</span>
                    <span style={{ fontFamily: 'Inter, sans-serif', fontSize: '14px', color: row.highlight ? '#4A9FD4' : '#fff', fontWeight: '600', textAlign: 'right' }}>{row.label}</span>
                  </div>
                ))}
              </div>
              <p style={{ fontFamily: 'Inter, sans-serif', fontSize: '12px', color: 'rgba(255,255,255,0.35)', marginTop: '12px', lineHeight: '1.6' }}>
                Actual buyout pricing may vary based on container type, delivery location, taxes, deposits, and current contract terms.
              </p>
            </div>
          </div>
        </div>
        <style>{`@media (max-width: 768px) { .buyout-detail-grid { grid-template-columns: 1fr !important; } }`}</style>
      </section>

      {/* How It Works */}
      <Section bg="#F4F6F8">
        <SectionHeader eyebrow="Process" title="How It Works" subtitle="Getting your rental container is straightforward. Here's what to expect from start to delivery." />
        <div style={{ maxWidth: '720px', margin: '0 auto' }}>
          {steps.map((step, i) => (
            <div key={i} style={{ display: 'flex', gap: '20px', alignItems: 'flex-start', marginBottom: '8px' }}>
              <div style={{
                flexShrink: 0, width: '36px', height: '36px', borderRadius: '50%',
                background: i < 6 ? '#1B2A4A' : '#4A9FD4',
                color: '#fff', fontFamily: '"Barlow Condensed", sans-serif',
                fontSize: '16px', fontWeight: '700',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}>
                {i + 1}
              </div>
              {i < steps.length - 1 && (
                <div style={{
                  position: 'absolute', left: '17px', top: '36px',
                  width: '2px', height: '100%', background: 'rgba(27,42,74,0.1)',
                }} />
              )}
              <div style={{
                flex: 1, background: '#fff', border: '1px solid #E8EDF2',
                borderRadius: '8px', padding: '14px 18px', marginBottom: '4px',
              }}>
                <span style={{ fontFamily: 'Inter, sans-serif', fontSize: '14px', color: '#1B2A4A', fontWeight: '500', lineHeight: '1.4' }}>{step}</span>
              </div>
            </div>
          ))}
          <div style={{ textAlign: 'center', marginTop: '36px' }}>
            <CTAButton variant="primary" size="lg" onClick={goContact}>Start a Rental Quote</CTAButton>
          </div>
        </div>
      </Section>

      <QuoteCTABand setCurrentPage={setCurrentPage} />
    </div>
  );
};

Object.assign(window, { RentalsPage });