// Per-account voice section: side-by-side voice samples
const VoiceSection = () => {
  return (
    <section id="features" style={{ background:'var(--bg)' }}>
      <div className="container">
        <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap: 80, alignItems:'center' }}>
          <div>
            <div className="eyebrow"><span className="dot" /> {t('voice.eyebrow')}</div>
            <h2 style={{ marginTop: 18 }}>{t('voice.h2_line1')}<br/><span className="serif" style={{ fontStyle:'italic' }}>{t('voice.h2_line2')}</span></h2>
            <p className="lede" style={{ marginTop: 22, maxWidth: 520 }}>
              {t('voice.lede')}
            </p>
            <ul style={{ marginTop: 28, padding: 0, listStyle:'none', display:'grid', gap: 14 }}>
              {[
                [t('voice.bullet1_t'), t('voice.bullet1_d')],
                [t('voice.bullet2_t'), t('voice.bullet2_d')],
                [t('voice.bullet3_t'), t('voice.bullet3_d')],
              ].map(([label, desc]) => (
                <li key={label} style={{ display:'flex', gap: 14, alignItems:'flex-start' }}>
                  <span style={{
                    width: 22, height: 22, borderRadius: 6, flexShrink: 0,
                    background:'rgba(155,111,224,0.15)', color:'var(--purple)',
                    display:'flex', alignItems:'center', justifyContent:'center',
                  }}><Icons.Check size={14} stroke={2.4} /></span>
                  <div>
                    <div style={{ fontWeight: 600, fontSize: 15 }}>{label}</div>
                    <div style={{ color:'var(--muted)', fontSize: 14, marginTop: 2 }}>{desc}</div>
                  </div>
                </li>
              ))}
            </ul>
          </div>

          {/* Voice comparison cards */}
          <div style={{ display:'grid', gap: 18 }}>
            <VoiceCard
              account={t('voice.card_account_work')}
              email="jordan@company.com"
              color="linear-gradient(135deg,#7B7BE8,#6BA0F0)"
              prompt={t('voice.card_prompt')}
              reply={t('voice.card_work_reply')}
              tags={[t('voice.card_work_tag1'), t('voice.card_work_tag2'), t('voice.card_work_tag3')]}
            />
            <VoiceCard
              account={t('voice.card_account_personal')}
              email="jordan@me.com"
              color="linear-gradient(135deg,#E879B5,#C26FD9)"
              prompt={t('voice.card_prompt')}
              reply={t('voice.card_personal_reply')}
              tags={[t('voice.card_personal_tag1'), t('voice.card_personal_tag2'), t('voice.card_personal_tag3')]}
            />
          </div>
        </div>
      </div>
    </section>
  );
};

const VoiceCard = ({ account, email, color, prompt, reply, tags }) => (
  <div className="card" style={{ overflow:'hidden', boxShadow:'0 12px 40px -20px rgba(50,30,100,0.2)', fontFamily: '-apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif' }}>
    {/* Sender row — matches real app */}
    <div style={{ margin:'18px 18px 0', padding:'10px 12px', background:'#F4F4F6', borderRadius: 8, display:'flex', alignItems:'center', gap: 8, fontSize: 13 }}>
      <span style={{ width: 7, height: 7, borderRadius: 999, background:'#0A84FF', display:'inline-block' }} />
      <span style={{ fontWeight: 600 }}>{email}</span>
      <span style={{ color:'#8E8E93' }}>·</span>
      <span style={{ color:'#3A3A3C', fontSize: 12 }}>{account} {t('voice.card_mailbox')}</span>
      <div style={{ flex: 1 }} />
      <div className="chip" style={{ background:'rgba(40,200,64,0.12)', color:'#1f8c3a', padding:'3px 8px', fontSize: 11 }}>
        <span style={{ width: 5, height: 5, borderRadius: 999, background:'#28C840' }} />{t('voice.card_style_learned')}
      </div>
    </div>

    {/* Active action chip */}
    <div style={{ margin:'12px 18px 0', display:'flex', gap: 6, alignItems:'center' }}>
      <span style={{
        display:'inline-flex', alignItems:'center', gap: 6,
        padding:'6px 10px', borderRadius: 8,
        background:'#E6F0FE', border:'1px solid #B6D2F8',
        color:'#1166DA', fontSize: 12, fontWeight: 500,
      }}>
        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="4" width="18" height="16" rx="2"/><circle cx="12" cy="11" r="2.5"/><path d="M7 18a5 5 0 0 1 10 0"/></svg>
        {t('voice.card_action_label')}
      </span>
      <span style={{ fontSize: 11, color:'var(--muted)' }}>· {t('voice.card_steered_label')} "{prompt}"</span>
    </div>

    {/* Output area */}
    <div style={{ margin:'12px 18px 0', padding:'16px 18px', background:'#F6F6F8', borderRadius: 10, fontSize: 13.5, color:'#1d1d1f', lineHeight: 1.6, whiteSpace:'pre-wrap' }}>
      {reply}
    </div>

    {/* Insert button */}
    <div style={{ margin:'14px 18px 16px', display:'flex', gap: 8 }}>
      <div style={{
        flex: 1, height: 42, borderRadius: 10,
        background:'linear-gradient(90deg, #F49AB8 0%, #C57FE0 50%, #7B7BE8 100%)',
        color:'white', fontSize: 13, fontWeight: 600,
        display:'inline-flex', alignItems:'center', justifyContent:'center', gap: 8,
        boxShadow:'inset 0 1px 0 rgba(255,255,255,0.3)',
      }}>
        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 3v10M8 9l4 4 4-4M5 21h14"/></svg>
        {t('voice.card_insert')}
      </div>
    </div>

    {/* Style tags */}
    <div style={{ padding:'12px 18px', borderTop:'1px solid var(--line)', display:'flex', gap: 6, flexWrap:'wrap', alignItems:'center' }}>
      <span style={{ fontSize: 11, color:'var(--muted)', fontWeight: 500, marginRight: 4 }}>{t('voice.card_learned_style')}</span>
      {tags.map(tag => <span key={tag} style={{ fontSize: 11, padding:'4px 9px', borderRadius: 999, background:'rgba(15,11,20,0.05)', color:'var(--ink-2)', fontWeight: 500 }}>{tag}</span>)}
    </div>
  </div>
);

window.VoiceSection = VoiceSection;