/* global React */

const SERVICES = [
  { num: '01', name: 'Proposals', desc: 'AI-powered RFP and SOQ response. Built for construction management firms and high-volume bidders. Faster turnaround, sharper win-rate.' },
  { num: '02', name: 'Development', desc: 'Custom software and applied AI, built fractional. We work inside your repos and your cloud — your environment, your IP, end of story.' },
  { num: '03', name: 'Consulting', desc: 'AI strategy and business advisory for leaders who need a thinking partner, not a deck. Outcomes-first, jargon-free.' },
  { num: '04', name: 'Recruiting', desc: 'AI-enhanced sourcing and matching. Time-to-fill cut by ~60%. Built for staffing firms and growth-stage teams that need real people, fast.' },
  { num: '05', name: 'Marketing', desc: 'AI-enabled content, campaign, and creative support. Production velocity without the in-house overhead.' },
];

function Work() {
  return (
    <section className="fk-section" id="work" data-screen-label="03 Work">
      <div className="fk-section__inner">
        <div className="section-marker">
          <span className="num">02 —</span><span>work</span>
        </div>
        <div className="fk-section__head">
          <div className="head-row">
            <h2 className="fk-h1" style={{ maxWidth: '14ch' }}>
              what I'm <span className="fk-display__caveat">actually building.</span>
            </h2>
            <p>
              Purely Works is an AI-enabled services company. Five services, one team per client, paid for
              what you actually use. AI does the heavy lifting; experienced humans refine, validate, and ship.
            </p>
          </div>
        </div>

        <div className="work-feature">
          <div className="work-feature__media">
            <span className="work-feature__badge">Active · founded 2024</span>
            <img src="assets/photos/camp-truck-laptop.jpg" alt="Farid working from a campsite, laptop on the tailgate" />
          </div>
          <div className="work-feature__copy">
            <div>
              <div className="fk-eyebrow" style={{ marginBottom: 12 }}>
                <span style={{ color: 'var(--accent)' }}>Flagship —</span> Purely Works Inc.
              </div>
              <h3>
                AI accelerates. <span className="accent">Humans finish.</span>
              </h3>
              <p style={{ marginTop: 14 }}>
                A fractional, AI-augmented team that plugs into your environment, owns nothing, and ships
                like it does. You keep 100% of the code, the data, and the IP — from the moment it's
                written. Month-to-month. Scale up or down with 30 days notice.
              </p>
              <div className="work-feature__chips" style={{ marginTop: 18 }}>
                <span>AI-first</span>
                <span>100% client IP</span>
                <span>Month-to-month</span>
                <span>Remote-first</span>
                <span>Partner, not vendor</span>
              </div>
            </div>
            <div className="work-feature__stats">
              <div><div className="n">~14</div><div className="l">people, scaling to 20</div></div>
              <div><div className="n">5.5x</div><div className="l">FTE equivalent / mo</div></div>
              <div><div className="n">100%</div><div className="l">client IP, day one</div></div>
            </div>
            <div className="work-feature__cta">
              <a className="fk-btn fk-btn--accent" href="https://purelyworks.com" target="_blank" rel="noreferrer">
                Visit purelyworks.com <span aria-hidden="true">→</span>
              </a>
              <a className="fk-btn fk-btn--ghost" href="#contact" onClick={(e) => {
                e.preventDefault();
                document.getElementById('contact')?.scrollIntoView({ behavior: 'smooth', block: 'start' });
              }}>
                Start a project
              </a>
            </div>
          </div>
        </div>

        <div className="work-services">
          {SERVICES.map((s) => (
            <div key={s.num}>
              <span className="num">{s.num}</span>
              <h4>{s.name.toLowerCase()}</h4>
              <p>{s.desc}</p>
            </div>
          ))}
        </div>

      </div>
    </section>
  );
}

window.Work = Work;