/* About page sections: AboutStory (story + values + photo) and TeamGrid (photo slots). */
function AboutStory({ t }) {
  const a = t.about;
  return (
    <Section bg="app" label="Story">
      <Container style={window.PAD}>
        <div className="bne-split" style={{ display:'grid', gridTemplateColumns:'1.1fr .9fr', gap:56, alignItems:'center' }}>
          <div>
            <Reveal><Eyebrow style={{ marginBottom:18 }}>{a.storyEyebrow}</Eyebrow></Reveal>
            <Reveal delay={60}><h2 className="t-h2" style={{ margin:0, color:'var(--text-1)', textWrap:'balance' }}>{a.storyTitle}</h2></Reveal>
            {a.storyBody.map((p, i) => (
              <Reveal key={i} delay={120 + i*60}><p className="t-lead" style={{ color:'var(--text-2)', marginTop:18, marginBottom:0 }}>{p}</p></Reveal>
            ))}
          </div>
          <Reveal delay={120}>
            <image-slot id="about-office" fit="cover" shape="rounded" radius="16"
              placeholder={a.photoCta}
              style={{ display:'block', width:'100%', height:380, border:'1px solid var(--border-1)', borderRadius:16 }}></image-slot>
          </Reveal>
        </div>
        <div className="bne-grid-3" style={{ display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:20, marginTop:56 }}>
          {a.values.map((v, i) => (
            <Reveal key={i} delay={i*80}>
              <div style={{ background:'var(--card-bg)', border:'1px solid var(--border-1)', borderRadius:'var(--r-card)', padding:'28px 26px', height:'100%' }}>
                <div style={{ display:'grid', placeItems:'center', width:48, height:48, borderRadius:12, background:'rgba(123,47,190,.14)', color:'var(--accent)' }}>
                  <BrandIcon name={v.icon} size={26}/>
                </div>
                <div className="t-h4" style={{ color:'var(--text-1)', marginTop:18 }}>{v.t}</div>
                <p className="t-body" style={{ color:'var(--text-2)', marginTop:8, marginBottom:0 }}>{v.b}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </Container>
    </Section>
  );
}

function TeamGrid({ t }) {
  const a = t.about;
  return (
    <Section bg="alt" label="Team">
      <Container style={window.PAD}>
        <SectionHead eyebrow={a.teamEyebrow} title={a.teamTitle} body={a.teamSub} align="center" max={680} />
        <div className="bne-team" style={{ display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:20, marginTop:52 }}>
          {a.roles.map((role, i) => (
            <Reveal key={i} delay={i*70}>
              <div style={{ borderRadius:'var(--r-card)', overflow:'hidden', border:'1px solid var(--border-1)', background:'var(--card-bg)' }}>
                <image-slot id={`team-${i}`} fit="cover" shape="rect"
                  placeholder={a.photoCta}
                  style={{ display:'block', width:'100%', height:320 }}></image-slot>
                <div style={{ padding:'16px 18px' }}>
                  <div className="t-caption" style={{ fontFamily:'var(--font-mono)', color:'var(--accent)', letterSpacing:'.04em', textTransform:'uppercase', fontSize:11 }}>{role}</div>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </Container>
    </Section>
  );
}

/* 09 — Founder (Ed Seminari): photo + bio + value cards. Always deep purple. */
function Founder({ t }) {
  const fo = t.founder, a = t.about;
  return (
    <Section bg="deep" label="Founder" style={{ overflow:'hidden', background:'var(--deep-bg)' }}>
      <div aria-hidden="true" style={{ position:'absolute', inset:0, pointerEvents:'none',
        background:'radial-gradient(50% 65% at 85% 12%, rgba(123,47,190,.11), transparent 60%)' }}></div>
      <Container style={{ ...window.PAD, position:'relative' }}>
        <div className="bne-split" style={{ display:'grid', gridTemplateColumns:'.85fr 1.15fr', gap:56, alignItems:'center' }}>
          <Reveal>
            <div style={{ position:'relative', maxWidth:380, marginInline:'auto', borderRadius:18, overflow:'hidden', border:'1px solid var(--deep-border)' }}>
              <image-slot id="founder-ed" className="on-purple" fit="cover" shape="rounded" radius="18"
                placeholder={fo.photoCta}
                style={{ display:'block', width:'100%', height:470, borderRadius:18, background:'transparent' }}></image-slot>
              <div aria-hidden="true" style={{ position:'absolute', left:0, right:0, bottom:0, height:'42%', pointerEvents:'none',
                background:'linear-gradient(to top, rgba(11,5,22,.78) 0%, rgba(11,5,22,.42) 38%, transparent 100%)' }}></div>
              <div style={{ position:'absolute', left:20, right:20, bottom:18, pointerEvents:'none' }}>
                <div style={{ fontFamily:'var(--font-display)', fontWeight:700, fontSize:17, color:'#fff', textShadow:'0 1px 12px rgba(0,0,0,.4)' }}>{fo.name}</div>
                <div style={{ fontFamily:'var(--font-mono)', fontSize:11.5, color:'rgba(255,255,255,.82)', letterSpacing:'.03em', marginTop:2, textShadow:'0 1px 10px rgba(0,0,0,.4)' }}>{fo.role}</div>
              </div>
            </div>
          </Reveal>
          <div>
            <Reveal><Eyebrow style={{ marginBottom:18 }}>{fo.eyebrow}</Eyebrow></Reveal>
            <Reveal delay={60}><h2 className="t-h2" style={{ margin:0, color:'var(--on-deep-1)', textWrap:'balance' }}>{a.storyTitle}</h2></Reveal>
            {fo.body.map((p, i) => (
              <Reveal key={i} delay={120 + i*60}><p className="t-lead" style={{ color:'var(--on-deep-2)', marginTop:18, marginBottom:0 }}>{p}</p></Reveal>
            ))}
          </div>
        </div>
        <div className="bne-grid-3" style={{ display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:18, marginTop:52 }}>
          {a.values.map((v, i) => (
            <Reveal key={i} delay={i*80}>
              <div style={{ background:'var(--deep-card)', border:'1px solid var(--deep-border)', borderRadius:'var(--r-card)', padding:'26px 26px', height:'100%' }}>
                <div style={{ display:'grid', placeItems:'center', width:46, height:46, borderRadius:12, background:'var(--deep-chip)', color:'var(--accent)' }}>
                  <BrandIcon name={v.icon} size={24}/>
                </div>
                <div className="t-h4" style={{ color:'var(--on-deep-1)', marginTop:16 }}>{v.t}</div>
                <p className="t-body" style={{ color:'var(--on-deep-2)', marginTop:8, marginBottom:0 }}>{v.b}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </Container>
    </Section>
  );
}

/* 10 — Testimonials: 3 cards, photo slot + quote + name/role. */
function Testimonials({ t }) {
  const tm = t.testimonials;
  return (
    <Section bg="alt" label="Testimonials">
      <Container style={window.PAD}>
        <SectionHead eyebrow={tm.eyebrow} title={tm.title} align="center" max={620} />
        <div className="bne-grid-3" style={{ display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:20, marginTop:52 }}>
          {tm.items.map((it, i) => (
            <Reveal key={i} delay={i*90}>
              <figure style={{ margin:0, background:'var(--card-bg)', border:'1px solid var(--border-1)', borderRadius:'var(--r-card)', padding:'30px 28px', height:'100%', display:'flex', flexDirection:'column' }}>
                <div style={{ color:'var(--accent)', fontFamily:'var(--font-display)', fontWeight:800, fontSize:48, lineHeight:.6, height:24 }}>“</div>
                <blockquote className="t-lead" style={{ margin:'14px 0 0', color:'var(--text-1)', fontStyle:'italic', fontSize:18, lineHeight:1.5 }}>{it.quote}</blockquote>
                <figcaption style={{ display:'flex', alignItems:'center', gap:13, marginTop:'auto', paddingTop:24 }}>
                  <image-slot id={`tst-${i}`} fit="cover" shape="circle"
                    placeholder=""
                    style={{ display:'block', width:46, height:46, borderRadius:'50%', flexShrink:0 }}></image-slot>
                  <div>
                    <div style={{ fontFamily:'var(--font-display)', fontWeight:700, fontSize:15.5, color:'var(--text-1)' }}>{it.name}</div>
                    <div className="t-caption" style={{ color:'var(--text-3)', fontFamily:'var(--font-mono)', letterSpacing:'.02em', marginTop:1 }}>{it.role}</div>
                  </div>
                </figcaption>
              </figure>
            </Reveal>
          ))}
        </div>
      </Container>
    </Section>
  );
}

Object.assign(window, { AboutStory, TeamGrid, Founder, Testimonials });