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

  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 Sales
          </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' }}>
            Shipping Containers<br /><span style={{ color: '#4A9FD4' }}>for Sale</span>
          </h1>
          <p style={{ fontFamily: 'Inter, sans-serif', fontSize: '17px', color: 'rgba(255,255,255,0.7)', lineHeight: '1.65', maxWidth: '560px', margin: '0 0 32px 0' }}>
            Choose from new, used, premium used, cargo-worthy, wind and water tight, and specialty containers. Available in popular 20' and 40' configurations.
          </p>
          <CTAButton variant="primary" size="lg" onClick={goContact}>Request a Sales Quote</CTAButton>
        </div>
      </section>

      {/* Container sizes */}
      <Section bg="#F4F6F8">
        <SectionHeader eyebrow="Available Sizes" title="20' and 40' Configurations" subtitle="Two sizes to cover most residential, commercial, and industrial needs." />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: '28px' }}>
          {[
            {
              size: "40'", type: 'High Cube Container', label: "New 40' High Cube",
              img: "uploads/40fthc.jpg",
              specs: [['Width', "8'"], ['Height', "9'6\""], ['Length', "40'"]],
              uses: "Great for large storage needs, commercial use, contractors, farms, job sites, and equipment storage.",
              badge: 'Most Popular',
            },
            {
              size: "20'", type: 'Standard Container', label: "New 20' Container",
              img: "uploads/20ft-shipping-container-new-beige-side-left.webp",
              specs: [['Width', "8'"], ['Height', "8'6\""], ['Length', "20'"]],
              uses: "Great for residential storage, small businesses, job sites, tools, inventory, and temporary storage.",
              badge: null,
            },
          ].map(c => (
            <Card key={c.size}>
              <div style={{ position: 'relative' }}>
                <img src={c.img} alt={c.label} style={{ width: '100%', height: '220px', objectFit: 'cover', display: 'block' }} />
                {c.badge && (
                  <span style={{
                    position: 'absolute', top: '12px', left: '12px',
                    background: '#4A9FD4', color: '#fff',
                    fontFamily: 'Inter, sans-serif', fontSize: '11px', fontWeight: '700',
                    padding: '4px 10px', borderRadius: '100px', letterSpacing: '0.05em',
                  }}>{c.badge}</span>
                )}
              </div>
              <div style={{ padding: '24px' }}>
                <div style={{ display: 'flex', alignItems: 'baseline', gap: '8px', marginBottom: '12px' }}>
                  <span style={{ fontFamily: '"Barlow Condensed", sans-serif', fontSize: '32px', fontWeight: '800', color: '#1B2A4A' }}>{c.size}</span>
                  <span style={{ fontFamily: 'Inter, sans-serif', fontSize: '14px', color: '#6B7E96', fontWeight: '600' }}>{c.type}</span>
                </div>
                {c.specs.map(([k, v]) => <SpecRow key={k} label={k} value={v} />)}
                <p style={{ fontFamily: 'Inter, sans-serif', fontSize: '14px', color: '#4A5568', lineHeight: '1.6', margin: '16px 0 20px' }}>{c.uses}</p>
                <CTAButton variant="primary" size="sm" onClick={goContact}>Get a Quote →</CTAButton>
              </div>
            </Card>
          ))}
        </div>
      </Section>

      {/* New Containers */}
      <Section bg="#fff">
        <SectionHeader eyebrow="New Containers" title="One-Trip Quality" subtitle="New containers are typically one-trip containers that have been loaded with freight and shipped across the ocean one time. They may have minor dents, scuffs, or small patches, but they are the best choice for appearance, longevity, and overall condition." align="left" />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: '24px', marginBottom: '36px' }}>
          {[
            { label: "New 20' Container", img: "uploads/20ft-shipping-container-new-beige-side-left.webp" },
            { label: "New 40' High Cube Container", img: "uploads/40fthc.jpg" },
          ].map(({ label, img }) => (
            <Card key={label}>
              <img src={img} alt={label} style={{ width: '100%', height: '200px', objectFit: 'cover', display: 'block' }} />
              <div style={{ padding: '16px 20px' }}>
                <h4 style={{ fontFamily: '"Barlow Condensed", sans-serif', fontSize: '20px', fontWeight: '700', color: '#1B2A4A', margin: '0 0 8px 0' }}>{label}</h4>
                <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap', marginBottom: '14px' }}>
                  {['Best Appearance', 'Best Longevity', 'One-Trip'].map(b => (
                    <span key={b} style={{ background: 'rgba(74,159,212,0.1)', border: '1px solid rgba(74,159,212,0.2)', color: '#2E6FA3', padding: '3px 10px', borderRadius: '100px', fontSize: '11px', fontWeight: '600', fontFamily: 'Inter, sans-serif' }}>{b}</span>
                  ))}
                </div>
                <CTAButton variant="primary" size="sm" onClick={goContact}>Request Quote</CTAButton>
              </div>
            </Card>
          ))}
        </div>
      </Section>

      {/* Used Containers */}
      <Section bg="#F4F6F8">
        <SectionHeader eyebrow="Used Containers" title="Three Grades to Fit Your Budget" />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: '28px', marginBottom: '36px' }}>
          {[
            {
              grade: 'Cargo Worthy', label: 'Cargo Worthy 20\' & 40\'',
              img: "uploads/Cargo Worthy.jpg",
              desc: 'Best value option for most customers. Cargo-worthy containers generally have good doors, solid floors, and may have some surface rust. They are not the worst-looking boxes, but new containers usually win the beauty contest.',
              tags: ['Best Value', 'Solid Floors', 'Good Doors'],
            },
            {
              grade: 'Wind & Water Tight', label: 'Wind & Water Tight',
              img: "uploads/Wind & Water Tight.webp",
              desc: 'Available upon request. Wind and water tight containers typically have substantially more surface rust than cargo-worthy units. They may be less attractive visually, but they will do the job for storage.',
              tags: ['Available on Request', 'Functional Storage', 'Budget Option'],
            },
            {
              grade: 'Premium Used', label: 'Premium Used',
              img: "uploads/Premium Used.jpeg",
              desc: 'The best-looking used option. Premium used containers typically have minimal surface rust and are a strong choice for customers who want a better appearance for only a few hundred dollars more.',
              tags: ['Best Used Appearance', 'Minimal Rust', 'Premium Finish'],
            },
          ].map(grade => (
            <Card key={grade.grade} style={{ padding: '0', overflow: 'hidden' }}>
              <img src={grade.img} alt={grade.label} style={{ width: '100%', height: '180px', objectFit: 'cover', display: 'block' }} />
              <div style={{ padding: '24px' }}>
                <h3 style={{ fontFamily: '"Barlow Condensed", sans-serif', fontSize: '22px', fontWeight: '700', color: '#1B2A4A', margin: '0 0 10px 0' }}>{grade.grade}</h3>
                <div style={{ display: 'flex', gap: '6px', flexWrap: 'wrap', marginBottom: '14px' }}>
                  {grade.tags.map(t => (
                    <span key={t} style={{ background: '#EEF2F7', color: '#4A5568', padding: '3px 10px', borderRadius: '100px', fontSize: '11px', fontWeight: '600', fontFamily: 'Inter, sans-serif' }}>{t}</span>
                  ))}
                </div>
                <p style={{ fontFamily: 'Inter, sans-serif', fontSize: '14px', color: '#4A5568', lineHeight: '1.6', margin: '0 0 20px 0' }}>{grade.desc}</p>
                <CTAButton variant="secondary" size="sm" onClick={goContact}>Get Pricing →</CTAButton>
              </div>
            </Card>
          ))}
        </div>
      </Section>

      {/* Specialty Containers */}
      <Section bg="#fff">
        <SectionHeader eyebrow="Specialty" title="Specialty Containers Available Upon Request" subtitle="Need something beyond a standard box? We can source specialty containers for unique use cases." />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(180px, 1fr))', gap: '16px', marginBottom: '36px' }}>
          {[
            'Double Door Containers',
            'Flat Racks',
            'Open Side Containers',
            'Open Top Containers',
            'Refrigerated Containers',
            'Non-Working Refrigerated',
          ].map(s => (
            <Card key={s} style={{ padding: '20px', textAlign: 'center' }}>
              <div style={{
                width: '44px', height: '44px', background: 'rgba(74,159,212,0.1)',
                border: '1px solid rgba(74,159,212,0.25)',
                borderRadius: '8px', margin: '0 auto 12px', display: 'flex',
                alignItems: 'center', justifyContent: 'center', fontSize: '20px',
              }}>📦</div>
              <p style={{ fontFamily: 'Inter, sans-serif', fontSize: '13px', fontWeight: '600', color: '#1B2A4A', margin: 0, lineHeight: '1.4' }}>{s}</p>
            </Card>
          ))}
        </div>
        <div style={{ textAlign: 'center' }}>
          <CTAButton variant="primary" size="lg" onClick={goContact}>Request Specialty Pricing</CTAButton>
        </div>
      </Section>

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

Object.assign(window, { SalesPage });