/* global React, Reveal */

// =========================================================
// SAID THIS (landing variant) — identical to the home-page
// SaidThis, with two overlapping quotes removed for the
// paid-traffic page: "I need a way out" and "I can't see
// myself like this forever". Home page keeps all five.
// =========================================================
function SaidThisLanding() {
  const quotes = [
    <>&ldquo;I&rsquo;m over my 9-to-5. I don&rsquo;t want to be working <em>all my life</em>.&rdquo;</>,
    <>&ldquo;I want to be there for my family &mdash; to actually travel, to <em>live my life</em>.&rdquo;</>,
    <>&ldquo;People at my work keep getting made redundant. <em>I could be next</em>.&rdquo;</>,
  ];

  return (
    <section id="said" className="section sd sd--landing" data-screen-label="You've said this">
      <div className="container">
        <Reveal className="sd__head">
          <div className="eyebrow">Before the how</div>
          <h2 className="display sd__title">You&rsquo;ve said <em style={{ color: "#5A7D3E" }}>some version of this.</em></h2>
        </Reveal>

        <Reveal className="sd__bridge" delay={100}>
          <p><span style={{ fontSize: "20px" }}>None of that is about Amazon.</span> <em className="sd__bridge-em" style={{ fontSize: "23px" }}>It&rsquo;s about your time, your freedom,<br />and the people who matter.</em></p>
        </Reveal>

        <div className="sd__grid">
          <Reveal className="sd__notewrap" delay={120}>
            <div className="sd__note">
              {quotes.map((q, i) => (
                <p key={i} className="sd__note-line">{q}</p>
              ))}
            </div>
          </Reveal>

          <Reveal className="sd__metoo" delay={180}>
            <p className="sd__metoo-open"><b>Me too.</b></p>
            <p>
              Redundancy. <strong>Twelve-hour days.</strong> Breakfast, lunch and
              dinner all through a drive-through window, sitting in Auckland traffic from
              Hillsborough to Flat Bush and back, <strong>every single day.</strong>
            </p>
            <p><strong>Until one day, something broke.</strong><br />And I knew I couldn&rsquo;t do it for another twenty years.</p>
            <p>
              If you&rsquo;ve felt some
              version of that, you&rsquo;re not being dramatic. You&rsquo;re being honest.
              <strong> That&rsquo;s where it starts.</strong> The difference is, I found the
              way out. <strong>Let me show you mine.</strong>
            </p>
          </Reveal>

          <div className="sd__annot" aria-hidden="true">
            <span className="sd__annot-text">I feel you!</span>
            <svg className="sd__annot-arrow" viewBox="0 0 120 90" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M106 12 C 100 50, 72 52, 22 74" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
              <path d="M22 74 L 42 73 M22 74 L 33 57" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { SaidThisLanding });