// WhatsApp-style chat for Send My CV — green theme, faithful to WhatsApp.
const ChatMockup = () => {
  const WA_GREEN = "#075E54";
  const WA_GREEN_LIGHT = "#128C7E";
  return (
    <div className="cm-screen">
      {/* Android status bar */}
      <div className="cm-statusbar" style={{ background: WA_GREEN }}>
        <span className="cm-time-status">9:41</span>
        <div className="cm-status-icons">
          <svg width="12" height="10" viewBox="0 0 14 10" fill="white"><rect x="0" y="6" width="2" height="4" rx="0.5"/><rect x="3" y="4" width="2" height="6" rx="0.5"/><rect x="6" y="2" width="2" height="8" rx="0.5"/><rect x="9" y="0" width="2" height="10" rx="0.5"/></svg>
          <svg width="14" height="10" viewBox="0 0 16 12" fill="white"><path d="M8 11.5L0.5 4a10.5 10.5 0 0115 0L8 11.5z"/></svg>
          <svg width="18" height="10" viewBox="0 0 22 12" fill="none"><rect x="0.5" y="1.5" width="18" height="9" rx="2" stroke="white" strokeWidth="1"/><rect x="2.5" y="3.5" width="14" height="5" rx="0.5" fill="white"/><rect x="19.5" y="4.5" width="1.5" height="3" rx="0.5" fill="white"/></svg>
        </div>
      </div>

      {/* WhatsApp app bar */}
      <div className="cm-topbar cm-topbar-android" style={{ background: WA_GREEN_LIGHT }}>
        <div className="cm-topbar-left">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M19 12H5M5 12l6-6M5 12l6 6" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>
          <div className="cm-avatar cm-avatar-android" style={{ background: "#25D366" }}>
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
              <path d="M12 12a4 4 0 100-8 4 4 0 000 8zM4 20a8 8 0 0116 0" stroke="white" strokeWidth="2" strokeLinecap="round"/>
            </svg>
          </div>
          <div className="cm-title-block">
            <span className="cm-name-android">Send My CV</span>
            <span className="cm-presence">online</span>
          </div>
        </div>
        <div className="cm-topbar-actions">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="white"><path d="M17 10.5V7a1 1 0 00-1-1H4a1 1 0 00-1 1v10a1 1 0 001 1h12a1 1 0 001-1v-3.5l4 4v-11l-4 4z"/></svg>
          <svg width="14" height="18" viewBox="0 0 6 18" fill="white"><circle cx="3" cy="3" r="1.6"/><circle cx="3" cy="9" r="1.6"/><circle cx="3" cy="15" r="1.6"/></svg>
        </div>
      </div>

      {/* Chat area */}
      <div className="cm-thread">
        {/* Bot message 1 */}
        <div className="cm-row cm-row-in">
          <div className="cm-bubble cm-in">
            <p><span className="cm-emoji">👋</span> Hello! Welcome to <b>SendMyCV</b>.</p>
            <p>We'll help you build a professional CV — <b>for FREE</b> — right here on WhatsApp.</p>
            <p>No app needed. It takes about 10 minutes.</p>
            <p>Let's do this! <span className="cm-emoji">💪</span></p>
            <div className="cm-cta"><span>‹ <b>Start now</b> →</span></div>
            <span className="cm-time">11:25</span>
          </div>
        </div>

        {/* User reply */}
        <div className="cm-row cm-row-out">
          <div className="cm-bubble cm-out">
            <p className="cm-out-text">Start now →</p>
            <span className="cm-time">
              11:25
              <svg width="14" height="10" viewBox="0 0 16 11" className="cm-ticks">
                <path d="M1 6.2l3 3 6-6M6 9.2l3 0 6-6" stroke="#34B7F1" strokeWidth="1.4" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
              </svg>
            </span>
          </div>
        </div>

        {/* Bot message 2 — POPIA upfront message */}
        <div className="cm-row cm-row-in">
          <div className="cm-bubble cm-in">
            <p><span className="cm-emoji">👋</span> Before we start — here is how SendMyCV works:</p>
            <p className="cm-line">✅ You answer a few questions about yourself</p>
            <p className="cm-line">✅ We build your CV for you</p>
            <p className="cm-line">✅ We send it to you as a PDF on WhatsApp</p>
            <p>To do this, we need to save your name, contact details and work history on our secure system.</p>
            <p>👉 You can type <b>RESTART</b> at any time to delete everything and start over.</p>
            <p>We will never sell your information to anyone.</p>
            <p>Do you agree to continue?</p>
            <p>💡 Tip: Once your CV is ready, type <b>TIPS</b> at any time</p>
          </div>
        </div>
      </div>
    </div>
  );
};

window.ChatMockup = ChatMockup;