// About — editorial layout with striped placeholder portrait + floating credential card

function AboutSection() {
  const [ref, vis] = useReveal();
  const METRICS = [
    { label:'Avg ROAS Lift', value:'+72%' },
    { label:'Avg CTR Gain', value:'+47%' },
    { label:'Conversion', value:'14×' },
    { label:'Prod. Cost', value:'1/10' },
  ];
  return (
    <section id="about" className="section-full" style={{ background:'var(--bg-alt)' }}>
      <div className="section" style={{ padding:'0 var(--section-px)' }}>
        <div style={{ display:'grid', gridTemplateColumns:'5fr 6fr', gap:64, alignItems:'center' }} className="about-grid" ref={ref}>

          {/* Portrait column */}
          <div style={{
            position:'relative',
            opacity: vis?1:0, transform: vis?'translateX(0)':'translateX(-30px)',
            transition:'all .9s cubic-bezier(.22,1,.36,1)',
          }}>
            {/* soft glow */}
            <div style={{
              position:'absolute', inset:-24, borderRadius:32,
              background:'radial-gradient(ellipse, rgba(var(--accent-rgb),calc(0.15 * var(--glow))) 0%, transparent 70%)',
              filter:'blur(30px)', pointerEvents:'none',
            }}/>

            <div style={{
              position:'relative', aspectRatio:'3/4', maxWidth:420, borderRadius:16,
              overflow:'hidden', border:'1px solid var(--border)', background:'var(--surface)',
            }}>
              {/* Fallback striped bg sits under the image in case it fails */}
              <div style={{
                position:'absolute', inset:0,
                background:`
                  linear-gradient(135deg, rgba(var(--accent-rgb),0.3) 0%, transparent 50%),
                  repeating-linear-gradient(135deg, rgba(var(--accent-rgb),0.08) 0px, rgba(var(--accent-rgb),0.08) 1px, transparent 1px, transparent 16px)
                `,
              }}/>
              <div style={{
                position:'absolute', inset:0, display:'flex', alignItems:'center', justifyContent:'center',
                fontFamily:'var(--font-display)', fontSize:120, fontWeight:900, fontStyle:'italic',
                color:'rgba(240,248,255,0.25)', letterSpacing:'-0.04em',
              }}>SA</div>
              <img
                src="https://dreamfoxverse.com/wp-content/uploads/2026/03/dfv-founder-shinabaze-scaled.jpg"
                alt="Shinabaze Ajiya — Founder of DreamFoxVerse"
                loading="lazy"
                onError={(e) => { e.currentTarget.style.display = 'none'; }}
                style={{
                  position:'absolute', inset:0, width:'100%', height:'100%',
                  objectFit:'cover', objectPosition:'top',
                  filter:'saturate(1.05) contrast(1.02)',
                }}
              />
              {/* subtle gradient polish on top of the image */}
              <div style={{
                position:'absolute', inset:0, pointerEvents:'none',
                background:'linear-gradient(180deg, transparent 60%, rgba(2,11,24,0.55) 100%)',
              }}/>
              {/* caption */}
              <div style={{
                position:'absolute', bottom:14, left:16, right:16,
                fontFamily:'var(--font-mono)', fontSize:10, color:'rgba(240,248,255,0.72)',
                letterSpacing:'0.18em', textTransform:'uppercase',
                display:'flex', justifyContent:'space-between', zIndex:2,
              }}>
                <span>SHINABAZE · AJIYA</span>
                <span style={{ color:'var(--accent)' }}>● LIVE</span>
              </div>
              {/* bracket corners */}
              <div style={{ position:'absolute', top:12, left:12, width:16, height:16, borderTop:'1px solid rgba(var(--accent-rgb),0.6)', borderLeft:'1px solid rgba(var(--accent-rgb),0.6)', zIndex:2 }}/>
              <div style={{ position:'absolute', top:12, right:12, width:16, height:16, borderTop:'1px solid rgba(var(--accent-rgb),0.6)', borderRight:'1px solid rgba(var(--accent-rgb),0.6)', zIndex:2 }}/>
              <div style={{ position:'absolute', bottom:12, left:12, width:16, height:16, borderBottom:'1px solid rgba(var(--accent-rgb),0.6)', borderLeft:'1px solid rgba(var(--accent-rgb),0.6)', zIndex:2 }}/>
              <div style={{ position:'absolute', bottom:12, right:12, width:16, height:16, borderBottom:'1px solid rgba(var(--accent-rgb),0.6)', borderRight:'1px solid rgba(var(--accent-rgb),0.6)', zIndex:2 }}/>
            </div>

            {/* floating credential card */}
            <div className="glass-card about-floating-card" style={{
              position:'absolute', bottom:-20, right:0, padding:16, minWidth:200,
              animation:'float 6s ease-in-out infinite',
            }}>
              <div className="mono" style={{ fontSize:10, color:'var(--muted)', marginBottom:4, letterSpacing:'0.14em', textTransform:'uppercase' }}>Founder</div>
              <div className="serif" style={{ fontSize:15, fontWeight:700, color:'var(--text)' }}>DreamFoxVerse</div>
              <div style={{ fontSize:11, color:'var(--accent)', marginTop:2, fontFamily:'var(--font-mono)' }}>AI Automation Agency</div>
            </div>
          </div>

          {/* Text column */}
          <div style={{
            opacity: vis?1:0, transform: vis?'translateX(0)':'translateX(30px)',
            transition:'all .9s cubic-bezier(.22,1,.36,1) .15s',
          }}>
            <Pill>About Shinabaze</Pill>
            <h2 className="display" style={{ fontSize:'clamp(32px,4vw,54px)', marginTop:18, marginBottom:24 }}>
              I built a fully autonomous agency on the <span style={{ fontStyle:'italic', color:'var(--accent)' }}>same tools I offer you.</span>
            </h2>
            <p style={{ fontSize:16, color:'var(--muted-strong)', lineHeight:1.85, marginBottom:20 }}>
              I was running ads the old way. Waiting on designers. Waiting on approvals. Watching budgets bleed while trends moved on without us. There had to be a faster system.
            </p>
            <p style={{ fontSize:16, color:'var(--muted-strong)', lineHeight:1.85, marginBottom:28 }}>
              So I built one. DreamFoxVerse runs on the same AI video and automation stack I build for clients. The ads create themselves. The leads qualify themselves. The content publishes itself. That's what I build for you.
            </p>

            <div style={{ display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:10, marginBottom:28 }} className="about-metrics">
              {METRICS.map(m => (
                <div key={m.label} className="glass-card" style={{ padding:14 }}>
                  <div style={{ fontSize:10, color:'var(--muted)', marginBottom:4, fontFamily:'var(--font-mono)', textTransform:'uppercase', letterSpacing:'0.08em' }}>{m.label}</div>
                  <div style={{ fontSize:22, fontWeight:700, color:'var(--success)', fontFamily:'var(--font-mono)' }}>{m.value}</div>
                </div>
              ))}
            </div>

            <div style={{ display:'flex', flexWrap:'wrap', gap:12 }}>
              <a href="https://dreamfoxverse.com" target="_blank" rel="noopener noreferrer" className="btn-ghost">See Full Portfolio →</a>
              <a href="#contact" className="btn-primary">Start a Project</a>
            </div>
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 900px){
          .about-grid{ grid-template-columns: 1fr !important; gap: 48px !important; }
          .about-metrics{ grid-template-columns: repeat(2,1fr) !important; }
        }
        @media (max-width: 480px){
          .about-floating-card {
            right: 12px !important;
            bottom: 12px !important;
          }
        }
      `}</style>
    </section>
  );
}

window.AboutSection = AboutSection;