const TraceProblem = () => {
  const t = window.TRACE;
  const lines = [
    'What did you do today?',
    'Was that billable, or was it just... work?',
    'Nobody remembers Tuesday by Friday.',
  ];
  return (
    <section className="trace-problem" style={{
      padding: '90px 48px', fontFamily: t.sans,
      display: 'flex', flexDirection: 'column', alignItems: 'center',
      textAlign: 'center',
    }}>
      <Eyebrow style={{ marginBottom: 20 }}>The old way</Eyebrow>
      <div style={{ maxWidth: 720 }}>
        {lines.map((l, i) => (
          <div key={l} style={{
            fontFamily: t.serif,
            fontSize: 'clamp(22px, 3vw, 34px)',
            lineHeight: 1.4,
            color: i === lines.length - 1 ? t.ink : t.dim,
            fontStyle: i === 1 ? 'italic' : 'normal',
          }}>
            {l}
          </div>
        ))}
      </div>
      <p style={{ marginTop: 28, fontSize: 15, color: t.faint, maxWidth: 460 }}>
        Manual timers get forgotten. Guessed hours get under-billed.
        Every unlogged minute is money you already earned and never charged for.
      </p>
    </section>
  );
};

window.TraceProblem = TraceProblem;