// 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" /> Per-account voice learning</div>
            <h2 style={{ marginTop: 18 }}>Two inboxes.<br/><span className="serif" style={{ fontStyle:'italic' }}>Two different yous.</span></h2>
            <p className="lede" style={{ marginTop: 22, maxWidth: 520 }}>
              MailTwin quietly indexes your sent mail per account — work and personal — and learns
              the voice you actually use in each. Your reply to a board member doesn't read like a
              text to your sister. And vice versa.
            </p>
            <ul style={{ marginTop: 28, padding: 0, listStyle:'none', display:'grid', gap: 14 }}>
              {[
                ['Indexed locally', 'Sent-mail vectors live in ~/Library, never leave the Mac.'],
                ['Account-scoped', 'Switching mailbox switches voice automatically.'],
                ['Tunable', 'Add a style note per account: "more concise", "warmer", "no exclamation points".'],
              ].map(([t, d]) => (
                <li key={t} 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 }}>{t}</div>
                    <div style={{ color:'var(--muted)', fontSize: 14, marginTop: 2 }}>{d}</div>
                  </div>
                </li>
              ))}
            </ul>
          </div>

          {/* Voice comparison cards */}
          <div style={{ display:'grid', gap: 18 }}>
            <VoiceCard
              account="Work"
              email="jordan@company.com"
              color="linear-gradient(135deg,#7B7BE8,#6BA0F0)"
              prompt="Push the Q3 review to next week."
              reply={`Hi team,\n\nQuick heads-up — I'd like to push our Q3 review by a week so we can incorporate the latest pipeline data. New target is Thu Aug 15. Calendar invites going out shortly.\n\nThanks for the flex,\nJordan`}
              tags={['Polite', 'Direct', 'Sign-off: full name']}
            />
            <VoiceCard
              account="Personal"
              email="jordan@me.com"
              color="linear-gradient(135deg,#E879B5,#C26FD9)"
              prompt="Push the Q3 review to next week."
              reply={`hey — gonna bump our q3 thing a week, need a bit more pipeline data first. new date: aug 15. cal invite incoming.\n\nta!\nj`}
              tags={['Lowercase', 'Casual', 'Sign-off: initial']}
            />
          </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} 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' }} />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>
        Reply (my style)
      </span>
      <span style={{ fontSize: 11, color:'var(--muted)' }}>· Steered: "{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>
        Insert reply into Mail
      </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 }}>Learned style:</span>
      {tags.map(t => <span key={t} style={{ fontSize: 11, padding:'4px 9px', borderRadius: 999, background:'rgba(15,11,20,0.05)', color:'var(--ink-2)', fontWeight: 500 }}>{t}</span>)}
    </div>
  </div>
);

window.VoiceSection = VoiceSection;