function TaskCard({ task, time, detail, delay }) {
  const [revealed, setRevealed] = React.useState(false);

  return (
    <motion.div
      {...fadeUp(delay)}
      onClick={() => setRevealed((o) => !o)}
      style={{
        background: revealed ? 'rgba(237,233,225,0.04)' : 'rgba(237,233,225,0.02)',
        border: `1px solid ${revealed ? 'rgba(237,233,225,0.12)' : 'rgba(237,233,225,0.07)'}`,
        borderRadius: 10, padding: '28px 30px',
        cursor: 'pointer',
        transition: 'background 0.3s ease, border-color 0.3s ease',
        position: 'relative', overflow: 'hidden',
        display: 'flex', flexDirection: 'column'
      }}>
      
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 16 }}>
        <div style={{ fontFamily: "'DM Sans'", fontSize: 13, fontWeight: 500, color: 'var(--fg)', lineHeight: 1.4, flex: 1, marginRight: 10 }}>{task}</div>
        <div style={{
          fontFamily: "'DM Sans'", fontSize: 11, color: 'var(--muted)',
          background: 'rgba(237,233,225,0.05)', padding: '3px 8px',
          borderRadius: 20, whiteSpace: 'nowrap', flexShrink: 0,
          border: '1px solid rgba(237,233,225,0.07)'
        }}>{time}</div>
      </div>

      <div style={{ height: 3, background: 'rgba(237,233,225,0.06)', borderRadius: 2, marginBottom: 14 }}>
        <motion.div
          style={{ height: '100%', background: 'rgba(237,233,225,0.18)', borderRadius: 2 }}
          initial={{ width: '0%' }}
          whileInView={{ width: '100%' }}
          viewport={{ once: true }}
          transition={{ duration: 1.2, delay: delay + 0.3, ease: 'easeOut' }} />
        
      </div>

      <motion.div
        animate={{ opacity: revealed ? 1 : 0, y: revealed ? 0 : 6, height: revealed ? 'auto' : 0 }}
        transition={{ duration: 0.25 }}
        style={{ fontFamily: "'DM Sans'", fontSize: 13, color: 'var(--muted)', lineHeight: 1.6, overflow: 'hidden' }}>
        
        {detail}
      </motion.div>

      {!revealed &&
      <div style={{ fontFamily: "'DM Sans'", fontSize: 12, fontWeight: 600, color: 'rgba(237,233,225,0.25)', marginTop: 'auto', paddingTop: 12, textAlign: 'center' }}>
          'click to read'
        </div>
      }
    </motion.div>);

}

function Problem() {
  const tasks = [
  {
    task: "Quote takes 90 minutes to write, every single time.",
    time: "90 min/quote",
    detail: "Your estimator pulls numbers from three different places, does the math by hand, formats the PDF, and checks it twice. It works. But multiplied across every job, that is weeks of time spent on paperwork instead of the work itself."
  },
  {
    task: "Weekly report built on Sunday afternoon, by hand.",
    time: "2 to 3 hrs/week",
    detail: "Someone pulls the numbers, pastes them into a spreadsheet, formats it, and writes a summary. Forty-eight weeks a year. The report does not change much, but the process never gets easier."
  },
  {
    task: "Job proposal sent as a Word doc that looks nothing like the last one.",
    time: "60 to 90 min/proposal",
    detail: "Every proposal starts from scratch or from last month's version. The formatting drifts, the language changes, and clients get a different experience depending on who sent it. It is inconsistent in ways that are hard to defend."
  },
  {
    task: "Estimate goes out missing details — rework starts before the job does.",
    time: "1 to 3 hrs/rework",
    detail: "Something gets left off the estimate. The client approved it. Now the job is underway and someone has to go back, explain the gap, and fix the numbers. The rework is not the job — it is the paperwork that should have been right the first time."
  },
  {
    task: "New hire spends their first week asking questions nobody wrote down.",
    time: "4 to 6 hrs/hire",
    detail: "The knowledge is there — it just lives in someone's head. New hires ask the same questions, get inconsistent answers, and take longer to become useful than they should. Not because they are slow, but because the information was never organized."
  },
  {
    task: "End-of-day job summary takes 45 minutes to piece together and send.",
    time: "45 min/day",
    detail: "Whoever closes out the day pulls from texts, notes, and memory to write the summary. It is the same information, reorganized, every single day. By Friday it is the last thing anyone wants to do — and the most likely to be incomplete."
  }];


  return (
    <section style={{ padding: '120px 48px', borderTop: '1px solid rgba(237,233,225,0.06)' }}>
      <div style={{ maxWidth: 1100, margin: "0 auto" }}>
        <motion.div {...fadeUp(0)} style={{ marginBottom: 16 }}>
          <span style={{ fontFamily: "'DM Sans'", fontSize: 12, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--muted)' }}>The problem</span>
        </motion.div>

        <motion.h2 {...fadeUp(0.06)} style={{
          fontFamily: "'Playfair Display'", fontSize: '50px',
          fontWeight: 700, lineHeight: 1.1, letterSpacing: '-0.02em',
          color: 'var(--fg)', maxWidth: 780, marginBottom: 20
        }}>
          Somewhere in your operation, hours are being spent every day on things that should take minutes.
        </motion.h2>

        <motion.p {...fadeUp(0.12)} style={{
          fontFamily: "'DM Sans'", fontSize: 17, lineHeight: 1.75,
          color: 'var(--muted)', maxWidth: 620, marginBottom: 64
        }}>
          You run a successful business. It works. But people on your team spend hours a day on things that should not take that long. They have stopped thinking of it as a problem. It is just how things work. It does not have to be.
        </motion.p>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))', gap: 16 }}>
          {tasks.map((t, i) =>
          <TaskCard key={i} {...t} delay={i * 0.07} />
          )}
        </div>
      </div>
    </section>);

}

Object.assign(window, { Problem, TaskCard });