/* COMPARISON — Other agencies vs Ecomlifters */

function Comparison() {
  const isMobile = useWindowWidth() < 768;
  const others = [
    'Slow communication',
    'Single-channel approach',
    'Outdated growth strategies',
    'Lack of industry research',
    'Outsourced to mediocre talent',
    'Charge for decks, not outcomes',
  ];
  const us = [
    'Constant proactive communication',
    'Omni-channel approach (paid + organic + retention)',
    'Tailored, best-fit growth strategies',
    'Industry-specific research baked into every sprint',
    'Senior in-house experts, 7+ years average',
    'Ship measurable lift — or you don\'t pay',
  ];

  return (
    <section data-screen-label="08 Why us" id="why" style={{ paddingTop: 64, paddingBottom: 64 }}>
      <div className="container-tight">
        <SectionHeader
          eyebrow="Why us"
          title={<>Why work <span className="accent">with us?</span></>}
          lead="Find out why Ecomlifters is different from most agencies."
          align="center"
        />

        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: 20 }}>
          {/* Other agencies */}
          <Reveal>
            <CompareCard
              eyebrow="Other agencies"
              icon="x"
              items={others.map(i => ({ t: i, neg: true }))}
              tone="muted"
            />
          </Reveal>

          {/* Ecomlifters */}
          <Reveal delay={120}>
            <CompareCard
              eyebrow="Ecomlifters"
              icon="check"
              items={us.map(i => ({ t: i }))}
              tone="green"
              highlight
            />
          </Reveal>
        </div>
      </div>
    </section>
  );
}

function CompareCard({ eyebrow, icon, items, tone, highlight }) {
  const isGreen = tone === 'green';
  return (
    <div style={{
      background: isGreen ? 'var(--green-soft)' : 'white',
      border: `1px solid ${isGreen ? 'var(--green-soft-2)' : 'var(--hairline-2)'}`,
      borderRadius: 20, padding: 28,
      position: 'relative',
      boxShadow: highlight ? '0 30px 60px -30px rgba(15,191,97,.25)' : 'none',
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 24 }}>
        {icon === 'x'
          ? <span style={{ width: 22, height: 22, borderRadius: '50%', background: 'rgba(217,89,76,0.12)', color: 'var(--red)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}><Icon.X size={12} /></span>
          : <span style={{ width: 22, height: 22, borderRadius: '50%', background: 'var(--green)', color: 'white', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}><Icon.Check size={12} /></span>
        }
        <span style={{ fontWeight: 500, fontSize: 15, color: isGreen ? 'var(--green-deep)' : 'var(--ink-soft)' }}>{eyebrow}</span>
      </div>

      <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 0 }}>
        {items.map((it, i) => (
          <li key={i} style={{
            display: 'flex', alignItems: 'center', gap: 12,
            padding: '14px 0',
            borderBottom: i < items.length - 1 ? `1px dashed ${isGreen ? 'rgba(6,61,42,0.18)' : 'var(--hairline)'}` : 'none',
          }}>
            <span style={{
              width: 18, height: 18, borderRadius: '50%',
              background: it.neg ? 'rgba(217,89,76,0.12)' : (isGreen ? 'var(--green)' : 'var(--green-soft)'),
              color: it.neg ? 'var(--red)' : (isGreen ? 'white' : 'var(--green-deep)'),
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
            }}>
              {it.neg ? <Icon.X size={10} /> : <Icon.Check size={10} />}
            </span>
            <span style={{ fontSize: 14.5, color: it.neg ? 'var(--ink-soft)' : 'var(--ink)' }}>{it.t}</span>
          </li>
        ))}
      </ul>
    </div>
  );
}

window.Comparison = Comparison;