/* The Snowberry website — 3D walk-through (Matterport embed) */
function Tour3D() {
  const { Eyebrow, Button } = window.TheSnowberryDesignSystem_ed783b;
  const tourUrl = "https://my.matterport.com/show/?m=MkftjWDHNub";
  const [open, setOpen] = React.useState(false);
  return (
    <section id="tour" style={{ background: 'var(--surface-page)', padding: '112px 40px', borderTop: '1px solid var(--hairline)' }}>
      <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', gap: 24, flexWrap: 'wrap', marginBottom: 36 }}>
          <div>
            <Eyebrow>Walk Through · From Anywhere</Eyebrow>
            <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 300, fontSize: 'clamp(28px,3.6vw,46px)', lineHeight: 1.08, letterSpacing: '-0.02em', color: 'var(--green-700)', margin: '14px 0 0' }}>
              Take the full 3D tour.
            </h2>
            <p style={{ fontFamily: 'var(--font-sans)', fontSize: 16, lineHeight: 1.6, color: 'var(--ink-700)', margin: '14px 0 0', maxWidth: 480 }}>
              Step inside every room at your own pace, then call Finley and come see it in person.
            </p>
          </div>
          <Button as="a" variant="secondary" href={tourUrl} target="_blank" rel="noopener" iconRight={<span aria-hidden="true">↗</span>}>
            Open in full screen
          </Button>
        </div>

        <div className="sb-tour-frame" style={{ position: 'relative', borderRadius: 'var(--radius-xl)', overflow: 'hidden', boxShadow: 'var(--shadow-lg)', border: '1px solid var(--hairline)', aspectRatio: '16 / 9', background: 'var(--green-700)' }}>
          {open ? (
            <iframe
              title="The Snowberry — 3D walk-through"
              src={tourUrl + "&play=1"}
              allow="fullscreen; xr-spatial-tracking; gyroscope; accelerometer"
              allowFullScreen
              style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', border: 'none' }}
            />
          ) : (
            <button
              onClick={() => setOpen(true)}
              style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', border: 'none', cursor: 'pointer', padding: 0, background: 'transparent' }}
              aria-label="Start the 3D tour"
            >
              <img src="assets/images/living-room.jpg" alt="" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
              <span style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(36,58,32,0.30), rgba(36,58,32,0.55))' }} />
              <span style={{ position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 18 }}>
                <span style={{ width: 84, height: 84, borderRadius: '50%', background: 'rgba(253,251,248,0.92)', display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: 'var(--shadow-green)' }}>
                  <span style={{ width: 0, height: 0, borderLeft: '22px solid var(--green-600)', borderTop: '14px solid transparent', borderBottom: '14px solid transparent', marginLeft: 6 }} />
                </span>
                <span style={{ fontFamily: 'var(--font-sans)', fontWeight: 600, fontSize: 12, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--cream)', textShadow: '0 1px 6px rgba(0,0,0,.4)' }}>
                  Start the 3D walk-through
                </span>
              </span>
            </button>
          )}
        </div>
      </div>
    </section>
  );
}
window.Tour3D = Tour3D;