// CV preview matching mock-full-cv.pdf — Sipho Dlamini, terracotta theme
const TERRACOTTA = "#C85A3C";

const CvPreview = () => {
  return (
    <div className="cv-doc">
      {/* Header */}
      <div className="cv-head">
        <h3 className="cv-name">SIPHO DLAMINI</h3>
        <div className="cv-role" style={{ color: TERRACOTTA }}>WAREHOUSE SUPERVISOR</div>
        <div className="cv-contact">
          <span>+27 83 123 4567</span>
          <span className="cv-dot">·</span>
          <span>sipho.dlamini@gmail.com</span>
        </div>
        <div className="cv-meta-row">
          <div><strong>Available:</strong> Available immediately</div>
          <div><strong>Location:</strong> Johannesburg</div>
          <div><strong>Right to work:</strong> South African Citizen</div>
          <div><strong>Employment Equity:</strong> Black African | Male</div>
        </div>
      </div>

      {/* About */}
      <div className="cv-section">
        <div className="cv-h" style={{ color: TERRACOTTA }}>ABOUT ME</div>
        <p className="cv-p">
          I am a dedicated and hardworking professional with over 6 years of experience in retail and logistics. I work well under pressure, take initiative, and always aim to deliver excellent service to customers and colleagues alike.
        </p>
      </div>

      {/* Work */}
      <div className="cv-section">
        <div className="cv-h" style={{ color: TERRACOTTA }}>WORK EXPERIENCE</div>

        <div className="cv-job">
          <div className="cv-job-meta">
            <span className="cv-current" style={{ background: TERRACOTTA }}>CURRENT</span>
            <div>3 years</div>
            <div className="cv-loc">Johannesburg</div>
          </div>
          <div className="cv-job-body">
            <div className="cv-job-title">Warehouse Supervisor</div>
            <div className="cv-job-co">Massmart</div>
            <ul className="cv-bullets">
              <li>Lead a team of 12 warehouse staff across receiving, picking, packing and dispatch operations.</li>
              <li>Maintained inventory accuracy and ensured full compliance with health and safety standards.</li>
              <li>Reduced stock discrepancies by 34% by introducing a daily cycle-count process.</li>
            </ul>
          </div>
        </div>

        <div className="cv-job">
          <div className="cv-job-meta">
            <div>2 years</div>
            <div className="cv-loc">Soweto</div>
          </div>
          <div className="cv-job-body">
            <div className="cv-job-title">Store Assistant</div>
            <div className="cv-job-co">Shoprite</div>
            <ul className="cv-bullets">
              <li>Assisted customers on the shop floor and managed daily shelf replenishment.</li>
              <li>Processed till transactions and handled end-of-shift cash-up procedures accurately.</li>
              <li>Received Employee of the Month award twice for outstanding customer service scores.</li>
            </ul>
          </div>
        </div>

        <div className="cv-job">
          <div className="cv-job-meta">
            <div>1 year 4 months</div>
            <div className="cv-loc">Johannesburg South</div>
          </div>
          <div className="cv-job-body">
            <div className="cv-job-title">Delivery Driver</div>
            <div className="cv-job-co">Takealot</div>
            <ul className="cv-bullets">
              <li>Executed last-mile deliveries across the greater Johannesburg area with consistent accuracy.</li>
              <li>Maintained vehicle logbooks and ensured accurate proof-of-delivery documentation.</li>
              <li>Achieved a 98% on-time delivery rate over 12 consecutive months.</li>
            </ul>
          </div>
        </div>
      </div>

      {/* Education */}
      <div className="cv-section">
        <div className="cv-h" style={{ color: TERRACOTTA }}>EDUCATION</div>
        <div className="cv-edu">
          <div className="cv-edu-label">Education</div>
          <div>
            <div className="cv-edu-title">Bachelor of Commerce in Supply Chain Management</div>
            <div className="cv-edu-sub">Degree or higher — University of Johannesburg</div>
          </div>
        </div>
        <div className="cv-edu">
          <div className="cv-edu-label">Education</div>
          <div>
            <div className="cv-edu-title">Certificate in Logistics and Warehousing (NQF5)</div>
            <div className="cv-edu-sub">Certificate or Diploma — Rosebank College</div>
          </div>
        </div>
        <div className="cv-edu">
          <div className="cv-edu-label">Education</div>
          <div>
            <div className="cv-edu-title">Matric (Grade 12) <span className="cv-check">Mathematics ✓</span></div>
            <div className="cv-edu-sub">Orlando High School</div>
          </div>
        </div>
      </div>

      {/* Skills */}
      <div className="cv-section">
        <div className="cv-h" style={{ color: TERRACOTTA }}>SKILLS</div>
        <div className="cv-skills">
          <span>Team leadership</span>
          <span>Inventory management</span>
          <span>Customer service</span>
          <span>Microsoft Excel</span>
          <span>Stock control</span>
          <span>Health and safety compliance</span>
          <span>Time management</span>
          <span>Problem solving</span>
          <span>Cash handling</span>
          <span>Forklift operation</span>
        </div>
      </div>

      {/* Languages */}
      <div className="cv-section">
        <div className="cv-h" style={{ color: TERRACOTTA }}>LANGUAGES</div>
        <div className="cv-langs">
          <div><strong>Zulu</strong> <span className="cv-lang-level">Home language</span></div>
          <div><strong>English</strong> <span className="cv-lang-level">Fluent</span></div>
          <div><strong>Afrikaans</strong> <span className="cv-lang-level">Conversational</span></div>
        </div>
      </div>

      {/* References */}
      <div className="cv-section">
        <div className="cv-h" style={{ color: TERRACOTTA }}>REFERENCES</div>
        <p className="cv-p">Available on request.</p>
      </div>

      <div className="cv-foot">
        <span>Updated: April 2026 (created on WhatsApp using SendMyCV)</span>
        <span>CURRICULUM VITAE</span>
      </div>
    </div>
  );
};

window.CvPreview = CvPreview;