/* ============================================================
   Screens 3-6: AI Match, Explore, AI Preview, Book a Visit
   ============================================================ */

const { useState, useEffect, useRef } = React;

// ─────────────────────────────────────────
// Screen 03: AI Match Results
// ─────────────────────────────────────────
function MatchScreen() {
  const { state, dispatch, computeMatches, computeMatchPercentage } = useApp();
  const matches = computeMatches();
  const [primaryHome, ...otherHomes] = matches;

  const handleExplore = () => {
    dispatch({ type: 'NEXT_STEP' });
  };

  const handleAdjust = () => {
    dispatch({ type: 'SET_STEP', step: 1 });
  };

  const handleSave = (homeId) => {
    dispatch({ type: 'TOGGLE_SAVE_HOME', homeId });
  };

  const handleCompare = (homeId) => {
    dispatch({ type: 'TOGGLE_COMPARE_HOME', homeId });
  };

  const isSaved = (id) => state.savedHomes.includes(id);
  const isCompared = (id) => state.comparedHomes.includes(id);

  return (
    <div style={{
      position: 'absolute', inset: 0,
      zIndex: 1,
      padding: '80px 0 83px',
      overflowY: 'auto',
      overflowX: 'hidden',
      scrollbarWidth: 'none',
    }}>
      <style>{`
        .match-screen::-webkit-scrollbar { display: none; }
      `}</style>
      <div className="match-screen" style={{ padding: '0 20px' }}>
        {/* Header */}
        <div style={{ marginBottom: 20 }}>
          <div style={{
            fontFamily: "'Fraunces', serif",
            fontSize: 13,
            color: '#C9A962',
            letterSpacing: '0.08em',
            textTransform: 'uppercase',
            marginBottom: 6,
          }}>
            My Dream Home
          </div>
          <h2 style={{
            fontFamily: "'Fraunces', serif",
            fontSize: 32,
            fontWeight: 500,
            lineHeight: 1.1,
            letterSpacing: '-0.02em',
            color: '#F5EFE0',
            marginBottom: 6,
          }}>
            Your best-fit homes
          </h2>
          <p style={{ fontSize: 15, color: 'rgba(245, 239, 224, 0.7)' }}>
            Matched to how your family wants to live.
          </p>
        </div>

        {/* Primary match card */}
        <div style={{
          background: 'rgba(11, 46, 36, 0.5)',
          backdropFilter: 'blur(12px)',
          border: '1px solid rgba(245, 239, 224, 0.1)',
          borderRadius: 24,
          overflow: 'hidden',
          marginBottom: 16,
        }}>
          {/* Hero image area */}
          <div style={{
            height: 200,
            background: `linear-gradient(180deg, rgba(11,46,36,0) 40%, rgba(11,46,36,0.8) 100%),
              radial-gradient(ellipse at 30% 30%, rgba(45,122,94,0.4), transparent 50%),
              linear-gradient(135deg, #1B5A45 0%, #0B2E24 100%)`,
            position: 'relative',
            display: 'flex',
            alignItems: 'flex-end',
            justifyContent: 'center',
            padding: '0 20px 20px',
          }}>
            {/* Stylized villa illustration */}
            <svg viewBox="0 0 300 140" width="100%" height="120" style={{ opacity: 0.9 }}>
              <defs>
                <linearGradient id="villaGrad" x1="0" y1="0" x2="0" y2="1">
                  <stop offset="0%" stopColor="#E8DFCA" stopOpacity="0.9"/>
                  <stop offset="100%" stopColor="#C9A962" stopOpacity="0.3"/>
                </linearGradient>
              </defs>
              {/* Building silhouette */}
              <rect x="40" y="60" width="70" height="80" rx="2" fill="url(#villaGrad)"/>
              <rect x="115" y="40" width="80" height="100" rx="2" fill="url(#villaGrad)"/>
              <rect x="200" y="55" width="60" height="85" rx="2" fill="url(#villaGrad)"/>
              {/* Roofs */}
              <rect x="35" y="52" width="80" height="10" rx="1" fill="#C9A962" opacity="0.6"/>
              <rect x="110" y="30" width="90" height="12" rx="1" fill="#C9A962" opacity="0.6"/>
              <rect x="195" y="47" width="70" height="10" rx="1" fill="#C9A962" opacity="0.6"/>
              {/* Windows */}
              <rect x="55" y="75" width="15" height="20" rx="1" fill="#0B2E24" opacity="0.5"/>
              <rect x="80" y="75" width="15" height="20" rx="1" fill="#0B2E24" opacity="0.5"/>
              <rect x="135" y="55" width="18" height="25" rx="1" fill="#0B2E24" opacity="0.5"/>
              <rect x="165" y="55" width="18" height="25" rx="1" fill="#0B2E24" opacity="0.5"/>
              <rect x="215" y="70" width="14" height="18" rx="1" fill="#0B2E24" opacity="0.5"/>
              <rect x="238" y="70" width="14" height="18" rx="1" fill="#0B2E24" opacity="0.5"/>
              {/* Door */}
              <rect x="148" y="95" width="18" height="45" rx="1" fill="#8B6914" opacity="0.7"/>
            </svg>

            {/* Match badge */}
            <div style={{
              position: 'absolute',
              top: 16, left: 16,
              display: 'flex', gap: 8,
            }}>
              <span style={{
                padding: '5px 12px',
                background: 'rgba(201, 169, 98, 0.25)',
                border: '1px solid rgba(201, 169, 98, 0.4)',
                borderRadius: 100,
                fontSize: 12,
                fontWeight: 500,
                color: '#E0C98E',
                backdropFilter: 'blur(8px)',
              }}>Best match</span>
              <span style={{
                padding: '5px 12px',
                background: 'rgba(245, 239, 224, 0.1)',
                border: '1px solid rgba(245, 239, 224, 0.15)',
                borderRadius: 100,
                fontSize: 12,
                color: '#F5EFE0',
                backdropFilter: 'blur(8px)',
              }}>{primaryHome?.type}</span>
              <span style={{
                padding: '5px 12px',
                background: 'rgba(245, 239, 224, 0.1)',
                border: '1px solid rgba(245, 239, 224, 0.15)',
                borderRadius: 100,
                fontSize: 12,
                color: '#F5EFE0',
                backdropFilter: 'blur(8px)',
              }}>{computeMatchPercentage(primaryHome?.score || 0)}% match</span>
            </div>
          </div>

          {/* Card content */}
          <div style={{ padding: '18px 20px 20px' }}>
            <h3 style={{
              fontFamily: "'Fraunces', serif",
              fontSize: 22,
              fontWeight: 500,
              color: '#F5EFE0',
              marginBottom: 6,
              lineHeight: 1.25,
            }}>
              {primaryHome?.name}
            </h3>
            <p style={{
              fontSize: 13,
              color: 'rgba(245, 239, 224, 0.65)',
              marginBottom: 14,
              lineHeight: 1.5,
            }}>
              {primaryHome?.tagline}
            </p>

            <div style={{ marginBottom: 14 }}>
              <div style={{
                fontSize: 12,
                color: 'rgba(245, 239, 224, 0.5)',
                marginBottom: 8,
              }}>
                Why it fits your lifestyle
              </div>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
                {primaryHome?.highlights.map((h, i) => (
                  <span key={i} style={{
                    padding: '5px 12px',
                    background: 'rgba(245, 239, 224, 0.06)',
                    border: '1px solid rgba(245, 239, 224, 0.12)',
                    borderRadius: 100,
                    fontSize: 12,
                    color: 'rgba(245, 239, 224, 0.85)',
                  }}>{h}</span>
                ))}
              </div>
            </div>

            <button
              onClick={handleExplore}
              style={{
                width: '100%',
                height: 48,
                borderRadius: 100,
                background: '#2D7A5E',
                color: '#fff',
                border: 'none',
                fontSize: 15,
                fontWeight: 500,
                cursor: 'pointer',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                gap: 8,
                transition: 'all 0.2s ease',
              }}
              onMouseEnter={(e) => { e.currentTarget.style.background = '#3D9678'; }}
              onMouseLeave={(e) => { e.currentTarget.style.background = '#2D7A5E'; }}
            >
              Explore this match
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" width="16" height="16">
                <line x1="5" y1="12" x2="19" y2="12"/>
                <polyline points="12 5 19 12 12 19"/>
              </svg>
            </button>
          </div>
        </div>

        {/* Alternative options */}
        <div style={{ marginBottom: 16 }}>
          <div style={{
            fontSize: 12,
            color: 'rgba(245, 239, 224, 0.5)',
            marginBottom: 10,
            padding: '0 2px',
          }}>
            Other options you might like
          </div>
          <div style={{ display: 'flex', gap: 12, overflowX: 'auto', paddingBottom: 4 }}>
            {otherHomes.map((home, idx) => (
              <div key={home.id} style={{
                flex: '0 0 180px',
                background: 'rgba(11, 46, 36, 0.4)',
                backdropFilter: 'blur(10px)',
                border: '1px solid rgba(245, 239, 224, 0.08)',
                borderRadius: 18,
                overflow: 'hidden',
              }}>
                <div style={{
                  height: 110,
                  background: `linear-gradient(135deg, ${idx === 0 ? '#1B5A45' : '#2D6B5F'} 0%, #0B2E24 100%)`,
                  position: 'relative',
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                }}>
                  <svg viewBox="0 0 120 70" width="80%" height="60">
                    <rect x="15" y="25" width="30" height="45" rx="1" fill="#E8DFCA" opacity="0.7"/>
                    <rect x="48" y="15" width="40" height="55" rx="1" fill="#E8DFCA" opacity="0.7"/>
                    <rect x="90" y="30" width="20" height="40" rx="1" fill="#E8DFCA" opacity="0.7"/>
                    <rect x="12" y="18" width="36" height="8" rx="1" fill="#C9A962" opacity="0.5"/>
                    <rect x="45" y="7" width="46" height="10" rx="1" fill="#C9A962" opacity="0.5"/>
                    <rect x="87" y="22" width="26" height="8" rx="1" fill="#C9A962" opacity="0.5"/>
                  </svg>
                  <div style={{
                    position: 'absolute',
                    bottom: 8, left: 10,
                    fontSize: 11,
                    color: 'rgba(245, 239, 224, 0.6)',
                  }}>
                    Option {idx + 2}
                  </div>
                </div>
                <div style={{ padding: '12px 14px 14px' }}>
                  <h4 style={{
                    fontSize: 14,
                    fontWeight: 500,
                    color: '#F5EFE0',
                    marginBottom: 4,
                  }}>{home.name}</h4>
                  <div style={{
                    fontSize: 11,
                    color: 'rgba(245, 239, 224, 0.5)',
                    marginBottom: 10,
                  }}>{computeMatchPercentage(home.score)}% match</div>
                  <div style={{ display: 'flex', gap: 8 }}>
                    <button
                      onClick={() => handleSave(home.id)}
                      style={{
                        flex: 1,
                        height: 34,
                        borderRadius: 100,
                        background: isSaved(home.id) ? 'rgba(201, 169, 98, 0.2)' : 'rgba(245, 239, 224, 0.06)',
                        border: `1px solid ${isSaved(home.id) ? 'rgba(201, 169, 98, 0.4)' : 'rgba(245, 239, 224, 0.12)'}`,
                        color: isSaved(home.id) ? '#C9A962' : 'rgba(245, 239, 224, 0.7)',
                        fontSize: 12,
                        cursor: 'pointer',
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'center',
                        gap: 4,
                        transition: 'all 0.2s ease',
                      }}
                    >
                      <svg viewBox="0 0 24 24" fill={isSaved(home.id) ? 'currentColor' : 'none'} stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" width="13" height="13">
                        <path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/>
                      </svg>
                      Save
                    </button>
                    <button
                      onClick={() => handleCompare(home.id)}
                      style={{
                        flex: 1,
                        height: 34,
                        borderRadius: 100,
                        background: isCompared(home.id) ? 'rgba(201, 169, 98, 0.2)' : 'rgba(245, 239, 224, 0.06)',
                        border: `1px solid ${isCompared(home.id) ? 'rgba(201, 169, 98, 0.4)' : 'rgba(245, 239, 224, 0.12)'}`,
                        color: isCompared(home.id) ? '#C9A962' : 'rgba(245, 239, 224, 0.7)',
                        fontSize: 12,
                        cursor: 'pointer',
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'center',
                        gap: 4,
                        transition: 'all 0.2s ease',
                      }}
                    >
                      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" width="13" height="13">
                        <rect x="3" y="4" width="7" height="16" rx="1"/>
                        <rect x="14" y="4" width="7" height="10" rx="1"/>
                      </svg>
                      Compare
                    </button>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Adjust preferences */}
        <button
          onClick={handleAdjust}
          style={{
            width: '100%',
            height: 46,
            borderRadius: 100,
            background: 'transparent',
            border: '1px solid rgba(245, 239, 224, 0.25)',
            color: '#F5EFE0',
            fontSize: 14,
            fontWeight: 500,
            cursor: 'pointer',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            gap: 8,
            marginBottom: 20,
            transition: 'all 0.2s ease',
          }}
          onMouseEnter={(e) => {
            e.currentTarget.style.borderColor = 'rgba(201, 169, 98, 0.5)';
            e.currentTarget.style.color = '#C9A962';
          }}
          onMouseLeave={(e) => {
            e.currentTarget.style.borderColor = 'rgba(245, 239, 224, 0.25)';
            e.currentTarget.style.color = '#F5EFE0';
          }}
        >
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" width="16" height="16">
            <polyline points="23 4 23 10 17 10"/>
            <path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/>
          </svg>
          Adjust preferences
        </button>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────
// Screen 04: Explore Home & Community
// ─────────────────────────────────────────
function ExploreScreen() {
  const { state, dispatch, computeMatches } = useApp();
  const matches = computeMatches();
  const primaryHome = matches[0] || {};
  const [activeTab, setActiveTab] = useState('home');
  const [compareOpen, setCompareOpen] = useState(false);

  const tabs = [
    { key: 'home', label: 'Home' },
    { key: 'community', label: 'Community' },
    { key: 'everyday', label: 'Everyday Life' },
  ];

  const handleSave = () => {
    dispatch({ type: 'TOGGLE_SAVE_HOME', homeId: primaryHome.id });
  };

  const handleCompare = () => {
    dispatch({ type: 'TOGGLE_COMPARE_HOME', homeId: primaryHome.id });
  };

  const handleShare = () => {
    dispatch({ type: 'SET_STEP', step: 4 }); // go to AI preview
  };

  const isSaved = state.savedHomes.includes(primaryHome.id);
  const isCompared = state.comparedHomes.includes(primaryHome.id);

  return (
    <div style={{
      position: 'absolute', inset: 0,
      zIndex: 1,
      display: 'flex',
      flexDirection: 'column',
    }}>
      {/* Hero image */}
      <div style={{
        height: 320,
        background: `linear-gradient(180deg, rgba(11,46,36,0.3) 0%, rgba(11,46,36,0.7) 70%, #0B2E24 100%),
          linear-gradient(135deg, #1B5A45 0%, #0B2E24 100%)`,
        position: 'relative',
        overflow: 'hidden',
      }}>
        {/* Villa illustration */}
        <svg viewBox="0 0 400 220" width="100%" height="100%" preserveAspectRatio="xMidYMid slice" style={{ position: 'absolute', inset: 0, opacity: 0.85 }}>
          <defs>
            <linearGradient id="skyGrad" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0%" stopColor="#2D6B5F"/>
              <stop offset="60%" stopColor="#1B5A45"/>
              <stop offset="100%" stopColor="#0B2E24"/>
            </linearGradient>
            <linearGradient id="bldgGrad" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0%" stopColor="#E8DFCA"/>
              <stop offset="100%" stopColor="#C9A962" stopOpacity="0.4"/>
            </linearGradient>
          </defs>
          <rect width="400" height="220" fill="url(#skyGrad)"/>
          {/* Palm silhouettes */}
          <ellipse cx="50" cy="220" rx="60" ry="8" fill="#0B2E24" opacity="0.5"/>
          <rect x="48" y="120" width="4" height="100" fill="#0B2E24" opacity="0.4"/>
          <ellipse cx="50" cy="120" rx="30" ry="15" fill="#0B2E24" opacity="0.4"/>
          <ellipse cx="350" cy="220" rx="50" ry="6" fill="#0B2E24" opacity="0.5"/>
          <rect x="348" y="140" width="3" height="80" fill="#0B2E24" opacity="0.3"/>
          <ellipse cx="350" cy="140" rx="25" ry="12" fill="#0B2E24" opacity="0.3"/>
          {/* Main villa */}
          <rect x="100" y="90" width="80" height="120" rx="2" fill="url(#bldgGrad)"/>
          <rect x="185" y="60" width="100" height="150" rx="2" fill="url(#bldgGrad)"/>
          <rect x="290" y="85" width="60" height="125" rx="2" fill="url(#bldgGrad)"/>
          {/* Roofs */}
          <rect x="95" y="82" width="90" height="10" rx="1" fill="#8B6914" opacity="0.7"/>
          <rect x="180" y="50" width="110" height="12" rx="1" fill="#8B6914" opacity="0.7"/>
          <rect x="285" y="77" width="70" height="10" rx="1" fill="#8B6914" opacity="0.7"/>
          {/* Windows */}
          <rect x="115" y="105" width="18" height="28" rx="1" fill="#0B2E24" opacity="0.5"/>
          <rect x="148" y="105" width="18" height="28" rx="1" fill="#0B2E24" opacity="0.5"/>
          <rect x="210" y="78" width="22" height="32" rx="1" fill="#F5EFE0" opacity="0.7"/>
          <rect x="248" y="78" width="22" height="32" rx="1" fill="#F5EFE0" opacity="0.7"/>
          {/* Door */}
          <rect x="225" y="150" width="20" height="60" rx="1" fill="#6B4F10" opacity="0.8"/>
          <circle cx="241" cy="180" r="1.5" fill="#C9A962"/>
          {/* Ground */}
          <rect x="0" y="210" width="400" height="10" fill="#0B2E24" opacity="0.6"/>
        </svg>

        {/* Back button */}
        <button
          onClick={() => dispatch({ type: 'PREV_STEP' })}
          style={{
            position: 'absolute',
            top: 72, left: 20,
            width: 36, height: 36,
            borderRadius: '50%',
            background: 'rgba(0, 0, 0, 0.4)',
            backdropFilter: 'blur(10px)',
            border: '1px solid rgba(245, 239, 224, 0.1)',
            color: '#F5EFE0',
            cursor: 'pointer',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            zIndex: 10,
            transition: 'all 0.2s ease',
          }}
          onMouseEnter={(e) => { e.currentTarget.style.background = 'rgba(0,0,0,0.6)'; }}
          onMouseLeave={(e) => { e.currentTarget.style.background = 'rgba(0,0,0,0.4)'; }}
        >
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" width="18" height="18">
            <polyline points="15 18 9 12 15 6"/>
          </svg>
        </button>

        {/* Save button */}
        <button
          onClick={handleSave}
          style={{
            position: 'absolute',
            top: 72, right: 20,
            width: 36, height: 36,
            borderRadius: '50%',
            background: 'rgba(0, 0, 0, 0.4)',
            backdropFilter: 'blur(10px)',
            border: `1px solid ${isSaved ? 'rgba(201, 169, 98, 0.5)' : 'rgba(245, 239, 224, 0.1)'}`,
            color: isSaved ? '#C9A962' : '#F5EFE0',
            cursor: 'pointer',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            zIndex: 10,
            transition: 'all 0.2s ease',
          }}
        >
          <svg viewBox="0 0 24 24" fill={isSaved ? 'currentColor' : 'none'} stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" width="17" height="17">
            <path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/>
          </svg>
        </button>

        {/* Title overlay */}
        <div style={{
          position: 'absolute',
          bottom: 20, left: 20, right: 20,
          zIndex: 5,
        }}>
          <div style={{
            fontSize: 12, color: '#C9A962',
            letterSpacing: '0.06em', textTransform: 'uppercase',
            marginBottom: 4,
          }}>
            Explore your match
          </div>
          <h2 style={{
            fontFamily: "'Fraunces', serif",
            fontSize: 28,
            fontWeight: 500,
            color: '#F5EFE0',
            lineHeight: 1.15,
            textShadow: '0 2px 15px rgba(0,0,0,0.4)',
          }}>
            {primaryHome.name}
          </h2>
        </div>
      </div>

      {/* Tabs */}
      <div style={{
        padding: '16px 20px 12px',
        background: '#0B2E24',
      }}>
        <div style={{
          display: 'flex', gap: 6,
          padding: 4,
          background: 'rgba(245, 239, 224, 0.06)',
          borderRadius: 100,
        }}>
          {tabs.map(tab => (
            <button
              key={tab.key}
              onClick={() => setActiveTab(tab.key)}
              style={{
                flex: 1,
                height: 38,
                borderRadius: 100,
                background: activeTab === tab.key ? '#2D7A5E' : 'transparent',
                color: activeTab === tab.key ? '#fff' : 'rgba(245, 239, 224, 0.6)',
                border: 'none',
                fontSize: 14,
                fontWeight: activeTab === tab.key ? 500 : 400,
                cursor: 'pointer',
                transition: 'all 0.2s ease',
              }}
            >
              {tab.label}
            </button>
          ))}
        </div>
      </div>

      {/* Tab content */}
      <div style={{
        flex: 1,
        background: '#0B2E24',
        overflowY: 'auto',
        padding: '0 20px 100px',
      }}>
        {activeTab === 'home' && (
          <div>
            <p style={{
              fontSize: 14, color: 'rgba(245, 239, 224, 0.65)',
              lineHeight: 1.6, marginBottom: 16,
            }}>
              {primaryHome.tagline}
            </p>

            <div style={{ marginBottom: 18 }}>
              <div style={{
                fontSize: 12, color: 'rgba(245, 239, 224, 0.45)',
                marginBottom: 10, textTransform: 'uppercase', letterSpacing: '0.06em',
              }}>Features</div>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
                {primaryHome.highlights?.map((h, i) => (
                  <span key={i} style={{
                    padding: '6px 14px',
                    background: 'rgba(245, 239, 224, 0.06)',
                    border: '1px solid rgba(245, 239, 224, 0.1)',
                    borderRadius: 100,
                    fontSize: 13,
                    color: 'rgba(245, 239, 224, 0.85)',
                  }}>{h}</span>
                ))}
              </div>
            </div>

            {/* Image gallery preview */}
            <div style={{
              display: 'flex', gap: 10,
              marginBottom: 20,
            }}>
              <div style={{
                flex: 1, height: 130,
                borderRadius: 14,
                background: 'linear-gradient(135deg, #1B5A45 0%, #2D7A5E 100%)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                position: 'relative',
                overflow: 'hidden',
              }}>
                <svg viewBox="0 0 100 80" width="70%" height="70%">
                  <rect x="5" y="20" width="35" height="55" rx="1" fill="#E8DFCA" opacity="0.5"/>
                  <rect x="42" y="10" width="50" height="65" rx="1" fill="#E8DFCA" opacity="0.5"/>
                  <rect x="12" y="32" width="8" height="15" rx="1" fill="#0B2E24" opacity="0.4"/>
                  <rect x="52" y="22" width="10" height="18" rx="1" fill="#F5EFE0" opacity="0.6"/>
                </svg>
              </div>
              <div style={{
                flex: 1, height: 130,
                borderRadius: 14,
                background: 'linear-gradient(135deg, #2D6B5F 0%, #1B5A45 100%)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}>
                <svg viewBox="0 0 100 80" width="70%" height="70%">
                  <rect x="15" y="40" width="70" height="35" rx="2" fill="#E8DFCA" opacity="0.4"/>
                  <circle cx="30" cy="30" r="8" fill="#C9A962" opacity="0.4"/>
                  <circle cx="60" cy="25" r="5" fill="#C9A962" opacity="0.3"/>
                </svg>
              </div>
            </div>
          </div>
        )}

        {activeTab === 'community' && (
          <div>
            <p style={{
              fontSize: 14, color: 'rgba(245, 239, 224, 0.65)',
              lineHeight: 1.6, marginBottom: 14,
            }}>
              {primaryHome.community} — a thoughtfully planned neighborhood designed around how families actually live.
            </p>

            {/* Feature pills */}
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10, marginBottom: 18 }}>
              {['Walkable spaces', 'Green surroundings', 'Family-friendly setting', 'Community pools', 'Parks & playgrounds'].map((item, i) => (
                <div key={i} style={{
                  display: 'flex', alignItems: 'center', gap: 6,
                  padding: '8px 14px',
                  background: 'rgba(245, 239, 224, 0.05)',
                  border: '1px solid rgba(245, 239, 224, 0.1)',
                  borderRadius: 100,
                  fontSize: 13,
                  color: 'rgba(245, 239, 224, 0.85)',
                }}>
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" width="13" height="13" style={{ color: '#2D7A5E' }}>
                    <polyline points="20 6 9 17 4 12"/>
                  </svg>
                  {item}
                </div>
              ))}
            </div>

            {/* Community images */}
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              <div style={{
                height: 140,
                borderRadius: 16,
                background: 'linear-gradient(135deg, #1B5A45 0%, #2D7A5E 60%, #1B5A45 100%)',
                position: 'relative',
                overflow: 'hidden',
              }}>
                <svg viewBox="0 0 200 100" width="100%" height="100%" preserveAspectRatio="xMidYMid slice">
                  {/* Aerial view of community */}
                  <rect x="0" y="0" width="200" height="100" fill="#1B5A45"/>
                  {[...Array(6)].map((_, i) => (
                    <g key={i} transform={`translate(${10 + i * 32}, ${20 + (i%2) * 25})`}>
                      <rect width="22" height="35" rx="1" fill="#E8DFCA" opacity="0.5"/>
                      <rect width="24" height="5" rx="1" y="-3" fill="#C9A962" opacity="0.4"/>
                    </g>
                  ))}
                  <ellipse cx="160" cy="70" rx="25" ry="12" fill="#2D7A5E" opacity="0.7"/>
                  <path d="M145 68 Q160 55 175 68" stroke="#C9A962" strokeWidth="1" fill="none" opacity="0.4"/>
                </svg>
                <div style={{
                  position: 'absolute', bottom: 12, left: 14,
                  fontSize: 13, color: 'rgba(245, 239, 224, 0.8)',
                  fontWeight: 500,
                }}>Community overview</div>
              </div>
              <div style={{ height: 110, borderRadius: 16, background: 'linear-gradient(135deg, #2D6B5F 0%, #1B5A45 100%)', position: 'relative', overflow: 'hidden' }}>
                <svg viewBox="0 0 200 80" width="100%" height="100%">
                  <ellipse cx="100" cy="60" rx="80" ry="20" fill="#2D7A5E" opacity="0.5"/>
                  <circle cx="100" cy="55" r="15" fill="#3D9678" opacity="0.3"/>
                  <circle cx="60" cy="50" r="8" fill="#2D7A5E" opacity="0.6"/>
                  <circle cx="140" cy="52" r="10" fill="#2D7A5E" opacity="0.5"/>
                </svg>
                <div style={{
                  position: 'absolute', bottom: 10, left: 14,
                  fontSize: 12, color: 'rgba(245, 239, 224, 0.7)',
                }}>Green parks & open spaces</div>
              </div>
            </div>
          </div>
        )}

        {activeTab === 'everyday' && (
          <div>
            <p style={{
              fontSize: 14, color: 'rgba(245, 239, 224, 0.65)',
              lineHeight: 1.6, marginBottom: 14,
            }}>
              Imagine your daily routine here — from morning coffee to evening walks.
            </p>

            <div style={{ display: 'flex', flexDirection: 'column', gap: 12, marginBottom: 18 }}>
              {[
                { time: 'Morning', desc: 'Enjoy sunrise from your terrace with a cup of coffee', icon: 'sun' },
                { time: 'Afternoon', desc: 'Kids play in green spaces while you relax nearby', icon: 'heart' },
                { time: 'Evening', desc: 'Cool walks under the stars with family and friends', icon: 'moon' },
              ].map((item, i) => (
                <div key={i} style={{
                  display: 'flex', gap: 14,
                  padding: 14,
                  background: 'rgba(245, 239, 224, 0.04)',
                  border: '1px solid rgba(245, 239, 224, 0.08)',
                  borderRadius: 14,
                }}>
                  <div style={{
                    width: 38, height: 38, borderRadius: 12,
                    background: 'rgba(201, 169, 98, 0.12)',
                    color: '#C9A962',
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    flexShrink: 0,
                  }}>
                    {item.icon === 'sun' && <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" width="18" height="18"><circle cx="12" cy="12" r="4"/><path d="M12 3v2M12 19v2M3 12h2M19 12h2M5.6 5.6l1.4 1.4M17 17l1.4 1.4M5.6 18.4L7 17M17 7l1.4-1.4"/></svg>}
                    {item.icon === 'heart' && <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" width="18" height="18"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>}
                    {item.icon === 'moon' && <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" width="18" height="18"><path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"/></svg>}
                  </div>
                  <div>
                    <div style={{ fontSize: 14, fontWeight: 500, color: '#F5EFE0', marginBottom: 3 }}>{item.time}</div>
                    <div style={{ fontSize: 12, color: 'rgba(245, 239, 224, 0.55)', lineHeight: 1.5 }}>{item.desc}</div>
                  </div>
                </div>
              ))}
            </div>

            {/* CTA to AI preview */}
            <button
              onClick={handleShare}
              style={{
                width: '100%',
                height: 46,
                borderRadius: 100,
                background: 'rgba(201, 169, 98, 0.15)',
                border: '1px solid rgba(201, 169, 98, 0.3)',
                color: '#C9A962',
                fontSize: 14,
                fontWeight: 500,
                cursor: 'pointer',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                gap: 8,
                marginBottom: 10,
                transition: 'all 0.2s ease',
              }}
              onMouseEnter={(e) => { e.currentTarget.style.background = 'rgba(201, 169, 98, 0.25)'; }}
              onMouseLeave={(e) => { e.currentTarget.style.background = 'rgba(201, 169, 98, 0.15)'; }}
            >
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" width="16" height="16">
                <path d="M12 3l2 5 5 2-5 2-2 5-2-5-5-2 5-2 2-5z"/>
              </svg>
              See AI life preview
            </button>
          </div>
        )}
      </div>

      {/* Bottom action bar */}
      <div style={{
        position: 'absolute',
        bottom: 83, left: 0, right: 0,
        padding: '10px 16px',
        background: 'linear-gradient(to top, rgba(11,46,36,0.95) 0%, rgba(11,46,36,0.7) 60%, transparent 100%)',
        backdropFilter: 'blur(8px)',
        display: 'flex',
        gap: 8,
      }}>
        <button
          onClick={handleSave}
          style={{
            flex: 1, height: 42,
            borderRadius: 100,
            background: isSaved ? 'rgba(201, 169, 98, 0.2)' : 'rgba(245, 239, 224, 0.06)',
            border: `1px solid ${isSaved ? 'rgba(201, 169, 98, 0.4)' : 'rgba(245, 239, 224, 0.12)'}`,
            color: isSaved ? '#C9A962' : 'rgba(245, 239, 224, 0.85)',
            fontSize: 13,
            cursor: 'pointer',
            display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6,
            transition: 'all 0.2s ease',
          }}
        >
          <svg viewBox="0 0 24 24" fill={isSaved ? 'currentColor' : 'none'} stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" width="15" height="15">
            <path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/>
          </svg>
          {isSaved ? 'Saved' : 'Save'}
        </button>
        <button
          onClick={handleCompare}
          style={{
            flex: 1, height: 42,
            borderRadius: 100,
            background: isCompared ? 'rgba(201, 169, 98, 0.2)' : 'rgba(245, 239, 224, 0.06)',
            border: `1px solid ${isCompared ? 'rgba(201, 169, 98, 0.4)' : 'rgba(245, 239, 224, 0.12)'}`,
            color: isCompared ? '#C9A962' : 'rgba(245, 239, 224, 0.85)',
            fontSize: 13,
            cursor: 'pointer',
            display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6,
            transition: 'all 0.2s ease',
          }}
        >
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" width="15" height="15">
            <rect x="3" y="4" width="7" height="16" rx="1"/>
            <rect x="14" y="4" width="7" height="10" rx="1"/>
          </svg>
          Compare
          {state.comparedHomes.length > 0 && (
            <span style={{ fontSize: 11, opacity: 0.7 }}>({state.comparedHomes.length}/2)</span>
          )}
        </button>
        <button
          onClick={handleShare}
          style={{
            flex: 1, height: 42,
            borderRadius: 100,
            background: 'rgba(245, 239, 224, 0.06)',
            border: '1px solid rgba(245, 239, 224, 0.12)',
            color: 'rgba(245, 239, 224, 0.85)',
            fontSize: 13,
            cursor: 'pointer',
            display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6,
            transition: 'all 0.2s ease',
          }}
          onMouseEnter={(e) => { e.currentTarget.style.background = 'rgba(245, 239, 224, 0.1)'; }}
          onMouseLeave={(e) => { e.currentTarget.style.background = 'rgba(245, 239, 224, 0.06)'; }}
        >
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" width="15" height="15">
            <circle cx="18" cy="5" r="3"/>
            <circle cx="6" cy="12" r="3"/>
            <circle cx="18" cy="19" r="3"/>
            <line x1="8.6" y1="13.5" x2="15.4" y2="17.5"/>
            <line x1="15.4" y1="6.5" x2="8.6" y2="10.5"/>
          </svg>
          Share
        </button>
      </div>
    </div>
  );
}

// Expose
window.MatchScreen = MatchScreen;
window.ExploreScreen = ExploreScreen;