// ============================================================
// BVS — Team + Contact sections (scroll-anchored, per side)
// ============================================================
const TEAM = [
  { name: 'Simon Choudhry', role: 'Founder · CEO', photo: 'simon.png' },
  { name: 'Piotr Gladysz', role: 'Co-Founder · COO', photo: 'piotr-gladysz.png' },
  { name: 'Piotr Duda', role: 'Chief Technology Officer', photo: 'duda.png' },
  { name: 'Radek Radzilowski', role: 'Co-Founder · Head of Fulfillment & Client Success', photo: 'radek.png' },
  { name: 'Nick Scheller', role: 'Co-Founder · Head of Sales & Marketing', photo: 'nick.jpg' },
  { name: 'Piotr Kostrzewa', role: 'Senior Engineer · IT Consultant', photo: 'piotr-kostrzewa.png' },
  { name: 'Filip Pianic', role: 'Tech Lead · Manager', photo: 'filip.png' },
  { name: 'Muhammad Haseeb', role: 'AI Engineer · Tech Lead', photo: 'muhammad.png' },
  { name: 'Andrej Tanasijević', role: 'Sales Rep · Serbia', photo: 'andrej.png' },
  { name: 'Krsman Tripkovic', role: 'Sales Rep · Serbia', photo: 'krsman.png' },
  { name: 'Aina Häkkinen', role: 'Sales Rep · Monaco', photo: 'aina.png' },
  { name: 'Jacopo Pucci', role: 'Sales Rep · Monaco', photo: 'jacopo.png' },
];
const MEDIA_TEAM = ['Simon Choudhry', 'Piotr Gladysz', 'Nick Scheller', 'Radek Radzilowski'];
const TECH_TEAM = ['Simon Choudhry', 'Piotr Gladysz', 'Nick Scheller'];

// side: 'tech' (Simon, Piotr, Nick) | 'media' (Simon, Piotr, Nick, Radek)
function TeamSection({ side = 'tech' }) {
  const ref = useReveal();
  const list = side === 'media' ? MEDIA_TEAM : TECH_TEAM;
  const media = true; // both sides now use the compact card layout
  const people = list.map((n) => TEAM.find((m) => m.name === n)).filter(Boolean);
  return (
    <section id="team" ref={ref} className="dotgrid-d" style={{ background: BLUE, color: '#fff', padding: '72px 0 80px', scrollMarginTop: 72 }}>
      <div className="wrap">
        <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', flexWrap: 'wrap', gap: 16 }}>
          <div className="reveal">
            <Eyebrow onBlue style={{ color: 'rgba(255,255,255,0.6)' }}>meet the team</Eyebrow>
            <h2 className="h-disp" style={{ color: '#fff', fontSize: 'clamp(26px,2.8vw,42px)', marginTop: 12 }}>
              {media ? <>Our World Class Team<span style={{ color: 'rgba(255,255,255,0.55)' }}>.</span></> : <>Our world-class team<span style={{ color: 'rgba(255,255,255,0.55)' }}>.</span></>}
            </h2>
          </div>
          {!media && <div className="reveal mono" style={{ fontSize: 12, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.55)', maxWidth: 300, lineHeight: 1.6, ...delay(1) }}>Engineering · data science · AI · sales across the US, Poland, Serbia &amp; Monaco</div>}
        </div>
        {media ? (
          <div className="team-media" style={{ display: 'grid', gridTemplateColumns: 'repeat(' + Math.min(people.length, 4) + ',minmax(0,' + (people.length > 3 ? 230 : 260) + 'px))', gap: 22, marginTop: 40 }}>
            {people.map((m, i) => (
              <div key={m.name} className="reveal" style={{ display: 'flex', flexDirection: 'column', gap: 14, ...delay(i, 90) }}>
                {m.photo ? (
                  <img src={res('assets/bvs/team/' + m.photo)} alt={m.name} style={{ width: '100%', aspectRatio: '1 / 1', objectFit: 'cover', borderRadius: 6, filter: 'grayscale(1) contrast(1.05)', display: 'block', background: '#fff' }} />
                ) : (
                  <div aria-label={m.name} style={{ width: '100%', aspectRatio: '1 / 1', borderRadius: 6, background: 'rgba(255,255,255,0.07)', border: '1px solid rgba(255,255,255,0.18)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                    <span className="mono" style={{ fontSize: 36, fontWeight: 700, letterSpacing: '0.1em', color: 'rgba(255,255,255,0.45)' }}>{m.name.split(' ').map((w) => w[0]).join('')}</span>
                  </div>
                )}
                <div>
                  <div style={{ fontWeight: 700, fontSize: 18, lineHeight: 1.15 }}>{m.name}</div>
                  <div className="mono" style={{ fontSize: 11.5, fontWeight: 600, color: 'rgba(255,255,255,0.62)', marginTop: 5, letterSpacing: '0.04em' }}>{m.role}</div>
                </div>
              </div>
            ))}
          </div>
        ) : (
          <div className="team-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(6,1fr)', gap: '28px 22px', marginTop: 44 }}>
            {people.map((m, i) => (
              <div key={m.name} className="reveal" style={{ display: 'flex', flexDirection: 'column', gap: 10, ...delay(i % 6, 60) }}>
                <img src={res('assets/bvs/team/' + m.photo)} alt={m.name} style={{ width: '100%', aspectRatio: '1 / 1', objectFit: 'cover', borderRadius: 4, filter: 'grayscale(1) contrast(1.05)', display: 'block', background: '#fff' }} />
                <div>
                  <div style={{ fontWeight: 700, fontSize: 14.5, lineHeight: 1.15 }}>{m.name}</div>
                  <div className="mono" style={{ fontSize: 10.5, fontWeight: 600, color: 'rgba(255,255,255,0.62)', marginTop: 4, lineHeight: 1.3, letterSpacing: '0.04em' }}>{m.role}</div>
                </div>
              </div>
            ))}
          </div>
        )}
      </div>
    </section>
  );
}

// ---- Contact section ----
function ContactSection({ defaultSide = 'both' }) {
  const ref = useReveal();
  const [v, setV] = useState({});
  const [sent, setSent] = useState(false);
  const [side, setSide] = useState(defaultSide);
  const upd = (k, val) => setV((s) => ({ ...s, [k]: val }));
  const fields = [['name', 'Full Name', 'text', 'Jane Doe'], ['email', 'Work Email', 'email', 'you@company.com'], ['company', 'Company', 'text', 'Acme Co.']];
  return (
    <section id="contact" ref={ref} style={{ background: PAPER, padding: '76px 0 88px', scrollMarginTop: 72 }}>
      <div className="wrap">
        <Eyebrow className="reveal">get in touch</Eyebrow>
        <h2 className="reveal h-disp" style={{ fontSize: 'clamp(25px,2.6vw,38px)', marginTop: 12, maxWidth: 760, ...delay(1) }}>Let’s globalize your <span style={{ color: BLUE }}>operation</span>.</h2>
        <div className="contact-grid reveal" style={{ display: 'grid', gridTemplateColumns: '1fr 1.1fr', gap: 56, alignItems: 'start', marginTop: 36, ...delay(2) }}>
          <div>
            <div className="mono" style={{ fontSize: 12, fontWeight: 700, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'rgba(10,10,10,0.45)' }}>direct line</div>
            <div style={{ marginTop: 20, display: 'flex', flexDirection: 'column', gap: 16 }}>
              {[['Simon Choudhry', 'Founder · Chief Executive Officer'], ['Piotr Gladysz', 'Co-Founder · Chief Operating Officer']].map(([n, r]) => (
                <div key={n}><div style={{ fontWeight: 700, fontSize: 18 }}>{n}</div><div className="mono" style={{ fontSize: 12, color: 'rgba(10,10,10,0.55)', marginTop: 3, letterSpacing: '0.04em' }}>{r}</div></div>
              ))}
            </div>
            <div style={{ marginTop: 26, paddingTop: 22, borderTop: '1px solid var(--bvs-line)', display: 'flex', flexDirection: 'column', gap: 10 }}>
              <a href="mailto:admin@bleuventurestudios.com" className="ul-link mono" style={{ fontSize: 15, color: BLUE }}>admin@bleuventurestudios.com</a>
              <a href="tel:+17738140959" className="ul-link mono" style={{ fontSize: 15, color: INK }}>+1 (773) 814-0959</a>
            </div>
            <VMark size={56} color={BLUE} className="floaty" style={{ marginTop: 36 }} />
          </div>
          <div className="card" style={{ padding: 'clamp(28px,3vw,44px)' }}>
            {sent ? (
              <div style={{ padding: '40px 0', textAlign: 'center' }}>
                <div className="h-disp" style={{ fontSize: 'clamp(44px,5vw,66px)', color: BLUE }}>Sent.</div>
                <div style={{ fontSize: 15, color: 'rgba(10,10,10,0.6)', margin: '14px 0 28px', fontWeight: 500 }}>We’ll be in touch within 24 hours.</div>
                <Button kind="ghost-b" onClick={() => { setSent(false); setV({}); }}>Send another</Button>
              </div>
            ) : (
              <div style={{ display: 'flex', flexDirection: 'column', gap: 22 }}>
                {fields.map(([k, label, type, ph]) => (
                  <label key={k} style={{ display: 'flex', flexDirection: 'column', gap: 7 }}>
                    <span className="mono" style={{ fontSize: 11, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.14em' }}>{label}</span>
                    <input value={v[k] || ''} onChange={(e) => upd(k, e.target.value)} placeholder={ph} type={type}
                      style={{ border: 0, borderBottom: '2px solid var(--bvs-line)', padding: '10px 0', fontSize: 16, fontFamily: 'inherit', color: INK, background: 'transparent', outline: 'none', transition: 'border-color .16s var(--ease)' }}
                      onFocus={(e) => (e.target.style.borderColor = BLUE)} onBlur={(e) => (e.target.style.borderColor = 'rgba(10,10,10,0.10)')} />
                  </label>
                ))}
                <label style={{ display: 'flex', flexDirection: 'column', gap: 7 }}>
                  <span className="mono" style={{ fontSize: 11, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.14em' }}>What can we build for you?</span>
                  <textarea rows="3" value={v.note || ''} onChange={(e) => upd('note', e.target.value)} placeholder="The process you want re-engineered, or the brand you want built."
                    style={{ border: '1px solid var(--bvs-line)', borderRadius: 4, padding: 12, fontSize: 14, fontFamily: 'inherit', color: INK, background: '#fff', outline: 'none', resize: 'none' }} />
                </label>
                <Button kind="blue" onClick={() => setSent(true)} arrow style={{ alignSelf: 'flex-start', marginTop: 4 }}>Send Inquiry</Button>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { TeamSection, ContactSection, TEAM, MEDIA_TEAM });
