/* DUNNGAMES — "Minimal" site, part 2: Consulting, For Brands, Footer.
   Uses primitives from window.MIN. */

const A2 = 'assets';
const { Pill: MPill, SectionHead: MHead, Label: MLabel } = window.MIN;

/* ---------- CONSULTING ---------- */
const CIVAN_REVIEW = {
  name: 'Civan Turhan', tilt: -3, side: 'left',
  text: 'Working with Dunn Games has been one of the more creatively rewarding collaborations at Cubico Studios. Grant Dunn and his team operate with precision and professionalism that is increasingly rare in the market. What sets them apart is a consistent stream of ideas that raise the standard, and an approach to game development built for longevity that resonates across all demographics.',
};
const TEAM_PICS = [A2 + '/studio/office-1-s.jpg', A2 + '/studio/office-2-s.jpg', A2 + '/studio/office-3-s.jpg', A2 + '/studio/office-4-s.jpg'];

/* consolidated testimonials for the consulting carousel */
const CIVAN = { name: 'Civan Turhan', org: 'Cubico Studios',
  text: 'Working with Dunn Games has been one of the more creatively rewarding collaborations at Cubico Studios. Grant Dunn and his team operate with precision and professionalism that is increasingly rare in the market. What sets them apart is a consistent stream of ideas that raise the standard, and an approach to game development built for longevity that resonates across all demographics.' };

const TESTIMONIALS = [
  { name: 'Isaac Warren', org: 'Frost Blade Games', img: A2 + '/team/isaac-warren.png',
    text: 'Dunn Games’ production team helped us grow from a studio with little planning into one with clear roadmaps, strong communication, and efficient updates. Their process kept us on schedule, improved testing, and helped us avoid delays. I would highly recommend their service to any studio struggling to maintain a consistent update cycle.' },
  { name: 'Ethan Warren', org: 'Frost Blade Games', img: A2 + '/team/ethan-warren.png', paraphrased: true,
    text: 'Working with Dunn Games was a great learning experience for our early stage studio. They helped us improve our production cycle, become more organized, and increase professionalism across our team. The partnership aligned more closely with our goal of building a great studio than selling the game would have.' },
];

function ReviewCarousel() {
  const [i, setI] = React.useState(0);
  const [hover, setHover] = React.useState(false);
  const [hold, setHold] = React.useState(false);
  const holdRef = React.useRef();
  const n = TESTIMONIALS.length;
  React.useEffect(() => {
    if (hover || hold) return;
    const t = setInterval(() => setI(v => (v + 1) % n), 9000);
    return () => clearInterval(t);
  }, [hover, hold, n]);
  React.useEffect(() => () => clearTimeout(holdRef.current), []);
  // user navigation: jump, then pause auto-advance so they can read at their pace
  const go = (k) => {
    setI((k + n) % n);
    setHold(true);
    clearTimeout(holdRef.current);
    holdRef.current = setTimeout(() => setHold(false), 14000);
  };
  return (
    <div data-reveal style={{ width: '100%' }}
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}>
      {/* stacked deck — cards sit one behind the other */}
      <div style={{ position: 'relative', maxWidth: '560px', width: '100%', marginLeft: 'auto' }}>
        {TESTIMONIALS.map((r, k) => {
          const o = (k - i + n) % n;             // 0 = front, higher = further back
          return (
            <div key={k} onClick={o === 0 ? undefined : () => go(k)}
              style={{ position: o === 0 ? 'relative' : 'absolute', inset: o === 0 ? 'auto' : 0,
                transform: `translateY(${o * 16}px) scale(${1 - o * 0.045})`,
                transformOrigin: 'top center',
                opacity: o === 0 ? 1 : Math.max(0.28, 0.6 - (o - 1) * 0.22),
                zIndex: n - o, pointerEvents: o === 0 ? 'auto' : 'auto', cursor: o === 0 ? 'default' : 'pointer',
                transition: 'transform .5s cubic-bezier(.4,0,.2,1), opacity .5s ease' }}>
              <div style={{ background: 'var(--m-card)', color: 'var(--m-card-ink)', borderRadius: '26px',
                padding: 'clamp(26px, 2.4vw, 34px)', height: o === 0 ? 'auto' : '100%', minHeight: '300px', boxSizing: 'border-box',
                boxShadow: o === 0
                  ? 'var(--m-shadow-card), 0 8px 40px -14px color-mix(in srgb, var(--m-accent) 40%, transparent)'
                  : 'none',
                position: 'relative', display: 'flex', flexDirection: 'column', overflow: o === 0 ? 'visible' : 'hidden' }}>
                {o === 0 ? (
                  <div aria-hidden="true" style={{ position: 'absolute', top: '-18px', left: '-16px', zIndex: 4 }}>
                    <span style={{ position: 'absolute', inset: '-10px', borderRadius: '50%', background: 'radial-gradient(circle, color-mix(in srgb, var(--m-accent) 55%, transparent) 0%, transparent 70%)', filter: 'blur(8px)', zIndex: 0 }} />
                    <span style={{ position: 'relative', zIndex: 1, width: '52px', height: '52px', borderRadius: '50%',
                      background: 'var(--m-accent)', display: 'flex', alignItems: 'center', justifyContent: 'center',
                      boxShadow: '0 8px 20px -6px color-mix(in srgb, var(--m-accent) 70%, transparent)' }}>
                      <svg width="23" height="23" viewBox="0 0 512 512" fill="#fff"><path d="M96 224C43 224 0 181 0 128S43 32 96 32s96 43 96 96l0 32c0 88.4-71.6 160-160 160l-16 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l16 0c40.9 0 75.4-27.1 86.5-64.4C104.4 221.4 100.3 224 96 224zm320 0c-53 0-96-43-96-96s43-96 96-96s96 43 96 96l0 32c0 88.4-71.6 160-160 160l-16 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l16 0c40.9 0 75.4-27.1 86.5-64.4C424.4 221.4 420.3 224 416 224z"/></svg>
                    </span>
                  </div>
                ) : null}
                <div style={{ position: 'relative', minHeight: '44px', display: 'flex', alignItems: 'center', gap: '12px' }}>
                  {r.img ? (<img src={r.img} alt={r.name} loading="lazy" style={{ width: '46px', height: '46px', borderRadius: '50%', objectFit: 'cover', flexShrink: 0 }} />) : null}
                  <div>
                    <div style={{ whiteSpace: 'nowrap', fontFamily: 'var(--m-font-display)', fontWeight: 700, fontSize: '19px', letterSpacing: '-0.01em', lineHeight: 1.2 }}>{r.name}</div>
                    <div style={{ fontFamily: 'var(--m-font-body)', fontSize: '13px', color: 'rgba(255,255,255,0.5)', marginTop: '3px' }}>{r.org}</div>
                  </div>
                </div>
                <p style={{ position: 'relative', fontFamily: 'var(--m-font-body)', fontSize: 'clamp(14px, 1vw, 15.5px)', lineHeight: 1.6,
                  color: 'rgba(255,255,255,0.82)', margin: '14px 44px 0 0' }}>{r.text}</p>
                {r.paraphrased ? (
                  <div style={{ position: 'relative', fontFamily: 'var(--m-font-body)', fontSize: '11.5px', fontStyle: 'italic',
                    color: 'rgba(255,255,255,0.4)', marginTop: 'auto', paddingTop: '14px' }}>Paraphrased for clarity, not a direct quote.</div>
                ) : null}
                {o === 0 ? (
                  <div aria-hidden="true" style={{ position: 'absolute', bottom: '-18px', right: '-16px', zIndex: 4 }}>
                    <span style={{ position: 'absolute', inset: '-10px', borderRadius: '50%', background: 'radial-gradient(circle, color-mix(in srgb, var(--m-accent) 55%, transparent) 0%, transparent 70%)', filter: 'blur(8px)', zIndex: 0 }} />
                    <span style={{ position: 'relative', zIndex: 1, width: '52px', height: '52px', borderRadius: '50%',
                      background: 'var(--m-accent)', display: 'flex', alignItems: 'center', justifyContent: 'center',
                      boxShadow: '0 8px 20px -6px color-mix(in srgb, var(--m-accent) 70%, transparent)' }}>
                      <svg width="23" height="23" viewBox="0 0 512 512" fill="#fff"><path d="M448 296c0 66.3-53.7 120-120 120l-8 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l8 0c30.9 0 56-25.1 56-56l0-8-64 0c-35.3 0-64-28.7-64-64l0-64c0-35.3 28.7-64 64-64l64 0c35.3 0 64 28.7 64 64l0 136zm-256 0c0 66.3-53.7 120-120 120l-8 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l8 0c30.9 0 56-25.1 56-56l0-8-64 0c-35.3 0-64-28.7-64-64l0-64c0-35.3 28.7-64 64-64l64 0c35.3 0 64 28.7 64 64l0 136z"/></svg>
                    </span>
                  </div>
                ) : null}
              </div>
            </div>
          );
        })}
      </div>
      {n > 1 ? (
      <div style={{ display: 'flex', justifyContent: 'center', gap: '9px', marginTop: '26px' }}>
        {TESTIMONIALS.map((_, k) => (
          <button key={k} onClick={() => go(k)} aria-label={'review ' + (k + 1)}
            style={{ width: k === i ? '26px' : '9px', height: '9px', borderRadius: '999px', border: 'none', cursor: 'pointer', padding: 0,
              background: k === i ? 'var(--m-accent)' : 'var(--m-line-strong, rgba(128,128,128,0.4))', transition: 'width .25s ease, background .25s ease' }} />
        ))}
      </div>
      ) : null}
    </div>
  );
}

function TeamSlider() {
  const [i, setI] = React.useState(0);
  React.useEffect(() => {
    const t = setInterval(() => setI(v => (v + 1) % TEAM_PICS.length), 3400);
    return () => clearInterval(t);
  }, []);
  return (
    <div data-reveal style={{ position: 'relative', borderRadius: 'var(--m-r-card)', overflow: 'hidden', boxShadow: 'var(--m-shadow-card)', aspectRatio: '16 / 10', background: '#0b0b0b', maxWidth: '360px', width: '100%', marginLeft: 'auto' }}>
      {TEAM_PICS.map((s, k) => (
        <img key={k} src={s} alt="Inside the Dunn Games studio"
          style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover',
            opacity: k === i ? 1 : 0, transition: 'opacity 1s ease' }} />
      ))}
      <div style={{ position: 'absolute', left: '18px', bottom: '18px', display: 'flex', gap: '7px', zIndex: 2 }}>
        {TEAM_PICS.map((_, k) => (
          <button key={k} onClick={() => setI(k)} aria-label={'photo ' + (k + 1)}
            style={{ width: k === i ? '22px' : '8px', height: '8px', borderRadius: '999px', border: 'none', cursor: 'pointer',
              background: k === i ? '#fff' : 'rgba(255,255,255,0.5)', transition: 'width .25s ease, background .25s ease' }} />
        ))}
      </div>
    </div>
  );
}

const SERVICES = [
  { t: 'Design Review', slug: 'design-review', img: A2 + '/studio/design-review.png', d: 'We review your core loop, onboarding, and progression systems, then deliver insights and action items to elevate your experience.', cta: 'Book a session' },
  { t: 'Studio Mentorship', slug: 'studio-mentorship', img: A2 + '/studio/mentorship.png', d: 'Dunn Games team members can integrate directly into your team based on your studio’s needs. We have the expertise to overhaul workflows, build product roadmaps, instill a winning culture, and accelerate your team’s growth.', cta: 'Book a session' },
];

function Consulting() {
  const [open, setOpen] = React.useState(0);
  return (
    <section id="consulting" data-screen-label="Consulting" style={{ position: 'relative', background: 'var(--m-page)', padding: 'clamp(60px, 8vw, 110px) 0' }}>
      <div style={{ maxWidth: 'var(--m-maxw)', margin: '0 auto', padding: '0 28px' }}>
        <div data-reveal style={{ marginBottom: '48px' }}>
          <MHead label="Consulting" title="Before you sell your game, call us."
            sub="Looking for guidance, but want to retain ownership and control over your game? Dunn Games has years of experience running sustainable products. We help game owners build sustainable studios, streamline live operations, and ship updates faster." />
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.15fr', gap: '48px', alignItems: 'start' }}>
          {/* accordion cards */}
          <div data-reveal style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
            {SERVICES.map((s, k) => {
              const active = open === k;
              return (
                <div key={k} onClick={() => setOpen(k)}
                  style={{ position: 'relative', overflow: 'hidden', background: 'var(--m-card)', color: 'var(--m-card-ink)',
                    borderRadius: '22px', cursor: 'pointer' }}>
                  {/* full-bleed photo + dark scrim, visible only when open */}
                  <img src={s.img} alt="" loading="lazy" aria-hidden="true"
                    style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover',
                      objectPosition: '70% 50%', opacity: active ? 1 : 0, transition: 'opacity .4s ease' }} />
                  <div style={{ position: 'absolute', inset: 0, opacity: active ? 1 : 0, transition: 'opacity .4s ease',
                    background: 'linear-gradient(90deg, rgba(6,7,9,0.94) 0%, rgba(6,7,9,0.82) 40%, rgba(6,7,9,0.28) 78%, rgba(6,7,9,0.12) 100%)' }} />
                  <div style={{ position: 'relative', zIndex: 1, padding: active ? '30px 28px 28px' : '22px 28px', transition: 'padding .25s ease' }}>
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: '14px',
                      userSelect: 'none', WebkitUserSelect: 'none' }}>
                      <h3 style={{ fontFamily: 'var(--m-font-display)', fontWeight: 700, fontSize: '20px', margin: 0, letterSpacing: '-0.01em' }}>{s.t}</h3>
                      <span aria-hidden="true" style={{ fontSize: '20px', color: 'rgba(255,255,255,0.55)', transform: active ? 'rotate(45deg)' : 'none', transition: 'transform .2s ease', userSelect: 'none', WebkitUserSelect: 'none' }}>+</span>
                    </div>
                    <div style={{ display: 'grid', gridTemplateRows: active ? '1fr' : '0fr', transition: 'grid-template-rows .28s ease' }}>
                      <div style={{ overflow: 'hidden' }}>
                        <p style={{ fontFamily: 'var(--m-font-body)', color: 'rgba(255,255,255,0.78)', fontSize: '15px',
                          lineHeight: 1.6, margin: '12px 0 0', maxWidth: '340px' }}>{s.d}</p>
                        <div style={{ marginTop: '48px' }}>
                          <Pill href={'/booking?service=' + s.slug} variant="light" size="sm" arrow>{s.cta}</Pill>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
          {/* right column: testimonials (stacked deck) */}
          <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
            <ReviewCarousel />
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- BRAND LOGOS (recreated wordmarks) ---------- */
function WalmartMark() {
  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: '9px' }}>
      <svg viewBox="-12 -12 24 24" width="20" height="20" style={{ display: 'block', flexShrink: 0 }} aria-hidden="true">
        <g fill="#FDBB30">
          {[0, 60, 120, 180, 240, 300].map(a => (
            <rect key={a} x="-1.7" y="-11" width="3.4" height="8" rx="1.7" transform={`rotate(${a})`} />
          ))}
        </g>
      </svg>
      <span style={{ fontFamily: 'var(--m-font-display)', fontWeight: 700, fontSize: '23px', letterSpacing: '-0.01em' }}>Walmart</span>
    </span>
  );
}
function MedalMark() {
  return (
    <span style={{ fontFamily: 'var(--m-font-display)', fontWeight: 800, fontSize: '23px', letterSpacing: '-0.02em' }}>
      medal<span style={{ fontWeight: 500, opacity: 0.55 }}>.tv</span>
    </span>
  );
}
function PaddingtonMark() {
  return (
    <span style={{ fontFamily: 'Georgia, "Times New Roman", serif', fontWeight: 700, fontSize: '22px', fontStyle: 'italic', letterSpacing: '0.01em' }}>
      Paddington
    </span>
  );
}
function StitchHeadMark() {
  return (
    <img src={A2 + '/brands/stitch-head.png'} alt="Stitch Head" style={{ display: 'block', height: '46px', width: 'auto' }} />
  );
}

function BrandStrip() {
  const marks = [<WalmartMark />, <MedalMark />, <PaddingtonMark />, <StitchHeadMark />];
  return (
    <div data-reveal style={{ margin: '38px auto 0', maxWidth: '760px' }}>
      <div style={{ fontFamily: 'var(--m-font-body)', fontSize: '12px', fontWeight: 600, letterSpacing: '0.14em',
        textTransform: 'uppercase', color: 'var(--m-ink-faint)', marginBottom: '22px' }}>
        Brands we&rsquo;ve worked with
      </div>
      <div style={{ display: 'flex', flexWrap: 'wrap', alignItems: 'center', justifyContent: 'center',
        columnGap: 'clamp(30px, 6vw, 64px)', rowGap: '26px', color: 'var(--m-ink-soft)' }}>
        {marks.map((m, k) => (
          <span key={k} style={{ display: 'inline-flex', alignItems: 'center', opacity: 0.85 }}>{m}</span>
        ))}
      </div>
    </div>
  );
}

/* ---------- REVIEW BUBBLES ---------- */
const REVIEWS = [
  { name: 'Isaac Warren', role: 'Studio partner', side: 'left', tilt: -1.6,
    text: 'Dunn Games\u2019 production team helped us grow from a studio with little planning into one with clear roadmaps, strong communication, and efficient updates. Their process kept us on schedule, improved testing, and helped us avoid delays. I would highly recommend their service to any studio struggling to maintain a consistent update cycle.' },
  { name: 'Ethan Warren', role: 'Studio partner', side: 'right', tilt: 1.4, paraphrased: true,
    text: 'Working with Dunn Games was a great learning experience for our early stage studio. They helped us improve our production cycle, become more organized, and increase professionalism across our team. The partnership aligned more closely with our goal of building a great studio than selling the game would have.' },
];

function ReviewBubble({ r }) {
  const initials = r.name.split(' ').map(w => w[0]).join('');
  return (
    <div data-reveal style={{ position: 'relative', background: 'var(--m-card)', color: 'var(--m-card-ink)',
      borderRadius: '24px', borderBottomLeftRadius: r.side === 'left' ? '6px' : '24px',
      borderBottomRightRadius: r.side === 'right' ? '6px' : '24px',
      padding: '26px 28px', maxWidth: '460px', width: '100%',
      boxShadow: 'var(--m-shadow-card)', transform: `rotate(${r.tilt}deg)`,
      alignSelf: r.side === 'left' ? 'flex-start' : 'flex-end' }}>
      <p style={{ fontFamily: 'var(--m-font-body)', fontSize: '15px', lineHeight: 1.62, margin: 0,
        color: 'rgba(255,255,255,0.82)' }}>
        &ldquo;{r.text}&rdquo;
      </p>
      <div style={{ display: 'flex', alignItems: 'center', gap: '12px', marginTop: '20px' }}>
        <span style={{ width: '38px', height: '38px', borderRadius: '999px', flexShrink: 0,
          background: 'var(--m-accent, #2f6bff)', color: '#fff', display: 'inline-flex', alignItems: 'center',
          justifyContent: 'center', fontFamily: 'var(--m-font-display)', fontWeight: 700, fontSize: '14px' }}>{initials}</span>
        <div style={{ minWidth: 0 }}>
          <div style={{ fontFamily: 'var(--m-font-display)', fontWeight: 700, fontSize: '15px', lineHeight: 1.2 }}>{r.name}</div>
        </div>
      </div>
      {r.paraphrased && (
        <div style={{ fontFamily: 'var(--m-font-body)', fontSize: '11.5px', fontStyle: 'italic',
          color: 'rgba(255,255,255,0.42)', marginTop: '14px', lineHeight: 1.4 }}>
          Paraphrased for clarity, not a direct quote.
        </div>
      )}
    </div>
  );
}

function Reviews() {
  return null;
}

/* Floating variant — absolutely placed in the For brands side gutters */
function FloatingReview({ r, style, anim }) {
  const initials = r.name.split(' ').map(w => w[0]).join('');
  return (
    <div className={'min-float-review ' + anim} data-reveal style={{ position: 'absolute', background: 'var(--m-card)', color: 'var(--m-card-ink)',
      borderRadius: '22px', borderBottomLeftRadius: r.side === 'left' ? '6px' : '22px',
      borderBottomRightRadius: r.side === 'right' ? '6px' : '22px',
      padding: '20px 22px', width: 'clamp(240px, 22vw, 320px)',
      boxShadow: 'var(--m-shadow-card)', transform: `rotate(${r.tilt}deg)`, zIndex: 3, ...style }}>
      <p style={{ fontFamily: 'var(--m-font-body)', fontSize: '13.5px', lineHeight: 1.55, margin: 0,
        color: 'rgba(255,255,255,0.82)' }}>
        &ldquo;{r.text}&rdquo;
      </p>
      <div style={{ display: 'flex', alignItems: 'center', gap: '10px', marginTop: '16px' }}>
        <span style={{ width: '34px', height: '34px', borderRadius: '999px', flexShrink: 0,
          background: 'var(--m-accent, #2f6bff)', color: '#fff', display: 'inline-flex', alignItems: 'center',
          justifyContent: 'center', fontFamily: 'var(--m-font-display)', fontWeight: 700, fontSize: '13px' }}>{initials}</span>
        <div style={{ minWidth: 0 }}>
          <div style={{ fontFamily: 'var(--m-font-display)', fontWeight: 700, fontSize: '14px', lineHeight: 1.2 }}>{r.name}</div>
        </div>
      </div>
      {r.paraphrased && (
        <div style={{ fontFamily: 'var(--m-font-body)', fontSize: '11px', fontStyle: 'italic',
          color: 'rgba(255,255,255,0.42)', marginTop: '12px', lineHeight: 1.4 }}>
          Paraphrased for clarity, not a direct quote.
        </div>
      )}
    </div>
  );
}

/* Editorial pull-quote — no card, large light type over the page */
function PullQuote({ r, style, flow }) {
  return (
    <div className={flow ? '' : 'min-float-review'} data-reveal style={{ position: flow ? 'relative' : 'absolute', zIndex: 3, ...style }}>
      <div style={{ fontFamily: 'var(--m-font-display)', fontWeight: 800, fontSize: '58px', lineHeight: 1,
        color: 'var(--m-accent, #2f6bff)', margin: '0 0 2px' }} aria-hidden="true">&ldquo;</div>
      <p style={{ fontFamily: 'var(--m-font-display)', fontWeight: 500, fontSize: 'clamp(15px, 1.05vw, 17px)',
        lineHeight: 1.55, letterSpacing: '-0.01em', margin: '2px 0 0',
        color: 'var(--m-ink, #fff)' }}>
        {r.text}
      </p>
      <div style={{ marginTop: '20px', fontFamily: 'var(--m-font-display)', fontWeight: 700, fontSize: '14.5px', letterSpacing: '-0.01em', color: 'var(--m-ink, #fff)' }}>
        {r.name}
        <span style={{ fontWeight: 400, color: 'var(--m-ink-faint, rgba(255,255,255,0.5))' }}>, Cubico Studios</span>
      </div>
    </div>
  );
}

/* ---------- FOR BRANDS ---------- */
function CivanFloat({ style }) {
  const r = CIVAN;
  return (
    <div className="min-float-review" data-reveal style={{ position: 'absolute', width: 'clamp(260px, 21vw, 310px)', zIndex: 3, ...style }}>
      <div style={{ position: 'relative', background: 'var(--m-card)', color: 'var(--m-card-ink)', borderRadius: '26px',
        padding: '30px 28px', boxSizing: 'border-box',
        boxShadow: 'var(--m-shadow-card), 0 8px 40px -14px color-mix(in srgb, var(--m-accent) 40%, transparent)' }}>
        <div aria-hidden="true" style={{ position: 'absolute', top: '-6px', left: '2px', zIndex: 4 }}>
          <span style={{ position: 'absolute', inset: '-10px', borderRadius: '50%', background: 'radial-gradient(circle, color-mix(in srgb, var(--m-accent) 55%, transparent) 0%, transparent 70%)', filter: 'blur(8px)', zIndex: 0 }} />
          <span style={{ position: 'relative', zIndex: 1, width: '48px', height: '48px', borderRadius: '50%',
            background: 'var(--m-accent)', display: 'flex', alignItems: 'center', justifyContent: 'center',
            boxShadow: '0 8px 20px -6px color-mix(in srgb, var(--m-accent) 70%, transparent)' }}>
            <svg width="21" height="21" viewBox="0 0 512 512" fill="#fff"><path d="M96 224C43 224 0 181 0 128S43 32 96 32s96 43 96 96l0 32c0 88.4-71.6 160-160 160l-16 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l16 0c40.9 0 75.4-27.1 86.5-64.4C104.4 221.4 100.3 224 96 224zm320 0c-53 0-96-43-96-96s43-96 96-96s96 43 96 96l0 32c0 88.4-71.6 160-160 160l-16 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l16 0c40.9 0 75.4-27.1 86.5-64.4C424.4 221.4 420.3 224 416 224z"/></svg>
          </span>
        </div>
        <div style={{ paddingLeft: '40px', minHeight: '44px', display: 'flex', alignItems: 'center' }}>
          <div style={{ textAlign: 'left' }}>
            <div style={{ fontFamily: 'var(--m-font-display)', fontWeight: 700, fontSize: '18px', letterSpacing: '-0.01em', lineHeight: 1.2 }}>{r.name}</div>
            <div style={{ fontFamily: 'var(--m-font-body)', fontSize: '13px', color: 'rgba(255,255,255,0.5)', marginTop: '3px' }}>{r.org}</div>
          </div>
        </div>
        <p style={{ fontFamily: 'var(--m-font-body)', fontSize: '14px', lineHeight: 1.6, textAlign: 'left',
          color: 'rgba(255,255,255,0.82)', margin: '14px 0 0' }}>{r.text}</p>
      </div>
    </div>
  );
}

function ForBrands() {
  return (
    <section id="brands" data-screen-label="For Brands" style={{ position: 'relative', overflow: 'hidden', background: 'var(--m-page)', padding: 'clamp(50px, 7vw, 96px) 0 clamp(70px, 9vw, 120px)' }}>
      <CivanFloat style={{ top: 'clamp(90px, 12vw, 150px)', left: 'clamp(16px, 2vw, 48px)', transform: 'rotate(-3deg)' }} />
      <div style={{ maxWidth: '980px', margin: '0 auto', padding: '0 28px', textAlign: 'center' }}>
        <div data-reveal><MLabel>For brands</MLabel></div>
        <h2 data-reveal style={{ fontFamily: 'var(--m-font-display)', fontWeight: 800, color: 'var(--m-ink)',
          fontSize: 'clamp(26px, 3.6vw, 42px)', lineHeight: 1.06, letterSpacing: '-0.02em', margin: '10px auto 0', maxWidth: '620px' }}>
          Integrate with confidence
        </h2>
        <p data-reveal style={{ fontFamily: 'var(--m-font-body)', color: 'var(--m-ink-soft)', fontSize: '17px', lineHeight: 1.6,
          maxWidth: '540px', margin: '16px auto 0' }}>
          Dunn Games has a proven track record of delivering high-quality brand integrations on time. Whether
          you&rsquo;re looking to reach our audience or build something bespoke, we can bring your message to life.
        </p>
        <img data-reveal src={A2 + '/games/advertise-here-s.png'} alt="Your brand here" style={{ display: 'block', width: '100%', maxWidth: '496px', height: 'auto', margin: '18px auto 26px' }} />
        <BrandStrip />
        <div data-reveal style={{ marginTop: '38px' }}>
          <a href="/booking?service=branded-project" style={{ display: 'inline-flex', alignItems: 'center', gap: '14px', textDecoration: 'none',
            background: 'var(--m-pill)', border: '1px solid var(--m-line)', borderRadius: '999px', padding: '8px 10px 8px 8px',
            boxShadow: '0 10px 26px rgba(11,21,34,.08)' }}>
            <img src={A2 + '/team/connor-acosta.png'} alt="Connor Acosta" style={{ width: '46px', height: '46px', borderRadius: '999px', objectFit: 'cover', objectPosition: 'center 22%' }} />
            <span style={{ textAlign: 'left' }}>
              <span style={{ display: 'block', fontFamily: 'var(--m-font-display)', fontWeight: 700, fontSize: '15px', color: 'var(--m-pill-ink)', lineHeight: 1.2 }}>Get scheduled</span>
              <span style={{ display: 'block', fontFamily: 'var(--m-font-body)', fontSize: '12.5px', color: 'var(--m-ink-soft)', marginTop: '2px' }}>with Connor Acosta, Exec Producer</span>
            </span>
            <span aria-hidden="true" style={{ width: '38px', height: '38px', borderRadius: '999px', background: 'var(--m-accent)', color: 'var(--m-accent-ink)',
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center', marginLeft: '6px' }}>
              <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round">
                <path d="M5 12h14"></path><path d="M13 5l7 7-7 7"></path>
              </svg>
            </span>
          </a>
        </div>
      </div>
    </section>
  );
}

/* ---------- JOIN OUR TEAM ---------- */
const CAREER_PICS = [A2 + '/studio/career-1.jpg', A2 + '/studio/career-2.jpg', A2 + '/studio/career-3.jpg'];

function CareerSlider() {
  const [i, setI] = React.useState(0);
  React.useEffect(() => {
    const t = setInterval(() => setI(v => (v + 1) % CAREER_PICS.length), 10800);
    return () => clearInterval(t);
  }, []);
  return (
    <div data-reveal style={{ position: 'relative', borderRadius: 'var(--m-r-card)', overflow: 'hidden', boxShadow: 'var(--m-shadow-card)', aspectRatio: '4 / 3', background: '#0b0b0b' }}>
      {CAREER_PICS.map((s, k) => (
        <img key={k} src={s} alt="Inside the Dunn Games studio in New Orleans"
          style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover',
            opacity: k === i ? 1 : 0, transition: 'opacity 1s ease' }} />
      ))}
    </div>
  );
}

const JOBS = [
  { role: 'Concept Artist', blurb: 'Shape the look of a new IP, from characters and worlds to key art and marketing.' },
  { role: 'Writer', blurb: 'Build the story, voice, and world of a new IP alongside our design team.' },
];

function JobCard({ job }) {
  const [hover, setHover] = React.useState(false);
  const href = 'mailto:grant@dunngames.com?subject=' + encodeURIComponent(job.role + ' — application') +
    '&body=' + encodeURIComponent('Hi Grant,\n\nI\u2019d love to be considered for the ' + job.role + ' role in New Orleans.\n\n');
  return (
    <a href={href} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{ display: 'block', textDecoration: 'none', background: 'var(--m-page)', border: '1px solid var(--m-line)',
        borderRadius: '18px', padding: '22px 24px', transition: 'transform .22s ease, box-shadow .22s ease, border-color .22s ease',
        transform: hover ? 'translateY(-3px)' : 'none', boxShadow: hover ? 'var(--m-shadow-card)' : 'none',
        borderColor: hover ? 'color-mix(in srgb, var(--m-accent) 45%, var(--m-line))' : 'var(--m-line)' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: '10px', marginBottom: '12px' }}>
        <span style={{ fontFamily: 'var(--m-font-body)', fontSize: '11px', fontWeight: 700, letterSpacing: '0.08em',
          textTransform: 'uppercase', color: 'var(--m-accent)', background: 'var(--m-accent-soft)', padding: '4px 10px', borderRadius: '999px' }}>New Orleans</span>
        <span style={{ fontFamily: 'var(--m-font-body)', fontSize: '11px', fontWeight: 700, letterSpacing: '0.08em',
          textTransform: 'uppercase', color: 'var(--m-ink-soft)', border: '1px solid var(--m-line)', padding: '4px 10px', borderRadius: '999px' }}>New IP</span>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: '14px' }}>
        <h3 style={{ fontFamily: 'var(--m-font-display)', fontWeight: 800, fontSize: '22px', color: 'var(--m-ink)', margin: 0, letterSpacing: '-0.01em' }}>{job.role}</h3>
        <span aria-hidden="true" style={{ width: '34px', height: '34px', flexShrink: 0, borderRadius: '999px', background: hover ? 'var(--m-accent)' : 'var(--m-page-2)',
          color: hover ? 'var(--m-accent-ink)' : 'var(--m-ink-soft)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', transition: 'background .22s ease, color .22s ease' }}>
          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round">
            <path d="M5 12h14"></path><path d="M13 5l7 7-7 7"></path>
          </svg>
        </span>
      </div>
      <p style={{ fontFamily: 'var(--m-font-body)', color: 'var(--m-ink-soft)', fontSize: '14.5px', lineHeight: 1.55, margin: '10px 0 0' }}>{job.blurb}</p>
    </a>
  );
}

function TeamGallery() {
  return (
    <section id="team" data-screen-label="Join Our Team" style={{ position: 'relative', overflow: 'hidden', background: 'var(--m-page)', padding: 'clamp(70px, 9vw, 120px) 0' }}>
      <div style={{ maxWidth: 'var(--m-maxw)', margin: '0 auto', padding: '0 28px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.05fr 1fr', gap: 'clamp(32px, 5vw, 72px)', alignItems: 'center' }}>
          {/* office photo slideshow */}
          <CareerSlider />
          {/* text + jobs */}
          <div data-reveal>
            <MLabel>Careers</MLabel>
            <h2 style={{ fontFamily: 'var(--m-font-display)', fontWeight: 800, color: 'var(--m-ink)',
              fontSize: 'clamp(28px, 4vw, 46px)', lineHeight: 1.05, letterSpacing: '-0.02em', margin: '10px 0 0' }}>
              Join our team
            </h2>
            <p style={{ fontFamily: 'var(--m-font-body)', color: 'var(--m-ink-soft)', fontSize: '17px', lineHeight: 1.6, margin: '16px 0 28px', maxWidth: '480px' }}>
              We hire locally in New Orleans and build for the long run. We&rsquo;re opening up new roles to help
              shape original IP. If that sounds like you, reach out.
            </p>
            <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
              {JOBS.map(j => <JobCard key={j.role} job={j} />)}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- FOOTER ---------- */
function Footer() {
  const cols = [
    ['Studio', ['Our games', 'Consulting', 'For brands', 'Careers']],
    ['Company', ['About', 'Press', 'Contact']],
  ];
  return (
    <footer style={{ background: 'var(--m-page-2)', borderTop: '1px solid var(--m-line)' }}>
      <div style={{ maxWidth: 'var(--m-maxw)', margin: '0 auto', padding: '56px 28px 40px',
        display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr', gap: '32px' }}>
        <div>
          <img src={A2 + '/logo-dunngames-short.png'} alt="Dunn Games" style={{ height: '30px', width: 'auto' }} />
          <p style={{ fontFamily: 'var(--m-font-body)', color: 'var(--m-ink-soft)', fontSize: '14px', lineHeight: 1.6, margin: '16px 0 0', maxWidth: '300px' }}>
            A game studio based in New Orleans. We hire locally, focus on culture, and build games meant to last.
          </p>
        </div>
        {cols.map(([h, items]) => (
          <div key={h}>
            <div style={{ fontFamily: 'var(--m-font-display)', fontWeight: 700, color: 'var(--m-ink)', fontSize: '14px', marginBottom: '14px' }}>{h}</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
              {items.map(x => (
                <a key={x} href="#" style={{ fontFamily: 'var(--m-font-body)', color: 'var(--m-ink-soft)', fontSize: '14px', textDecoration: 'none' }}>{x}</a>
              ))}
            </div>
          </div>
        ))}
      </div>
      <div style={{ maxWidth: 'var(--m-maxw)', margin: '0 auto', padding: '18px 28px 40px', borderTop: '1px solid var(--m-line)' }}>
        <span style={{ fontFamily: 'var(--m-font-body)', color: 'var(--m-ink-faint)', fontSize: '13px' }}>© 2026 Dunn Games LLC. All rights reserved.</span>
      </div>
    </footer>
  );
}

Object.assign(window.MIN = window.MIN || {}, { Consulting, ForBrands, Reviews, TeamGallery, Footer });
