/* global React */

// ─────────────────────────────────────────────────────────────
// TermsLux — Fees & engagement terms (rev'd per S11).
// Visual rhythm: ProcessLux phases — large italic Roman, eyebrow label, body.
// ─────────────────────────────────────────────────────────────
function TermsLux() {
  const items = [
    {
      n: 'I',
      label: 'Performance-based commission',
      body: "Twelve to eighteen percent of booking revenue, calibrated to your property's earning profile. The better your home performs, the better we both do.",
    },
    {
      n: 'II',
      label: 'One monthly fee',
      body: 'Sixty dollars per listing, per month. Covers the software stack — pricing intelligence, channel management, guest-comms platform, inspection system. No setup costs. No onboarding charges.',
    },
    {
      n: 'III',
      label: 'A real off-ramp, not a hostage situation',
      body: "Ninety-day notice, either direction. Your listing stays yours throughout — your reviews, your account, your Superhost status, your payouts. If we don't earn the relationship every quarter, you walk. It's there because you should never feel trapped — not because we expect you to need it.",
    },
    {
      n: 'IV',
      label: 'Aligned, not extractive',
      body: "We don't make money when your home sits empty. Our success ties back to yours — which is why we obsess over occupancy, nightly rate, and review score the way you would.",
    },
  ];

  const isMobile = useIsMobile();
  return (
    <section id="the-terms" data-screen-label="12 Terms" style={{
      background: 'var(--cream-50)',
      padding: isMobile ? '120px 0' : '180px 0',
    }}>
      <div style={{ maxWidth: 1320, margin: '0 auto', padding: isMobile ? '0 20px' : '0 48px' }}>
        <SectionHeader eyebrow="· The terms ·">
          We earn when <I>you earn.</I>
        </SectionHeader>

        <FadeIn delay={120} style={{ maxWidth: 640, margin: '36px auto 0', textAlign: 'center' }}>
          <p style={{
            fontFamily: 'var(--font-body)', fontSize: 16, lineHeight: 1.75,
            color: 'var(--clay-700)', margin: 0,
          }}>
            A short conversation about fees, before the long one about your property.
          </p>
        </FadeIn>

        <div style={{ marginTop: isMobile ? 72 : 140 }}>
          {items.map((it, i) => (
            <FadeIn key={it.n} delay={i * 80}>
              <article style={{
                display: 'grid',
                gridTemplateColumns: isMobile ? '1fr' : '110px 1fr 1.4fr',
                columnGap: isMobile ? 0 : 64,
                rowGap: isMobile ? 16 : 0,
                padding: isMobile ? '48px 0' : '64px 0',
                borderTop: '1px solid rgba(28,26,23,0.14)',
                ...(i === items.length - 1 ? { borderBottom: '1px solid rgba(28,26,23,0.14)' } : {}),
              }}>
                <div>
                  <div style={{
                    fontFamily: 'var(--font-display)', fontStyle: 'italic',
                    fontSize: isMobile ? 56 : 72, fontWeight: 300,
                    lineHeight: 1, letterSpacing: '-0.04em',
                    color: 'var(--bronze-500)',
                  }}>{it.n}</div>
                </div>

                <div>
                  <h3 style={{
                    fontFamily: 'var(--font-display)',
                    fontSize: 'clamp(1.6rem, 2.4vw, 2.1rem)',
                    fontWeight: 400, lineHeight: 1.15,
                    letterSpacing: '-0.015em',
                    color: 'var(--ink-900)', margin: 0,
                    textWrap: 'balance', maxWidth: isMobile ? '100%' : 380,
                  }}>{it.label}</h3>
                </div>

                <div style={{ paddingTop: 4 }}>
                  <p style={{
                    fontFamily: 'var(--font-body)', fontSize: 15.5,
                    lineHeight: 1.75, color: 'var(--clay-700)',
                    margin: 0, maxWidth: 580,
                  }}>{it.body}</p>
                </div>
              </article>
            </FadeIn>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { TermsLux });