/* ============================================================
   Screens 5-6: AI Life Preview + Book a Visit
   ============================================================ */

const { useState, useEffect } = React;

// ─────────────────────────────────────────
// Screen 05: AI Life Preview
// ─────────────────────────────────────────
function PreviewScreen() {
  const { state, dispatch } = useApp();
  const [activeScene, setActiveScene] = useState(state.activeScene || 'family-time');
  const [showShareSuccess, setShowShareSuccess] = useState(false);

  const scenes = [
    {
      key: 'morning-light',
      title: 'Morning light',
      desc: 'Warm sunlight fills the living room, creating a calm beginning to the day.',
      gradient: 'linear-gradient(135deg, #D4A574 0%, #8B6914 30%, #1B5A45 100%)',
      accent: '#E8B878',
    },
    {
      key: 'family-time',
      title: 'Family time',
      desc: 'A cozy space for the whole family to come together and connect.',
      gradient: 'linear-gradient(135deg, #2D6B5F 0%, #0B2E24 50%, #1a1a1a 100%)',
      accent: '#C9A962',
    },
    {
      key: 'evening-outdoors',
      title: 'Evening outdoors',
      desc: 'Cool evenings under the stars make every moment feel special.',
      gradient: 'linear-gradient(180deg, #1a1a2e 0%, #16213e 40%, #0f3460 70%, #1B5A45 100%)',
      accent: '#E0C98E',
    },
  ];

  const currentScene = scenes.find(s => s.key === activeScene) || scenes[1];

  const handleSceneSelect = (key) => {
    setActiveScene(key);
    dispatch({ type: 'SET_ACTIVE_SCENE', scene: key });
  };

  const handleSave = () => {
    dispatch({ type: 'SAVE_VISION' });
  };

  const handleShare = () => {
    dispatch({ type: 'SHARE_VISION' });
    setShowShareSuccess(true);
    setTimeout(() => setShowShareSuccess(false), 2500);
  };

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

  return (
    <div style={{
      position: 'absolute', inset: 0,
      zIndex: 1,
      display: 'flex',
      flexDirection: 'column',
      background: currentScene.gradient,
      transition: 'background 0.8s ease',
    }}>
      {/* Ambient glow */}
      <div style={{
        position: 'absolute',
        top: '-20%',
        left: '50%',
        transform: 'translateX(-50%)',
        width: '200%',
        height: '60%',
        background: `radial-gradient(ellipse at center, ${currentScene.accent}22 0%, transparent 60%)`,
        pointerEvents: 'none',
      }} />

      {/* AI Badge */}
      <div style={{
        position: 'absolute',
        top: 72, left: 20,
        zIndex: 10,
        display: 'flex',
        alignItems: 'center',
        gap: 6,
        padding: '6px 14px',
        background: 'rgba(0, 0, 0, 0.35)',
        backdropFilter: 'blur(10px)',
        borderRadius: 100,
        border: '1px solid rgba(245, 239, 224, 0.1)',
        fontSize: 11,
        color: 'rgba(245, 239, 224, 0.8)',
      }}>
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" width="12" height="12" style={{ color: '#C9A962' }}>
          <path d="M12 3l2 5 5 2-5 2-2 5-2-5-5-2 5-2 2-5z"/>
        </svg>
        AI-generated lifestyle preview
      </div>

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

      {/* Hero section */}
      <div style={{
        padding: '120px 24px 0',
        position: 'relative',
        zIndex: 2,
      }}>
        <div style={{
          fontFamily: "'Fraunces', serif",
          fontSize: 32,
          fontWeight: 500,
          lineHeight: 1.1,
          letterSpacing: '-0.02em',
          color: '#F5EFE0',
          textShadow: '0 2px 20px rgba(0,0,0,0.3)',
          marginBottom: 10,
        }}>
          My Dream Home
        </div>
        <div style={{
          fontSize: 16,
          color: 'rgba(245, 239, 224, 0.75)',
          marginBottom: 14,
          textShadow: '0 1px 10px rgba(0,0,0,0.2)',
          fontStyle: 'italic',
          fontFamily: "'Fraunces', serif",
          fontWeight: 300,
        }}>
          A day in your future home
        </div>
        <p style={{
          fontSize: 13,
          color: 'rgba(245, 239, 224, 0.65)',
          maxWidth: 260,
          lineHeight: 1.5,
          textShadow: '0 1px 8px rgba(0,0,0,0.2)',
        }}>
          imagining everyday life in a matched home — a warm space where your family can grow.
        </p>
      </div>

      {/* Scene visualization card */}
      <div style={{
        flex: 1,
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        padding: '24px 20px',
        position: 'relative',
        zIndex: 2,
      }}>
        <div style={{
          width: '100%',
          maxWidth: 340,
          aspectRatio: '16/10',
          borderRadius: 20,
          overflow: 'hidden',
          background: 'rgba(0, 0, 0, 0.2)',
          border: '1px solid rgba(245, 239, 224, 0.1)',
          boxShadow: '0 20px 60px rgba(0, 0, 0, 0.4)',
          position: 'relative',
        }}>
          {/* Scene illustration */}
          <svg viewBox="0 0 320 200" width="100%" height="100%" preserveAspectRatio="xMidYMid slice">
            {activeScene === 'morning-light' && (
              <>
                <defs>
                  <linearGradient id="morningBg" x1="0" y1="0" x2="0" y2="1">
                    <stop offset="0%" stopColor="#E8B878"/>
                    <stop offset="60%" stopColor="#D4A574"/>
                    <stop offset="100%" stopColor="#8B6914" stopOpacity="0.3"/>
                  </linearGradient>
                </defs>
                <rect width="320" height="200" fill="url(#morningBg)"/>
                {/* Sun rays */}
                <circle cx="60" cy="40" r="25" fill="#FFF5E0" opacity="0.6"/>
                {/* Window light */}
                <rect x="40" y="30" width="80" height="100" fill="#FFF5E0" opacity="0.2"/>
                {/* Sofa silhouette */}
                <rect x="50" y="130" width="120" height="50" rx="15" fill="#0B2E24" opacity="0.4"/>
                <rect x="180" y="145" width="90" height="35" rx="10" fill="#0B2E24" opacity="0.3"/>
                {/* Plant */}
                <ellipse cx="270" cy="175" rx="20" ry="8" fill="#1B5A45" opacity="0.5"/>
                <path d="M265 175 Q265 140 275 135 Q285 145 280 175" fill="#2D7A5E" opacity="0.5"/>
                {/* Floor */}
                <rect x="0" y="175" width="320" height="25" fill="#8B6914" opacity="0.3"/>
              </>
            )}
            {activeScene === 'family-time' && (
              <>
                <defs>
                  <linearGradient id="familyBg" x1="0" y1="0" x2="0" y2="1">
                    <stop offset="0%" stopColor="#1B5A45"/>
                    <stop offset="100%" stopColor="#0B2E24"/>
                  </linearGradient>
                </defs>
                <rect width="320" height="200" fill="url(#familyBg)"/>
                {/* Warm lamp glow */}
                <circle cx="160" cy="50" r="60" fill="#C9A962" opacity="0.15"/>
                {/* Sofa */}
                <rect x="60" y="120" width="200" height="60" rx="18" fill="#E8DFCA" opacity="0.15"/>
                {/* People silhouettes */}
                <circle cx="100" cy="105" r="12" fill="#F5EFE0" opacity="0.3"/>
                <circle cx="160" cy="95" r="15" fill="#F5EFE0" opacity="0.35"/>
                <circle cx="220" cy="105" r="12" fill="#F5EFE0" opacity="0.3"/>
                <rect x="90" y="115" width="20" height="30" rx="5" fill="#F5EFE0" opacity="0.2"/>
                <rect x="148" y="108" width="24" height="40" rx="6" fill="#F5EFE0" opacity="0.25"/>
                <rect x="210" y="115" width="20" height="30" rx="5" fill="#F5EFE0" opacity="0.2"/>
                {/* Coffee table */}
                <rect x="120" y="155" width="80" height="8" rx="2" fill="#C9A962" opacity="0.3"/>
                {/* Floor */}
                <rect x="0" y="175" width="320" height="25" fill="#0B2E24" opacity="0.6"/>
              </>
            )}
            {activeScene === 'evening-outdoors' && (
              <>
                <defs>
                  <linearGradient id="eveningBg" x1="0" y1="0" x2="0" y2="1">
                    <stop offset="0%" stopColor="#1a1a2e"/>
                    <stop offset="40%" stopColor="#16213e"/>
                    <stop offset="100%" stopColor="#0f3460"/>
                  </linearGradient>
                </defs>
                <rect width="320" height="200" fill="url(#eveningBg)"/>
                {/* Stars */}
                {[[30,20],[60,35],[90,15],[140,25],[180,40],[220,20],[260,35],[290,18],[250,50],[80,55],[200,55]].map(([x,y], i) => (
                  <circle key={i} cx={x} cy={y} r={i % 3 === 0 ? 1.5 : 1} fill="#F5EFE0" opacity={0.5 + (i % 3) * 0.2}/>
                ))}
                {/* Moon */}
                <circle cx="250" cy="45" r="15" fill="#E8DFCA" opacity="0.8"/>
                <circle cx="244" cy="42" r="13" fill="#1a1a2e"/>
                {/* Garden wall light */}
                <circle cx="50" cy="120" r="20" fill="#C9A962" opacity="0.2"/>
                {/* Path */}
                <path d="M100 200 Q160 170 220 200" fill="#2D7A5E" opacity="0.3"/>
                {/* Trees */}
                <rect x="30" y="100" width="6" height="80" fill="#0B2E24" opacity="0.5"/>
                <ellipse cx="33" cy="95" rx="18" ry="22" fill="#1B5A45" opacity="0.6"/>
                <rect x="280" y="110" width="5" height="70" fill="#0B2E24" opacity="0.5"/>
                <ellipse cx="282" cy="105" rx="15" ry="18" fill="#1B5A45" opacity="0.6"/>
                {/* Lawn */}
                <rect x="0" y="175" width="320" height="25" fill="#1B5A45" opacity="0.6"/>
              </>
            )}
          </svg>

          {/* Play button overlay */}
          <div style={{
            position: 'absolute',
            top: '50%',
            left: '50%',
            transform: 'translate(-50%, -50%)',
            width: 56, height: 56,
            borderRadius: '50%',
            background: 'rgba(255, 255, 255, 0.2)',
            backdropFilter: 'blur(10px)',
            border: '1.5px solid rgba(255, 255, 255, 0.4)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            color: '#fff',
            cursor: 'pointer',
            transition: 'all 0.2s ease',
          }}
          onMouseEnter={(e) => { e.currentTarget.style.transform = 'translate(-50%, -50%) scale(1.08)'; }}
          onMouseLeave={(e) => { e.currentTarget.style.transform = 'translate(-50%, -50%) scale(1)'; }}
          >
            <svg viewBox="0 0 24 24" fill="currentColor" width="22" height="22" style={{ marginLeft: 3 }}>
              <polygon points="8,5 19,12 8,19"/>
            </svg>
          </div>
        </div>
      </div>

      {/* Scene selector */}
      <div style={{
        display: 'flex',
        gap: 10,
        padding: '0 20px 16px',
        position: 'relative',
        zIndex: 2,
      }}>
        {scenes.map((scene) => {
          const active = scene.key === activeScene;
          return (
            <button
              key={scene.key}
              onClick={() => handleSceneSelect(scene.key)}
              style={{
                flex: 1,
                padding: '14px 12px',
                background: active ? 'rgba(255, 255, 255, 0.12)' : 'rgba(255, 255, 255, 0.05)',
                backdropFilter: 'blur(10px)',
                border: `1.5px solid ${active ? scene.accent : 'rgba(245, 239, 224, 0.1)'}`,
                borderRadius: 16,
                color: active ? '#F5EFE0' : 'rgba(245, 239, 224, 0.7)',
                cursor: 'pointer',
                textAlign: 'left',
                transition: 'all 0.3s ease',
                boxShadow: active ? `0 4px 20px ${scene.accent}22` : 'none',
              }}
            >
              <div style={{ fontSize: 13, fontWeight: active ? 600 : 400, marginBottom: 4 }}>
                {scene.title}
              </div>
              <div style={{ fontSize: 10.5, lineHeight: 1.4, opacity: active ? 0.8 : 0.55 }}>
                {scene.desc.split('.')[0]}
              </div>
            </button>
          );
        })}
      </div>

      {/* Action buttons */}
      <div style={{
        display: 'flex',
        gap: 12,
        padding: '0 20px 24px',
        position: 'relative',
        zIndex: 2,
      }}>
        <button
          onClick={handleShare}
          style={{
            flex: 1,
            height: 48,
            borderRadius: 100,
            background: 'rgba(255, 255, 255, 0.1)',
            backdropFilter: 'blur(10px)',
            border: '1px solid rgba(245, 239, 224, 0.2)',
            color: '#F5EFE0',
            fontSize: 14,
            fontWeight: 500,
            cursor: 'pointer',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            gap: 8,
            transition: 'all 0.2s ease',
          }}
          onMouseEnter={(e) => { e.currentTarget.style.background = 'rgba(255, 255, 255, 0.18)'; }}
          onMouseLeave={(e) => { e.currentTarget.style.background = 'rgba(255, 255, 255, 0.1)'; }}
        >
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" width="16" height="16">
            <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 with family
        </button>
        <button
          onClick={handleSave}
          style={{
            flex: 1,
            height: 48,
            borderRadius: 100,
            background: state.visionSaved ? 'rgba(201, 169, 98, 0.25)' : 'rgba(255, 255, 255, 0.1)',
            backdropFilter: 'blur(10px)',
            border: `1px solid ${state.visionSaved ? 'rgba(201, 169, 98, 0.5)' : 'rgba(245, 239, 224, 0.2)'}`,
            color: state.visionSaved ? '#C9A962' : '#F5EFE0',
            fontSize: 14,
            fontWeight: 500,
            cursor: 'pointer',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            gap: 8,
            transition: 'all 0.2s ease',
          }}
        >
          <svg viewBox="0 0 24 24" fill={state.visionSaved ? 'currentColor' : 'none'} stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" width="16" height="16">
            <path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/>
          </svg>
          {state.visionSaved ? 'Saved' : 'Save this vision'}
        </button>
      </div>

      {/* Book a visit CTA */}
      <div style={{
        padding: '0 20px 20px',
        position: 'relative',
        zIndex: 2,
      }}>
        <button
          onClick={handleBook}
          style={{
            width: '100%',
            height: 46,
            borderRadius: 100,
            background: 'transparent',
            border: '1px solid rgba(201, 169, 98, 0.4)',
            color: '#C9A962',
            fontSize: 13,
            fontWeight: 500,
            cursor: 'pointer',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            gap: 6,
            transition: 'all 0.2s ease',
          }}
          onMouseEnter={(e) => { e.currentTarget.style.background = 'rgba(201, 169, 98, 0.12)'; }}
          onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent'; }}
        >
          Ready to see it for real?
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" width="14" height="14">
            <line x1="5" y1="12" x2="19" y2="12"/>
            <polyline points="12 5 19 12 12 19"/>
          </svg>
        </button>
      </div>

      {/* Share success toast */}
      {showShareSuccess && (
        <div style={{
          position: 'absolute',
          top: 120,
          left: '50%',
          transform: 'translateX(-50%)',
          padding: '12px 20px',
          background: 'rgba(45, 122, 94, 0.95)',
          backdropFilter: 'blur(12px)',
          borderRadius: 14,
          color: '#fff',
          fontSize: 13,
          fontWeight: 500,
          zIndex: 100,
          display: 'flex',
          alignItems: 'center',
          gap: 8,
          boxShadow: '0 8px 30px rgba(0, 0, 0, 0.3)',
          animation: 'toastIn 0.3s ease-out',
        }}>
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" width="16" height="16">
            <polyline points="20 6 9 17 4 12"/>
          </svg>
          Vision shared with your family
        </div>
      )}
    </div>
  );
}

// ─────────────────────────────────────────
// Screen 06: Book a Visit / Lead Capture
// ─────────────────────────────────────────
function BookingScreen() {
  const { state, dispatch, computeMatches } = useApp();
  const matches = computeMatches();
  const primaryHome = matches[0] || {};
  const selectedAction = state.selectedAction;
  const formData = state.formData;
  const formErrors = state.formErrors;
  const submitted = state.submitted;

  const actions = [
    {
      key: 'advisor',
      label: 'Talk to an advisor',
      icon: 'phone',
      desc: 'Speak with a home consultant',
    },
    {
      key: 'visit',
      label: 'Book a visit',
      icon: 'home',
      desc: 'Schedule an in-person tour',
    },
    {
      key: 'shortlist',
      label: 'Send me this shortlist',
      icon: 'list',
      desc: 'Get your matches via email',
    },
  ];

  const handleActionSelect = (action) => {
    dispatch({ type: 'SET_SELECTED_ACTION', action });
  };

  const handleInput = (field, value) => {
    dispatch({ type: 'SET_FORM_DATA', data: { [field]: value } });
  };

  const validateForm = () => {
    const errors = {};
    if (!formData.name.trim()) errors.name = 'Please enter your name';
    if (!formData.email && !formData.phone) {
      errors.contact = 'Please provide either email or phone';
    }
    if (formData.email && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) {
      errors.email = 'Please enter a valid email';
    }
    if (!selectedAction) errors.action = 'Please select an option';
    if (selectedAction === 'visit' && !formData.preferredTime) {
      errors.preferredTime = 'Please choose a preferred time';
    }
    if (!formData.consent) errors.consent = 'Please agree to continue';
    return errors;
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    const errors = validateForm();
    if (Object.keys(errors).length > 0) {
      dispatch({ type: 'SET_FORM_ERRORS', errors });
      return;
    }
    dispatch({ type: 'SUBMIT_FORM' });
  };

  const handleReset = () => {
    dispatch({ type: 'RESET_ALL' });
  };

  if (submitted) {
    return <BookingSuccessScreen home={primaryHome} onReset={handleReset} />;
  }

  return (
    <div style={{
      position: 'absolute', inset: 0,
      zIndex: 1,
      overflowY: 'auto',
      background: 'linear-gradient(180deg, #0B2E24 0%, #113D30 100%)',
    }}>
      <div style={{ padding: '70px 0 83px' }}>
        {/* Hero / selected home card */}
        <div style={{
          padding: '0 20px 20px',
          position: 'relative',
        }}>
          <div style={{
            height: 150,
            borderRadius: 20,
            background: 'linear-gradient(135deg, #1B5A45 0%, #0B2E24 100%)',
            position: 'relative',
            overflow: 'hidden',
            display: 'flex',
            alignItems: 'flex-end',
            justifyContent: 'center',
            padding: '16px',
          }}>
            <svg viewBox="0 0 300 100" width="85%" height="90" style={{ position: 'absolute', top: 10, opacity: 0.85 }}>
              <rect x="40" y="35" width="60" height="65" rx="2" fill="#E8DFCA" opacity="0.5"/>
              <rect x="105" y="20" width="85" height="80" rx="2" fill="#E8DFCA" opacity="0.5"/>
              <rect x="195" y="30" width="60" height="70" rx="2" fill="#E8DFCA" opacity="0.5"/>
              <rect x="35" y="28" width="70" height="8" rx="1" fill="#C9A962" opacity="0.5"/>
              <rect x="100" y="12" width="95" height="10" rx="1" fill="#C9A962" opacity="0.5"/>
              <rect x="190" y="22" width="70" height="8" rx="1" fill="#C9A962" opacity="0.5"/>
            </svg>
            <div style={{
              position: 'absolute',
              top: 12, left: 14,
              padding: '5px 12px',
              background: 'rgba(0,0,0,0.4)',
              borderRadius: 100,
              fontSize: 11,
              color: 'rgba(245, 239, 224, 0.85)',
              backdropFilter: 'blur(8px)',
            }}>
              Your selected home
            </div>
            <div style={{
              position: 'relative',
              color: '#F5EFE0',
              textAlign: 'center',
            }}>
              <div style={{
                fontFamily: "'Fraunces', serif",
                fontSize: 18,
                fontWeight: 500,
                marginBottom: 2,
              }}>{primaryHome.name}</div>
              <div style={{ fontSize: 11, color: 'rgba(245, 239, 224, 0.6)' }}>
                {primaryHome.community} · {primaryHome.type}
              </div>
            </div>
          </div>
        </div>

        {/* Section */}
        <div style={{ padding: '0 20px 16px' }}>
          <div style={{
            fontFamily: "'Fraunces', serif",
            fontSize: 26,
            fontWeight: 500,
            lineHeight: 1.15,
            letterSpacing: '-0.02em',
            color: '#F5EFE0',
            marginBottom: 8,
          }}>
            Ready to see it<br />for real?
          </div>
          <p style={{ fontSize: 14, color: 'rgba(245, 239, 224, 0.65)', lineHeight: 1.5 }}>
            Choose how you'd like to continue.
          </p>
        </div>

        {/* Action options */}
        <div style={{
          padding: '0 20px 20px',
          display: 'flex',
          flexDirection: 'column',
          gap: 10,
        }}>
          {actions.map((action) => {
            const selected = selectedAction === action.key;
            return (
              <button
                key={action.key}
                onClick={() => handleActionSelect(action.key)}
                style={{
                  display: 'flex',
                  alignItems: 'center',
                  gap: 14,
                  padding: '16px 18px',
                  background: selected ? 'rgba(201, 169, 98, 0.1)' : 'rgba(245, 239, 224, 0.04)',
                  border: `1.5px solid ${selected ? 'rgba(201, 169, 98, 0.6)' : 'rgba(245, 239, 224, 0.12)'}`,
                  borderRadius: 16,
                  color: selected ? '#F5EFE0' : 'rgba(245, 239, 224, 0.85)',
                  cursor: 'pointer',
                  textAlign: 'left',
                  width: '100%',
                  transition: 'all 0.2s ease',
                }}
                onMouseEnter={(e) => {
                  if (!selected) {
                    e.currentTarget.style.background = 'rgba(245, 239, 224, 0.08)';
                    e.currentTarget.style.borderColor = 'rgba(245, 239, 224, 0.2)';
                  }
                }}
                onMouseLeave={(e) => {
                  if (!selected) {
                    e.currentTarget.style.background = 'rgba(245, 239, 224, 0.04)';
                    e.currentTarget.style.borderColor = 'rgba(245, 239, 224, 0.12)';
                  }
                }}
              >
                <div style={{
                  width: 36, height: 36,
                  borderRadius: 10,
                  background: selected ? 'rgba(201, 169, 98, 0.2)' : 'rgba(245, 239, 224, 0.06)',
                  color: selected ? '#C9A962' : 'rgba(245, 239, 224, 0.5)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  flexShrink: 0,
                  transition: 'all 0.2s ease',
                }}>
                  {action.icon === 'phone' && (
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" width="17" height="17">
                      <path d="M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6 19.8 19.8 0 0 1-3.1-8.7A2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .3 2 .6 2.9a2 2 0 0 1-.5 2.1L8 10.4a16 16 0 0 0 6 6l1.7-1.2a2 2 0 0 1 2.1-.5c1 .3 2 .5 3 .6a2 2 0 0 1 1.7 2z"/>
                    </svg>
                  )}
                  {action.icon === 'home' && (
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" width="17" height="17">
                      <path d="M3 10.5L12 3l9 7.5"/>
                      <path d="M5 9.5V21h14V9.5"/>
                    </svg>
                  )}
                  {action.icon === 'list' && (
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" width="17" height="17">
                      <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>
                  )}
                </div>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 15, fontWeight: selected ? 500 : 400 }}>{action.label}</div>
                  <div style={{ fontSize: 12, color: 'rgba(245, 239, 224, 0.5)', marginTop: 2 }}>{action.desc}</div>
                </div>
                <div style={{
                  width: 22, height: 22,
                  borderRadius: '50%',
                  border: `2px solid ${selected ? '#C9A962' : 'rgba(245, 239, 224, 0.2)'}`,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  flexShrink: 0,
                  transition: 'all 0.2s ease',
                }}>
                  {selected && <div style={{ width: 10, height: 10, borderRadius: '50%', background: '#C9A962' }} />}
                </div>
              </button>
            );
          })}
          {formErrors.action && (
            <div style={{ fontSize: 12, color: '#e57373', marginTop: -4 }}>{formErrors.action}</div>
          )}
        </div>

        {/* Form */}
        <form onSubmit={handleSubmit} style={{ padding: '0 20px 20px' }}>
          {/* Name */}
          <div style={{ marginBottom: 14 }}>
            <label style={{
              display: 'flex', alignItems: 'center', gap: 8,
              fontSize: 14, color: 'rgba(245, 239, 224, 0.8)',
              marginBottom: 6,
            }}>
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" width="15" height="15" style={{ color: 'rgba(245, 239, 224, 0.5)' }}>
                <circle cx="12" cy="7" r="3.5"/>
                <path d="M5 21c0-3.5 3-6 7-6s7 2.5 7 6"/>
              </svg>
              Full name
            </label>
            <input
              type="text"
              value={formData.name}
              onChange={(e) => handleInput('name', e.target.value)}
              placeholder="Enter your name"
              style={{
                width: '100%',
                height: 44,
                padding: '0 16px',
                background: 'rgba(245, 239, 224, 0.04)',
                border: `1.5px solid ${formErrors.name ? 'rgba(229, 115, 115, 0.6)' : 'rgba(245, 239, 224, 0.12)'}`,
                borderRadius: 12,
                color: '#F5EFE0',
                fontSize: 14,
                outline: 'none',
                transition: 'all 0.2s ease',
                fontFamily: 'inherit',
              }}
              onFocus={(e) => {
                if (!formErrors.name) e.target.style.borderColor = 'rgba(201, 169, 98, 0.4)';
              }}
              onBlur={(e) => {
                if (!formErrors.name) e.target.style.borderColor = 'rgba(245, 239, 224, 0.12)';
              }}
            />
            {formErrors.name && (
              <div style={{ fontSize: 11.5, color: '#e57373', marginTop: 5 }}>{formErrors.name}</div>
            )}
          </div>

          {/* Email or phone */}
          <div style={{ marginBottom: 14 }}>
            <label style={{
              display: 'flex', alignItems: 'center', gap: 8,
              fontSize: 14, color: 'rgba(245, 239, 224, 0.8)',
              marginBottom: 6,
            }}>
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" width="15" height="15" style={{ color: 'rgba(245, 239, 224, 0.5)' }}>
                <path d="M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6 19.8 19.8 0 0 1-3.1-8.7A2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .3 2 .6 2.9a2 2 0 0 1-.5 2.1L8 10.4a16 16 0 0 0 6 6l1.7-1.2a2 2 0 0 1 2.1-.5c1 .3 2 .5 3 .6a2 2 0 0 1 1.7 2z"/>
              </svg>
              Phone or email
            </label>
            <input
              type="text"
              value={formData.phone}
              onChange={(e) => handleInput('phone', e.target.value)}
              placeholder="Phone number"
              style={{
                width: '100%',
                height: 44,
                padding: '0 16px',
                background: 'rgba(245, 239, 224, 0.04)',
                border: `1.5px solid ${formErrors.contact ? 'rgba(229, 115, 115, 0.6)' : 'rgba(245, 239, 224, 0.12)'}`,
                borderRadius: 12,
                color: '#F5EFE0',
                fontSize: 14,
                outline: 'none',
                marginBottom: 8,
                transition: 'all 0.2s ease',
                fontFamily: 'inherit',
              }}
              onFocus={(e) => { e.target.style.borderColor = 'rgba(201, 169, 98, 0.4)'; }}
              onBlur={(e) => { e.target.style.borderColor = 'rgba(245, 239, 224, 0.12)'; }}
            />
            <input
              type="email"
              value={formData.email}
              onChange={(e) => handleInput('email', e.target.value)}
              placeholder="Email address"
              style={{
                width: '100%',
                height: 44,
                padding: '0 16px',
                background: 'rgba(245, 239, 224, 0.04)',
                border: `1.5px solid ${formErrors.email ? 'rgba(229, 115, 115, 0.6)' : 'rgba(245, 239, 224, 0.12)'}`,
                borderRadius: 12,
                color: '#F5EFE0',
                fontSize: 14,
                outline: 'none',
                transition: 'all 0.2s ease',
                fontFamily: 'inherit',
              }}
              onFocus={(e) => { e.target.style.borderColor = 'rgba(201, 169, 98, 0.4)'; }}
              onBlur={(e) => { e.target.style.borderColor = 'rgba(245, 239, 224, 0.12)'; }}
            />
            {(formErrors.contact || formErrors.email) && (
              <div style={{ fontSize: 11.5, color: '#e57373', marginTop: 5 }}>
                {formErrors.contact || formErrors.email}
              </div>
            )}
          </div>

          {/* Preferred time (only for visit) */}
          {selectedAction === 'visit' && (
            <div style={{ marginBottom: 14 }}>
              <label style={{
                display: 'flex', alignItems: 'center', gap: 8,
                fontSize: 14, color: 'rgba(245, 239, 224, 0.8)',
                marginBottom: 8,
              }}>
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" width="15" height="15" style={{ color: 'rgba(245, 239, 224, 0.5)' }}>
                  <rect x="3" y="4" width="18" height="18" rx="2"/>
                  <line x1="3" y1="10" x2="21" y2="10"/>
                  <line x1="8" y1="2" x2="8" y2="6"/>
                  <line x1="16" y1="2" x2="16" y2="6"/>
                </svg>
                Preferred time
              </label>
              <div style={{ display: 'flex', gap: 8 }}>
                {['morning', 'afternoon', 'evening'].map((time) => {
                  const selected = formData.preferredTime === time;
                  return (
                    <button
                      key={time}
                      type="button"
                      onClick={() => handleInput('preferredTime', time)}
                      style={{
                        flex: 1,
                        height: 38,
                        borderRadius: 100,
                        background: selected ? 'rgba(201, 169, 98, 0.15)' : 'rgba(245, 239, 224, 0.04)',
                        border: `1px solid ${selected ? 'rgba(201, 169, 98, 0.5)' : 'rgba(245, 239, 224, 0.12)'}`,
                        color: selected ? '#C9A962' : 'rgba(245, 239, 224, 0.75)',
                        fontSize: 13,
                        cursor: 'pointer',
                        textTransform: 'capitalize',
                        transition: 'all 0.2s ease',
                      }}
                    >
                      {time}
                    </button>
                  );
                })}
              </div>
              {formErrors.preferredTime && (
                <div style={{ fontSize: 11.5, color: '#e57373', marginTop: 6 }}>{formErrors.preferredTime}</div>
              )}
            </div>
          )}

          {/* Consent */}
          <div style={{ marginBottom: 18 }}>
            <label style={{
              display: 'flex',
              alignItems: 'flex-start',
              gap: 10,
              cursor: 'pointer',
              fontSize: 12,
              color: 'rgba(245, 239, 224, 0.65)',
              lineHeight: 1.5,
            }}>
              <div
                onClick={() => handleInput('consent', !formData.consent)}
                style={{
                  width: 18, height: 18,
                  borderRadius: 4,
                  border: `1.5px solid ${formErrors.consent ? 'rgba(229, 115, 115, 0.6)' : 'rgba(245, 239, 224, 0.2)'}`,
                  background: formData.consent ? '#C9A962' : 'transparent',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  flexShrink: 0,
                  marginTop: 1,
                  transition: 'all 0.2s ease',
                }}
              >
                {formData.consent && (
                  <svg viewBox="0 0 24 24" fill="none" stroke="#0B2E24" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" width="12" height="12">
                    <polyline points="20 6 9 17 4 12"/>
                  </svg>
                )}
              </div>
              <span onClick={() => handleInput('consent', !formData.consent)}>
                I agree to be contacted about my home match. This is a demo — no real data will be stored.
              </span>
            </label>
            {formErrors.consent && (
              <div style={{ fontSize: 11.5, color: '#e57373', marginTop: 5 }}>{formErrors.consent}</div>
            )}
          </div>

          {/* Submit */}
          <button
            type="submit"
            style={{
              width: '100%',
              height: 52,
              borderRadius: 100,
              background: selectedAction ? 'linear-gradient(135deg, #C9A962 0%, #E0C98E 100%)' : 'rgba(245, 239, 224, 0.1)',
              color: selectedAction ? '#0B2E24' : 'rgba(245, 239, 224, 0.3)',
              border: 'none',
              fontSize: 16,
              fontWeight: 600,
              cursor: selectedAction ? 'pointer' : 'not-allowed',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              transition: 'all 0.2s ease',
              boxShadow: selectedAction ? '0 4px 20px rgba(201, 169, 98, 0.3)' : 'none',
            }}
            onMouseEnter={(e) => {
              if (selectedAction) {
                e.currentTarget.style.transform = 'translateY(-1px)';
                e.currentTarget.style.boxShadow = '0 6px 25px rgba(201, 169, 98, 0.4)';
              }
            }}
            onMouseLeave={(e) => {
              e.currentTarget.style.transform = 'translateY(0)';
              if (selectedAction) {
                e.currentTarget.style.boxShadow = '0 4px 20px rgba(201, 169, 98, 0.3)';
              }
            }}
          >
            {selectedAction === 'advisor' ? 'Request a call back' :
             selectedAction === 'visit' ? 'Request a visit' :
             selectedAction === 'shortlist' ? 'Send my shortlist' :
             'Select an option to continue'}
          </button>

          <p style={{
            fontSize: 11,
            color: 'rgba(245, 239, 224, 0.4)',
            textAlign: 'center',
            marginTop: 10,
            lineHeight: 1.5,
          }}>
            An advisor will confirm availability and home status.
            <br />
            <strong style={{ color: 'rgba(245, 239, 224, 0.6)' }}>Demo only — no personal data is stored or sent.</strong>
          </p>
        </form>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────
// Booking Success screen
// ─────────────────────────────────────────
function BookingSuccessScreen({ home, onReset }) {
  const { state } = useApp();

  const preferenceLabels = {
    household: 'Household',
    lifestage: 'Life stage',
    priority: 'Top priority',
    spaceStyle: 'Home feeling',
    communityVibe: 'Community',
  };

  const valueLabels = {
    single: 'Just me',
    couple: 'A couple',
    family: 'A growing family',
    'multi-gen': 'Multi-generation family',
    'just-started': 'Just starting out',
    growing: 'Growing with kids',
    nesting: 'Settled and nesting',
    'empty-nest': 'Empty nesters',
    'green-space': 'Green space & nature',
    privacy: 'Privacy & quiet',
    entertaining: 'Hosting & entertaining',
    proximity: 'Close to amenities',
    'bright-open': 'Bright and open',
    'cozy-traditional': 'Warm and cozy',
    'modern-minimal': 'Sleek and modern',
    'outdoor-focused': 'Indoor-outdoor flow',
    'walkable-family': 'Walkable & family-friendly',
    'quiet-suburban': 'Quiet suburban',
    'vibrant-urban': 'Vibrant and connected',
    'nature-retreat': 'Nature retreat',
  };

  const answeredPreferences = Object.entries(state.preferences)
    .filter(([_, v]) => v !== null)
    .map(([k, v]) => ({ key: k, label: preferenceLabels[k], value: valueLabels[v] || v }));

  return (
    <div style={{
      position: 'absolute', inset: 0,
      zIndex: 1,
      overflowY: 'auto',
      background: 'linear-gradient(180deg, #0B2E24 0%, #113D30 50%, #0B2E24 100%)',
    }}>
      <div style={{ padding: '80px 24px 83px', textAlign: 'center' }}>
        {/* Success icon */}
        <div style={{
          width: 72, height: 72,
          borderRadius: '50%',
          background: 'rgba(45, 122, 94, 0.2)',
          border: '2px solid rgba(45, 122, 94, 0.5)',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          margin: '0 auto 20px',
          color: '#3D9678',
        }}>
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" width="32" height="32">
            <polyline points="20 6 9 17 4 12"/>
          </svg>
        </div>

        <h2 style={{
          fontFamily: "'Fraunces', serif",
          fontSize: 28,
          fontWeight: 500,
          color: '#F5EFE0',
          marginBottom: 8,
          letterSpacing: '-0.02em',
        }}>
          You're all set
        </h2>
        <p style={{
          fontSize: 14,
          color: 'rgba(245, 239, 224, 0.65)',
          lineHeight: 1.6,
          maxWidth: 280,
          margin: '0 auto 24px',
        }}>
          We've received your request. A home advisor will be in touch to confirm details.
        </p>

        {/* Summary card */}
        <div style={{
          background: 'rgba(245, 239, 224, 0.04)',
          border: '1px solid rgba(245, 239, 224, 0.08)',
          borderRadius: 18,
          padding: '18px 16px',
          textAlign: 'left',
          marginBottom: 16,
        }}>
          <div style={{
            fontSize: 11,
            color: '#C9A962',
            letterSpacing: '0.08em',
            textTransform: 'uppercase',
            marginBottom: 12,
            fontWeight: 500,
          }}>
            Your preference summary
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            {answeredPreferences.map((p) => (
              <div key={p.key} style={{
                display: 'flex',
                justifyContent: 'space-between',
                alignItems: 'center',
                gap: 12,
              }}>
                <span style={{ fontSize: 12.5, color: 'rgba(245, 239, 224, 0.5)' }}>{p.label}</span>
                <span style={{ fontSize: 12.5, color: '#F5EFE0', textAlign: 'right', fontWeight: 500 }}>{p.value}</span>
              </div>
            ))}
          </div>

          <div style={{
            height: 1,
            background: 'rgba(245, 239, 224, 0.08)',
            margin: '14px 0',
          }} />

          <div style={{
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'center',
          }}>
            <span style={{ fontSize: 12.5, color: 'rgba(245, 239, 224, 0.5)' }}>Matched home</span>
            <span style={{ fontSize: 12.5, color: '#C9A962', fontWeight: 500 }}>{home.name}</span>
          </div>
        </div>

        {/* Data flow diagram */}
        <div style={{
          background: 'rgba(201, 169, 98, 0.06)',
          border: '1px solid rgba(201, 169, 98, 0.15)',
          borderRadius: 16,
          padding: '16px',
          marginBottom: 20,
          textAlign: 'left',
        }}>
          <div style={{
            fontSize: 11,
            color: '#C9A962',
            letterSpacing: '0.06em',
            textTransform: 'uppercase',
            marginBottom: 12,
            fontWeight: 500,
          }}>
            Lead data flow
          </div>
          <div style={{ display: 'flex', alignItems: 'center', flexWrap: 'wrap', gap: 6 }}>
            {['Preferences', 'Match', 'Explore', 'Preview', 'Lead'].map((step, i, arr) => (
              <React.Fragment key={step}>
                <div style={{
                  padding: '6px 10px',
                  background: i === arr.length - 1 ? 'rgba(201, 169, 98, 0.2)' : 'rgba(245, 239, 224, 0.06)',
                  borderRadius: 8,
                  fontSize: 11,
                  color: i === arr.length - 1 ? '#C9A962' : 'rgba(245, 239, 224, 0.7)',
                  fontWeight: i === arr.length - 1 ? 600 : 400,
                }}>{step}</div>
                {i < arr.length - 1 && (
                  <svg viewBox="0 0 24 24" fill="none" stroke="rgba(201,169,98,0.5)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" width="14" height="14">
                    <polyline points="9 18 15 12 9 6"/>
                  </svg>
                )}
              </React.Fragment>
            ))}
          </div>
        </div>

        <button
          onClick={onReset}
          style={{
            width: '100%',
            height: 46,
            borderRadius: 100,
            background: 'transparent',
            border: '1px solid rgba(245, 239, 224, 0.2)',
            color: 'rgba(245, 239, 224, 0.85)',
            fontSize: 14,
            fontWeight: 500,
            cursor: 'pointer',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            gap: 8,
            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.2)'; e.currentTarget.style.color = 'rgba(245, 239, 224, 0.85)'; }}
        >
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" width="16" height="16">
            <path d="M3 12a9 9 0 1 0 3-6.7L3 8"/>
            <path d="M3 3v5h5"/>
          </svg>
          Start a new demo
        </button>
      </div>
    </div>
  );
}

// Expose
window.PreviewScreen = PreviewScreen;
window.BookingScreen = BookingScreen;
window.BookingSuccessScreen = BookingSuccessScreen;