// Merk-vergelijking pagina — LEGO vs Mattel Bricks

const { Supercar, F1Car, Stud } = window;

const PageCompare = ({ go }) => {
  return (
    <div style={{ background: SR.bg, color: SR.ink, fontFamily: '"Space Grotesk", sans-serif', minHeight: '100vh' }}>
      <ShowroomHeader active="compare" go={go} />

      {/* hero */}
      <section style={{ padding: '60px 56px 40px', textAlign: 'center', position: 'relative' }}>
        <div style={{ fontSize: 11, letterSpacing: '0.3em', color: SR.copper, fontWeight: 700 }}>HEAD-TO-HEAD</div>
        <h1 style={{
          fontFamily: '"Instrument Serif", serif', fontWeight: 400, fontSize: 96,
          margin: '14px 0 0', letterSpacing: '-0.03em', lineHeight: 0.95,
        }}>
          LEGO <em style={{ color: SR.copper }}>vs</em> Mattel Bricks
        </h1>
        <p style={{
          maxWidth: 640, margin: '20px auto 0', fontSize: 16,
          color: SR.ink2, lineHeight: 1.55,
        }}>
          De gevestigde Deense school tegen de Californische uitdager. Hieronder een eerlijke,
          set-voor-set vergelijking. Beide merken verkopen we op brickcars.nl.
        </p>
      </section>

      {/* big split panel */}
      <section style={{ padding: '0 56px' }}>
        <div style={{
          background: '#fff', border: `1px solid ${SR.line}`,
          display: 'grid', gridTemplateColumns: '1fr 80px 1fr',
        }}>
          {/* LEFT brand */}
          <div style={{ padding: '40px 40px', borderRight: `1px solid ${SR.line}` }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 20 }}>
              <Stud size={64} color={SR.ink} label="LEGO" />
              <div>
                <div style={{ fontFamily: 'Anton, sans-serif', fontSize: 30, lineHeight: 1.05, whiteSpace: 'nowrap' }}>LEGO</div>
                <div style={{ fontSize: 11, letterSpacing: '0.25em', color: SR.ink2 }}>SINDS 1949 · DENEMARKEN</div>
              </div>
            </div>
            <p style={{ color: SR.ink2, fontSize: 15, lineHeight: 1.55 }}>
              De gevestigde naam in verzamelwaardige bouwstenen. 1:8-schaal als
              standaard, top-of-the-line detail, en de meeste echte fabrieks-licenties.
              Premium prijzen, premium ervaring.
            </p>
            <Supercar color={SR.ink} accent={SR.copper} style={{ width: '100%', marginTop: 20 }}/>

            <div style={{ marginTop: 16, display: 'flex', flexWrap: 'wrap', gap: 8 }}>
              {['1:8 standaard', 'Echte licenties', 'Hoge prijs', 'Sculptural'].map((t, i) => (
                <span key={i} style={{
                  padding: '4px 10px', background: SR.bg, border: `1px solid ${SR.line}`,
                  fontSize: 11, fontFamily: '"JetBrains Mono", monospace',
                }}>{t}</span>
              ))}
            </div>
          </div>

          {/* VS column */}
          <div style={{
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            background: SR.ink, color: SR.copper, position: 'relative',
          }}>
            <div style={{
              fontFamily: '"Instrument Serif", serif', fontStyle: 'italic',
              fontSize: 64, transform: 'rotate(-90deg)',
            }}>vs</div>
          </div>

          {/* RIGHT brand */}
          <div style={{ padding: '40px 40px' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 20 }}>
              <Stud size={64} color={SR.copper} label="MTL" />
              <div>
                <div style={{ fontFamily: 'Anton, sans-serif', fontSize: 30, lineHeight: 1.05, whiteSpace: 'nowrap' }}>MATTEL BRICKS</div>
                <div style={{ fontSize: 11, letterSpacing: '0.25em', color: SR.ink2 }}>SINDS 2024 · CALIFORNIË</div>
              </div>
            </div>
            <p style={{ color: SR.ink2, fontSize: 15, lineHeight: 1.55 }}>
              De uitdager. Speelgoed-gen DNA, maar in 2024 doorgegroeid naar
              een serieuze collector-lijn. 1:18-schaal, brede film­licentiekast,
              prijzen ~30% lager dan LEGO op vergelijkbare schaal.
            </p>
            <F1Car color={SR.ink} accent={SR.copper} style={{ width: '100%', marginTop: 20 }}/>

            <div style={{ marginTop: 16, display: 'flex', flexWrap: 'wrap', gap: 8 }}>
              {['1:18 compact', '38 film-IPs', 'Lage prijs', 'Speelplezier'].map((t, i) => (
                <span key={i} style={{
                  padding: '4px 10px', background: SR.bg, border: `1px solid ${SR.line}`,
                  fontSize: 11, fontFamily: '"JetBrains Mono", monospace',
                }}>{t}</span>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Spec table */}
      <section style={{ padding: '60px 56px 40px' }}>
        <div style={{ fontSize: 11, letterSpacing: '0.3em', color: SR.copper, fontWeight: 700, marginBottom: 8 }}>
          DE TELEMETRIE
        </div>
        <h2 style={{ fontFamily: '"Instrument Serif", serif', fontSize: 48, margin: 0, marginBottom: 24 }}>
          Cijfer voor cijfer.
        </h2>

        <div style={{ background: '#fff', border: `1px solid ${SR.line}` }}>
          {[
            ['Aantal sets in catalogus', '412', '435', 'b'],
            ['Gemiddelde prijs', '€ 519', '€ 169', 'b'],
            ['Grootste set', '11.500 stenen', '4.200 stenen', 'a'],
            ['Standaard schaal', '1:8', '1:18', '–'],
            ['Filmlicenties', '2', '38', 'b'],
            ['Materiaalkwaliteit', '★★★★★', '★★★★', 'a'],
            ['Verzamel-score', '★★★★★', '★★★★', 'a'],
            ['Prijs/steen ratio', '€ 0,17', '€ 0,11', 'b'],
            ['Meest gevraagd', 'Hypercars', 'F1 + Film', '–'],
          ].map((row, i) => (
            <div key={i} style={{
              display: 'grid', gridTemplateColumns: '1fr 1.4fr 1fr',
              alignItems: 'center', padding: '18px 32px',
              borderTop: i === 0 ? 'none' : `1px solid ${SR.lineSoft}`,
            }}>
              <div style={{
                textAlign: 'right', fontFamily: 'Anton, sans-serif', fontSize: 26,
                color: row[3] === 'a' ? SR.copper : SR.ink,
              }}>
                {row[1]}
                {row[3] === 'a' && <span style={{ marginLeft: 10, fontSize: 14 }}>★ winnaar</span>}
              </div>
              <div style={{
                textAlign: 'center', fontSize: 11, letterSpacing: '0.25em',
                color: SR.ink2, fontFamily: '"JetBrains Mono", monospace', fontWeight: 600,
              }}>
                {row[0].toUpperCase()}
              </div>
              <div style={{
                fontFamily: 'Anton, sans-serif', fontSize: 26,
                color: row[3] === 'b' ? SR.copper : SR.ink,
              }}>
                {row[3] === 'b' && <span style={{ marginRight: 10, fontSize: 14 }}>★ winnaar</span>}
                {row[2]}
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* Pick-your-side recommendation */}
      <section style={{ padding: '40px 56px 80px' }}>
        <h2 style={{
          fontFamily: '"Instrument Serif", serif', fontSize: 48, margin: 0, textAlign: 'center', marginBottom: 32,
        }}>
          Welke <em style={{ color: SR.copper }}>past bij jou</em>?
        </h2>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
          {[
            {
              title: 'Kies LEGO als je…',
              accent: SR.ink,
              reasons: [
                'Op zoek bent naar een display piece van 30+ cm',
                'Bereid bent ≥ €400 te besteden voor één set',
                'Echte fabrieks-licenties belangrijk vindt',
                'Bouwen ziet als meditatieve sculptuur',
              ],
            },
            {
              title: 'Kies Mattel Bricks als je…',
              accent: SR.copper,
              reasons: [
                'Een breed spectrum aan auto\'s wilt verzamelen',
                'Filmwagens en TV-iconen zoekt',
                'Liever 3 sets bouwt dan 1 mega-set',
                'Een budget tussen € 100–€ 250 hebt',
              ],
            },
          ].map((side, i) => (
            <div key={i} style={{
              background: '#fff', border: `2px solid ${side.accent}`, padding: '32px 32px',
            }}>
              <div style={{ fontFamily: '"Instrument Serif", serif', fontSize: 30, lineHeight: 1.1 }}>{side.title}</div>
              <ul style={{ listStyle: 'none', padding: 0, marginTop: 18 }}>
                {side.reasons.map((r, k) => (
                  <li key={k} style={{
                    padding: '10px 0', borderBottom: k < 3 ? `1px dotted ${SR.line}` : 'none',
                    display: 'flex', alignItems: 'flex-start', gap: 12, fontSize: 14,
                  }}>
                    <span style={{ color: side.accent, fontWeight: 700, fontFamily: '"JetBrains Mono", monospace', fontSize: 12 }}>0{k + 1}</span>
                    <span>{r}</span>
                  </li>
                ))}
              </ul>
              <button onClick={() => go('catalog')} style={{
                marginTop: 22, width: '100%', background: side.accent, color: '#fff',
                border: 'none', padding: '14px 20px', fontFamily: '"Archivo Narrow", sans-serif',
                fontWeight: 700, letterSpacing: '0.15em', fontSize: 13, cursor: 'pointer',
              }}>BEKIJK SETS →</button>
            </div>
          ))}
        </div>
      </section>

      <ShowroomFooter />
    </div>
  );
};

window.PageCompare = PageCompare;