/* Reiderstad Invest — About view (positioning + team + fit) */
function AboutView({ setView, onBook }) {
  const { Button } = window.ReiderstadInvestDesignSystem_6b0242;
  const { Section, Eyebrow, IconCheck, IconClose } = window;

  const green = ['Committing €1M+, with specifics', '3–12 month timeline', 'Primary residence, second home, or owner-occupied', 'Has visited Mallorca more than once', 'Open to a structured process'];
  const red = ['Speculative or flip intent', 'Sub-six-week urgent timeline', 'Shopping multiple advisors at once', 'Wants a one-off transactional broker', 'Vague on use case'];

  return (
    <main>
      <section data-theme="dark" style={{ position: 'relative', minHeight: 520, display: 'flex', alignItems: 'flex-end', color: 'var(--fg)' }}>
        <img src="./assets/team/team-hero.jpg" alt="The Reiderstad Invest team" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(26,26,26,0.30) 0%, rgba(26,26,26,0.85) 100%)' }} />
        <div style={{ position: 'relative', maxWidth: 1280, margin: '0 auto', width: '100%', padding: '0 96px 72px' }}>
          <Eyebrow gold style={{ marginBottom: 24 }}>About</Eyebrow>
          <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 'clamp(40px, 5vw, 68px)', lineHeight: 1.05, letterSpacing: '-0.025em', margin: 0, maxWidth: 860, color: '#F4F4F4' }}>
            Long-term Mallorca operators, not a brokerage.
          </h1>
        </div>
      </section>

      <Section pad="112px 96px">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.3fr', gap: 96, alignItems: 'start' }}>
          <Eyebrow>Why we exist</Eyebrow>
          <div>
            <p style={{ fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 30, lineHeight: 1.3, letterSpacing: '-0.01em', margin: '0 0 24px', color: 'var(--fg)' }}>
              Most of the friction in buying here is post-closing. That is where we earn the fee.
            </p>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 17, lineHeight: 1.6, color: 'var(--muted-strong)', margin: 0, maxWidth: 620 }}>
              Acquisition channels in Mallorca are agent-led or developer-led — both paid by the seller. We are paid by the buyer, which is the only way to give advice that includes "walk away" as a valid outcome. The off-market access is real and built over years; the discipline of the structured brief is what makes the access useful.
            </p>
          </div>
        </div>
      </Section>

      {/* Team grid */}
      <Section pad="0 96px 112px" style={{ borderTop: 'none' }}>
        <Eyebrow style={{ marginBottom: 28 }}>The team</Eyebrow>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
          {['team-1', 'team-2', 'team-3'].map((f) => (
            <img key={f} src={`./assets/team/${f}.webp`} alt="The Reiderstad Invest team in Mallorca" style={{ width: '100%', height: 320, objectFit: 'cover', borderRadius: 'var(--radius-md)' }} />
          ))}
        </div>
      </Section>

      {/* Fit */}
      <Section dark pad="112px 96px">
        <Eyebrow gold style={{ marginBottom: 20 }}>Fit</Eyebrow>
        <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 40, lineHeight: 1.1, letterSpacing: '-0.02em', margin: '0 0 48px', maxWidth: 640 }}>
          We work with around twelve buyers a year. Fit matters.
        </h2>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
          {[['Where we fit', green, IconCheck, true], ['Where we don\u2019t', red, IconClose, false]].map(([title, items, Icon, good]) => (
            <div key={title} style={{ border: '1px solid var(--hairline)', borderRadius: 'var(--radius-md)', background: 'var(--surface-1)', padding: 32 }}>
              <Eyebrow gold={good} style={{ marginBottom: 24 }}>{title}</Eyebrow>
              <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'grid', gap: 16 }}>
                {items.map((t) => (
                  <li key={t} style={{ display: 'flex', gap: 14, alignItems: 'flex-start' }}>
                    <Icon size={18} style={{ color: good ? 'var(--accent)' : 'var(--muted)', flexShrink: 0, marginTop: 2 }} />
                    <span style={{ fontFamily: 'var(--font-body)', fontSize: 15, lineHeight: 1.5, color: good ? 'var(--fg)' : 'var(--muted-strong)' }}>{t}</span>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 48 }}>
          <Button variant="primary" onClick={onBook}>Book a scoping call</Button>
        </div>
      </Section>
    </main>
  );
}
window.AboutView = AboutView;