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

  const checklist = [
    'Is the delivery path clear?',
    'Is the ground dry and level?',
    'Is there enough straight-line clearance?',
    'Are there low branches, wires, gates, or tight turns?',
    'Is the placement area outside of water pooling or runoff?',
    'Do you have blocks, pavers, gravel, or railroad ties if leveling is needed?',
  ];

  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' }}>
            Delivery
          </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' }}>
            Container Delivery<br /><span style={{ color: '#4A9FD4' }}>Made Simple</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' }}>
            Sea Steel Storage uses tiltbed truck delivery and helps you understand the space, clearance, and site conditions needed before your container arrives.
          </p>
          <div style={{ display: 'flex', gap: '20px', flexWrap: 'wrap', marginBottom: '40px' }}>
            {[
              { num: '1–10', label: 'Working Day Delivery' },
              { num: 'Tiltbed', label: 'Truck Delivery' },
              { num: 'WA·OR·ID', label: 'Service Area' },
            ].map(s => (
              <div key={s.label} style={{
                background: 'rgba(74,159,212,0.12)', border: '1px solid rgba(74,159,212,0.25)',
                borderRadius: '8px', padding: '16px 24px', textAlign: 'center',
              }}>
                <div style={{ fontFamily: '"Barlow Condensed", sans-serif', fontSize: '24px', fontWeight: '800', color: '#4A9FD4' }}>{s.num}</div>
                <div style={{ fontFamily: 'Inter, sans-serif', fontSize: '12px', color: 'rgba(255,255,255,0.55)', fontWeight: '600', marginTop: '2px' }}>{s.label}</div>
              </div>
            ))}
          </div>
          <CTAButton variant="primary" size="lg" onClick={goContact}>Request Delivery Quote</CTAButton>
        </div>
      </section>

      {/* Delivery Timeline */}
      <Section bg="#fff">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '60px', alignItems: 'center' }} className="delivery-timeline-grid">
          <div>
            <span style={{ fontFamily: 'Inter, sans-serif', fontSize: '12px', fontWeight: '700', letterSpacing: '0.12em', textTransform: 'uppercase', color: '#4A9FD4', display: 'block', marginBottom: '10px' }}>
              Delivery Timeline
            </span>
            <h2 style={{ fontFamily: '"Barlow Condensed", sans-serif', fontSize: 'clamp(26px, 3vw, 38px)', fontWeight: '700', color: '#1B2A4A', margin: '0 0 16px 0' }}>
              What to Expect
            </h2>
            <p style={{ fontFamily: 'Inter, sans-serif', fontSize: '16px', color: '#4A5568', lineHeight: '1.65', marginBottom: '28px' }}>
              Average delivery is typically within <strong>1-10 working days</strong> after order confirmation, depending on inventory, location, scheduling, and site access.
            </p>
            {[
              { step: '1', title: 'Order Confirmed', desc: 'You provide delivery ZIP, site info, and payment.' },
              { step: '2', title: 'Scheduling', desc: 'We schedule your delivery window based on inventory and routing.' },
              { step: '3', title: 'Day of Delivery', desc: 'Our tiltbed truck arrives and carefully places your container.' },
              { step: '4', title: 'You\'re Set', desc: 'Container is placed, leveled, and ready to use.' },
            ].map(s => (
              <div key={s.step} style={{ display: 'flex', gap: '16px', marginBottom: '16px' }}>
                <div style={{
                  flexShrink: 0, width: '32px', height: '32px', borderRadius: '50%',
                  background: '#1B2A4A', color: '#fff',
                  fontFamily: '"Barlow Condensed", sans-serif', fontSize: '15px', fontWeight: '700',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                }}>
                  {s.step}
                </div>
                <div>
                  <h4 style={{ fontFamily: 'Inter, sans-serif', fontSize: '15px', fontWeight: '700', color: '#1B2A4A', margin: '0 0 4px 0' }}>{s.title}</h4>
                  <p style={{ fontFamily: 'Inter, sans-serif', fontSize: '14px', color: '#6B7E96', margin: 0, lineHeight: '1.5' }}>{s.desc}</p>
                </div>
              </div>
            ))}
          </div>
          <div>
            <img src="uploads/40fthc.jpg" alt="40ft Shipping Container" style={{ width: '100%', height: '380px', objectFit: 'cover', borderRadius: '8px', display: 'block' }} />
          </div>
        </div>
        <style>{`@media (max-width: 768px) { .delivery-timeline-grid { grid-template-columns: 1fr !important; } }`}</style>
      </Section>

      {/* Clearance Requirements */}
      <Section bg="#F4F6F8">
        <SectionHeader eyebrow="Site Requirements" title="Clearance Requirements" subtitle="Make sure your site has the right clearance before delivery day to avoid delays or extra fees." />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))', gap: '28px' }}>
          {[
            {
              size: "40'", title: "40' Container Delivery",
              reqs: [
                { label: 'Straight clearance', value: '~110 feet' },
                { label: 'Width clearance', value: '10 feet' },
                { label: 'Vertical clearance', value: '16 feet' },
              ],
              note: 'Requires a full-size 40\' tiltbed truck.',
            },
            {
              size: "20'", title: "20' Container Delivery",
              reqs: [
                { label: 'With 40\' tiltbed', value: '~95 feet' },
                { label: 'With smaller truck', value: '~60 feet' },
                { label: 'Smaller truck', value: 'When available' },
              ],
              note: 'Rates may vary depending on truck type and delivery location.',
            },
          ].map(c => (
            <Card key={c.size} style={{ padding: '32px' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: '12px', marginBottom: '24px' }}>
                <div style={{
                  background: '#1B2A4A', color: '#fff',
                  fontFamily: '"Barlow Condensed", sans-serif',
                  fontSize: '20px', fontWeight: '800',
                  padding: '6px 14px', borderRadius: '6px',
                }}>
                  {c.size}
                </div>
                <h3 style={{ fontFamily: '"Barlow Condensed", sans-serif', fontSize: '22px', fontWeight: '700', color: '#1B2A4A', margin: 0 }}>
                  {c.title}
                </h3>
              </div>
              {c.reqs.map(r => <SpecRow key={r.label} label={r.label} value={r.value} />)}
              <p style={{ fontFamily: 'Inter, sans-serif', fontSize: '13px', color: '#6B7E96', marginTop: '16px', lineHeight: '1.5' }}>
                ℹ {c.note}
              </p>
            </Card>
          ))}
        </div>
      </Section>

      {/* Site Prep */}
      <Section bg="#fff">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '60px' }} className="site-prep-grid">
          <div>
            <span style={{ fontFamily: 'Inter, sans-serif', fontSize: '12px', fontWeight: '700', letterSpacing: '0.12em', textTransform: 'uppercase', color: '#4A9FD4', display: 'block', marginBottom: '10px' }}>
              Site Prep
            </span>
            <h2 style={{ fontFamily: '"Barlow Condensed", sans-serif', fontSize: 'clamp(26px, 3vw, 38px)', fontWeight: '700', color: '#1B2A4A', margin: '0 0 16px 0' }}>
              Preparing Your Site
            </h2>
            <p style={{ fontFamily: 'Inter, sans-serif', fontSize: '15px', color: '#4A5568', lineHeight: '1.7', marginBottom: '16px' }}>
              Asphalt is best, but most dry, level surfaces can work. Gravel, compact dirt, or grass may be acceptable as long as the container sits level and is placed outside areas where water may pool or run off.
            </p>
            <p style={{ fontFamily: 'Inter, sans-serif', fontSize: '15px', color: '#4A5568', lineHeight: '1.7', marginBottom: '28px' }}>
              If the ground is not level, customers may use stone pavers, wood blocks, gravel, or railroad ties under the corners to create even weight distribution.
            </p>

            <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
              {[
                { icon: '✓', label: 'Asphalt', note: 'Best surface' },
                { icon: '✓', label: 'Compacted gravel', note: 'Good option' },
                { icon: '✓', label: 'Compact dirt', note: 'If dry and level' },
                { icon: '✓', label: 'Grass', note: 'If level, not prone to pooling' },
                { icon: '✕', label: 'Soft or wet ground', note: 'Not recommended' },
                { icon: '✕', label: 'Areas prone to water pooling', note: 'Avoid' },
              ].map(s => (
                <div key={s.label} style={{
                  display: 'flex', alignItems: 'center', gap: '12px',
                  padding: '10px 16px', borderRadius: '6px',
                  background: s.icon === '✓' ? 'rgba(74,159,212,0.06)' : 'rgba(220,80,80,0.05)',
                  border: `1px solid ${s.icon === '✓' ? 'rgba(74,159,212,0.15)' : 'rgba(220,80,80,0.12)'}`,
                }}>
                  <span style={{ fontSize: '14px', fontWeight: '700', color: s.icon === '✓' ? '#4A9FD4' : '#C53030' }}>{s.icon}</span>
                  <span style={{ fontFamily: 'Inter, sans-serif', fontSize: '14px', color: '#1B2A4A', fontWeight: '600' }}>{s.label}</span>
                  <span style={{ fontFamily: 'Inter, sans-serif', fontSize: '12px', color: '#6B7E96', marginLeft: 'auto' }}>{s.note}</span>
                </div>
              ))}
            </div>
          </div>

          {/* Interactive Checklist */}
          <div>
            <h3 style={{ fontFamily: '"Barlow Condensed", sans-serif', fontSize: '24px', fontWeight: '700', color: '#1B2A4A', margin: '0 0 8px 0' }}>
              Delivery Checklist
            </h3>
            <p style={{ fontFamily: 'Inter, sans-serif', fontSize: '14px', color: '#6B7E96', margin: '0 0 20px 0' }}>
              Check off each item before your delivery date.
            </p>
            {checklist.map((item, i) => (
              <ChecklistItem key={i} text={item} interactive={true} />
            ))}
            <div style={{ marginTop: '28px' }}>
              <CTAButton variant="primary" size="md" onClick={goContact}>Check My Delivery Site</CTAButton>
            </div>
          </div>
        </div>
        <style>{`@media (max-width: 768px) { .site-prep-grid { grid-template-columns: 1fr !important; } }`}</style>
      </Section>

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

Object.assign(window, { DeliveryPage });