function ExampleCard({ before, after, beforeTime, afterTime, industry, delay }) {
  const isMobile = useIsMobile();
  const { ref, rotateX, rotateY, handleMouseMove, handleMouseLeave } = useTilt(isMobile);
  const [active, setActive] = React.useState(false);

  return (
    <motion.div
      ref={ref}
      {...fadeUp(delay)}
      onMouseMove={handleMouseMove}
      onMouseMove={handleMouseMove}
      onMouseLeave={handleMouseLeave}
      onClick={() => setActive(o => !o)}
      style={{
        rotateX, rotateY,
        transformStyle: 'preserve-3d',
        background: 'rgba(237,233,225,0.025)',
        border: `1px solid ${active ? 'rgba(var(--accent-rgb),0.2)' : 'rgba(237,233,225,0.07)'}`,
        borderRadius: 12, padding: '32px 28px',
        transition: 'border-color 0.3s, background 0.3s',
        cursor: 'pointer',
        display: 'flex', flexDirection: 'column', gap: 20,
        justifyContent: 'flex-start',
      }}
    >
      <div style={{ fontFamily: "'DM Sans'", fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--muted)' }}>{industry}</div>

      {/* Before / After time split */}
      <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
        <div style={{
          flex: 1, background: 'rgba(237,233,225,0.04)', borderRadius: 8,
          padding: '14px 16px', border: '1px solid rgba(237,233,225,0.06)',
        }}>
          <div style={{ fontFamily: "'DM Sans'", fontSize: 11, color: 'var(--muted)', marginBottom: 6, letterSpacing: '0.08em', textTransform: 'uppercase' }}>Before</div>
          <div style={{ fontFamily: "'DM Sans'", fontSize: 22, fontWeight: 600, color: 'rgba(237,233,225,0.4)', letterSpacing: '-0.02em' }}>{beforeTime}</div>
        </div>

        <div style={{ color: 'rgba(237,233,225,0.2)', fontSize: 18, flexShrink: 0 }}>→</div>

        <div style={{
          flex: 1, background: 'rgba(var(--accent-rgb),0.06)', borderRadius: 8,
          padding: '14px 16px', border: '1px solid rgba(var(--accent-rgb),0.12)',
        }}>
          <div style={{ fontFamily: "'DM Sans'", fontSize: 11, color: 'var(--accent)', marginBottom: 6, letterSpacing: '0.08em', textTransform: 'uppercase' }}>After</div>
          <div style={{ fontFamily: "'DM Sans'", fontSize: 22, fontWeight: 600, color: 'var(--accent)', letterSpacing: '-0.02em' }}>{afterTime}</div>
        </div>
      </div>

      <p style={{ fontFamily: "'DM Sans'", fontSize: 14, lineHeight: 1.7, color: 'var(--muted)', margin: 0 }}>{before}</p>

      <motion.div
        animate={{ opacity: active ? 1 : 0, height: active ? 'auto' : 0 }}
        transition={{ duration: 0.25 }}
        style={{ overflow: 'hidden' }}
      >
        <div style={{
          fontFamily: "'DM Sans'", fontSize: 13, lineHeight: 1.65,
          color: 'var(--muted)',
          borderTop: '1px solid rgba(var(--accent-rgb),0.1)', paddingTop: 16,
        }}>{after}</div>
      </motion.div>

      {!active && (
        <div style={{ marginTop: 'auto', paddingTop: 8, fontFamily: "'DM Sans'", fontSize: 12, fontWeight: 600, color: 'rgba(237,233,225,0.22)', textAlign: 'center' }}>
          'click to see how it works'
        </div>
      )}
    </motion.div>
  );
}

function Examples() {
  const examples = [
    {
      industry: 'Construction / Estimating',
      beforeTime: '3 hrs', afterTime: '15 min',
      before: "Your estimator pulls material costs from one place, labor rates from another, formats the PDF manually, and double-checks everything by hand. Every quote.",
      after: "Pulls the material list, calculates labor, applies your standard markups, and outputs a client-ready proposal formatted exactly the way you have always done it.",
    },
    {
      industry: 'Service Business / HR',
      beforeTime: '6 hrs/hire', afterTime: '20 min',
      before: "New hire gets an onboarding packet emailed on day one. They skim it. Then they ask the same questions for the next six weeks.",
      after: "An assistant that knows your SOPs, your policies, your answers, and handles every new hire question the same way, every time.",
    },
    {
      industry: 'Trades / Field Operations',
      beforeTime: '1 hr/day', afterTime: '5 min',
      before: "Whoever runs the jobs figures out crew assignments, site addresses, open punch items, and calls to make, usually in their head before 7am.",
      after: "A clean morning briefing, automatically assembled. Crews, addresses, open issues, calls. Ready before they are out the door.",
    },
    {
      industry: 'Professional Services / Intake',
      beforeTime: '45 min', afterTime: '8 min',
      before: "New client fills out a generic form. Someone on your team reads it, follows up for missing info, and reformats it into whatever your team actually uses.",
      after: "Collects the right information upfront, in the format your team needs it, and flags anything missing before it becomes a problem.",
    },
    {
      industry: 'Owner / Reporting',
      beforeTime: 'Sunday PM', afterTime: 'Friday 4pm',
      before: "Every Sunday, someone pulls the week's numbers, pastes them into a spreadsheet, formats it, and writes a summary. Forty-eight times a year.",
      after: "It runs automatically. Same format, same structure, hits your inbox Friday at 4pm. You open it Monday morning instead of building it Sunday night.",
    },
    {
      industry: 'Local Business / Customer Service',
      beforeTime: '3 hrs/wk', afterTime: '30 min/wk',
      before: "Your front desk answers the same six questions from customers every single week. They know the answers cold. They are still typing them out fresh each time.",
      after: "Trained on your actual policies, your products, your exact language. Handles the repeat questions so your team can focus on the ones that actually need a person.",
    },
  ];

  return (
    <section id="examples" 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)' }}>What gets built</span>
        </motion.div>

        <motion.h2 {...fadeUp(0.06)} style={{
          fontFamily: "'Playfair Display'", fontSize: 'clamp(32px, 4.5vw, 58px)',
          fontWeight: 700, lineHeight: 1.1, letterSpacing: '-0.02em',
          color: 'var(--fg)', maxWidth: 640, margin: '0px 0px 25px',
        }}>
          Here is the kind of thing we build.
        </motion.h2>



        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(290px, 1fr))', gap: 18 }}>
          {examples.map((ex, i) => (
            <ExampleCard key={i} {...ex} delay={i * 0.07} />
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Examples, ExampleCard });