/* Reiderstad Invest — Home view */
function HomeView({ setView, onBook }) {
  const { Button, Tag, Metric, Card } = window.ReiderstadInvestDesignSystem_6b0242;
  const { Section, Eyebrow, IconCompass, IconLayers, IconTools, IconKey, IconHome, IconArrowUR } = window;

  const pillars = [
    [IconCompass, 'Acquisition', 'Off-market sourcing against a written brief. Five to eight curated viewings across two or three trips — not a twenty-property sprint.'],
    [IconHome, 'Interior design', 'A finished home aligned to your actual living pattern. Sourcing, installation and styling absorbed; you are an occasional reviewer.'],
    [IconLayers, 'Rental strategy', 'Honest yield modelling, not advertised headlines. License assessment, positioning, and operator coordination.'],
  ];

  return (
    <main>
      {/* HERO */}
      <section data-theme="dark" style={{ position: 'relative', minHeight: 660, display: 'flex', alignItems: 'flex-end', color: 'var(--fg)' }}>
        <img src="./assets/properties/son-vida-01.webp" alt="A villa in Son Vida, Mallorca"
          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.55) 0%, rgba(26,26,26,0.20) 40%, rgba(26,26,26,0.88) 100%)' }} />
        <div style={{ position: 'relative', maxWidth: 1280, margin: '0 auto', width: '100%', padding: '0 96px 88px' }}>
          <Eyebrow gold style={{ marginBottom: 28 }}>Mallorca · Balearic Islands</Eyebrow>
          <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 'clamp(48px, 6vw, 84px)', lineHeight: 1.0, letterSpacing: '-0.03em', margin: 0, maxWidth: 980, color: '#F4F4F4' }}>
            A property that works —<br />immediately and <em style={{ fontStyle: 'italic', color: 'var(--accent)' }}>long term</em>.
          </h1>
          <div style={{ display: 'flex', gap: 56, alignItems: 'flex-end', justifyContent: 'space-between', marginTop: 44, flexWrap: 'wrap' }}>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 18, lineHeight: 1.55, color: 'var(--muted-strong)', maxWidth: 520, margin: 0 }}>
              An integrated advisory for international buyers committing to Mallorca for the long term. Acquisition, design and rental — under one accountable partner.
            </p>
            <div style={{ display: 'flex', gap: 12 }}>
              <Button variant="primary" onClick={onBook}>Book a scoping call</Button>
              <Button variant="secondary" onClick={() => setView('services')}>How we work</Button>
            </div>
          </div>
        </div>
      </section>

      {/* POSITIONING / GROUND TRUTH */}
      <Section pad="112px 96px">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.3fr', gap: 96, alignItems: 'start' }}>
          <Eyebrow>Ground truth</Eyebrow>
          <div>
            <p style={{ fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 34, lineHeight: 1.25, letterSpacing: '-0.01em', margin: 0, color: 'var(--fg)' }}>
              There is no <em style={{ fontStyle: 'italic', color: 'var(--accent)' }}>exclusive</em> Mallorca property. There are properties, and there are relationships that get you to them first.
            </p>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 17, lineHeight: 1.6, color: 'var(--muted-strong)', marginTop: 28, maxWidth: 620 }}>
              We work with around twelve buyers per year. The model only functions at that volume — and the relationship deepens after closing rather than ending at it. The integrated layer is the part of the offering that other Mallorca advisories do not provide.
            </p>
          </div>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 1, marginTop: 72, background: 'var(--hairline)', border: '1px solid var(--hairline)' }}>
          {[['~12', 'buyers per year', false], ['7 days', 'to first viewing, brief signed', false], ['€2.4M', 'average acquisition, 2024', true]].map(([v, l, a]) => (
            <div key={l} style={{ background: 'var(--bg)', padding: '40px 36px' }}>
              <Metric value={v} label={l} accent={a} />
            </div>
          ))}
        </div>
      </Section>

      {/* THE THREE PILLARS */}
      <Section dark pad="112px 96px">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', gap: 32, marginBottom: 56 }}>
          <div>
            <Eyebrow gold style={{ marginBottom: 20 }}>The integrated model</Eyebrow>
            <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 44, lineHeight: 1.1, letterSpacing: '-0.02em', margin: 0, maxWidth: 640 }}>
              Three pillars, one accountable counterparty.
            </h2>
          </div>
          <Button variant="secondary" onClick={() => setView('services')}>All services</Button>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 1, background: 'var(--hairline)', border: '1px solid var(--hairline)' }}>
          {pillars.map(([Icon, title, body]) => (
            <button key={title} onClick={() => setView('services')} style={{
              background: 'var(--bg)', border: 'none', textAlign: 'left', cursor: 'pointer',
              padding: '40px 36px', display: 'grid', gap: 18,
            }}>
              <Icon size={26} style={{ color: 'var(--accent)' }} />
              <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 22, margin: 0, color: 'var(--fg)' }}>{title}</h3>
              <p style={{ fontFamily: 'var(--font-body)', fontSize: 15, lineHeight: 1.6, color: 'var(--muted-strong)', margin: 0 }}>{body}</p>
            </button>
          ))}
          <div style={{ background: 'var(--bg)', padding: '40px 36px', display: 'flex', alignItems: 'flex-end', gridColumn: '1 / -1' }}>
            <span style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: 19, lineHeight: 1.4, color: 'var(--muted)' }}>
              Owned, not just purchased.
            </span>
          </div>
        </div>
      </Section>

      {/* FEATURED PROPERTY */}
      <Section pad="112px 96px">
        <Eyebrow style={{ marginBottom: 36 }}>A recent acquisition</Eyebrow>
        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 48, alignItems: 'stretch' }}>
          <img src="./assets/properties/son-vida-09.webp" alt="Son Vida villa terrace"
            style={{ width: '100%', height: 460, objectFit: 'cover', borderRadius: 'var(--radius-md)' }} />
          <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'space-between', gap: 24 }}>
            <div>
              <div style={{ display: 'flex', gap: 8, marginBottom: 20 }}>
                <Tag>Son Vida</Tag><Tag variant="accent">Off-market</Tag>
              </div>
              <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 34, lineHeight: 1.15, letterSpacing: '-0.01em', margin: '0 0 16px', color: 'var(--fg)' }}>
                A south-facing villa, sourced before listing.
              </h2>
              <p style={{ fontFamily: 'var(--font-body)', fontSize: 16, lineHeight: 1.6, color: 'var(--muted-strong)', margin: 0 }}>
                Six bedrooms, sea views to Palma bay, and a renovation brief handled end-to-end. From signed brief to keys in nine months — with the design layer running through closing.
              </p>
            </div>
            <Button variant="ghost" onClick={() => setView('property')} iconRight={<IconArrowUR size={16} />} style={{ justifySelf: 'start' }}>View the property</Button>
          </div>
        </div>
      </Section>

      {/* CTA BAND — canvas (not surface-2) so the stone secondary CTA reads against it */}
      <Section pad="96px 96px" style={{ background: 'var(--bg)' }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 40, flexWrap: 'wrap' }}>
          <div>
            <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 38, lineHeight: 1.15, letterSpacing: '-0.02em', margin: 0, maxWidth: 640, color: 'var(--fg)' }}>
              Send the brief when you are ready. We will reply within two business days.
            </h2>
          </div>
          <div style={{ display: 'flex', gap: 12 }}>
            <Button variant="primary" onClick={onBook}>Book a scoping call</Button>
            <Button variant="secondary">Request the buyer guide</Button>
          </div>
        </div>
      </Section>
    </main>
  );
}
window.HomeView = HomeView;