/* Reiderstad Invest — Property detail view (interactive gallery) */
function PropertyView({ setView, onBook }) {
  const { Button, Tag, Metric } = window.ReiderstadInvestDesignSystem_6b0242;
  const { Section, Eyebrow, IconMapPin, IconBed, IconRuler, IconArrow } = window;
  const gallery = [
    './assets/properties/son-vida-01.webp',
    './assets/properties/son-vida-28.webp',
    './assets/properties/son-vida-12.webp',
    './assets/properties/son-vida-20.webp',
  ];
  const [active, setActive] = React.useState(0);

  const meta = [
    [IconMapPin, 'Location', 'Son Vida, Palma'],
    [IconBed, 'Bedrooms', '6 + staff'],
    [IconRuler, 'Built area', '640 m²'],
  ];

  return (
    <main>
      <Section pad="56px 96px 0" style={{ borderTop: 'none' }}>
        <button onClick={() => setView('home')} style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 0, display: 'flex', alignItems: 'center', gap: 10, fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--muted)', marginBottom: 32 }}>
          <IconArrow size={16} style={{ transform: 'rotate(180deg)' }} /> Back
        </button>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', gap: 32, flexWrap: 'wrap', marginBottom: 32 }}>
          <div>
            <div style={{ display: 'flex', gap: 8, marginBottom: 18 }}>
              <Tag>Son Vida</Tag><Tag variant="accent">Off-market</Tag><Tag>Acquired 2024</Tag>
            </div>
            <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 'clamp(36px, 4.4vw, 56px)', lineHeight: 1.05, letterSpacing: '-0.025em', margin: 0, maxWidth: 760, color: 'var(--fg)' }}>
              A south-facing villa, sourced before listing.
            </h1>
          </div>
          <span style={{ fontFamily: 'var(--font-mono)', fontSize: 13, letterSpacing: '0.04em', color: 'var(--muted)' }}>REF · RI-2024-1093</span>
        </div>
      </Section>

      {/* Gallery */}
      <Section pad="0 96px 0" style={{ borderTop: 'none' }}>
        <img src={gallery[active]} alt="Son Vida villa" style={{ width: '100%', height: 540, objectFit: 'cover', borderRadius: 'var(--radius-md)' }} />
        <div style={{ display: 'flex', gap: 12, marginTop: 12 }}>
          {gallery.map((g, i) => (
            <button key={g} onClick={() => setActive(i)} style={{
              flex: 1, height: 96, padding: 0, border: i === active ? '2px solid var(--accent)' : '1px solid var(--hairline)',
              borderRadius: 'var(--radius-sm)', overflow: 'hidden', cursor: 'pointer', background: 'none',
            }}>
              <img src={g} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover', opacity: i === active ? 1 : 0.7 }} />
            </button>
          ))}
        </div>
      </Section>

      <Section pad="80px 96px">
        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 80, alignItems: 'start' }}>
          <div>
            <Eyebrow style={{ marginBottom: 24 }}>The work</Eyebrow>
            <p style={{ fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 28, lineHeight: 1.3, letterSpacing: '-0.01em', margin: '0 0 24px', color: 'var(--fg)' }}>
              From signed brief to keys in nine months — design and project layers running through closing.
            </p>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 17, lineHeight: 1.6, color: 'var(--muted-strong)', margin: '0 0 18px', maxWidth: 620 }}>
              The brief asked for sea views to Palma bay, single-level main living, and a renovation handled without the owner managing contractors from abroad. We sourced the property through a developer relationship before it reached the open market.
            </p>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 17, lineHeight: 1.6, color: 'var(--muted-strong)', margin: 0, maxWidth: 620 }}>
              Due diligence ran across legal, structural, urbanistic and tax dimensions. The interior and project teams worked from the same brief that drove the acquisition — one accountable counterparty across all three phases.
            </p>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 1, marginTop: 48, background: 'var(--hairline)', border: '1px solid var(--hairline)' }}>
              {[['9 mo', 'brief to keys', false], ['€2.4M', 'acquisition', true], ['5', 'viewings, 2 trips', false]].map(([v, l, a]) => (
                <div key={l} style={{ background: 'var(--bg)', padding: '28px 24px' }}><Metric value={v} label={l} accent={a} /></div>
              ))}
            </div>
          </div>
          <div style={{ border: '1px solid var(--hairline)', borderRadius: 'var(--radius-md)', background: 'var(--surface-1)', padding: 32, position: 'sticky', top: 100 }}>
            <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'grid', gap: 0 }}>
              {meta.map(([Icon, k, v], i) => (
                <li key={k} style={{ display: 'flex', alignItems: 'center', gap: 14, padding: '16px 0', borderTop: i ? '1px solid var(--hairline)' : 'none' }}>
                  <Icon size={20} style={{ color: 'var(--muted)' }} />
                  <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--muted)', width: 96 }}>{k}</span>
                  <span style={{ fontFamily: 'var(--font-body)', fontSize: 15, color: 'var(--fg)' }}>{v}</span>
                </li>
              ))}
            </ul>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 14, lineHeight: 1.55, color: 'var(--muted)', margin: '20px 0 24px' }}>
              A representative engagement. Client details are private by default.
            </p>
            <Button variant="primary" onClick={onBook} style={{ width: '100%' }}>Discuss a similar brief</Button>
          </div>
        </div>
      </Section>
    </main>
  );
}
window.PropertyView = PropertyView;