/* global React */

// ─────────────────────────────────────────────────────────────
// WhyCoHostLux — the structural differentiator. Dark, two columns:
// left = the argument; right = a clean comparison table.
// ─────────────────────────────────────────────────────────────
function WhyCoHostLux() {
  const isMobile = useIsMobile();
  const rows = [
    ['Your listing',     'Transferred to their account',         'Stays under your name'],
    ['Your reviews',     'Reset, then accumulate on theirs',     'Yours forever'],
    ['Superhost status', 'Theirs',                                'Yours'],
    ['Direct payouts',   'Routed through them',                   'Direct from Airbnb to your bank'],
    ['If you leave',     'Walk away with nothing',                'Walk away with everything'],
    ['Their incentive',  'Volume of homes signed',                'Performance of your home'],
  ];

  return (
    <section id="why" data-screen-label="13 Why" style={{
      background: 'var(--ink-900)',
      color: 'var(--cream-50)',
      padding: isMobile ? '120px 20px' : '180px 48px',
      position: 'relative',
    }}>
      <div style={{ maxWidth: 1320, margin: '0 auto' }}>
        <FadeIn style={{ marginBottom: 36, display: 'flex', justifyContent: 'center' }}>
          <InkRule color="rgba(251,248,242,0.32)"/>
        </FadeIn>
        <FadeIn delay={80}>
          <div style={{
            fontFamily: 'var(--font-body)', fontSize: 11,
            letterSpacing: '0.36em', textTransform: 'uppercase',
            color: 'var(--terracotta-500)', marginBottom: 36, textAlign: 'center',
          }}>·&nbsp;&nbsp;The difference&nbsp;&nbsp;·</div>
        </FadeIn>

        <FadeIn delay={160}>
          <h2 style={{
            fontFamily: 'var(--font-display)',
            fontSize: 'clamp(2.2rem, 4vw, 3.6rem)',
            fontWeight: 300, lineHeight: 1.05, letterSpacing: '-0.025em',
            color: 'var(--cream-50)', margin: 0, textAlign: 'center',
            textWrap: 'balance', fontFeatureSettings: '"ss02", "liga"',
          }}>
            Why we <I dark>co-host</I> instead of <I dark>manage.</I>
          </h2>
        </FadeIn>

        <div style={{
          marginTop: isMobile ? 64 : 120,
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : '1fr 1.05fr',
          gap: isMobile ? 56 : 96,
          alignItems: 'start',
        }}>
          {/* Left — the structural argument */}
          <FadeIn>
            <div>
              <p style={{
                fontFamily: 'var(--font-body)', fontSize: 16, lineHeight: 1.78,
                color: 'rgba(251,248,242,0.84)', margin: '0 0 22px',
              }}>
                Most property managers take over your listing. Your reviews migrate to their account. Your Superhost status resets. Your payouts route through their books before reaching yours. When you part ways — and most owners eventually do — you walk away with nothing.
              </p>
              <p style={{
                fontFamily: 'var(--font-body)', fontSize: 16, lineHeight: 1.78,
                color: 'rgba(251,248,242,0.84)', margin: '0 0 22px',
              }}>
                We co-host. Your listing stays under your name forever. Your reviews accumulate on your account, year after year. Your payouts hit your bank directly from Airbnb, Vrbo, and Booking. Your Superhost status is yours to keep.
              </p>
              <p style={{
                fontFamily: 'var(--font-display)', fontStyle: 'italic',
                fontSize: 'clamp(1.15rem, 1.5vw, 1.35rem)',
                fontWeight: 300, lineHeight: 1.5,
                color: 'var(--cream-50)', margin: '40px 0 0',
                paddingTop: 28,
                borderTop: '1px solid rgba(251,248,242,0.18)',
                textWrap: 'balance',
              }}>
                That's not a marketing claim. That's how the structure works. If you ever leave us, you leave with everything intact — including ten years of review history if it took you that long.
              </p>
            </div>
          </FadeIn>

          {/* Right — comparison table */}
          <FadeIn delay={120}>
            <div style={{
              border: '1px solid rgba(251,248,242,0.18)',
              background: 'rgba(251,248,242,0.03)',
            }}>
              {/* Table header — hidden on mobile (row labels carry the columns) */}
              {!isMobile && (
                <div style={{
                  display: 'grid', gridTemplateColumns: '1.1fr 1fr 1fr',
                  gap: 24, padding: '24px 28px',
                  borderBottom: '1px solid rgba(251,248,242,0.18)',
                }}>
                  <div style={{
                    fontFamily: 'var(--font-display)', fontStyle: 'italic',
                    fontSize: 14,
                    color: 'rgba(251,248,242,0.45)',
                    letterSpacing: '0.01em',
                  }}>What changes</div>
                  <div style={{
                    fontFamily: 'var(--font-display)', fontStyle: 'italic',
                    fontSize: 14, color: 'rgba(251,248,242,0.65)',
                    letterSpacing: '0.01em',
                  }}>Big-box manager</div>
                  <div style={{
                    fontFamily: 'var(--font-display)', fontStyle: 'italic',
                    fontSize: 14, color: 'var(--bronze-500)',
                    letterSpacing: '0.01em',
                  }}>Divergent (co-host)</div>
                </div>
              )}

              {rows.map(([label, a, b], i) => (
                isMobile ? (
                  <div key={i} style={{
                    padding: '22px 22px',
                    borderBottom: i < rows.length - 1 ? '1px solid rgba(251,248,242,0.10)' : 'none',
                    display: 'flex', flexDirection: 'column', gap: 14,
                  }}>
                    <div style={{
                      fontFamily: 'var(--font-body)', fontSize: 10.5,
                      letterSpacing: '0.28em', textTransform: 'uppercase',
                      color: 'rgba(251,248,242,0.55)', lineHeight: 1.5,
                    }}>{label}</div>
                    <div>
                      <div style={{
                        fontFamily: 'var(--font-display)', fontStyle: 'italic',
                        fontSize: 12, color: 'rgba(251,248,242,0.45)',
                        marginBottom: 4, letterSpacing: '0.02em',
                      }}>Big-box manager</div>
                      <div style={{
                        fontFamily: 'var(--font-body)', fontSize: 14,
                        color: 'rgba(251,248,242,0.62)', lineHeight: 1.5,
                      }}>{a}</div>
                    </div>
                    <div>
                      <div style={{
                        fontFamily: 'var(--font-display)', fontStyle: 'italic',
                        fontSize: 12, color: 'var(--bronze-500)',
                        marginBottom: 4, letterSpacing: '0.02em',
                      }}>Divergent (co-host)</div>
                      <div style={{
                        fontFamily: 'var(--font-body)', fontSize: 14,
                        color: 'var(--cream-50)', lineHeight: 1.5,
                        fontWeight: 500,
                      }}>{b}</div>
                    </div>
                  </div>
                ) : (
                  <div key={i} style={{
                    display: 'grid', gridTemplateColumns: '1.1fr 1fr 1fr',
                    gap: 24, padding: '20px 28px',
                    borderBottom: i < rows.length - 1 ? '1px solid rgba(251,248,242,0.10)' : 'none',
                  }}>
                    <div style={{
                      fontFamily: 'var(--font-body)', fontSize: 10.5,
                      letterSpacing: '0.24em', textTransform: 'uppercase',
                      color: 'rgba(251,248,242,0.55)', lineHeight: 1.5,
                    }}>{label}</div>
                    <div style={{
                      fontFamily: 'var(--font-body)', fontSize: 14,
                      color: 'rgba(251,248,242,0.62)', lineHeight: 1.5,
                    }}>{a}</div>
                    <div style={{
                      fontFamily: 'var(--font-body)', fontSize: 14,
                      color: 'var(--cream-50)', lineHeight: 1.5,
                      fontWeight: 500,
                    }}>{b}</div>
                  </div>
                )
              ))}
            </div>
          </FadeIn>
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// FAQLux — six things, answered straight. Accordion.
// ─────────────────────────────────────────────────────────────
function FAQLux() {
  const items = [
    {
      n: '01',
      q: 'How is co-hosting different from a full-service property manager?',
      a: "A property manager takes over your listing entirely — their account, their reviews, their payouts, their relationship with the platform. A co-host operates inside your account. You keep ownership. We bring the operations. The structural difference matters most when you eventually want out — co-hosted owners walk away with everything intact.",
    },
    {
      n: '02',
      q: 'What happens to my Superhost status when we start working together?',
      a: "Nothing. Your Superhost status is tied to your account, and your account stays yours. We work inside it. Your review history, your guest count, your response rate — all continue on your record. Many owners see Superhost metrics improve once we take over guest comms.",
    },
    {
      n: '03',
      q: "If I'm not satisfied, how does the engagement actually end?",
      a: "Ninety-day written notice, either direction. During that window we hand off cleaner relationships, vendor contacts, and operational documentation. Your listing was never anywhere but your account, so there's nothing to transfer back. You wake up the day after the notice expires with everything you started with — plus whatever review history accumulated while we worked together.",
    },
    {
      n: '04',
      q: 'Can I still use my property for personal use?',
      a: "Absolutely. Block any dates for personal use, friends, or family directly with us — we coordinate around your life, not the other way around. Personal-use blocks are free and unlimited.",
    },
    {
      n: '05',
      q: 'Can I choose my own service providers?',
      a: "Yes. We maintain a vetted local network for reliability, but we'll coordinate with your preferred cleaners and handymen on request. The network is there to help, not to lock you in.",
    },
    {
      n: '06',
      q: 'How do you screen guests and handle damages?',
      a: "Every guest is screened, every stay is insured. We document the property before and after each stay with photographed inspections, and we file insurance claims on your behalf when damage occurs. Our claims-handling experience across the portfolio means most issues are resolved before they reach you.",
    },
    {
      n: '07',
      q: "What's the difference between you and the big national brands?",
      a: "Volume versus precision. Big-box managers grow by signing as many homes as possible and automating around the gaps. We grow at a pace our team can actually deliver against. You'll know your account lead by name. They'll know your house by memory.",
    },
    {
      n: '08',
      q: "I'm self-managing now and burnt out. Where do we start?",
      a: "A twenty-minute phone call. We look at your listing, your last twelve months of revenue, and the markets we know. We tell you whether we can help and roughly what the lift looks like. The estimate is free and there's no sales pitch.",
    },
  ];

  const isMobile = useIsMobile();
  const [openIdx, setOpenIdx] = React.useState(0);

  return (
    <section data-screen-label="14 FAQ" style={{
      background: 'var(--cream-50)',
      padding: isMobile ? '120px 20px' : '180px 48px',
    }}>
      <div style={{ maxWidth: 1080, margin: '0 auto' }}>
        <SectionHeader eyebrow="· Questions owners ask ·">
          A few things, <I>answered straight.</I>
        </SectionHeader>

        <div style={{ marginTop: isMobile ? 56 : 100, borderTop: '1px solid rgba(28,26,23,0.18)' }}>
          {items.map((it, i) => {
            const open = openIdx === i;
            return (
              <FadeIn key={it.n} delay={i * 50}>
                <div style={{
                  borderBottom: '1px solid rgba(28,26,23,0.18)',
                }}>
                  <button
                    onClick={() => setOpenIdx(open ? -1 : i)}
                    style={{
                      width: '100%', textAlign: 'left',
                      background: 'transparent', border: 'none',
                      padding: isMobile ? '24px 0' : '32px 0', cursor: 'pointer',
                      display: 'grid',
                      gridTemplateColumns: isMobile ? '36px 1fr 24px' : '64px 1fr 32px',
                      gap: isMobile ? 12 : 24,
                      alignItems: 'baseline',
                      color: 'var(--ink-900)',
                    }}>
                    <span style={{
                      fontFamily: 'var(--font-display)', fontStyle: 'italic',
                      fontSize: 16, color: 'var(--bronze-500)',
                      letterSpacing: '0.02em',
                    }}>— {it.n}</span>
                    <span style={{
                      fontFamily: 'var(--font-display)',
                      fontSize: 'clamp(1.2rem, 1.7vw, 1.45rem)',
                      fontWeight: 400, lineHeight: 1.3, letterSpacing: '-0.01em',
                      color: 'var(--ink-900)',
                      textWrap: 'balance',
                    }}>{it.q}</span>
                    <span style={{
                      fontFamily: 'var(--font-display)', fontStyle: 'italic',
                      fontSize: 24, color: 'var(--bronze-500)',
                      lineHeight: 1, justifySelf: 'end',
                      transform: open ? 'rotate(45deg)' : 'rotate(0)',
                      transition: 'transform 280ms cubic-bezier(.19,1,.22,1)',
                    }}>+</span>
                  </button>

                  <div style={{
                    overflow: 'hidden',
                    maxHeight: open ? 800 : 0,
                    transition: 'max-height 480ms cubic-bezier(.19,1,.22,1), opacity 320ms',
                    opacity: open ? 1 : 0,
                  }}>
                    <div style={{
                      display: 'grid',
                      gridTemplateColumns: isMobile ? '36px 1fr 24px' : '64px 1fr 32px',
                      gap: isMobile ? 12 : 24,
                      paddingBottom: isMobile ? 28 : 36,
                    }}>
                      <span/>
                      <p style={{
                        fontFamily: 'var(--font-body)', fontSize: 15.5,
                        lineHeight: 1.78, color: 'var(--clay-700)',
                        margin: 0, maxWidth: 720,
                      }}>{it.a}</p>
                      <span/>
                    </div>
                  </div>
                </div>
              </FadeIn>
            );
          })}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { WhyCoHostLux, FAQLux });
