// Core Values — editorial "manifesto" style, one value per section.
function CoreValuesPage() {
  const [modal, setModal] = React.useState(false);
  const onCTA = () => setModal(true);

  const values = [
    {
      n: '01',
      title: 'We Say It, We Do It',
      kicker: 'Reliability',
      body: "It's not just about making promises, it's about delivering. When we commit to something — whether it's to a client, a teammate, or ourselves — we see it through. Reliability isn't optional. It's the bedrock of trust.",
      pull: "Reliability isn't optional. It's the bedrock of trust.",
      accent: '#E8123C',
      visual: 'handshake',
    },
    {
      n: '02',
      title: 'Be Your Own Boss',
      kicker: 'Ownership',
      body: "We trust our team members. We believe everyone has the capacity to lead in their own capacity and be their own boss. This isn't about disregarding leadership — it's about empowering individuals to take ownership, make decisions, and drive their projects forward with conviction.",
      pull: 'Take ownership. Make decisions. Drive it forward.',
      accent: '#FFB84D',
      visual: 'compass',
    },
    {
      n: '03',
      title: 'Speed Is King',
      kicker: 'Velocity',
      body: "In our fast-moving era, taking ages to make decisions or implement changes just doesn't cut it. Speed is essential — but not at the expense of quality. It's about efficiency, agility, and getting ahead while others are still plotting their first step.",
      pull: 'Move fast. Others are still plotting their first step.',
      accent: '#4DABF7',
      visual: 'bolt',
    },
    {
      n: '04',
      title: 'Do The Boring Work',
      kicker: 'Discipline',
      body: "The flashy tasks get the attention, but it's the consistent, often overlooked tasks that form our core. We value the nitty-gritty — the behind-the-scenes work that ensures everything runs smoothly. It's in the details that real dedication is shown.",
      pull: "It's in the details that real dedication is shown.",
      accent: '#51CF66',
      visual: 'gears',
    },
    {
      n: '05',
      title: "Don't Sugar Coat It",
      kicker: 'Candor',
      body: "Transparent and open communication is the name of the game. If there's an issue, we address it head-on. If there's feedback, we deliver it directly. Constructive criticism helps us grow — and direct praise keeps us motivated.",
      pull: 'Address it head-on. Direct. Honest. Always.',
      accent: '#CC5DE8',
      visual: 'target',
    },
  ];

  return (
    <>
      <NavBar onCTA={onCTA}/>
      <main style={{ background: '#0A0608', color: '#fff', minHeight: '100vh' }}>
        <CoreValuesHero/>

        <div data-mf="values-sections">
          {values.map((v, i) => (
            <ValueSection key={v.n} value={v} isLast={i === values.length - 1}/>
          ))}
        </div>

        <ValuesSummary values={values}/>

        <FinalCTA onCTA={onCTA}/>
      </main>
      <Footer/>

      {modal && <IClosedModal onClose={() => setModal(false)}/>}
    </>
  );
}
window.CoreValuesPage = CoreValuesPage;

// ---------- HERO ----------
function CoreValuesHero() {
  return (
    <section data-mf="cv-hero" style={{
      position: 'relative', padding: '120px 44px 80px',
      borderBottom: '1px solid rgba(255,255,255,0.06)',
      overflow: 'hidden',
    }}>
      {/* Red glow backdrop */}
      <div aria-hidden style={{
        position: 'absolute', top: '-20%', left: '50%',
        transform: 'translateX(-50%)',
        width: 900, height: 900, borderRadius: '50%',
        background: 'radial-gradient(circle, rgba(232,18,60,0.28) 0%, transparent 60%)',
        filter: 'blur(80px)', pointerEvents: 'none',
      }}/>
      {/* Grid noise */}
      <div aria-hidden style={{
        position: 'absolute', inset: 0,
        backgroundImage: 'linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px)',
        backgroundSize: '64px 64px', maskImage: 'radial-gradient(ellipse at center, black 40%, transparent 80%)',
        WebkitMaskImage: 'radial-gradient(ellipse at center, black 40%, transparent 80%)',
        pointerEvents: 'none',
      }}/>

      <div style={{ position: 'relative', maxWidth: 1200, margin: '0 auto', textAlign: 'center' }}>
        <div style={{
          display: 'inline-flex', alignItems: 'center', gap: 10,
          padding: '8px 16px', borderRadius: 999,
          background: 'rgba(232,18,60,0.12)', border: '1px solid rgba(232,18,60,0.3)',
          marginBottom: 32,
        }}>
          <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#E8123C',
            boxShadow: '0 0 8px rgba(232,18,60,0.8)' }}/>
          <span style={{ fontFamily: 'Poppins', fontSize: 12, letterSpacing: '0.18em',
            fontWeight: 700, color: '#ff9fb2', textTransform: 'uppercase' }}>
            Our Manifesto
          </span>
        </div>
        <h1 style={{
          fontFamily: 'Poppins', fontWeight: 900, fontSize: 'clamp(56px, 9vw, 128px)',
          lineHeight: 0.9, letterSpacing: '-0.045em', margin: 0,
          textWrap: 'balance',
        }}>
          Core <span style={{ color: '#E8123C' }}>Values</span>
        </h1>
        <p style={{
          maxWidth: 680, margin: '28px auto 0',
          fontSize: 19, lineHeight: 1.55, color: 'rgba(255,255,255,0.68)',
        }}>
          Five tenets that fuel how we work, how we show up, and how we scale with you.
          Non-negotiables — for us, and anyone we partner with.
        </p>

        {/* Scroll cue */}
        <div style={{
          marginTop: 72,
          display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 12,
          color: 'rgba(255,255,255,0.4)',
        }}>
          <div style={{ fontSize: 11, letterSpacing: '0.22em', fontWeight: 600 }}>FIVE TENETS</div>
          <div style={{ width: 1, height: 44, background: 'linear-gradient(to bottom, rgba(255,255,255,0.5), transparent)' }}/>
        </div>
      </div>
    </section>
  );
}
window.CoreValuesHero = CoreValuesHero;

// ---------- VALUE SECTION (one per value, alternating sides) ----------
function ValueSection({ value, isLast }) {
  const v = value;
  const nNum = parseInt(v.n, 10);
  const isFlipped = nNum % 2 === 0;

  return (
    <section data-mf-value={v.n} style={{
      position: 'relative', padding: '120px 44px',
      borderBottom: isLast ? 'none' : '1px solid rgba(255,255,255,0.06)',
      background: nNum % 2 === 0 ? '#0F080B' : '#0A0608',
    }}>
      <div style={{
        maxWidth: 1280, margin: '0 auto',
        display: 'grid',
        gridTemplateColumns: '1fr 1fr',
        gap: 72,
        alignItems: 'center',
      }}
      className="mf-cv-grid"
      >
        {/* TEXT column — sometimes left, sometimes right */}
        <div style={{ order: isFlipped ? 2 : 1 }}>
          <div style={{
            display: 'inline-flex', alignItems: 'baseline', gap: 14,
            marginBottom: 28,
          }}>
            <span style={{
              fontFamily: 'Poppins', fontWeight: 900,
              fontSize: 18, color: v.accent, letterSpacing: '0.14em',
            }}>{v.n}</span>
            <span style={{
              width: 40, height: 1, background: v.accent, opacity: 0.6,
            }}/>
            <span style={{
              fontFamily: 'Poppins', fontWeight: 700,
              fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase',
              color: 'rgba(255,255,255,0.55)',
            }}>{v.kicker}</span>
          </div>

          <h2 style={{
            fontFamily: 'Poppins', fontWeight: 900,
            fontSize: 'clamp(44px, 5.5vw, 72px)',
            lineHeight: 0.98, letterSpacing: '-0.035em',
            margin: '0 0 28px', textWrap: 'balance',
          }}>
            {v.title}
          </h2>

          <p style={{
            fontSize: 18, lineHeight: 1.65,
            color: 'rgba(255,255,255,0.72)', margin: '0 0 32px',
            maxWidth: 540,
          }}>
            {v.body}
          </p>

          <blockquote style={{
            margin: 0, padding: '18px 22px',
            borderLeft: `3px solid ${v.accent}`,
            background: 'rgba(255,255,255,0.025)',
            borderRadius: '0 12px 12px 0',
            maxWidth: 540,
          }}>
            <div style={{
              fontFamily: 'Poppins', fontWeight: 600,
              fontSize: 17, lineHeight: 1.4, color: '#fff',
              fontStyle: 'italic',
            }}>
              "{v.pull}"
            </div>
          </blockquote>
        </div>

        {/* VISUAL column */}
        <div style={{ order: isFlipped ? 1 : 2, position: 'relative' }}>
          <ValueVisual kind={v.visual} n={v.n} accent={v.accent}/>
        </div>
      </div>
    </section>
  );
}
window.ValueSection = ValueSection;

// ---------- VALUE VISUAL (unique SVG illustration per value) ----------
function ValueVisual({ kind, n, accent }) {
  return (
    <div style={{
      aspectRatio: '1/1.05',
      position: 'relative',
      background: 'linear-gradient(135deg, rgba(20,12,16,0.95) 0%, rgba(8,4,6,0.95) 100%)',
      border: '1px solid rgba(255,255,255,0.08)',
      borderRadius: 28,
      overflow: 'hidden',
      boxShadow: '0 40px 80px rgba(0,0,0,0.5)',
    }}>
      {/* accent glow */}
      <div aria-hidden style={{
        position: 'absolute', top: '-20%', right: '-20%',
        width: '70%', height: '70%', borderRadius: '50%',
        background: `radial-gradient(circle, ${accent}33 0%, transparent 65%)`,
        filter: 'blur(40px)',
      }}/>
      {/* grid */}
      <div aria-hidden style={{
        position: 'absolute', inset: 0,
        backgroundImage: 'linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px)',
        backgroundSize: '44px 44px',
        maskImage: 'radial-gradient(ellipse at center, black 40%, transparent 90%)',
        WebkitMaskImage: 'radial-gradient(ellipse at center, black 40%, transparent 90%)',
      }}/>

      {/* giant number */}
      <div style={{
        position: 'absolute', top: 24, left: 28,
        fontFamily: 'Poppins', fontWeight: 900,
        fontSize: 140, lineHeight: 0.85,
        color: 'transparent',
        WebkitTextStroke: `1.5px ${accent}55`,
        letterSpacing: '-0.05em',
      }}>
        {n}
      </div>

      {/* label */}
      <div style={{
        position: 'absolute', top: 36, right: 28,
        fontFamily: 'Poppins', fontWeight: 700,
        fontSize: 10, letterSpacing: '0.24em',
        color: 'rgba(255,255,255,0.4)',
        textTransform: 'uppercase',
      }}>
        Tenet {n} / 05
      </div>

      {/* centered icon */}
      <div style={{
        position: 'absolute', inset: 0,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
      }}>
        <IconFor kind={kind} accent={accent}/>
      </div>

      {/* footer strip */}
      <div style={{
        position: 'absolute', bottom: 0, left: 0, right: 0,
        padding: '18px 28px',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        borderTop: '1px solid rgba(255,255,255,0.06)',
        background: 'rgba(0,0,0,0.3)',
        backdropFilter: 'blur(10px)',
      }}>
        <div style={{
          fontFamily: 'Poppins', fontWeight: 600, fontSize: 11,
          letterSpacing: '0.14em', color: 'rgba(255,255,255,0.55)',
          textTransform: 'uppercase',
        }}>
          Master Filmmaker · Core Tenets
        </div>
        <div style={{ width: 6, height: 6, borderRadius: '50%', background: accent,
          boxShadow: `0 0 10px ${accent}` }}/>
      </div>
    </div>
  );
}
window.ValueVisual = ValueVisual;

// ---------- Per-value SVG icons ----------
function IconFor({ kind, accent }) {
  const s = 180;
  const stroke = { stroke: accent, strokeWidth: 2.5, fill: 'none', strokeLinecap: 'round', strokeLinejoin: 'round' };

  if (kind === 'handshake') {
    return (
      <svg width={s} height={s} viewBox="0 0 180 180">
        <circle cx="90" cy="90" r="78" stroke="rgba(255,255,255,0.06)" strokeWidth="1" fill="none"/>
        <circle cx="90" cy="90" r="60" stroke={`${accent}33`} strokeWidth="1" fill="none"/>
        {/* hands */}
        <path d="M36 100 L66 80 L90 92 L72 108 L58 116 Z" {...stroke} fill={`${accent}22`}/>
        <path d="M144 100 L114 80 L90 92 L108 108 L122 116 Z" {...stroke} fill={`${accent}22`}/>
        <path d="M72 108 L108 108" {...stroke}/>
        <circle cx="90" cy="92" r="4" fill={accent}/>
      </svg>
    );
  }
  if (kind === 'compass') {
    return (
      <svg width={s} height={s} viewBox="0 0 180 180">
        <circle cx="90" cy="90" r="78" stroke="rgba(255,255,255,0.06)" strokeWidth="1" fill="none"/>
        <circle cx="90" cy="90" r="62" {...stroke}/>
        <circle cx="90" cy="90" r="46" stroke={`${accent}55`} strokeWidth="1" fill="none"/>
        <path d="M90 44 L96 90 L90 136 L84 90 Z" fill={accent}/>
        <circle cx="90" cy="90" r="6" fill="#0A0608" stroke={accent} strokeWidth="2.5"/>
        {/* N S E W ticks */}
        <path d="M90 28 L90 36 M90 144 L90 152 M28 90 L36 90 M144 90 L152 90" {...stroke}/>
      </svg>
    );
  }
  if (kind === 'bolt') {
    return (
      <svg width={s} height={s} viewBox="0 0 180 180">
        <circle cx="90" cy="90" r="78" stroke="rgba(255,255,255,0.06)" strokeWidth="1" fill="none"/>
        {/* speed lines */}
        <path d="M20 70 L52 70 M14 90 L46 90 M20 110 L52 110" {...stroke} opacity="0.5"/>
        <path d="M128 70 L160 70 M134 90 L166 90 M128 110 L160 110" {...stroke} opacity="0.5"/>
        <path d="M96 28 L64 96 L86 96 L78 152 L116 80 L92 80 L100 28 Z"
          fill={accent} stroke={accent} strokeWidth="2" strokeLinejoin="round"
          style={{ filter: `drop-shadow(0 0 16px ${accent}66)` }}/>
      </svg>
    );
  }
  if (kind === 'gears') {
    return (
      <svg width={s} height={s} viewBox="0 0 180 180">
        <circle cx="90" cy="90" r="78" stroke="rgba(255,255,255,0.06)" strokeWidth="1" fill="none"/>
        {/* Big gear */}
        <g transform="translate(72 78)">
          <g>
            {Array.from({ length: 12 }).map((_, i) => (
              <rect key={i} x="-3" y="-52" width="6" height="14" rx="1.5"
                fill={accent} opacity="0.85"
                transform={`rotate(${i * 30})`}/>
            ))}
            <circle r="36" fill="#0A0608" stroke={accent} strokeWidth="3"/>
            <circle r="10" stroke={accent} strokeWidth="2.5" fill="none"/>
          </g>
        </g>
        {/* Small gear */}
        <g transform="translate(126 118)">
          {Array.from({ length: 8 }).map((_, i) => (
            <rect key={i} x="-2.5" y="-30" width="5" height="10" rx="1"
              fill={accent} opacity="0.7"
              transform={`rotate(${i * 45})`}/>
          ))}
          <circle r="20" fill="#0A0608" stroke={accent} strokeWidth="2.5" opacity="0.85"/>
          <circle r="6" stroke={accent} strokeWidth="2" fill="none"/>
        </g>
      </svg>
    );
  }
  if (kind === 'target') {
    return (
      <svg width={s} height={s} viewBox="0 0 180 180">
        <circle cx="90" cy="90" r="78" stroke="rgba(255,255,255,0.06)" strokeWidth="1" fill="none"/>
        <circle cx="90" cy="90" r="60" {...stroke}/>
        <circle cx="90" cy="90" r="42" {...stroke}/>
        <circle cx="90" cy="90" r="22" {...stroke}/>
        <circle cx="90" cy="90" r="6" fill={accent}/>
        {/* arrow */}
        <path d="M134 46 L108 72 M108 72 L102 66 M108 72 L114 78"
          stroke={accent} strokeWidth="3" strokeLinecap="round" fill="none"
          style={{ filter: `drop-shadow(0 0 8px ${accent}88)` }}/>
        <path d="M126 38 L134 46 L142 38 L134 30 Z" fill={accent}/>
      </svg>
    );
  }
  return null;
}
window.IconFor = IconFor;

// ---------- Summary card at the bottom ----------
function ValuesSummary({ values }) {
  return (
    <section data-mf="values-summary" style={{
      padding: '120px 44px',
      background: '#0A0608',
      borderTop: '1px solid rgba(255,255,255,0.06)',
      borderBottom: '1px solid rgba(255,255,255,0.06)',
    }}>
      <div style={{ maxWidth: 1200, margin: '0 auto', textAlign: 'center' }}>
        <div style={{
          fontFamily: 'Poppins', fontWeight: 700, fontSize: 11,
          letterSpacing: '0.22em', color: '#E8123C', textTransform: 'uppercase',
          marginBottom: 20,
        }}>
          The Five
        </div>
        <h2 style={{
          fontFamily: 'Poppins', fontWeight: 900,
          fontSize: 'clamp(36px, 5vw, 60px)',
          lineHeight: 1, letterSpacing: '-0.03em', margin: '0 0 60px',
          textWrap: 'balance',
        }}>
          One page. Five non-negotiables.
        </h2>

        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 12,
        }}
        className="mf-cv-summary-grid">
          {values.map(v => (
            <a key={v.n} href={`#mf-v-${v.n}`}
              onClick={(e) => {
                e.preventDefault();
                const el = document.querySelector(`[data-mf-value="${v.n}"]`);
                if (el) window.scrollTo({ top: el.offsetTop - 60, behavior: 'smooth' });
              }}
              style={{
                padding: '28px 22px',
                background: 'rgba(255,255,255,0.03)',
                border: '1px solid rgba(255,255,255,0.08)',
                borderRadius: 16, textDecoration: 'none',
                transition: 'all 200ms ease',
                cursor: 'pointer', textAlign: 'left',
                display: 'block',
              }}
              onMouseEnter={e => {
                e.currentTarget.style.background = 'rgba(255,255,255,0.06)';
                e.currentTarget.style.borderColor = v.accent + '66';
                e.currentTarget.style.transform = 'translateY(-4px)';
              }}
              onMouseLeave={e => {
                e.currentTarget.style.background = 'rgba(255,255,255,0.03)';
                e.currentTarget.style.borderColor = 'rgba(255,255,255,0.08)';
                e.currentTarget.style.transform = 'translateY(0)';
              }}
            >
              <div style={{
                fontFamily: 'Poppins', fontWeight: 900, fontSize: 22,
                color: v.accent, marginBottom: 12, letterSpacing: '0.06em',
              }}>{v.n}</div>
              <div style={{
                fontFamily: 'Poppins', fontWeight: 800,
                fontSize: 16, lineHeight: 1.2,
                color: '#fff', marginBottom: 6,
              }}>{v.title}</div>
              <div style={{
                fontSize: 11, letterSpacing: '0.14em',
                color: 'rgba(255,255,255,0.5)', fontWeight: 600,
                textTransform: 'uppercase',
              }}>{v.kicker}</div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}
window.ValuesSummary = ValuesSummary;

// ---------- iClosed modal (same as case studies page) ----------
function IClosedModal({ onClose }) {
  React.useEffect(() => {
    if (!document.querySelector('script[src*="app.iclosed.io/assets/widget.js"]')) {
      const s = document.createElement('script');
      s.src = 'https://app.iclosed.io/assets/widget.js';
      s.async = true;
      document.body.appendChild(s);
    } else if (window.iClosed && typeof window.iClosed.init === 'function') {
      try { window.iClosed.init(); } catch(e) {}
    }
    const prev = document.body.style.overflow;
    document.body.style.overflow = 'hidden';
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', onKey);
    return () => {
      document.body.style.overflow = prev;
      window.removeEventListener('keydown', onKey);
    };
  }, [onClose]);

  return (
    <div onClick={onClose} style={{
      position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.85)',
      display: 'flex', alignItems: 'flex-start', justifyContent: 'center', zIndex: 300,
      backdropFilter: 'blur(8px)', padding: 20,
      overflowY: 'auto', WebkitOverflowScrolling: 'touch',
    }}>
      <div onClick={e => e.stopPropagation()} style={{
        width: 'min(980px, 100%)', margin: 'auto', background: '#1A0A10',
        border: '1px solid rgba(255,255,255,0.1)', borderRadius: 20,
        position: 'relative', overflow: 'hidden',
        boxShadow: '0 40px 120px rgba(0,0,0,0.7)',
      }}>
        <div style={{
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          padding: '18px 22px', borderBottom: '1px solid rgba(255,255,255,0.08)',
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <span style={{
              width: 8, height: 8, borderRadius: '50%', background: '#E8123C',
              boxShadow: '0 0 8px rgba(232,18,60,0.8)',
            }}/>
            <div style={{
              fontFamily: 'Poppins', fontWeight: 700, fontSize: 14,
              letterSpacing: '0.08em', color: '#fff', textTransform: 'uppercase',
            }}>Schedule Your Roadmap Call</div>
          </div>
          <button onClick={onClose} style={{
            width: 34, height: 34, border: 'none',
            background: 'rgba(255,255,255,0.08)', borderRadius: '50%',
            color: '#fff', fontSize: 18, cursor: 'pointer', lineHeight: 1,
          }}>×</button>
        </div>
        <div
          className="iclosed-widget"
          data-url="https://app.iclosed.io/e/Edeeran/master-filmmaker-roadmap-call"
          title="Apply Now"
          style={{ width: '100%', height: 620 }}
        />

        <div style={{
          padding: '16px 22px 20px',
          borderTop: '1px solid rgba(255,255,255,0.08)',
          fontFamily: 'Poppins', fontSize: '8pt', lineHeight: 1.5,
          color: 'rgba(255,255,255,0.55)',
        }}>
          By submitting your information, you agree to receive marketing calls and text messages (including calls and texts sent using automated technology), and emails from Deeran Films LLC d/b/a Master Filmmaker at the contact information provided. This includes communications about this offer, related products or services, training content, and promotional updates. Consent is not a condition of purchase. Message and data rates may apply. You may unsubscribe from emails at any time by clicking the link in our emails, or opt out of texts by replying STOP. View our{' '}
          <a href="https://www.masterfilmmaker.com/termsofuse" target="_blank" rel="noopener noreferrer"
             style={{ color: 'rgba(255,255,255,0.85)', textDecoration: 'underline' }}>Terms of Use</a>
          {' '}and{' '}
          <a href="https://www.masterfilmmaker.com/terms-of-service" target="_blank" rel="noopener noreferrer"
             style={{ color: 'rgba(255,255,255,0.85)', textDecoration: 'underline' }}>Privacy Policy</a>.
        </div>
      </div>
    </div>
  );
}
window.IClosedModal = IClosedModal;