/* global React */

function WhoFor() {
  const yes = [
    'You manage short-term rentals and feel like you are at capacity',
    'You already use a property management system and operations tools but still rely on humans to catch exceptions',
    'You want to take on more homes without hiring another coordinator',
    'You are losing time to owner calls that should never have needed to happen',
  ];
  const no = [
    'You only manage a few properties and the manual work still feels manageable',
    'There is not one part of your current workflow that you would want to automate',
    'You want a one-size-fits-all SaaS tool',
  ];
  return (
    <section id="whofor">
      <span className="section-mark">§ 05 / Fit</span>
      <div className="wrap">
        <Reveal><span className="eyebrow">Honest scoping</span></Reveal>
        <Reveal delay={80}>
          <h2 className="h-section" style={{ marginTop: 22 }}>
            Is this a <em>fit?</em>
          </h2>
        </Reveal>
        <div className="whofor-grid">
          <Reveal>
            <div className="wfor-col yes">
              <h3>This is for you if</h3>
              <ul>
                {yes.map((t, i) => (
                  <li key={i}>
                    <span className="mark"><Check color="var(--accent)" /></span>
                    <span>{t}</span>
                  </li>
                ))}
              </ul>
            </div>
          </Reveal>
          <Reveal delay={100}>
            <div className="wfor-col">
              <h3>This is NOT for you if</h3>
              <ul>
                {no.map((t, i) => (
                  <li key={i}>
                    <span className="mark"><Cross color="var(--fg-4)" /></span>
                    <span>{t}</span>
                  </li>
                ))}
              </ul>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

window.WhoFor = WhoFor;