// sections-mid.jsx — Comparison vs Gels, Nutrition Facts, Pricing

// ─────────────────────────────────────────────────────────────────────────────
function Comparison() {
  const rows = [
    { k: 'Ingredients',       gel: '15+ ingredients incl. maltodextrin, citric acid, sodium benzoate', bar: 'Organic dates, organic cashews' },
    { k: 'Keeps you full',    gel: 'No — sugar spike, sugar crash',                                    bar: 'Yes — fiber, fat, protein' },
    { k: 'Energy curve',      gel: 'Sharp spike, fast drop',                                            bar: 'Steady, sustained' },
    { k: 'Travels well',      gel: 'Sticky, single-use packet',                                         bar: 'Resealable, real food' },
    { k: 'Tastes like food',  gel: 'Gel',                                                               bar: 'Food' },
  ];
  return (
    <section id="why" style={{ background: 'var(--ink)', color: 'var(--bg)' }}>
      <div className="wrap">
        <div style={{ display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 24, alignItems: 'end', marginBottom: 56 }}>
          <div style={{ maxWidth: 720 }}>
            <span className="eyebrow" style={{ color: 'var(--tan)' }}>Why we exist</span>
            <h2 style={{ marginTop: 16, color: 'var(--bg)' }}>
              The gel on the<br/>pool deck wasn't <em style={{ color: 'var(--tan)' }}>working</em>.
            </h2>
          </div>
          <p style={{ maxWidth: 380, color: 'color-mix(in oklab, var(--bg) 75%, transparent)' }}>
            Energy gels were designed for elite endurance athletes mid-race. They weren't designed to keep a 15-year-old swimmer full through warm-ups, prelims, and finals.
          </p>
        </div>

        <div style={{ border: '1px solid color-mix(in oklab, var(--bg) 18%, transparent)', borderRadius: 'var(--radius-lg)', overflow: 'hidden' }}>
          {/* Header */}
          <div style={{
            display: 'grid', gridTemplateColumns: '1.2fr 1.4fr 1.4fr',
            padding: '20px 28px',
            borderBottom: '1px solid color-mix(in oklab, var(--bg) 14%, transparent)',
            fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '.16em', textTransform: 'uppercase',
            color: 'color-mix(in oklab, var(--bg) 60%, transparent)',
          }}>
            <span></span>
            <span>The energy gel</span>
            <span style={{ color: 'var(--tan)' }}>◆ Real Date Bar</span>
          </div>
          {rows.map((row, i) => (
            <div key={row.k} style={{
              display: 'grid', gridTemplateColumns: '1.2fr 1.4fr 1.4fr',
              padding: 'clamp(22px, 2.4vw, 32px) 28px',
              borderBottom: i < rows.length - 1 ? '1px solid color-mix(in oklab, var(--bg) 10%, transparent)' : 'none',
              alignItems: 'baseline',
              gap: 16,
            }}>
              <div className="uppercase mono" style={{ color: 'var(--tan)' }}>{row.k}</div>
              <div style={{ fontFamily: 'var(--display)', fontSize: 22, color: 'color-mix(in oklab, var(--bg) 70%, transparent)' }}>
                <span style={{ textDecoration: 'line-through', textDecorationColor: 'color-mix(in oklab, var(--bg) 30%, transparent)' }}>{row.gel}</span>
              </div>
              <div style={{ fontFamily: 'var(--display)', fontSize: 22, color: 'var(--bg)' }}>
                {row.bar}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
function NutritionLabel() {
  // Real-style nutrition facts panel
  const row = (label, val, indent = false, bold = false) => (
    <div style={{
      display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
      padding: '4px 0', borderBottom: '1px solid var(--ink)',
      paddingLeft: indent ? 16 : 0,
    }}>
      <span style={{ fontWeight: bold ? 700 : 400, fontSize: bold ? 14 : 13 }}>{label}</span>
      <span style={{ fontWeight: bold ? 700 : 400, fontSize: 13 }}>{val}</span>
    </div>
  );
  return (
    <div style={{
      background: 'var(--paper)', color: 'var(--ink)',
      border: '2px solid var(--ink)', borderRadius: 6,
      padding: 18, fontFamily: 'Helvetica Neue, Helvetica, Arial, sans-serif',
      maxWidth: 360,
    }}>
      <div style={{ fontWeight: 900, fontSize: 28, lineHeight: 1, letterSpacing: '-0.02em' }}>Nutrition Facts</div>
      <div style={{ fontSize: 12, marginTop: 4 }}>1 bar (48g)</div>
      <div style={{ height: 8, background: 'var(--ink)', margin: '8px -18px' }} />
      <div style={{ fontSize: 10, fontWeight: 700 }}>Amount per serving</div>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', borderBottom: '6px solid var(--ink)', paddingBottom: 4 }}>
        <span style={{ fontSize: 20, fontWeight: 900 }}>Calories</span>
        <span style={{ fontSize: 26, fontWeight: 900 }}>180</span>
      </div>
      <div style={{ fontSize: 10, textAlign: 'right', marginTop: 6, fontWeight: 700 }}>% Daily Value*</div>
      {row('Total Fat 7g', '9%', false, true)}
      {row('Saturated Fat 1g', '5%', true)}
      {row('Trans Fat 0g', '', true)}
      {row('Cholesterol 0mg', '0%', false, true)}
      {row('Sodium 0mg', '0%', false, true)}
      {row('Total Carbohydrate 28g', '10%', false, true)}
      {row('Dietary Fiber 3g', '11%', true)}
      {row('Total Sugars 22g', '', true)}
      {row('Includes 0g Added Sugars', '0%', true)}
      {row('Protein 3g', '6%', false, true)}
      <div style={{ height: 8, background: 'var(--ink)', margin: '8px -18px 6px' }} />
      <div style={{ fontSize: 10, lineHeight: 1.4 }}>
        Not a significant source of vitamin D, calcium, iron, or potassium beyond what's naturally present in dates and cashews.
      </div>
      <div style={{ fontSize: 9, marginTop: 8, lineHeight: 1.3, color: 'var(--ink-soft)' }}>
        * Percent Daily Values are based on a 2,000 calorie diet.
      </div>
    </div>
  );
}

function Nutrition() {
  const macros = [
    { k: 'Calories', v: '180', sub: 'kcal per bar' },
    { k: 'Protein',  v: '3', sub: 'g · from cashews' },
    { k: 'Fiber',    v: '3', sub: 'g · from dates' },
    { k: 'Sugar',    v: '0', sub: 'g added' },
  ];
  return (
    <section id="nutrition">
      <div className="wrap">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'clamp(32px, 5vw, 80px)', alignItems: 'center' }}>
          <div>
            <span className="eyebrow">Nutrition</span>
            <h2 style={{ marginTop: 16 }}>The label you can <em>actually</em> read.</h2>
            <p style={{ marginTop: 20, fontSize: 17, color: 'var(--ink-soft)', maxWidth: 460 }}>
              No mystery powders. No 18-syllable acids. Just the numbers that come from two real ingredients — and the macros that keep you full from warm-up to finals.
            </p>

            <div className="grid cols-2" style={{ marginTop: 32, gap: 0, border: '1px solid var(--line-strong)', borderRadius: 'var(--radius)' }}>
              {macros.map((m, i) => (
                <div key={m.k} style={{
                  padding: 24,
                  borderRight: i % 2 === 0 ? '1px solid var(--line)' : 'none',
                  borderBottom: i < 2 ? '1px solid var(--line)' : 'none',
                }}>
                  <div className="uppercase mono" style={{ color: 'var(--ink-mute)' }}>{m.k}</div>
                  <div className="num" style={{ fontSize: 56, marginTop: 8 }}>{m.v}</div>
                  <div style={{ color: 'var(--ink-soft)', fontSize: 13, marginTop: 4 }}>{m.sub}</div>
                </div>
              ))}
            </div>
          </div>
          <div style={{ display: 'flex', justifyContent: 'center' }}>
            <NutritionLabel />
          </div>
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
function Pricing({ onPick }) {
  const tiers = [
    { id: 'single',  name: 'Single bar',      qty: 1,  price: 5,   per: 5.00, blurb: 'Try one. See what real food at a meet feels like.', feature: false },
    { id: 'five',    name: '5-pack',          qty: 5,  price: 22,  per: 4.40, blurb: 'A week of practices, or a meet for one.',          feature: true  },
    { id: 'ten',     name: '10-pack',         qty: 10, price: 40,  per: 4.00, blurb: 'Best per-bar price. For the regulars.',             feature: false },
  ];
  return (
    <section id="pricing" style={{ background: 'var(--bg-soft)' }}>
      <div className="wrap">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'end', flexWrap: 'wrap', gap: 24, marginBottom: 48 }}>
          <div style={{ maxWidth: 600 }}>
            <span className="eyebrow">Pricing</span>
            <h2 style={{ marginTop: 16 }}>Simple. <em>Like the recipe.</em></h2>
          </div>
          <p className="muted" style={{ maxWidth: 360, fontFamily: 'var(--mono)', fontSize: 12, letterSpacing: '.06em' }}>
            Pickup only · Frisco, TX. No subscriptions. No shipping fees. No upsells.
          </p>
        </div>

        <div className="grid cols-3">
          {tiers.map(t => (
            <div key={t.id} style={{
              background: t.feature ? 'var(--ink)' : 'var(--paper)',
              color: t.feature ? 'var(--bg)' : 'var(--ink)',
              border: '1px solid ' + (t.feature ? 'var(--ink)' : 'var(--line)'),
              borderRadius: 'var(--radius-lg)',
              padding: 'clamp(24px, 3vw, 36px)',
              position: 'relative',
              display: 'flex', flexDirection: 'column',
              minHeight: 380,
            }}>
              {t.feature && (
                <span style={{
                  position: 'absolute', top: 18, right: 18,
                  fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '.14em', textTransform: 'uppercase',
                  color: 'var(--tan)', border: '1px solid var(--tan)', padding: '4px 10px', borderRadius: 999,
                }}>Most ordered</span>
              )}
              <div className="uppercase mono" style={{ color: t.feature ? 'var(--tan)' : 'var(--ink-mute)' }}>{t.name}</div>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginTop: 18 }}>
                <span className="num" style={{ fontSize: 96, color: t.feature ? 'var(--bg)' : 'var(--ink)' }}>${t.price}</span>
                <span style={{ fontFamily: 'var(--mono)', fontSize: 12, letterSpacing: '.1em', color: t.feature ? 'color-mix(in oklab, var(--bg) 60%, transparent)' : 'var(--ink-mute)' }}>
                  ${t.per.toFixed(2)}/bar
                </span>
              </div>
              <p style={{ marginTop: 16, color: t.feature ? 'color-mix(in oklab, var(--bg) 75%, transparent)' : 'var(--ink-soft)', maxWidth: 320 }}>
                {t.blurb}
              </p>
              <div style={{ flex: 1 }} />
              <button onClick={() => onPick && onPick(t.id)}
                className="btn"
                style={{
                  marginTop: 28, alignSelf: 'flex-start',
                  background: t.feature ? 'var(--tan)' : 'var(--ink)',
                  color: t.feature ? 'var(--ink)' : 'var(--bg)',
                  border: '1px solid ' + (t.feature ? 'var(--tan)' : 'var(--ink)'),
                }}>
                Order {t.qty === 1 ? '1 bar' : `${t.qty} bars`} <span className="arr">→</span>
              </button>
            </div>
          ))}
        </div>

      </div>
    </section>
  );
}

Object.assign(window, { Comparison, Nutrition, NutritionLabel, Pricing });