// Home page sections.

// ---------------------------------------------------------------
// Hero
// ---------------------------------------------------------------
const HomeHero = () => {
  const [zip, setZip] = React.useState('');
  return (
    <section style={{
      position: 'relative',
      padding: 'clamp(44px, 6vw, 72px) clamp(24px, 5vw, 64px) clamp(40px, 5vw, 64px)',
      textAlign: 'center',
      overflow: 'hidden',
    }}>
      <div aria-hidden style={{
        position: 'absolute', inset: 0,
        background: 'radial-gradient(ellipse 900px 500px at center top, rgba(63,122,77,0.22) 0%, transparent 65%)',
        pointerEvents: 'none',
      }} />
      <div aria-hidden style={{
        position: 'absolute', top: '30%', left: '50%',
        width: 560, height: 560, marginLeft: -280, marginTop: -280,
        background: 'radial-gradient(circle, rgba(245,196,67,0.06) 0%, transparent 60%)',
        pointerEvents: 'none', filter: 'blur(40px)',
      }} />

      <div style={{ position: 'relative', maxWidth: 1100, margin: '0 auto' }}>
        <div className="hero-badge" style={{ marginBottom: 20 }}>
          <CCTrustPill>Early access · Onboarding local haulers</CCTrustPill>
        </div>

        <h1 className="hero-title" style={{
          font: '700 clamp(36px, 5.5vw, 72px)/1.02 Anton, Oswald, sans-serif',
          letterSpacing: '-0.4px',
          textTransform: 'uppercase',
          margin: 0,
          color: '#fff',
        }}>
          <span style={{ display: 'block' }}>Rent the right dumpster</span>
          <span style={{
            display: 'block',
            background: 'linear-gradient(180deg, #9EE5A8 0%, #7BC57F 100%)',
            WebkitBackgroundClip: 'text', backgroundClip: 'text', color: 'transparent',
            paddingBottom: 6,
          }}>in minutes.</span>
        </h1>

        <p className="hero-subtext" style={{
          font: '450 clamp(15px, 1.4vw, 17px)/1.5 Inter, system-ui, sans-serif',
          color: CC_T_SECONDARY,
          margin: '18px auto 24px',
          maxWidth: 580,
        }}>
          Get quotes from local dumpster rental companies in one place.
          Real haulers, real prices — no brokers, no spam.
        </p>

        {/* Inline ZIP pill */}
        <form
          className="hero-zip-form"
          onSubmit={(e) => { e.preventDefault(); window.location.href = `quote.html${zip ? `?zip=${encodeURIComponent(zip)}` : ''}`; }}
          style={{
            display: 'flex', alignItems: 'center', gap: 8,
            background: CC_CARD, border: `1px solid ${CC_BORDER}`,
            borderRadius: 9999, padding: 6, maxWidth: 500, margin: '0 auto',
            boxShadow: CC_SHADOW_RESTING,
          }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '0 12px 0 20px', color: CC_T_TERTIARY, flex: 1 }}>
            {CCIcon.pin({ size: 18, color: CC_SAGE })}
            <input
              value={zip}
              onChange={(e) => setZip(e.target.value)}
              placeholder="Enter your ZIP code"
              style={{
                background: 'transparent', border: 0, outline: 'none',
                color: '#fff', font: '500 15px Inter, system-ui, sans-serif',
                padding: '14px 0', width: '100%',
              }}
            />
          </div>
          <CCButtonAmber size="md" arrow>Get a free quote</CCButtonAmber>
        </form>

        <div className="hero-ctas" style={{
          marginTop: 16, display: 'flex', justifyContent: 'center',
          gap: 24, flexWrap: 'wrap',
          font: '500 13px Inter, system-ui, sans-serif', color: CC_T_TERTIARY,
        }}>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
            {CCIcon.check({ size: 16, color: CC_SAGE })} No commitment
          </span>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
            {CCIcon.check({ size: 16, color: CC_SAGE })} Quotes by email, no spam
          </span>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
            {CCIcon.check({ size: 16, color: CC_SAGE })} Vetted local operators
          </span>
        </div>

      </div>
    </section>
  );
};

// ---------------------------------------------------------------
// Stat strip
// ---------------------------------------------------------------
const HomeStatStrip = () => {
  const stats = [
    { n: 'Free', l: 'Always' },
    { n: 'No', l: 'Account needed' },
    { n: '0%', l: 'Broker markup' },
    { n: 'Vetted', l: 'Haulers only' },
  ];
  return (
    <section data-anim="fade-up" style={{ padding: '0 clamp(24px, 5vw, 64px) clamp(64px, 8vw, 96px)' }}>
      <div style={{
        maxWidth: 1040, margin: '0 auto',
        background: CC_CARD, border: `1px solid ${CC_BORDER}`,
        borderRadius: 20, padding: '28px 24px',
        display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)',
        boxShadow: CC_SHADOW_RESTING,
      }} className="cc-stat-grid">
        {stats.map((s, i) => (
          <div key={s.l} style={{
            textAlign: 'center', padding: '4px 16px',
            borderRight: i < 3 ? `1px solid ${CC_GHOST_BORDER}` : 'none',
          }}>
            <div style={{
              font: '700 clamp(32px, 4.5vw, 48px)/1 Anton, Oswald, sans-serif',
              color: '#fff', letterSpacing: '-0.2px', marginBottom: 10,
            }}>{s.n}</div>
            <div style={{
              font: '600 11px Inter, system-ui, sans-serif',
              letterSpacing: 1.6, textTransform: 'uppercase',
              color: CC_T_TERTIARY,
            }}>{s.l}</div>
          </div>
        ))}
      </div>
    </section>
  );
};

// ---------------------------------------------------------------
// How it works
// ---------------------------------------------------------------
const HomeHowItWorks = () => {
  const steps = [
    { n: '01', t: 'Tell us your job', b: 'Share container size, ZIP, and start date. Takes about 30 seconds — no account required.', icon: CCIcon.pin },
    { n: '02', t: 'Get matched haulers', b: 'We send your request to licensed local haulers in your area. They respond directly with real prices — no markup, no middleman.', icon: CCIcon.truck },
    { n: '03', t: 'Compare & book', b: 'See side-by-side quotes. Real rates, no broker markup. Book directly with the operator you pick.', icon: CCIcon.check },
  ];
  return (
    <section id="how" data-anim="fade-up" style={{ background: CC_SECTION, padding: 'clamp(64px, 10vw, 112px) clamp(24px, 5vw, 64px)' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 64 }}>
          <div style={{
            font: '600 12px Inter, system-ui, sans-serif',
            letterSpacing: 1.6, textTransform: 'uppercase',
            color: CC_SAGE, marginBottom: 16,
          }}>How it works</div>
          <h2 style={{
            font: '700 clamp(36px, 5vw, 64px)/1.05 Anton, Oswald, sans-serif',
            textTransform: 'uppercase', letterSpacing: '-0.3px',
            color: '#fff', margin: 0, maxWidth: 900, marginInline: 'auto',
          }}>
            Three steps.{' '}
            <span style={{
              background: 'linear-gradient(180deg,#9EE5A8,#7BC57F)',
              WebkitBackgroundClip: 'text', backgroundClip: 'text', color: 'transparent',
            }}>No phone tag.</span>
          </h2>
        </div>
        <div className="cc-3col" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
          {steps.map((s) => (
            <div key={s.n} style={{
              position: 'relative', background: CC_CARD, border: `1px solid ${CC_BORDER}`,
              borderRadius: 20, padding: '36px 32px',
              boxShadow: CC_SHADOW_RESTING,
              transition: 'all 220ms ease',
            }}
              onMouseEnter={(e) => { e.currentTarget.style.borderColor = CC_SAGE_BORDER; e.currentTarget.style.transform = 'translateY(-2px)'; }}
              onMouseLeave={(e) => { e.currentTarget.style.borderColor = CC_BORDER; e.currentTarget.style.transform = 'translateY(0)'; }}
            >
              <div style={{
                width: 56, height: 56, borderRadius: 14,
                background: 'rgba(123,197,127,0.1)',
                border: `1px solid ${CC_SAGE_BORDER}`,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                color: CC_SAGE, marginBottom: 24,
              }}>{s.icon({ size: 24, color: CC_SAGE })}</div>
              <div style={{
                font: '700 13px Inter, system-ui, sans-serif',
                color: CC_SAGE, letterSpacing: 1.6, marginBottom: 12,
              }}>{s.n}</div>
              <div style={{
                font: '700 28px/1.15 Anton, Oswald, sans-serif',
                textTransform: 'uppercase', letterSpacing: '-0.1px',
                color: '#fff', marginBottom: 14,
              }}>{s.t}</div>
              <div style={{
                font: '450 15px/1.55 Inter, system-ui, sans-serif',
                color: CC_T_SECONDARY,
              }}>{s.b}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// ---------------------------------------------------------------
// Featured haulers
// ---------------------------------------------------------------
const HomeFeaturedHaulers = () => {
  const featured = HAULERS.filter(h => h.top || h.rating >= 4.8 || h.googleRating >= 4.8).slice(0, 4);
  return (
    <section id="haulers" data-anim="fade-up" style={{ padding: 'clamp(64px, 10vw, 112px) clamp(24px, 5vw, 64px)' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'end',
          marginBottom: 40, gap: 24, flexWrap: 'wrap',
        }}>
          <div>
            <div style={{
              font: '600 12px Inter, system-ui, sans-serif',
              letterSpacing: 1.6, textTransform: 'uppercase',
              color: CC_SAGE, marginBottom: 16,
            }}>Local haulers</div>
            <h2 style={{
              font: '700 clamp(32px, 4.5vw, 56px)/1.05 Anton, Oswald, sans-serif',
              textTransform: 'uppercase', letterSpacing: '-0.3px',
              color: '#fff', margin: 0,
            }}>{featured.length > 0 ? 'Operators our customers love.' : 'Coming soon to your area.'}</h2>
          </div>
          {featured.length > 0 && (
            <a href="/browse" style={{
              color: CC_SAGE, font: '600 14px Inter, system-ui, sans-serif',
              textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 8,
              letterSpacing: 0.3,
            }}>
              View all haulers {CCIcon.arrowRight({ size: 16 })}
            </a>
          )}
        </div>

        {featured.length > 0 ? (
          <div className="cc-4col" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 20 }}>
            {featured.map(h => <CompanyCard key={h.id} h={h} compact />)}
          </div>
        ) : (
          <div style={{
            background: CC_CARD, border: `1px solid ${CC_BORDER}`,
            borderRadius: 20, padding: 'clamp(40px, 6vw, 64px) clamp(24px, 4vw, 48px)',
            textAlign: 'center', boxShadow: CC_SHADOW_RESTING,
          }}>
            <div style={{
              width: 56, height: 56, borderRadius: 14, margin: '0 auto 20px',
              background: 'rgba(123,197,127,0.10)', border: `1px solid ${CC_SAGE_BORDER}`,
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              color: CC_SAGE,
            }}>{CCIcon.truck({ size: 24, color: CC_SAGE })}</div>
            <h3 style={{
              font: '700 24px/1.15 Anton, Oswald, sans-serif',
              textTransform: 'uppercase', letterSpacing: '-0.1px',
              color: '#fff', margin: '0 0 10px',
            }}>We're onboarding the first haulers now.</h3>
            <p style={{
              font: '450 15px/1.55 Inter, system-ui, sans-serif',
              color: CC_T_SECONDARY, maxWidth: 520, margin: '0 auto 24px',
            }}>Request a quote and we'll personally contact local haulers in your area. You'll get real prices by email — even while the directory is still being built.</p>
            <div style={{ display: 'flex', gap: 10, justifyContent: 'center', flexWrap: 'wrap' }}>
              <CCButtonAmber href="/quote" size="md">Request a quote</CCButtonAmber>
              <CCButtonGhost href="for-haulers.html" size="md">Are you a hauler?</CCButtonGhost>
            </div>
          </div>
        )}
      </div>
    </section>
  );
};

// ---------------------------------------------------------------
// Company card (reused by home + browse)
// ---------------------------------------------------------------
const CompanyCard = ({ h, compact = false }) => {
  const [hover, setHover] = React.useState(false);
  return (
    <a href={`company.html#${h.id}`}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        display: 'flex', flexDirection: 'column', textDecoration: 'none',
        background: CC_GRAD_RAISED,
        border: `1px solid ${hover ? CC_SAGE_BORDER : CC_BORDER}`,
        borderRadius: 20, overflow: 'hidden',
        transform: hover ? 'translateY(-3px)' : 'translateY(0)',
        transition: 'transform 240ms cubic-bezier(.4,0,.2,1), box-shadow 240ms ease, border-color 240ms ease',
        boxShadow: hover ? CC_SHADOW_NEU_HOVER : CC_SHADOW_NEU,
        height: '100%',
      }}>
      <div style={{
        padding: '24px 24px 20px',
        display: 'flex', alignItems: 'flex-start', gap: 16,
        borderBottom: `1px solid ${CC_BORDER}`,
      }}>
        <CCLogoBadge name={h.short} grad={h.grad} logoUrl={h.logoUrl} size={compact ? 52 : 64} radius={14} />
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{
            display: 'flex', gap: 8, alignItems: 'center',
            marginBottom: 6, flexWrap: 'wrap',
          }}>
            {h.verified && (
              <span style={{
                display: 'inline-flex', alignItems: 'center', gap: 4,
                color: CC_SAGE, font: '600 10px Inter, system-ui, sans-serif',
                letterSpacing: 1.2, textTransform: 'uppercase',
              }}>
                {CCIcon.verified({ size: 12, color: CC_SAGE })} Verified
              </span>
            )}
            {h.top && (
              <span style={{
                display: 'inline-flex', alignItems: 'center', gap: 4,
                color: CC_AMBER, font: '600 10px Inter, system-ui, sans-serif',
                letterSpacing: 1.2, textTransform: 'uppercase',
              }}>
                ★ Top rated
              </span>
            )}
          </div>
          <div style={{
            font: '700 20px/1.15 Anton, Oswald, sans-serif',
            textTransform: 'uppercase', letterSpacing: '-0.1px',
            color: '#fff',
            overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
          }}>{h.name}</div>
          <div style={{
            display: 'flex', alignItems: 'center', gap: 6, marginTop: 6,
            color: CC_T_SECONDARY, fontSize: 13,
          }}>
            {CCIcon.pin({ size: 14, color: CC_T_TERTIARY })}
            <span>{h.loc}</span>
          </div>
        </div>
      </div>

      <div style={{ padding: '16px 24px', display: 'flex', alignItems: 'center', gap: 10, fontSize: 13, flexWrap: 'wrap' }}>
        {(() => {
          const r = ccHaulerRating(h);
          const count = ccHaulerReviewCount(h);
          if (r) {
            return (
              <>
                <span style={{ color: CC_SAGE, fontWeight: 600, display: 'inline-flex', alignItems: 'center', gap: 4 }}>
                  {r.value} {CCIcon.star({ size: 12, color: CC_SAGE })}
                </span>
                <span style={{ color: '#3A4541' }}>·</span>
                <span style={{ color: CC_T_SECONDARY }}>
                  {count} review{count === 1 ? '' : 's'}
                  {r.source === 'google' && <span style={{ color: CC_T_TERTIARY }}> on Google</span>}
                </span>
              </>
            );
          }
          return (
            <span style={{
              display: 'inline-flex', alignItems: 'center', gap: 6,
              padding: '4px 10px', borderRadius: 9999,
              background: 'rgba(123,197,127,0.10)', border: `1px solid ${CC_SAGE_BORDER}`,
              color: CC_SAGE, fontWeight: 600, fontSize: 11,
              letterSpacing: 0.6, textTransform: 'uppercase',
            }}>
              ★ New partner
            </span>
          );
        })()}
      </div>

      {!compact && (
        <div style={{
          padding: '0 24px 12px',
          font: '450 14px/1.55 Inter, system-ui, sans-serif',
          color: CC_T_SECONDARY,
          display: '-webkit-box',
          WebkitLineClamp: 2, WebkitBoxOrient: 'vertical',
          overflow: 'hidden',
          flex: 1,
        }}>{h.description}</div>
      )}

      <div style={{ padding: '12px 24px 16px', display: 'flex', gap: 6, flexWrap: 'wrap' }}>
        {h.sizes.slice(0, compact ? 2 : 3).map(s => (
          <span key={s.size} style={{
            padding: '5px 10px', borderRadius: 9999,
            background: 'rgba(255,255,255,0.03)',
            border: `1px solid ${CC_BORDER}`,
            font: '600 11px Inter, system-ui, sans-serif',
            color: CC_T_SECONDARY, letterSpacing: 0.3,
          }}>{s.size}</span>
        ))}
      </div>

      <div style={{
        marginTop: 'auto', padding: '16px 24px 20px',
        borderTop: `1px solid ${CC_BORDER}`,
        display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12,
      }}>
        <div>
          <div style={{
            font: '700 22px Anton, Oswald, sans-serif',
            color: '#fff', letterSpacing: '-0.1px',
          }}>From ${h.priceFrom}</div>
          <div style={{
            font: '500 11px Inter, system-ui, sans-serif',
            color: CC_T_TERTIARY, letterSpacing: 0.3,
            textTransform: 'uppercase', marginTop: 2,
          }}>per week</div>
        </div>
        {!compact ? (
          <div style={{ display: 'flex', gap: 8 }}>
            <span style={{
              display: 'inline-flex', alignItems: 'center', gap: 6,
              color: CC_T_PRIMARY, font: '600 13px Inter, system-ui, sans-serif',
            }}>View details {CCIcon.arrowRight({ size: 14 })}</span>
          </div>
        ) : (
          <span style={{
            width: 36, height: 36, borderRadius: 9999,
            background: 'rgba(123,197,127,0.08)', border: `1px solid ${CC_SAGE_BORDER}`,
            color: CC_SAGE, display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
          }}>{CCIcon.arrowRight({ size: 16, color: CC_SAGE })}</span>
        )}
      </div>
    </a>
  );
};

// ---------------------------------------------------------------
// Dumpster sizes carousel — horizontal scroll-snap with click-to-center.
// ---------------------------------------------------------------
// Container photos live in Primitives.jsx as CC_CONTAINER_IMG_MAP +
// CCDumpsterImg component, shared across Home, Quote, and Company pages.
// To swap any image, edit Primitives.jsx — affects every page at once.
//
// Behavior:
//  - Cards are fixed-width and snap to the horizontal center.
//  - Active card = full size + opacity. Side cards = scaled down + faded.
//  - Arrows nudge to prev/next. Dots jump anywhere. Click any side card
//    to center it. Native swipe works on touch devices via scroll-snap.
//  - Active index is tracked by listening for scroll-end and finding the
//    card closest to the scroller's center.

const HomeSizes = () => {
  // Default to the "Most popular" card if one is flagged, otherwise mid-list.
  const initialIdx = React.useMemo(() => {
    const popularIdx = DUMPSTER_SIZES.findIndex(s => s.popular);
    return popularIdx >= 0 ? popularIdx : Math.floor(DUMPSTER_SIZES.length / 2);
  }, []);
  const [activeIdx, setActiveIdx] = React.useState(initialIdx);
  const scrollerRef = React.useRef(null);
  const cardRefs = React.useRef([]);
  const lastScrollIdx = React.useRef(initialIdx);

  // Center the requested card in the scroller.
  const scrollToIndex = (idx) => {
    const card = cardRefs.current[idx];
    const scroller = scrollerRef.current;
    if (!card || !scroller) return;
    const target = card.offsetLeft - (scroller.clientWidth - card.offsetWidth) / 2;
    scroller.scrollTo({ left: target, behavior: 'smooth' });
    setActiveIdx(idx);
  };

  // On mount, jump to the popular card without animation so the first paint
  // already centers it. Without this the user briefly sees the first card.
  React.useEffect(() => {
    const card = cardRefs.current[initialIdx];
    const scroller = scrollerRef.current;
    if (card && scroller) {
      const target = card.offsetLeft - (scroller.clientWidth - card.offsetWidth) / 2;
      scroller.scrollTo({ left: target, behavior: 'auto' });
    }
  }, [initialIdx]);

  // After the user scrolls (touch swipe or wheel), find the card nearest
  // the scroller's center and update active state.
  React.useEffect(() => {
    const scroller = scrollerRef.current;
    if (!scroller) return;
    let timeout;
    const onScroll = () => {
      clearTimeout(timeout);
      timeout = setTimeout(() => {
        const center = scroller.scrollLeft + scroller.clientWidth / 2;
        let bestIdx = 0;
        let bestDist = Infinity;
        cardRefs.current.forEach((card, i) => {
          if (!card) return;
          const cardCenter = card.offsetLeft + card.offsetWidth / 2;
          const dist = Math.abs(cardCenter - center);
          if (dist < bestDist) { bestDist = dist; bestIdx = i; }
        });
        if (bestIdx !== lastScrollIdx.current) {
          lastScrollIdx.current = bestIdx;
          setActiveIdx(bestIdx);
        }
      }, 90);
    };
    scroller.addEventListener('scroll', onScroll, { passive: true });
    return () => {
      scroller.removeEventListener('scroll', onScroll);
      clearTimeout(timeout);
    };
  }, []);

  const goLeft  = () => scrollToIndex(Math.max(0, activeIdx - 1));
  const goRight = () => scrollToIndex(Math.min(DUMPSTER_SIZES.length - 1, activeIdx + 1));
  const atStart = activeIdx === 0;
  const atEnd   = activeIdx === DUMPSTER_SIZES.length - 1;

  const arrowBase = {
    width: 44, height: 44, borderRadius: 9999,
    border: `1px solid ${CC_BORDER}`,
    background: CC_GRAD_RAISED,
    color: '#fff', cursor: 'pointer',
    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
    boxShadow: CC_SHADOW_NEU,
    transition: 'all 220ms ease',
    flexShrink: 0,
  };

  return (
    <section id="sizes" data-anim="fade-up" style={{
      background: CC_SECTION, padding: 'clamp(64px, 10vw, 112px) 0',
      position: 'relative', overflow: 'hidden',
    }}>
      <div aria-hidden style={{
        position: 'absolute', right: -120, top: -80, width: 400, height: 400,
        background: 'radial-gradient(circle, rgba(123,197,127,0.08) 0%, transparent 60%)',
      }} />

      {/* Header — keeps section gutter so it doesn't bleed to the edge */}
      <div style={{ maxWidth: 1280, margin: '0 auto', padding: '0 clamp(24px, 5vw, 64px)', position: 'relative' }}>
        <div style={{ textAlign: 'center', marginBottom: 40, maxWidth: 720, marginInline: 'auto' }}>
          <div style={{
            font: '600 12px Inter, system-ui, sans-serif',
            letterSpacing: 1.6, textTransform: 'uppercase',
            color: CC_SAGE, marginBottom: 16,
          }}>Sizes &amp; pricing</div>
          <h2 style={{
            font: '700 clamp(32px, 4.5vw, 56px)/1.05 Anton, Oswald, sans-serif',
            textTransform: 'uppercase', letterSpacing: '-0.3px',
            color: '#fff', margin: 0,
          }}>Pick the size.</h2>
          <p style={{
            font: '450 17px/1.5 Inter, system-ui, sans-serif',
            color: CC_T_SECONDARY, marginTop: 20,
          }}>Every hauler prices independently. These are median starting rates for a 1-week rental across our marketplace.</p>
        </div>
      </div>

      {/* Carousel — full-bleed so partial cards on the edges look intentional */}
      <div style={{ position: 'relative' }}>
        {/* Hide the native scrollbar without breaking accessibility. */}
        <style>{`
          .cc-size-scroller::-webkit-scrollbar { display: none; }
          .cc-size-scroller { -ms-overflow-style: none; scrollbar-width: none; }
          @media (max-width: 700px) {
            .cc-size-arrow { display: none !important; }
          }
        `}</style>

        {/* Left arrow */}
        <button
          className="cc-size-arrow"
          onClick={goLeft}
          disabled={atStart}
          aria-label="Previous size"
          style={{
            ...arrowBase,
            position: 'absolute', left: 'clamp(16px, 3vw, 40px)',
            top: '50%', transform: 'translateY(-50%)',
            zIndex: 2,
            opacity: atStart ? 0.35 : 1,
            cursor: atStart ? 'not-allowed' : 'pointer',
          }}
        >
          {CCIcon.arrowLeft({ size: 18, color: '#fff' })}
        </button>

        {/* Right arrow */}
        <button
          className="cc-size-arrow"
          onClick={goRight}
          disabled={atEnd}
          aria-label="Next size"
          style={{
            ...arrowBase,
            position: 'absolute', right: 'clamp(16px, 3vw, 40px)',
            top: '50%', transform: 'translateY(-50%)',
            zIndex: 2,
            opacity: atEnd ? 0.35 : 1,
            cursor: atEnd ? 'not-allowed' : 'pointer',
          }}
        >
          {CCIcon.arrowRight({ size: 18, color: '#fff' })}
        </button>

        {/* Scrollable strip */}
        <div
          ref={scrollerRef}
          className="cc-size-scroller"
          style={{
            display: 'flex',
            gap: 20,
            overflowX: 'auto',
            scrollSnapType: 'x mandatory',
            scrollBehavior: 'smooth',
            // Side padding so the first/last card can reach center.
            paddingInline: 'calc(50% - 160px)',
            paddingBlock: 24,
          }}
        >
          {DUMPSTER_SIZES.map((sz, i) => {
            const isActive = i === activeIdx;
            return (
              <div
                key={sz.yd}
                ref={(el) => { cardRefs.current[i] = el; }}
                onClick={() => !isActive && scrollToIndex(i)}
                style={{
                  flex: '0 0 320px',
                  scrollSnapAlign: 'center',
                  position: 'relative', background: CC_GRAD_RAISED,
                  border: `1.5px solid ${isActive
                    ? (sz.popular ? CC_SAGE : CC_SAGE_BORDER)
                    : CC_BORDER}`,
                  borderRadius: 22, padding: '26px 24px 22px',
                  boxShadow: isActive
                    ? `${CC_SHADOW_NEU_HOVER}, 0 0 0 1px rgba(123,197,127,0.18), 0 0 32px rgba(123,197,127,0.10)`
                    : CC_SHADOW_NEU,
                  display: 'flex', flexDirection: 'column',
                  transform: isActive ? 'scale(1)' : 'scale(0.92)',
                  opacity: isActive ? 1 : 0.55,
                  cursor: isActive ? 'default' : 'pointer',
                  transition:
                    'transform 360ms cubic-bezier(.4,0,.2,1),' +
                    ' opacity 360ms cubic-bezier(.4,0,.2,1),' +
                    ' box-shadow 360ms ease,' +
                    ' border-color 220ms ease',
                }}
              >
                {sz.popular && (
                  <div style={{
                    position: 'absolute', top: 14, right: 14,
                    color: CC_AMBER, font: '600 10px Inter, system-ui, sans-serif',
                    letterSpacing: 1.2, textTransform: 'uppercase',
                    display: 'inline-flex', alignItems: 'center', gap: 4,
                  }}>★ Popular</div>
                )}
                <div style={{ height: 120, display: 'flex', alignItems: 'flex-end', justifyContent: 'center', marginBottom: 14, overflow: 'hidden' }}>
                  <CCDumpsterImg size={sz.yd} height={120} />
                </div>
                <div style={{
                  display: 'flex', alignItems: 'baseline', gap: 6, marginBottom: 4,
                }}>
                  <span style={{ font: '700 44px/1 Anton, Oswald, sans-serif', color: '#fff', letterSpacing: '-0.3px' }}>{sz.yd}</span>
                  <span style={{ font: '500 14px Inter, system-ui, sans-serif', color: CC_T_SECONDARY, textTransform: 'uppercase', letterSpacing: 1.4 }}>YD³</span>
                </div>
                <div style={{
                  font: '600 13px Inter, system-ui, sans-serif', color: CC_SAGE,
                  letterSpacing: 0.5, marginBottom: 14,
                }}>{sz.tagline}</div>
                <div style={{
                  fontSize: 12, color: CC_T_TERTIARY, letterSpacing: 1.4,
                  textTransform: 'uppercase', marginBottom: 6, fontWeight: 600,
                }}>Good for</div>
                <ul style={{
                  listStyle: 'none', padding: 0, margin: 0,
                  display: 'flex', flexDirection: 'column', gap: 6,
                  font: '450 13px/1.4 Inter, system-ui, sans-serif', color: CC_T_SECONDARY,
                  marginBottom: 16,
                }}>
                  {sz.projects.map(p => (
                    <li key={p} style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                      <span style={{ width: 3, height: 3, borderRadius: '50%', background: CC_SAGE, flexShrink: 0 }} />
                      {p}
                    </li>
                  ))}
                </ul>
                <div style={{
                  marginTop: 'auto', paddingTop: 14,
                  borderTop: `1px solid ${CC_BORDER}`,
                  display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                }}>
                  <div>
                    <div style={{ font: '700 18px Anton, Oswald, sans-serif', color: '#fff' }}>${sz.from}+</div>
                    <div style={{ font: '500 10px Inter, system-ui, sans-serif', color: CC_T_TERTIARY, letterSpacing: 0.3, textTransform: 'uppercase' }}>per week</div>
                  </div>
                  <a
                    href={`quote.html?size=${sz.yd}`}
                    onClick={(e) => { if (!isActive) { e.preventDefault(); scrollToIndex(i); } }}
                    style={{
                      width: 36, height: 36, borderRadius: 9999,
                      background: 'rgba(123,197,127,0.10)', border: `1px solid ${CC_SAGE_BORDER}`,
                      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                      textDecoration: 'none',
                      transition: 'all 220ms ease',
                    }}
                    onMouseEnter={(e) => isActive && (e.currentTarget.style.background = 'rgba(123,197,127,0.18)')}
                    onMouseLeave={(e) => (e.currentTarget.style.background = 'rgba(123,197,127,0.10)')}
                  >
                    {CCIcon.arrowRight({ size: 16, color: CC_SAGE })}
                  </a>
                </div>
              </div>
            );
          })}
        </div>
      </div>

      {/* Dot indicators */}
      <div style={{
        display: 'flex', gap: 8, justifyContent: 'center',
        marginTop: 28, padding: '0 clamp(24px, 5vw, 64px)',
      }}>
        {DUMPSTER_SIZES.map((sz, i) => (
          <button
            key={sz.yd}
            onClick={() => scrollToIndex(i)}
            aria-label={`Show ${sz.yd} yard container`}
            style={{
              width: i === activeIdx ? 28 : 8,
              height: 8,
              borderRadius: 9999,
              background: i === activeIdx ? CC_SAGE : CC_BORDER,
              border: 0,
              padding: 0,
              cursor: 'pointer',
              transition: 'width 280ms cubic-bezier(.4,0,.2,1), background 220ms ease',
            }}
          />
        ))}
      </div>
    </section>
  );
};

// ---------------------------------------------------------------
// Why ContainerConnect — trust features
// ---------------------------------------------------------------
const HomeTrust = () => {
  const features = [
    { icon: CCIcon.shield, t: 'Vetted operators', b: 'Every hauler is license-checked, insurance-verified, and reviewed for service quality before listing.' },
    { icon: CCIcon.clock, t: 'Free quote in <1 hour', b: 'Real humans at real companies respond directly. No call-center scripts, no broker middleman.' },
    { icon: CCIcon.dollar, t: 'No markup', b: 'You pay the operator’s actual rate. We bill haulers a flat listing fee — never a percentage of your job.' },
    { icon: CCIcon.star, t: 'Verified reviews', b: 'Every review ties to a booked job. No bots, no pay-to-play star inflation, no review farms.' },
  ];
  return (
    <section data-anim="fade-up" style={{ padding: 'clamp(64px, 10vw, 112px) clamp(24px, 5vw, 64px)' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 64, maxWidth: 780, marginInline: 'auto' }}>
          <div style={{
            font: '600 12px Inter, system-ui, sans-serif',
            letterSpacing: 1.6, textTransform: 'uppercase',
            color: CC_SAGE, marginBottom: 16,
          }}>Why Container Connect</div>
          <h2 style={{
            font: '700 clamp(32px, 4.5vw, 56px)/1.05 Anton, Oswald, sans-serif',
            textTransform: 'uppercase', letterSpacing: '-0.3px',
            color: '#fff', margin: 0,
          }}>
            Built for operators. <span style={{ color: CC_T_TERTIARY }}>Honest with customers.</span>
          </h2>
        </div>

        <div className="cc-4col" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 20 }}>
          {features.map(f => (
            <div key={f.t} style={{
              background: CC_CARD, border: `1px solid ${CC_BORDER}`,
              borderRadius: 20, padding: '32px 28px',
              boxShadow: CC_SHADOW_RESTING,
            }}>
              <div style={{
                width: 48, height: 48, borderRadius: 12,
                background: 'rgba(123,197,127,0.1)',
                border: `1px solid ${CC_SAGE_BORDER}`,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                color: CC_SAGE, marginBottom: 22,
              }}>{f.icon({ size: 22, color: CC_SAGE })}</div>
              <div style={{
                font: '700 20px/1.15 Anton, Oswald, sans-serif',
                textTransform: 'uppercase', letterSpacing: '-0.1px',
                color: '#fff', marginBottom: 10,
              }}>{f.t}</div>
              <div style={{
                font: '450 14px/1.55 Inter, system-ui, sans-serif',
                color: CC_T_SECONDARY,
              }}>{f.b}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// ---------------------------------------------------------------
// Final CTA banner
// ---------------------------------------------------------------
const HomeCTA = () => (
  <section data-anim="fade-up" style={{ padding: 'clamp(48px, 7vw, 96px) clamp(24px, 5vw, 64px)' }}>
    <div style={{ maxWidth: 1200, margin: '0 auto' }}>
      <div style={{
        position: 'relative',
        background: `linear-gradient(145deg, ${CC_ELEV} 0%, ${CC_CARD} 60%, ${CC_BASE} 100%)`,
        border: `1px solid ${CC_BORDER}`,
        borderRadius: 24, padding: 'clamp(40px, 6vw, 72px)',
        overflow: 'hidden',
        boxShadow: CC_SHADOW_NEU_HOVER,
      }}>
        <div aria-hidden style={{
          position: 'absolute', right: -100, top: -100, width: 500, height: 500,
          background: 'radial-gradient(circle, rgba(245,196,67,0.12) 0%, transparent 60%)',
          pointerEvents: 'none',
        }} />
        <div aria-hidden style={{
          position: 'absolute', left: -80, bottom: -80, width: 400, height: 400,
          background: 'radial-gradient(circle, rgba(123,197,127,0.10) 0%, transparent 60%)',
          pointerEvents: 'none',
        }} />

        <div style={{
          position: 'relative', display: 'grid',
          gridTemplateColumns: '1.2fr auto', gap: 32,
          alignItems: 'center',
        }} className="cc-cta-grid">
          <div>
            <div style={{ marginBottom: 20 }}>
              <CCTrustPill>Quote back in under an hour</CCTrustPill>
            </div>
            <h2 style={{
              font: '700 clamp(36px, 5vw, 64px)/1 Anton, Oswald, sans-serif',
              textTransform: 'uppercase', letterSpacing: '-0.3px',
              color: '#fff', margin: 0,
              maxWidth: 700,
            }}>
              Ready for a dumpster you <span style={{
                background: 'linear-gradient(180deg,#9EE5A8,#7BC57F)',
                WebkitBackgroundClip: 'text', backgroundClip: 'text', color: 'transparent',
              }}>actually need?</span>
            </h2>
            <p style={{
              font: '450 17px/1.5 Inter, system-ui, sans-serif',
              color: CC_T_SECONDARY, margin: '24px 0 0', maxWidth: 560,
            }}>No account, no commitment. Tell us your ZIP and we’ll match you with vetted local haulers in minutes.</p>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12, alignItems: 'flex-end' }}>
            <CCButtonAmber href="/quote" size="lg">Get a free quote</CCButtonAmber>
            <CCButtonGhost href="/browse" size="md">Browse companies</CCButtonGhost>
          </div>
        </div>
      </div>
    </div>
  </section>
);

// ---------------------------------------------------------------
// Service areas — bridges the home page to city-specific landing pages.
// Iterates over CITY_PAGES from data.jsx so adding a new city
// automatically lights up here. Designed to look intentional even
// with 1 entry (renders as a featured card) and scales gracefully
// to a multi-column grid as more cities are added.
// ---------------------------------------------------------------
const HomeServiceAreas = () => {
  const cities = (typeof CITY_PAGES !== 'undefined' && CITY_PAGES.length) ? CITY_PAGES : [];
  if (!cities.length) return null;

  // Find the primary hauler for each city so we can show a small badge.
  const enrich = (c) => ({
    ...c,
    hauler: (HAULERS || []).find(h => h.id === c.primaryHaulerId),
  });
  const list = cities.map(enrich);

  return (
    <section id="service-areas" data-anim="fade-up" style={{
      padding: 'clamp(56px, 8vw, 96px) clamp(24px, 5vw, 64px)',
    }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 48, maxWidth: 720, marginInline: 'auto' }}>
          <div style={{
            font: '600 12px Inter, system-ui, sans-serif',
            letterSpacing: 1.6, textTransform: 'uppercase', color: CC_SAGE,
            marginBottom: 16,
          }}>Service areas</div>
          <h2 style={{
            font: '700 clamp(32px, 4.5vw, 56px)/1.05 Anton, Oswald, sans-serif',
            textTransform: 'uppercase', letterSpacing: '-0.3px',
            color: '#fff', margin: 0,
          }}>Where we serve.</h2>
          <p style={{
            font: '450 17px/1.5 Inter, system-ui, sans-serif',
            color: CC_T_SECONDARY, marginTop: 18,
          }}>
            Real local haulers, transparent pricing, and a 7-day standard rental — see availability and average dimensions for your city below.
          </p>
        </div>

        <div className="cc-3col" style={{
          display: 'grid',
          gridTemplateColumns: list.length === 1 ? 'minmax(0, 600px)' : 'repeat(auto-fit, minmax(280px, 1fr))',
          gap: 16,
          justifyContent: 'center',
        }}>
          {list.map(c => (
            <a key={c.slug} href={c.url} style={{
              display: 'flex', flexDirection: 'column',
              textDecoration: 'none',
              background: CC_GRAD_RAISED,
              border: `1px solid ${CC_BORDER}`,
              borderRadius: 20, padding: 'clamp(22px, 2.5vw, 30px)',
              boxShadow: CC_SHADOW_NEU,
              transition: 'transform 220ms cubic-bezier(.4,0,.2,1), box-shadow 220ms ease',
            }}
            onMouseEnter={(e) => {
              e.currentTarget.style.transform = 'translateY(-3px)';
              e.currentTarget.style.boxShadow = CC_SHADOW_NEU_HOVER;
            }}
            onMouseLeave={(e) => {
              e.currentTarget.style.transform = 'translateY(0)';
              e.currentTarget.style.boxShadow = CC_SHADOW_NEU;
            }}
            >
              <div style={{
                display: 'flex', alignItems: 'center', gap: 12, marginBottom: 14,
              }}>
                <span style={{
                  width: 36, height: 36, borderRadius: 10,
                  background: 'rgba(123,197,127,0.10)',
                  border: `1px solid ${CC_SAGE_BORDER}`,
                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                  flexShrink: 0,
                }}>{CCIcon.pin({ size: 18, color: CC_SAGE })}</span>
                <div style={{
                  font: '600 11px Inter, system-ui, sans-serif',
                  letterSpacing: 1.4, textTransform: 'uppercase', color: CC_SAGE,
                }}>{c.state}</div>
              </div>

              <h3 style={{
                font: '700 clamp(28px, 3vw, 36px)/1.05 Anton, Oswald, sans-serif',
                textTransform: 'uppercase', color: '#fff',
                margin: 0, letterSpacing: '-0.2px',
              }}>{c.name}</h3>

              <p style={{
                font: '450 15px/1.55 Inter, system-ui, sans-serif',
                color: CC_T_SECONDARY,
                margin: '12px 0 18px',
              }}>{c.summary}</p>

              {c.hauler && (
                <div style={{
                  marginTop: 'auto', paddingTop: 16,
                  borderTop: `1px solid ${CC_BORDER}`,
                  display: 'flex', alignItems: 'center', gap: 12,
                }}>
                  <CCLogoBadge name={c.hauler.short || c.hauler.name} grad={c.hauler.grad} logoUrl={c.hauler.logoUrl} size={40} radius={10}/>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ font: '600 13px Inter, system-ui, sans-serif', color: '#fff' }}>
                      {c.hauler.name}
                    </div>
                    <div style={{ font: '450 12px Inter, system-ui, sans-serif', color: CC_T_TERTIARY }}>
                      Featured hauler
                    </div>
                  </div>
                  <span style={{
                    color: CC_SAGE, font: '600 13px Inter, system-ui, sans-serif',
                    display: 'inline-flex', alignItems: 'center', gap: 4,
                  }}>
                    View {CCIcon.arrowRight({ size: 14, color: CC_SAGE })}
                  </span>
                </div>
              )}
            </a>
          ))}
        </div>

        {list.length === 1 && (
          <p style={{
            textAlign: 'center', marginTop: 28,
            font: '450 14px/1.55 Inter, system-ui, sans-serif',
            color: CC_T_TERTIARY,
          }}>
            Expanding monthly — West Covina, Whittier, Pomona, and more LA County cities coming soon.
          </p>
        )}
      </div>
    </section>
  );
};

Object.assign(window, {
  HomeHero, HomeStatStrip, HomeHowItWorks, HomeFeaturedHaulers,
  HomeServiceAreas, HomeSizes, HomeTrust, HomeCTA, CompanyCard,
});