/* global React */

// ─────────────────────────────────────────────────────────────
// WhoLux — Two-column buyer-pain section.
// Replaces StatementLux. Names the two ways owners arrive at us.
// ─────────────────────────────────────────────────────────────
function WhoLux() {
  const cols = [
    {
      n: 'I',
      label: 'The Burnout Host',
      lede: '"You started with a dream. A guest room, a vacation home, a property you bought \u2018just to test it out.\u2019"',
      body: [
        "Two years later you're answering messages at 2 a.m., your nightly rate hasn't moved in six months, and your last cleaner ghosted before a turnover.",
        "You don't need a takeover. You need your weekends back.",
      ],
    },
    {
      n: 'II',
      label: 'The Switcher',
      lede: '"You hired a property manager. You thought you\u2019d bought peace of mind."',
      body: [
        "Instead you got a $150 invoice for changing a lightbulb, an 'Account Manager' who replies in three days, and the dawning suspicion that they don't actually care whether your property makes money — only whether it stays in their portfolio.",
        "You don't need a different manager. You need a different model.",
      ],
    },
  ];

  const isMobile = useIsMobile();
  return (
    <section data-screen-label="03 Who" style={{
      background: 'var(--cream-50)',
      padding: isMobile ? '120px 20px' : '180px 48px',
    }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <SectionHeader eyebrow="· Two ways owners arrive ·">
          Most owners come to us from <I>one of two places.</I>
        </SectionHeader>

        <div style={{
          marginTop: isMobile ? 64 : 120,
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : 'repeat(2, 1fr)',
          gap: isMobile ? 48 : 64,
        }}>
          {cols.map((c, i) => (
            <FadeIn key={c.n} delay={i * 100}>
              <article style={{
                height: '100%',
              }}>
                <div style={{
                  fontFamily: 'var(--font-display)', fontStyle: 'italic',
                  fontSize: 14, color: 'var(--bronze-500)',
                  letterSpacing: '0.04em', marginBottom: 14,
                }}>{c.n}.</div>
                <h3 style={{
                  fontFamily: 'var(--font-display)',
                  fontSize: 'clamp(1.8rem, 2.6vw, 2.4rem)',
                  fontWeight: 400, letterSpacing: '-0.02em',
                  color: 'var(--ink-900)', margin: '0 0 32px',
                  lineHeight: 1.1,
                }}>{c.label}</h3>
                <p style={{
                  fontFamily: 'var(--font-display)', fontStyle: 'italic',
                  fontSize: 'clamp(1.15rem, 1.5vw, 1.4rem)',
                  fontWeight: 300, lineHeight: 1.45,
                  letterSpacing: '-0.005em',
                  color: 'var(--ink-900)',
                  margin: '0 0 28px',
                  textWrap: 'balance',
                }}>{c.lede}</p>
                {c.body.map((p, j) => (
                  <p key={j} style={{
                    fontFamily: 'var(--font-body)',
                    fontSize: 15.5, lineHeight: 1.72,
                    color: 'var(--clay-700)',
                    margin: j === 0 ? '0 0 16px' : 0,
                  }}>{p}</p>
                ))}
              </article>
            </FadeIn>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// CategoryLux — Boutique tech positioning.
// Single-column, centered, on a slightly tinted background.
// ─────────────────────────────────────────────────────────────
function CategoryLux() {
  const isMobile = useIsMobile();
  return (
    <section data-screen-label="05 Category" style={{
      background: 'var(--cream-100)',
      padding: isMobile ? '120px 20px' : '180px 48px',
      textAlign: 'center',
      borderTop: '1px solid rgba(74,63,48,0.08)',
      borderBottom: '1px solid rgba(74,63,48,0.08)',
    }}>
      <div style={{ maxWidth: 880, margin: '0 auto' }}>
        <FadeIn style={{ marginBottom: 40 }}>
          <InkRule color="rgba(28,26,23,0.32)"/>
        </FadeIn>
        <FadeIn delay={80}>
          <div style={{
            fontFamily: 'var(--font-body)', fontSize: 11,
            letterSpacing: '0.36em', textTransform: 'uppercase',
            color: 'var(--bronze-500)', marginBottom: 44,
          }}>·&nbsp;&nbsp;A new model&nbsp;&nbsp;·</div>
        </FadeIn>

        <FadeIn delay={160}>
          <h2 aria-label="Boutique tech. The discipline of a software company. The hospitality of a local lodge." style={{
            fontFamily: 'var(--font-display)',
            fontWeight: 300,
            color: 'var(--ink-900)',
            margin: 0,
            textWrap: 'balance',
            fontFeatureSettings: '"ss02", "liga"',
            lineHeight: 1.1,
            letterSpacing: '-0.025em',
          }}>
            <span style={{
              display: 'block',
              fontSize: 'clamp(2.2rem, 4vw, 3.6rem)',
              marginBottom: 14,
            }}>
              Boutique tech.
            </span>
            <span style={{
              display: 'block', fontStyle: 'italic',
              fontSize: 'clamp(2.2rem, 4vw, 3.6rem)',
              color: 'var(--clay-700)',
              fontWeight: 300, lineHeight: 1.1,
              marginTop: 6,
            }}>
              The discipline of a software company.
            </span>
            <span style={{
              display: 'block', fontStyle: 'italic',
              fontSize: 'clamp(2.2rem, 4vw, 3.6rem)',
              color: 'var(--clay-700)',
              fontWeight: 300, lineHeight: 1.1,
              marginTop: 6,
            }}>
              The hospitality of a local lodge.
            </span>
          </h2>
        </FadeIn>

        <FadeIn delay={260}>
          <p style={{
            marginTop: 60, maxWidth: 640, marginLeft: 'auto', marginRight: 'auto',
            fontFamily: 'var(--font-body)', fontSize: 16, lineHeight: 1.78,
            color: 'var(--clay-700)',
          }}>
            Big-box property managers run on volume. Sign as many homes as possible. Automate the humanity out of the process. Solo co-hosts run on hustle — until the hustle runs out.
          </p>
        </FadeIn>

        <FadeIn delay={320}>
          <p style={{
            marginTop: 24, maxWidth: 640, marginLeft: 'auto', marginRight: 'auto',
            fontFamily: 'var(--font-body)', fontSize: 16, lineHeight: 1.78,
            color: 'var(--clay-700)',
          }}>
            Divergent is the third option. Software runs the back office — pricing, channels, inspections, reporting. A real human team, working from one office, runs the front. <span style={{ color: 'var(--ink-900)' }}>You see what we see. You keep what's yours. We earn when you earn.</span>
          </p>
        </FadeIn>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// CollectionLux — the portfolio, shown as a quiet 2-col list-grid
// (kept as-is per Section 19)
// ─────────────────────────────────────────────────────────────
function CollectionLux() {
  const homes = [
    { name: 'The Bay Loft', loc: 'Tampa · Florida', beds: 2, img: '../../assets/property-loft.jpg', mono: 'I' },
    { name: 'The Desert Villa', loc: 'Chandler · Arizona', beds: 3, img: '../../assets/property-mountain.jpg', mono: 'II' },
    { name: 'The Alpine Cabin', loc: 'Big Bear · California', beds: 2, img: '../../assets/property-adk.jpg', mono: 'III' },
    { name: 'The Music Row House', loc: 'Nashville · Tennessee', beds: 5, img: '../../assets/property-river.jpg', mono: 'IV' },
    { name: 'The Black Hills Lodge', loc: 'Deadwood · South Dakota', beds: 6, img: '../../assets/property-lodge.jpg', mono: 'V' },
    { name: 'The Pacific House', loc: 'Seattle · Washington', beds: 4, img: '../../assets/property-lake.jpg', mono: 'VI' },
  ];

  return (
    <section id="residences" data-screen-label="04 Collection" style={{
      background: 'var(--cream-50)',
      padding: '160px 0',
    }}>
      <div style={{ maxWidth: 1680, margin: '0 auto', padding: '0 48px' }}>
        <SectionHeader eyebrow="· The collection ·">
          A selection of residences, <I>coast to coast.</I>
        </SectionHeader>
        <div style={{ marginBottom: 120 }}/>

        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(2, 1fr)',
          columnGap: 56, rowGap: 120,
        }}>
          {homes.map((h, i) => (
            <FadeIn key={h.mono} delay={i * 80} as="article" style={{
              marginTop: i % 2 === 1 ? 80 : 0,
            }}>
              <Parallax speed={0.05} style={{ aspectRatio: '4/5', marginBottom: 28 }}>
                <div style={{
                  width: '100%', height: '100%',
                  background: `url(${h.img}) center/cover no-repeat #2a2621`,
                }}/>
              </Parallax>
              <div style={{
                display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
                paddingBottom: 14, borderBottom: '1px solid rgba(74, 63, 48, 0.18)',
                marginBottom: 14,
              }}>
                <span style={{
                  fontFamily: 'var(--font-display)', fontStyle: 'italic',
                  fontSize: 14, color: 'var(--bronze-500)',
                  letterSpacing: '0.04em',
                }}>No. {h.mono}</span>
                <span style={{
                  fontFamily: 'var(--font-body)', fontSize: 11,
                  letterSpacing: '0.2em', textTransform: 'uppercase',
                  color: 'var(--stone-500)',
                }}>{h.beds} bedrooms</span>
              </div>
              <h3 style={{
                fontFamily: 'var(--font-display)', fontSize: 32, fontWeight: 300,
                letterSpacing: '-0.02em', color: 'var(--ink-900)',
                margin: '0 0 10px', lineHeight: 1.1,
              }}>{h.name}</h3>
              <div style={{
                fontFamily: 'var(--font-body)', fontSize: 14,
                color: 'var(--stone-500)', letterSpacing: '0.02em',
              }}>{h.loc}</div>
            </FadeIn>
          ))}
        </div>

        <div style={{
          textAlign: 'center', marginTop: 120,
          fontFamily: 'var(--font-body)', fontSize: 12,
          letterSpacing: '0.26em', textTransform: 'uppercase',
          color: 'var(--stone-500)',
        }}>
          The full collection &nbsp;&mdash;&nbsp; by appointment
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { WhoLux, CategoryLux, CollectionLux });