// Nordic Approach page \u2014 deep dive into Rammeplan, the seven characters, Heart Culture, the Dibber Meal.

function Approach({ navigate, openTour }) {
  const [activeChar, setActiveChar] = useState(0);
  return (
    <div data-screen-label="02 Nordic Approach">
      <section style={{ paddingTop: 56, paddingBottom: 40 }}>
        <div className="wrap">
          <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 64, alignItems: 'center' }}>
            <div>
              <div className="eyebrow">The Nordic approach</div>
              <h1 className="serif" style={{ marginTop: 14 }}>
                A curriculum<br/>built in <em style={{ fontStyle: 'italic', color: 'var(--dibber-green-2)' }}>Norway</em>.<br/>Taught in Dubai.
              </h1>
              <p className="lead" style={{ marginTop: 22 }}>
                Dibber's curriculum follows <strong>Rammeplan for barnehagen</strong> &mdash; Norway's national framework
                for kindergartens &mdash; tailored for the UAE. It's play-based, holistic, and structured around seven
                learning characters and four development domains.
              </p>
              <div style={{ display: 'flex', gap: 10, marginTop: 28, flexWrap: 'wrap' }}>
                <button className="btn btn-primary" onClick={openTour}>See it in person</button>
                <button className="btn btn-ghost" onClick={() => navigate({ name: 'programmes' })}>Programmes &amp; ages</button>
              </div>
            </div>
            <div style={{ position: 'relative' }}>
              {/* Visual diagram: 7 characters orbiting Heart Culture */}
              <CharOrbit characters={CHARACTERS} />
            </div>
          </div>
        </div>
      </section>

      {/* Three pillars */}
      <section className="section-sand">
        <div className="wrap">
          <SectionHead eyebrow="Three principles" title="How learning happens at Dibber." align="center" />
          <div className="grid grid-3 mt-12">
            {PILLARS.map((p, i) => (
              <div key={p.title} style={{ padding: '36px 32px', background: 'var(--cream)', borderRadius: 20, border: '1px solid var(--line)' }}>
                <div style={{ fontFamily: 'var(--serif)', fontSize: 56, color: 'var(--sprout)', fontWeight: 600, lineHeight: 1 }}>{String(i + 1).padStart(2, '0')}</div>
                <div className="mono" style={{ fontSize: 11, color: 'var(--dibber-green-2)', letterSpacing: '0.14em', textTransform: 'uppercase', marginTop: 20 }}>{p.kicker}</div>
                <div className="serif" style={{ fontSize: 28, color: 'var(--dibber-green)', fontWeight: 600, marginTop: 8 }}>{p.title}</div>
                <p style={{ marginTop: 12, color: 'var(--muted)', fontSize: 15 }}>{p.body}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* The seven characters \u2014 detailed */}
      <section>
        <div className="wrap">
          <SectionHead eyebrow="The seven characters"
                       title={<span>Seven characters,<br/>seven domains of learning.</span>}
                       lead="Each character shows up across the day. They give children a vocabulary for the things they're learning, and give educators a framework for what to plan." />

          <div className="mt-12" style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 56, alignItems: 'flex-start' }}>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {CHARACTERS.map((c, i) => (
                <button key={c.name} onMouseEnter={() => setActiveChar(i)} onClick={() => setActiveChar(i)}
                        style={{
                          textAlign: 'left',
                          padding: '20px 22px',
                          background: activeChar === i ? 'var(--cream)' : 'transparent',
                          border: '1.5px solid ' + (activeChar === i ? c.color : 'var(--line)'),
                          borderRadius: 14,
                          display: 'grid', gridTemplateColumns: 'auto 1fr auto', alignItems: 'center', gap: 18,
                          cursor: 'pointer', transition: 'all .15s ease',
                        }}>
                  <div style={{ width: 48, height: 48, borderRadius: 24, background: c.color, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                    <DibberMark size={22} color="#FBF8F0" />
                  </div>
                  <div>
                    <div className="serif" style={{ fontSize: 20, color: 'var(--dibber-green)', fontWeight: 600 }}>{c.name}</div>
                    <div className="mono" style={{ fontSize: 10, color: c.color, letterSpacing: '0.14em', textTransform: 'uppercase', marginTop: 2, fontWeight: 600 }}>{c.domain}</div>
                  </div>
                  <div className="mono" style={{ fontSize: 12, color: 'var(--muted)' }}>0{i+1}</div>
                </button>
              ))}
            </div>

            <div style={{ position: 'sticky', top: 100, padding: '40px 36px', background: CHARACTERS[activeChar].color + '15', borderRadius: 22, border: '1px solid ' + CHARACTERS[activeChar].color + '40' }}>
              <div style={{ width: 96, height: 96, borderRadius: 48, background: CHARACTERS[activeChar].color, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <DibberMark size={50} color="#FBF8F0" />
              </div>
              <div className="mono" style={{ fontSize: 11, color: CHARACTERS[activeChar].color, letterSpacing: '0.14em', textTransform: 'uppercase', marginTop: 24, fontWeight: 600 }}>{CHARACTERS[activeChar].domain}</div>
              <div className="serif" style={{ fontSize: 36, color: 'var(--dibber-green)', fontWeight: 600, marginTop: 6 }}>{CHARACTERS[activeChar].name}</div>
              <p style={{ marginTop: 14, fontSize: 16, color: 'var(--ink)', lineHeight: 1.55 }}>{CHARACTERS[activeChar].focus}</p>
              <div className="flag" style={{ marginTop: 24 }}>Mascot art \u2014 client to supply in source form</div>
            </div>
          </div>

          <div style={{ marginTop: 64, padding: '32px 36px', background: 'var(--dibber-green)', color: 'var(--cream)', borderRadius: 22, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32, alignItems: 'center' }}>
            <div>
              <div className="eyebrow on-dark">And underpinning all seven</div>
              <h3 className="serif" style={{ color: 'var(--cream)', marginTop: 12 }}>The four child-development domains.</h3>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12 }}>
              {['Social','Emotional','Cognitive','Physical'].map(d => (
                <div key={d} style={{ padding: '18px 14px', background: 'rgba(251,248,240,0.08)', borderRadius: 14, textAlign: 'center' }}>
                  <div className="serif" style={{ fontSize: 18, color: 'var(--sprout)', fontWeight: 600 }}>{d}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Heart Culture */}
      <section className="section-sprout">
        <div className="wrap">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 56, alignItems: 'center' }}>
            <div>
              <div style={{ width: 96, height: 96, borderRadius: 48, background: 'var(--dibber-green)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <DibberMark size={48} color="#FBF8F0" />
              </div>
              <div className="eyebrow" style={{ marginTop: 24 }}>Heart Culture</div>
              <h2 className="serif" style={{ marginTop: 14 }}>Relationships, taught.</h2>
              <p className="lead" style={{ marginTop: 18 }}>
                Heart Culture is the ethos that holds every Dibber day together &mdash; how we greet, how we wait,
                how we listen, how we say goodbye. It is taught by adults who model it, every hour.
              </p>
              <p style={{ marginTop: 14, color: 'var(--muted)' }}>
                It is not a separate subject. It is in the meal, in the morning circle, in conflict, in story time.
                It's why we say: <em>space, time, and a big heart.</em>
              </p>
            </div>
            <div className="img-frame" style={{ borderRadius: 24, aspectRatio: '4/5', position: 'relative' }}>
              <SafeImg src="media/photo-activity-05.webp" alt="A bright, calm Dibber learning area with natural materials" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
            </div>
          </div>
        </div>
      </section>

      {/* The Dibber Meal */}
      <section>
        <div className="wrap">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.1fr', gap: 56, alignItems: 'center' }}>
            <div className="img-frame" style={{ borderRadius: 24, aspectRatio: '5/4' }}>
              <SafeImg src="media/photo-environment-01.webp" alt="A soft still life evoking calm" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
            </div>
            <div>
              <div className="eyebrow">The Dibber Meal</div>
              <h2 className="serif" style={{ marginTop: 14 }}>Mealtime as a learning concept.</h2>
              <p className="lead" style={{ marginTop: 18 }}>
                Children pour, serve, name the foods, ask politely, wait their turn, and thank the cook. We don't
                outsource this part of the day &mdash; it is curriculum.
              </p>
              <div style={{ marginTop: 24, display: 'flex', flexDirection: 'column', gap: 10 }}>
                {[
                  ['Children serve themselves', 'Patience, motor skills, judgement.'],
                  ['Conversation is the lesson', 'Vocabulary, listening, manners, friendship.'],
                  ['Food vocabulary is built', 'Naming, sorting, counting on the plate.'],
                ].map(([t, b]) => (
                  <div key={t} style={{ display: 'grid', gridTemplateColumns: 'auto 1fr', gap: 14, alignItems: 'flex-start' }}>
                    <div style={{ width: 30, height: 30, borderRadius: 15, background: 'var(--sprout)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                      <DibberMark size={14} color="#13452A" />
                    </div>
                    <div>
                      <div style={{ fontSize: 15, fontWeight: 600, color: 'var(--dibber-green)' }}>{t}</div>
                      <div style={{ fontSize: 13, color: 'var(--muted)', marginTop: 2 }}>{b}</div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Educators */}
      <section className="section-sand">
        <div className="wrap">
          <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 56, alignItems: 'center' }}>
            <div>
              <div className="eyebrow">Our educators</div>
              <h2 className="serif" style={{ marginTop: 14 }}>Warm-hearted and engaged.</h2>
              <p className="lead" style={{ marginTop: 18 }}>
                Our assistant teachers meet the requirements set by KHDA. We don&rsquo;t publish ratios, headcounts
                or named leadership online without verification &mdash; you&rsquo;ll meet the team on tour.
              </p>
              <div className="flag mt-6">Ratios &amp; named staff \u2014 client to supply per branch</div>
            </div>
            <div className="img-frame" style={{ borderRadius: 24, aspectRatio: '4/3' }}>
              <SafeImg src="media/photo-branch-01.webp" alt="An empty Dibber classroom showing the Nordic environment" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

// Orbit diagram \u2014 7 characters around a central Heart Culture badge
function CharOrbit({ characters }) {
  const size = 480;
  const r = 180;
  const cx = size / 2, cy = size / 2;
  return (
    <div style={{ position: 'relative', width: '100%', maxWidth: size, margin: '0 auto', aspectRatio: '1/1' }}>
      <svg viewBox={`0 0 ${size} ${size}`} width="100%" height="100%" style={{ display: 'block' }}>
        {/* Outer dashed orbit */}
        <circle cx={cx} cy={cy} r={r} fill="none" stroke="#1F6B3B" strokeDasharray="3 6" strokeOpacity="0.25" />
        {/* Inner soft circle */}
        <circle cx={cx} cy={cy} r="92" fill="#E5F2D4" />
        <circle cx={cx} cy={cy} r="92" fill="none" stroke="#7FB069" strokeOpacity="0.5" />
        {/* Spokes */}
        {characters.map((c, i) => {
          const angle = (i / characters.length) * Math.PI * 2 - Math.PI / 2;
          const x = cx + r * Math.cos(angle);
          const y = cy + r * Math.sin(angle);
          return <line key={'l'+i} x1={cx} y1={cy} x2={x} y2={y} stroke={c.color} strokeOpacity="0.25" strokeDasharray="2 4" />;
        })}
      </svg>
      {/* Center label */}
      <div style={{ position: 'absolute', left: '50%', top: '50%', transform: 'translate(-50%, -50%)', textAlign: 'center' }}>
        <div style={{ width: 74, height: 74, borderRadius: 37, background: 'var(--dibber-green)', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto' }}>
          <DibberMark size={36} color="#FBF8F0" />
        </div>
        <div className="serif" style={{ fontSize: 17, color: 'var(--dibber-green)', fontWeight: 600, marginTop: 12 }}>Heart<br/>Culture</div>
      </div>
      {/* Character nodes */}
      {characters.map((c, i) => {
        const angle = (i / characters.length) * Math.PI * 2 - Math.PI / 2;
        const x = cx + r * Math.cos(angle);
        const y = cy + r * Math.sin(angle);
        return (
          <div key={c.name} style={{
            position: 'absolute',
            left: `${(x / size) * 100}%`,
            top: `${(y / size) * 100}%`,
            transform: 'translate(-50%, -50%)',
            textAlign: 'center',
            width: 110,
          }}>
            <div style={{ width: 56, height: 56, borderRadius: 28, background: c.color, display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto', boxShadow: '0 6px 18px -6px ' + c.color + 'aa' }}>
              <DibberMark size={26} color="#FBF8F0" />
            </div>
            <div className="serif" style={{ fontSize: 12, color: 'var(--dibber-green)', fontWeight: 600, marginTop: 8, lineHeight: 1.2 }}>{c.name}</div>
            <div className="mono" style={{ fontSize: 9, color: c.color, letterSpacing: '0.1em', textTransform: 'uppercase', marginTop: 2 }}>{c.domain}</div>
          </div>
        );
      })}
    </div>
  );
}

Object.assign(window, { Approach });