// SolutionExtras: optional sections that add depth to specific pages.
// Use-case grid, integrations strip, mini-testimonial, onboarding timeline.

// Use-case grid: shows 3-6 concrete scenarios with role + scenario + outcome
const SolUseCases = ({ kicker, title, lead, items }) => (
  <section style={{ padding:'96px 24px', background:'#FAFAFA', borderTop:'1px solid #E5E5E5', borderBottom:'1px solid #E5E5E5' }}>
    <div style={{ maxWidth: 1200, margin:'0 auto' }}>
      <div style={{ maxWidth: 720, marginBottom: 56 }}>
        {kicker && (
          <div style={{ font:'500 12px Roboto, sans-serif', letterSpacing:'0.08em', textTransform:'uppercase', color:'#737373', marginBottom: 12 }}>{kicker}</div>
        )}
        <h2 style={{ font:'700 40px/1.15 Roboto, sans-serif', letterSpacing:'-0.01em', margin:'0 0 16px', textWrap:'balance' }}>{title}</h2>
        {lead && <p style={{ font:'400 17px/1.6 Roboto, sans-serif', color:'#525252', margin: 0, textWrap:'pretty' }}>{lead}</p>}
      </div>
      <div style={{ display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap: 16 }}>
        {items.map((u,i)=>(
          <div key={i} style={{
            padding: 24, borderRadius: 10, background:'#fff', border:'1px solid #E5E5E5',
            display:'flex', flexDirection:'column', gap: 10,
          }}>
            <div style={{ display:'flex', alignItems:'center', gap: 8, marginBottom: 4 }}>
              <div style={{ width: 28, height: 28, borderRadius: 6, background:'#FFF6BF', display:'inline-flex', alignItems:'center', justifyContent:'center' }}>
                <Icon name={u.icon} size={14} stroke={2} color="#0A0A0A"/>
              </div>
              <div style={{ font:'500 12px Roboto, sans-serif', letterSpacing:'0.06em', textTransform:'uppercase', color:'#737373' }}>{u.role}</div>
            </div>
            <div style={{ font:'600 17px/1.35 Roboto, sans-serif', color:'#0A0A0A' }}>{u.scenario}</div>
            <div style={{ font:'400 14px/1.55 Roboto, sans-serif', color:'#525252', flex: 1 }}>{u.outcome}</div>
            {u.metric && (
              <div style={{
                marginTop: 10, padding:'8px 12px', background:'#FFF6BF', borderRadius: 6,
                font:'600 13px Roboto, sans-serif', color:'#0A0A0A',
                display:'inline-flex', alignItems:'center', gap: 6, alignSelf:'flex-start',
              }}>
                <Icon name="zap" size={12} stroke={2}/> {u.metric}
              </div>
            )}
          </div>
        ))}
      </div>
    </div>
  </section>
);

// Integrations strip: 4-row tag cloud of supported tools
const SolIntegrations = ({ title, lead, tools }) => (
  <section style={{ padding:'80px 24px', background:'#fff' }}>
    <div style={{ maxWidth: 1100, margin:'0 auto', textAlign:'center' }}>
      <h2 style={{ font:'700 32px/1.2 Roboto, sans-serif', letterSpacing:'-0.01em', margin:'0 0 12px' }}>{title}</h2>
      {lead && <p style={{ font:'400 16px/1.55 Roboto, sans-serif', color:'#525252', margin:'0 auto 40px', maxWidth: 600 }}>{lead}</p>}
      <div style={{ display:'flex', flexWrap:'wrap', justifyContent:'center', gap: 8 }}>
        {tools.map((t,i)=>(
          <div key={i} style={{
            padding:'10px 18px', borderRadius: 999, border:'1px solid #E5E5E5',
            background: i % 7 === 3 ? '#FFD500' : '#fff',
            font:'500 14px Roboto, sans-serif', color:'#0A0A0A',
          }}>{t}</div>
        ))}
      </div>
    </div>
  </section>
);

// Mini-testimonial: single quote, attributed
const SolQuote = ({ quote, author, role }) => (
  <section style={{ padding:'96px 24px', background:'#fff' }}>
    <div style={{ maxWidth: 880, margin:'0 auto' }}>
      <div style={{ font:'700 80px Roboto, sans-serif', color:'#FFD500', lineHeight: 0.6, marginBottom: 16 }}>“</div>
      <blockquote style={{
        margin: 0, font:'500 28px/1.4 Roboto, sans-serif', letterSpacing:'-0.01em',
        color:'#0A0A0A', textWrap:'balance',
      }}>
        {quote}
      </blockquote>
      <div style={{ marginTop: 32, display:'flex', alignItems:'center', gap: 14 }}>
        <div style={{
          width: 48, height: 48, borderRadius:'50%', background:'#FFF6BF',
          display:'inline-flex', alignItems:'center', justifyContent:'center',
          font:'600 16px Roboto, sans-serif', color:'#0A0A0A',
        }}>{author.split(' ').map(n=>n[0]).join('').slice(0,2)}</div>
        <div>
          <div style={{ font:'600 15px Roboto, sans-serif', color:'#0A0A0A' }}>{author}</div>
          <div style={{ font:'400 13px Roboto, sans-serif', color:'#737373' }}>{role}</div>
        </div>
      </div>
    </div>
  </section>
);

// Onboarding timeline: numbered steps with day markers
const SolOnboarding = ({ kicker, title, steps }) => (
  <section style={{ padding:'96px 24px', background:'#FAFAFA' }}>
    <div style={{ maxWidth: 1000, margin:'0 auto' }}>
      <div style={{ marginBottom: 48 }}>
        {kicker && (
          <div style={{ font:'500 12px Roboto, sans-serif', letterSpacing:'0.08em', textTransform:'uppercase', color:'#737373', marginBottom: 12 }}>{kicker}</div>
        )}
        <h2 style={{ font:'700 40px/1.15 Roboto, sans-serif', letterSpacing:'-0.01em', margin: 0, textWrap:'balance', maxWidth: 700 }}>{title}</h2>
      </div>
      <div style={{ display:'flex', flexDirection:'column', gap: 0 }}>
        {steps.map((s,i)=>(
          <div key={i} style={{
            display:'grid', gridTemplateColumns:'140px 1fr', gap: 32,
            paddingBottom: i === steps.length-1 ? 0 : 32,
            paddingTop: i === 0 ? 0 : 32,
            borderBottom: i === steps.length-1 ? 'none' : '1px solid #E5E5E5',
          }}>
            <div>
              <div style={{ font:'500 11px Roboto, sans-serif', letterSpacing:'0.08em', textTransform:'uppercase', color:'#737373', marginBottom: 6 }}>{s.when}</div>
              <div style={{
                display:'inline-flex', alignItems:'center', justifyContent:'center',
                width: 40, height: 40, borderRadius:'50%', background:'#FFD500',
                font:'700 16px Roboto, sans-serif', color:'#0A0A0A',
              }}>{i+1}</div>
            </div>
            <div>
              <div style={{ font:'600 20px/1.3 Roboto, sans-serif', color:'#0A0A0A', marginBottom: 8 }}>{s.title}</div>
              <div style={{ font:'400 15px/1.6 Roboto, sans-serif', color:'#525252' }}>{s.body}</div>
            </div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

window.SolUseCases = SolUseCases;
window.SolIntegrations = SolIntegrations;
window.SolQuote = SolQuote;
window.SolOnboarding = SolOnboarding;