/* global React */

// ─────────────────────────────────────────────────────────────
// PartnershipLux — single-paragraph soul beat between hero & WhoLux
// ─────────────────────────────────────────────────────────────
function PartnershipLux() {
  const isMobile = useIsMobile();
  return (
    <section data-screen-label="02 Partnership" style={{
      background: 'var(--cream-50)',
      padding: isMobile ? '120px 20px' : '180px 32px',
    }}>
      <div style={{ maxWidth: 880, margin: '0 auto', textAlign: 'center' }}>
        <FadeIn>
          <div style={{
            fontFamily: 'var(--font-body)', fontSize: 11,
            letterSpacing: '0.36em', textTransform: 'uppercase',
            color: 'var(--terracotta-500)', marginBottom: 36,
          }}>·&nbsp;&nbsp;The Divergent model&nbsp;&nbsp;·</div>
        </FadeIn>
        <FadeIn delay={120}>
          <h2 style={{
            fontFamily: 'var(--font-display)',
            fontSize: 'clamp(2rem, 3.6vw, 3.4rem)',
            fontWeight: 300, lineHeight: 1.08, letterSpacing: '-0.02em',
            color: 'var(--ink-900)', margin: 0, textWrap: 'balance',
            fontFeatureSettings: '"ss02", "liga"',
          }}>
            Co-hosting is a <span style={{ fontStyle: 'italic' }}>partnership</span> — not a takeover.
          </h2>
        </FadeIn>
        <FadeIn delay={220}>
          <p style={{
            marginTop: 36,
            fontFamily: 'var(--font-body)', fontSize: 17, lineHeight: 1.75,
            color: 'var(--clay-700)', maxWidth: 640, margin: '36px auto 0',
            textWrap: 'pretty',
          }}>
            You retain ownership of your listings. Direct payouts to your account. A local team you trust, on call twenty-four hours a day. We partner with you to run your home — not replace you.
          </p>
        </FadeIn>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// KeepListingLux — argument left, listing-card mockup right
// ─────────────────────────────────────────────────────────────
function KeepListingLux() {
  const isMobile = useIsMobile();
  const checks = [
    'Direct payouts to your account',
    'Listing stays in your name',
    'Reviews stay attached',
  ];
  return (
    <section data-screen-label="04 Keep listing" style={{
      background: 'var(--cream-50)',
      padding: isMobile ? '120px 20px' : '180px 32px',
      borderTop: '1px solid rgba(28,26,23,0.08)',
    }}>
      <div style={{
        maxWidth: 1240, margin: '0 auto',
        display: 'grid',
        gridTemplateColumns: isMobile ? '1fr' : '1.1fr 1fr',
        gap: isMobile ? 56 : 72,
        alignItems: 'center',
      }}>
        {/* Left: argument */}
        <div>
          <FadeIn>
            <div style={{
              fontFamily: 'var(--font-body)', fontSize: 11,
              letterSpacing: '0.36em', textTransform: 'uppercase',
              color: 'var(--terracotta-500)', marginBottom: 28,
            }}>·&nbsp;&nbsp;A promise to owners&nbsp;&nbsp;·</div>
          </FadeIn>
          <FadeIn delay={100}>
            <h2 style={{
              fontFamily: 'var(--font-display)',
              fontSize: 'clamp(2rem, 3.6vw, 3.4rem)',
              fontWeight: 300, lineHeight: 1.05, letterSpacing: '-0.02em',
              color: 'var(--ink-900)', margin: '0 0 28px',
              textWrap: 'balance',
              fontFeatureSettings: '"ss02", "liga"',
            }}>
              You keep your listing. <span style={{ fontStyle: 'italic' }}>And every review.</span>
            </h2>
          </FadeIn>
          <FadeIn delay={180}>
            <p style={{
              fontFamily: 'var(--font-body)', fontSize: 16, lineHeight: 1.75,
              color: 'var(--clay-700)', margin: '0 0 18px', maxWidth: 520,
            }}>
              Most co-hosts make you delist and start over under their brand. We don't. Divergent operates inside your existing Airbnb, Vrbo, and Booking listings — so your reviews, search ranking, and Superhost status stay exactly where they are.
            </p>
            <p style={{
              fontFamily: 'var(--font-body)', fontSize: 16, lineHeight: 1.75,
              color: 'var(--clay-700)', margin: 0, maxWidth: 520,
            }}>
              It's your home. It's your credibility. We just run the operation underneath.
            </p>
          </FadeIn>
          <FadeIn delay={260}>
            <div style={{
              marginTop: 32, display: 'flex', flexWrap: 'wrap', gap: 24,
            }}>
              {checks.map((c) => (
                <div key={c} style={{
                  display: 'inline-flex', alignItems: 'center', gap: 10,
                  fontFamily: 'var(--font-body)', fontSize: 13.5,
                  color: 'var(--clay-700)',
                }}>
                  <span aria-hidden style={{
                    width: 22, height: 22, borderRadius: 11,
                    background: 'var(--moss-100)', color: 'var(--moss-600)',
                    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                    fontSize: 13, lineHeight: 1, fontWeight: 600,
                  }}>✓</span>
                  {c}
                </div>
              ))}
            </div>
          </FadeIn>
        </div>

        {/* Right: listing card mockup */}
        <FadeIn delay={200}>
          <div style={{
            background: 'var(--white)',
            borderRadius: 14,
            boxShadow: '0 32px 80px -28px rgba(74, 47, 26, 0.32), 0 8px 24px -10px rgba(74, 47, 26, 0.18)',
            overflow: 'hidden',
            maxWidth: 480,
            marginLeft: isMobile ? 0 : 'auto',
            marginRight: isMobile ? 0 : undefined,
          }}>
            {/* Photo */}
            <div style={{
              position: 'relative', aspectRatio: '4 / 3',
              background: 'var(--cream-200)',
              backgroundImage: "url('../../assets/interior-living.jpg')",
              backgroundSize: 'cover', backgroundPosition: 'center',
            }}>
              {/* Superhost badge */}
              <div style={{
                position: 'absolute', top: 16, left: 16,
                background: 'var(--ink-900)', color: 'var(--cream-50)',
                fontFamily: 'var(--font-body)', fontSize: 11,
                letterSpacing: '0.16em', textTransform: 'uppercase',
                padding: '7px 12px', borderRadius: 999,
                display: 'inline-flex', alignItems: 'center', gap: 7,
                fontWeight: 600,
              }}>
                <span style={{ color: 'var(--terracotta-500)', fontSize: 12 }}>★</span>
                Superhost
              </div>
            </div>

            {/* Title row */}
            <div style={{ padding: 22 }}>
              <div style={{
                display: 'flex', alignItems: 'flex-start', gap: 16,
                justifyContent: 'space-between',
              }}>
                <div>
                  <div style={{
                    fontFamily: 'var(--font-display)', fontSize: 18,
                    fontWeight: 400, color: 'var(--ink-900)',
                    letterSpacing: '-0.01em', lineHeight: 1.2,
                  }}>
                    Modern cabin, Black Hills
                  </div>
                  <div style={{
                    marginTop: 6,
                    fontFamily: 'var(--font-body)', fontSize: 13,
                    color: 'var(--stone-500)', lineHeight: 1.4,
                  }}>
                    Hosted by Sarah · Since 2019
                  </div>
                </div>
                <div style={{
                  fontFamily: 'var(--font-body)', fontSize: 13.5,
                  color: 'var(--ink-900)', whiteSpace: 'nowrap',
                  display: 'inline-flex', alignItems: 'center', gap: 5,
                }}>
                  <span style={{ color: 'var(--terracotta-500)' }}>★</span>
                  4.97
                </div>
              </div>

              {/* Co-host inset */}
              <div style={{
                marginTop: 18, padding: 14,
                background: 'var(--cream-100)', borderRadius: 10,
                display: 'flex', alignItems: 'center', gap: 14,
              }}>
                <div style={{
                  width: 38, height: 38, borderRadius: 19,
                  background: 'var(--terracotta-500)', color: 'var(--cream-50)',
                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                  fontFamily: 'var(--font-display)', fontSize: 13.5,
                  fontWeight: 500, letterSpacing: '0.04em',
                  flexShrink: 0,
                }}>DE</div>
                <div style={{ minWidth: 0 }}>
                  <div style={{
                    fontFamily: 'var(--font-body)', fontSize: 13,
                    fontWeight: 600, color: 'var(--ink-900)', lineHeight: 1.35,
                  }}>Co-hosted by Divergent Estates</div>
                  <div style={{
                    marginTop: 3,
                    fontFamily: 'var(--font-body)', fontSize: 12,
                    color: 'var(--stone-500)', lineHeight: 1.4,
                  }}>Operations partner · Reviews stay with the host</div>
                </div>
              </div>
            </div>
          </div>
        </FadeIn>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// JourneyLux — three stages of ownership (Onboarding → Optimize → Expand)
// Replaces ProcessLux. Same anchor (#how) for nav continuity.
// ─────────────────────────────────────────────────────────────
function JourneyLux() {
  const stages = [
    {
      n: '01',
      tag: 'Launch with confidence',
      stage: 'Onboarding',
      body: "We prepare your home for the market — keeping your listing, reviews, and rankings intact. Typically live in under two weeks.",
      inclusions: [
        'Use your existing listing',
        'Professional photos and copy',
        'Dynamic pricing setup',
        'Smart-home and access setup',
      ],
    },
    {
      n: '02',
      tag: 'Partner with the best',
      stage: 'Optimize',
      body: "Day-to-day operations that earn above market. Twenty-four-hour guest support, insurance advocacy, and a dedicated account lead.",
      inclusions: [
        'Twenty-four-hour guest support',
        'Dynamic pricing and demand',
        'Insurance and compliance',
        'Monthly P&L reporting',
      ],
    },
    {
      n: '03',
      tag: 'Grow your portfolio',
      stage: 'Expand',
      body: "When you're ready to add the second, third, or tenth property — we source, evaluate, and stage each one alongside you.",
      inclusions: [
        'Market and deal sourcing',
        'STR-savvy lender network',
        'Revenue projections',
        'Portfolio-level strategy',
      ],
    },
  ];

  const isMobile = useIsMobile();
  return (
    <section id="how" data-screen-label="08 Journey" style={{
      background: 'var(--cream-50)',
      padding: isMobile ? '120px 20px' : '180px 32px',
    }}>
      <div style={{ maxWidth: 1240, margin: '0 auto' }}>
        <SectionHeader eyebrow="· Three stages of ownership ·">
          From day one to <I>door ten.</I>
        </SectionHeader>
        <FadeIn delay={120} style={{ maxWidth: 580, margin: '32px auto 0', textAlign: 'center' }}>
          <p style={{
            fontFamily: 'var(--font-body)', fontSize: 16, lineHeight: 1.75,
            color: 'var(--clay-700)', margin: 0,
          }}>
            Wherever you are in your short-term rental journey, we meet you there — and run the rest of it for you.
          </p>
        </FadeIn>

        <div style={{
          marginTop: isMobile ? 56 : 90,
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)',
          gap: 24,
        }}>
          {stages.map((s, i) => (
            <FadeIn key={s.n} delay={i * 80}>
              <JourneyCard {...s}/>
            </FadeIn>
          ))}
        </div>
      </div>
    </section>
  );
}

function JourneyCard({ n, tag, stage, body, inclusions }) {
  const [hover, setHover] = React.useState(false);
  return (
    <article
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        background: hover ? 'var(--cream-50)' : 'var(--cream-100)',
        border: `1px solid ${hover ? 'var(--terracotta-500)' : 'var(--cream-200)'}`,
        borderRadius: 16,
        padding: '36px 32px',
        transform: hover ? 'translateY(-3px)' : 'translateY(0)',
        transition: 'transform 280ms ease, background 280ms ease, border-color 280ms ease',
      }}>
      <div style={{
        fontFamily: 'var(--font-display)', fontStyle: 'italic',
        fontSize: 56, lineHeight: 1, fontWeight: 300,
        color: 'var(--terracotta-500)', letterSpacing: '-0.04em',
      }}>{n}</div>
      <div style={{
        marginTop: 24,
        fontFamily: 'var(--font-body)', fontSize: 10.5,
        letterSpacing: '0.28em', textTransform: 'uppercase',
        color: 'var(--stone-500)',
      }}>{tag}</div>
      <h3 style={{
        marginTop: 12,
        fontFamily: 'var(--font-display)', fontSize: 30,
        fontWeight: 300, lineHeight: 1.1, letterSpacing: '-0.015em',
        color: 'var(--ink-900)',
      }}>{stage}</h3>
      <p style={{
        marginTop: 16,
        fontFamily: 'var(--font-body)', fontSize: 14.5, lineHeight: 1.7,
        color: 'var(--clay-700)',
      }}>{body}</p>
      <ul style={{
        marginTop: 24, padding: 0, listStyle: 'none',
        display: 'flex', flexDirection: 'column', gap: 11,
        borderTop: '1px solid rgba(28,26,23,0.08)', paddingTop: 22,
      }}>
        {inclusions.map((inc) => (
          <li key={inc} style={{
            fontFamily: 'var(--font-body)', fontSize: 13.5, lineHeight: 1.5,
            color: 'var(--clay-700)',
            display: 'flex', alignItems: 'baseline', gap: 12,
          }}>
            <span aria-hidden style={{
              width: 5, height: 5, borderRadius: 5,
              background: 'var(--terracotta-500)', flexShrink: 0,
              alignSelf: 'center',
            }}/>
            {inc}
          </li>
        ))}
      </ul>
    </article>
  );
}

Object.assign(window, { PartnershipLux, KeepListingLux, JourneyLux, JourneyCard });