/* Loops — Homepage v2 sections B: Dora, the coach */

const CoachSectionV2 = () =>
<Section id="coach" className="bg-soft">
    <div aria-hidden="true" className="pointer-events-none absolute inset-0 -z-10 soft-halo"></div>
    <Container>
      <div className="grid gap-14 lg:gap-20 lg:grid-cols-2 items-center">
        <div className="order-2 lg:order-1">
          <div className="relative mx-auto w-full max-w-[420px]">
            <PhoneShell w={320} h={640}>
              <V2PhoneShot src="/uploads/loops-3-a4dfc3d2.jpg" alt="Dora, the Loops AI coach, suggesting a reflection prompt" />
            </PhoneShell>
          </div>
        </div>

        <div className="order-1 lg:order-2 max-w-prose">
          <Kicker>Dora, your coach</Kicker>
          <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[32px] sm:text-[38px] lg:text-[44px] leading-[1.1]">
            A coach who already knows you.
          </h2>
          <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
            <p>Most AI tools start every conversation cold. Dora doesn't. She's read your goal, watched your Loops across months, and knows the wins you've logged and the hard days you've journaled through. When you open the conversation, she already knows where you're trying to go.</p>
          </div>

          <div className="mt-8 flex flex-wrap gap-2.5">
            {["Knows your goal", "Remembers your wins", "There at 11pm"].map((c) =>
            <span key={c} className="inline-flex items-center rounded-pill bg-brand-soft px-4 py-2 text-[14px] font-semibold text-brand-deep">{c}</span>
            )}
          </div>

          <p className="mt-8 max-w-prose text-[17px] sm:text-[18px] leading-[1.6] text-ink-2">
            Dora is built to coach, not to do the work for you. <span className="font-bold text-ink gloss-sweep" data-text="Built to make you more capable, not more dependent.">Built to make you more capable, not more dependent.</span>
          </p>
        </div>
      </div>
    </Container>
  </Section>;

Object.assign(window, { CoachSectionV2 });