// Home Page
const HomeCalculatorIcon = ({ size = 28 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" aria-hidden="true">
    <rect x="5" y="2.5" width="14" height="19" rx="2.5" stroke="#FFFFFF" strokeWidth="1.8" />
    <rect x="8" y="5.5" width="8" height="3.5" rx="1" fill="#FFFFFF" opacity="0.22" />
    <path d="M8.5 12h2M13.5 12h2M8.5 15.5h2M13.5 15.5h2M8.5 19h2M13.5 19h2" stroke="#FFFFFF" strokeWidth="1.8" strokeLinecap="round" />
  </svg>
);

const HomePage = ({ setCurrentPage }) => {
  const goContact = () => { setCurrentPage('contact'); window.scrollTo({ top: 0, behavior: 'smooth' }); };
  const goRentals = () => { setCurrentPage('rentals'); window.scrollTo({ top: 0, behavior: 'smooth' }); };
  const goSales = () => { setCurrentPage('sales'); window.scrollTo({ top: 0, behavior: 'smooth' }); };
  const goDelivery = () => { setCurrentPage('delivery'); window.scrollTo({ top: 0, behavior: 'smooth' }); };

  return (
    <div>
      {/* ── Hero ── */}
      <section style={{
        background: 'linear-gradient(160deg, #0F1D33 0%, #1B2A4A 50%, #1e3459 100%)',
        padding: '140px 32px 80px',
        position: 'relative', overflow: 'hidden',
      }}>
        {/* Background texture lines */}
        {Array.from({ length: 16 }).map((_, i) => (
          <div key={i} style={{
            position: 'absolute', top: 0, bottom: 0,
            left: `${i * 6.5}%`, width: '1px',
            background: 'rgba(74,159,212,0.04)',
          }} />
        ))}
        <div style={{ maxWidth: '1200px', margin: '0 auto', position: 'relative', zIndex: 1 }}>
          <div style={{
            display: 'grid', gridTemplateColumns: '1fr 1fr',
            gap: '60px', alignItems: 'center',
          }} className="hero-grid">

            {/* Left copy */}
            <div>
              {/* Badges */}
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px', marginBottom: '28px' }}>
                {['Washington Owned', 'Serving WA, OR & ID', 'Sales & Rentals', 'Rental Buyout Program', 'National Wholesale Available'].map(b => (
                  <span key={b} style={{
                    background: 'rgba(74,159,212,0.15)', border: '1px solid rgba(74,159,212,0.35)',
                    color: '#a8d8f0', borderRadius: '100px', padding: '5px 12px',
                    fontSize: '12px', fontWeight: '600', fontFamily: 'Inter, sans-serif',
                    letterSpacing: '0.02em',
                  }}>
                    {b}
                  </span>
                ))}
              </div>

              <h1 style={{
                fontFamily: '"Barlow Condensed", sans-serif',
                fontSize: 'clamp(36px, 5vw, 64px)',
                fontWeight: '800', color: '#fff',
                margin: '0 0 20px 0', lineHeight: '1.0',
                letterSpacing: '-0.01em',
              }}>
                Shipping Containers<br />
                <span style={{ color: '#4A9FD4' }}>for Sale & Rent</span><br />
                Across the PNW
              </h1>

              <p style={{
                fontFamily: 'Inter, sans-serif', fontSize: '17px',
                color: 'rgba(255,255,255,0.72)', lineHeight: '1.65',
                margin: '0 0 36px 0', maxWidth: '520px',
              }}>
                Washington-owned container sales and rentals serving WA, OR, and ID, with national wholesale options available. Get reliable storage, flexible rental terms, and buyout options on every rental.
              </p>

              <div style={{ display: 'flex', gap: '12px', flexWrap: 'wrap' }}>
                <CTAButton variant="primary" size="lg" onClick={goContact}>Get a Free Quote</CTAButton>
                <CTAButton variant="outline" size="lg" onClick={goRentals}>View Rentals</CTAButton>
                <CTAButton variant="outline" size="lg" onClick={goSales}>Shop Containers</CTAButton>
              </div>

              {/* Trust indicators */}
              <div style={{
                marginTop: '40px', display: 'flex', gap: '32px', flexWrap: 'wrap',
                paddingTop: '32px', borderTop: '1px solid rgba(255,255,255,0.1)',
              }}>
                {[
                  { num: '1–10', label: 'Working Day Delivery' },
                  { num: '6mo+', label: 'Rental Terms' },
                  { num: '50%', label: 'Buyout Credit' },
                ].map(t => (
                  <div key={t.label}>
                    <div style={{ fontFamily: '"Barlow Condensed", sans-serif', fontSize: '28px', fontWeight: '700', color: '#4A9FD4' }}>{t.num}</div>
                    <div style={{ fontFamily: 'Inter, sans-serif', fontSize: '13px', color: 'rgba(255,255,255,0.55)', fontWeight: '500' }}>{t.label}</div>
                  </div>
                ))}
              </div>
            </div>

            {/* Right — Service Area graphic */}
            <div style={{ display: 'flex', flexDirection: 'column', gap: '20px', alignItems: 'center' }}>
              {/* Logo */}
              <img src="uploads/logo-7179fe62.png" alt="Sea Steel Storage"
                style={{ width: '100%', maxWidth: '340px', marginBottom: '8px', objectFit: 'contain' }} />

              {/* PNW Service Area */}
              <div style={{
                background: 'rgba(255,255,255,0.05)', border: '1px solid rgba(74,159,212,0.25)',
                borderRadius: '12px', padding: '28px', width: '100%', maxWidth: '360px',
                boxSizing: 'border-box',
              }}>
                <div style={{ textAlign: 'center', marginBottom: '20px' }}>
                  <span style={{ fontFamily: 'Inter, sans-serif', fontSize: '11px', fontWeight: '700', letterSpacing: '0.12em', textTransform: 'uppercase', color: '#4A9FD4' }}>
                    PNW Service Area
                  </span>
                </div>

                {/* Simple state map visual */}
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '10px', marginBottom: '16px' }}>
                  {[
                    { state: 'WA', name: 'Washington', primary: true },
                    { state: 'OR', name: 'Oregon', primary: true },
                    { state: 'ID', name: 'Idaho', primary: true },
                    { state: 'National', name: 'Wholesale', primary: false },
                  ].map(s => (
                    <div key={s.state} style={{
                      background: s.primary ? 'rgba(74,159,212,0.15)' : 'rgba(255,255,255,0.05)',
                      border: `1px solid ${s.primary ? 'rgba(74,159,212,0.4)' : 'rgba(255,255,255,0.1)'}`,
                      borderRadius: '8px', padding: '14px', textAlign: 'center',
                    }}>
                      <div style={{ fontFamily: '"Barlow Condensed", sans-serif', fontSize: '28px', fontWeight: '800', color: s.primary ? '#4A9FD4' : 'rgba(255,255,255,0.4)' }}>
                        {s.state}
                      </div>
                      <div style={{ fontFamily: 'Inter, sans-serif', fontSize: '11px', color: 'rgba(255,255,255,0.5)', fontWeight: '600', letterSpacing: '0.04em', marginTop: '2px' }}>
                        {s.name}
                      </div>
                    </div>
                  ))}
                </div>

                <div style={{
                  textAlign: 'center', paddingTop: '14px', borderTop: '1px solid rgba(255,255,255,0.08)',
                  fontFamily: 'Inter, sans-serif', fontSize: '12px', color: 'rgba(255,255,255,0.45)',
                }}>
                  Sales · Rentals · Delivery · Buyout Options
                </div>
              </div>
            </div>
          </div>
        </div>

        <style>{`
          @media (max-width: 768px) {
            .hero-grid { grid-template-columns: 1fr !important; }
          }
        `}</style>
      </section>

      {/* ── Quote CTA Band ── */}
      <QuoteCTABand setCurrentPage={setCurrentPage} />

      {/* ── Estimator CTA ── */}
      <div style={{
        background: '#fff', padding: '40px 32px', borderBottom: '1px solid #EEF2F7',
      }}>
        <div style={{
          maxWidth: '1200px', margin: '0 auto',
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          gap: '24px', flexWrap: 'wrap',
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: '20px' }}>
            <div style={{
              width: '56px', height: '56px', background: 'linear-gradient(135deg, #1B2A4A, #2E6FA3)',
              borderRadius: '12px', display: 'flex', alignItems: 'center', justifyContent: 'center',
              flexShrink: 0,
            }}><HomeCalculatorIcon /></div>
            <div>
              <h3 style={{ fontFamily: '"Barlow Condensed", sans-serif', fontSize: '22px', fontWeight: '700', color: '#1B2A4A', margin: '0 0 4px 0' }}>
                Instant Price Estimator
              </h3>
              <p style={{ fontFamily: 'Inter, sans-serif', fontSize: '14px', color: '#6B7E96', margin: 0 }}>
                Get an instant buy or rent estimate including delivery to your ZIP code.
              </p>
            </div>
          </div>
          <CTAButton variant="navy" size="lg" onClick={() => { setCurrentPage('estimator'); window.scrollTo({ top: 0, behavior: 'smooth' }); }}>
            Try the Estimator →
          </CTAButton>
        </div>
      </div>

      {/* ── What We Offer ── */}
      <Section bg="#F4F6F8">
        <SectionHeader eyebrow="What We Offer" title="Container Solutions for Every Need" subtitle="From residential storage to commercial fleets, we've got the right container and the right terms." />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: '24px' }}>
          {[
            {
              icon: '🏗',
              title: 'Container Sales',
              desc: 'New, used, premium used, cargo-worthy, wind and water tight, and specialty containers available.',
              cta: 'Shop Containers', action: goSales,
              color: '#1B2A4A',
            },
            {
              icon: '📅',
              title: 'Container Rentals',
              desc: 'Flexible 6-month+ rental contracts with buyout options. Build equity every month.',
              cta: 'View Rentals', action: goRentals,
              color: '#2E6FA3',
            },
            {
              icon: '🚛',
              title: 'Delivery',
              desc: 'Tiltbed truck delivery with clear site-prep guidance and average delivery in 1-10 working days.',
              cta: 'Delivery Info', action: goDelivery,
              color: '#4A9FD4',
            },
          ].map(item => (
            <Card key={item.title} style={{ padding: '32px' }}>
              <div style={{
                width: '52px', height: '52px', background: `${item.color}12`,
                border: `2px solid ${item.color}22`,
                borderRadius: '10px', display: 'flex', alignItems: 'center',
                justifyContent: 'center', fontSize: '24px', marginBottom: '20px',
              }}>
                {item.icon}
              </div>
              <h3 style={{ fontFamily: '"Barlow Condensed", sans-serif', fontSize: '24px', fontWeight: '700', color: '#1B2A4A', margin: '0 0 10px 0' }}>
                {item.title}
              </h3>
              <p style={{ fontFamily: 'Inter, sans-serif', fontSize: '15px', color: '#4A5568', lineHeight: '1.6', margin: '0 0 24px 0' }}>
                {item.desc}
              </p>
              <CTAButton variant="secondary" size="sm" onClick={item.action}>{item.cta} →</CTAButton>
            </Card>
          ))}
        </div>
      </Section>

      {/* ── Popular Containers ── */}
      <Section bg="#fff">
        <SectionHeader eyebrow="Popular Containers" title="The Right Container for Any Job" />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(340px, 1fr))', gap: '32px' }}>
          {[
            {
              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, job sites, small business storage, and equipment.",
            },
            {
              size: "40'", type: 'High Cube Container',
              label: "New 40' High Cube",
              img: "uploads/40fthc.jpg",
              specs: [['Width', "8'"], ['Height', "9'6\""], ['Length', "40'"]],
              uses: "Extra vertical space for larger storage needs, commercial use, and equipment.",
            },
          ].map(c => (
            <Card key={c.size}>
              <img src={c.img} alt={c.label} style={{ width: '100%', height: '220px', objectFit: 'cover', display: 'block' }} />
              <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>
                <div style={{ display: 'flex', gap: '10px' }}>
                  <CTAButton variant="primary" size="sm" onClick={goContact}>Get Quote</CTAButton>
                  <CTAButton variant="secondary" size="sm" onClick={goSales}>Learn More</CTAButton>
                </div>
              </div>
            </Card>
          ))}
        </div>
      </Section>

      {/* ── Rental 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: 'center' }} className="buyout-grid">
            <div>
              <span style={{ fontFamily: 'Inter, sans-serif', fontSize: '12px', fontWeight: '700', letterSpacing: '0.12em', textTransform: 'uppercase', color: '#4A9FD4', display: 'block', marginBottom: '10px' }}>
                Rental 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: '20px' }}>
                All rental contracts include buyout options after 6 months.
              </p>
              <p style={{ fontFamily: 'Inter, sans-serif', fontSize: '15px', color: 'rgba(255,255,255,0.6)', lineHeight: '1.7', marginBottom: '32px' }}>
                50% of your monthly rental payment goes toward reducing the cost of your buyout option until the container reaches its residual value. Your buyout price updates every month after month 6. Just call or email to see where you are at.
              </p>
              <CTAButton variant="primary" onClick={goRentals}>Learn About Rentals →</CTAButton>
            </div>
            <div>
              <div style={{
                background: 'rgba(255,255,255,0.06)', border: '1px solid rgba(74,159,212,0.25)',
                borderRadius: '12px', padding: '32px',
              }}>
                <h3 style={{ fontFamily: '"Barlow Condensed", sans-serif', fontSize: '22px', fontWeight: '700', color: '#fff', margin: '0 0 20px 0' }}>
                  How Your Buyout Builds
                </h3>
                {[
                  { mo: 'Month 6', saving: '50% credit begins', highlight: false },
                  { mo: '12 months', saving: '~$2,350 buyout', highlight: false },
                  { mo: '18 months', saving: '~$1,953 buyout', highlight: false },
                  { mo: '24 months', saving: '~$1,556 buyout', highlight: true },
                  { mo: '36+ months', saving: '~$802 buyout', highlight: false },
                ].map(row => (
                  <div key={row.mo} style={{
                    display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                    padding: '12px 16px', borderRadius: '6px', marginBottom: '6px',
                    background: row.highlight ? 'rgba(74,159,212,0.2)' : 'rgba(255,255,255,0.04)',
                    border: row.highlight ? '1px solid rgba(74,159,212,0.4)' : '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.mo}</span>
                    <span style={{ fontFamily: 'Inter, sans-serif', fontSize: '14px', color: row.highlight ? '#4A9FD4' : '#fff', fontWeight: '600' }}>{row.saving}</span>
                  </div>
                ))}
                <p style={{ fontFamily: 'Inter, sans-serif', fontSize: '12px', color: 'rgba(255,255,255,0.35)', marginTop: '14px', lineHeight: '1.5' }}>
                  Example based on new 20' container rental at $120/month in Kirkland, WA. Actual pricing varies.
                </p>
              </div>
            </div>
          </div>
        </div>
        <style>{`.buyout-grid { @media (max-width: 768px) { grid-template-columns: 1fr !important; } }`}</style>
      </section>

      {/* ── Delivery Readiness ── */}
      <Section bg="#F4F6F8">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '60px', alignItems: 'start' }} className="delivery-grid">
          <div>
            <SectionHeader eyebrow="Delivery" title="Delivery Made Simple" subtitle="Average delivery is 1-10 working days after order confirmation. We use tiltbed truck delivery and walk you through site prep." align="left" />
            <div style={{ display: 'flex', flexDirection: 'column', gap: '16px', marginBottom: '32px' }}>
              {[
                { icon: '📍', label: '40\' Container', reqs: ['~110\' straight clearance', '10\' wide access', '16\' vertical clearance'] },
                { icon: '📍', label: '20\' Container', reqs: ['~95\' on a 40\' tiltbed', '~60\' with smaller truck', 'Rates vary by truck type'] },
              ].map(c => (
                <div key={c.label} style={{
                  background: '#fff', border: '1px solid #E8EDF2', borderRadius: '10px', padding: '20px',
                }}>
                  <div style={{ fontFamily: '"Barlow Condensed", sans-serif', fontSize: '18px', fontWeight: '700', color: '#1B2A4A', marginBottom: '10px' }}>
                    {c.icon} {c.label}
                  </div>
                  {c.reqs.map(r => (
                    <div key={r} style={{ display: 'flex', alignItems: 'center', gap: '8px', fontFamily: 'Inter, sans-serif', fontSize: '14px', color: '#4A5568', padding: '4px 0' }}>
                      <span style={{ color: '#4A9FD4', fontWeight: '700' }}>·</span> {r}
                    </div>
                  ))}
                </div>
              ))}
            </div>
            <CTAButton variant="navy" onClick={goDelivery}>Check Delivery Requirements →</CTAButton>
          </div>

          {/* Checklist */}
          <div>
            <h3 style={{ fontFamily: '"Barlow Condensed", sans-serif', fontSize: '24px', fontWeight: '700', color: '#1B2A4A', margin: '0 0 20px 0' }}>
              Site Prep Checklist
            </h3>
            {[
              '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?',
            ].map((item, i) => (
              <ChecklistItem key={i} text={item} />
            ))}
            <div style={{ marginTop: '20px', padding: '16px', background: 'rgba(74,159,212,0.08)', border: '1px solid rgba(74,159,212,0.2)', borderRadius: '8px' }}>
              <p style={{ fontFamily: 'Inter, sans-serif', fontSize: '14px', color: '#1B2A4A', lineHeight: '1.6', margin: 0 }}>
                <strong>Site tip:</strong> 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.
              </p>
            </div>
          </div>
        </div>
        <style>{`.delivery-grid { @media (max-width: 768px) { grid-template-columns: 1fr !important; } }`}</style>
      </Section>

      {/* ── Final CTA ── */}
      <section style={{
        background: '#fff', padding: '80px 32px',
        textAlign: 'center',
      }}>
        <div style={{ maxWidth: '620px', margin: '0 auto' }}>
          <h2 style={{ fontFamily: '"Barlow Condensed", sans-serif', fontSize: 'clamp(32px, 5vw, 52px)', fontWeight: '800', color: '#1B2A4A', margin: '0 0 16px 0' }}>
            Ready to price your container?
          </h2>
          <p style={{ fontFamily: 'Inter, sans-serif', fontSize: '17px', color: '#4A5568', lineHeight: '1.65', margin: '0 0 36px 0' }}>
            Tell us what size, condition, and delivery location you need. We'll help you find the right container and delivery option.
          </p>
          <div style={{ display: 'flex', gap: '12px', justifyContent: 'center', flexWrap: 'wrap' }}>
            <CTAButton variant="primary" size="lg" onClick={goContact}>Get a Free Quote</CTAButton>
            <CTAButton variant="navy" size="lg" href="tel:2532719238">Call (253) 271-9238</CTAButton>
          </div>
        </div>
      </section>
    </div>
  );
};

// Checklist item (used in home + delivery)
const ChecklistItem = ({ text, interactive = false }) => {
  const [checked, setChecked] = React.useState(false);
  return (
    <div
      onClick={() => interactive && setChecked(!checked)}
      style={{
        display: 'flex', alignItems: 'flex-start', gap: '12px',
        padding: '12px 16px', borderRadius: '8px', marginBottom: '8px',
        background: checked ? 'rgba(74,159,212,0.08)' : '#fff',
        border: `1px solid ${checked ? 'rgba(74,159,212,0.3)' : '#E8EDF2'}`,
        cursor: interactive ? 'pointer' : 'default',
        transition: 'all 0.2s',
      }}
    >
      <div style={{
        width: '20px', height: '20px', borderRadius: '4px', flexShrink: 0,
        background: checked ? '#4A9FD4' : '#fff',
        border: `2px solid ${checked ? '#4A9FD4' : '#CBD5E0'}`,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        marginTop: '1px', transition: 'all 0.2s',
      }}>
        {checked && <span style={{ color: '#fff', fontSize: '12px', fontWeight: '700' }}>✓</span>}
      </div>
      <span style={{ fontFamily: 'Inter, sans-serif', fontSize: '14px', color: '#1B2A4A', lineHeight: '1.5' }}>
        {text}
      </span>
    </div>
  );
};

Object.assign(window, { HomePage, ChecklistItem });