// Section 3 — The differentiator.
// Heavy type, grey-vs-purple contrast rows, no icons, no cards.

const ContrastRow = ({ grey, purple }) => (
  <div className="contrast-row">
    <div className="contrast-grey">{grey}</div>
    <div className="contrast-purple">{purple}</div>
  </div>
);

const DifferentiatorSection = () => (
  <section className="section differentiator-section">
    <div className="wide">
      <header className="section-head intensives-section-head align-left">
        <div className="eyebrow with-bullet">Why it's different</div>
        <h2>
          Other services mark your finished draft.<br />
          <Scribble>We start before the first decision.</Scribble>
        </h2>
      </header>

      <div className="contrast-rows">
        <ContrastRow
          grey="Other services show up at the end."
          purple="We're there from your first decision."
        />
        <ContrastRow
          grey="They mark drafts you've already written."
          purple="We make sure every decision is right; before you write."
        />
        <ContrastRow
          grey="They tell you what went wrong."
          purple="We make sure nothing does."
        />
      </div>

      <p className="differentiator-closer">
        You write every word. We make sure every decision is the right one. <Scribble>That's the whole programme.</Scribble>
      </p>
    </div>
  </section>
);

window.DifferentiatorSection = DifferentiatorSection;