`components/SignupPrompt.tsx`

61 lines
'use client'

import { useState } from 'react'

interface SignupPromptProps {
  onClose: () => void
  onProceedToSignup: () => void
  onExtendTrial: () => void
}

export default function SignupPrompt({ onClose, onProceedToSignup, onExtendTrial }: SignupPromptProps) {
  return (
    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
      <div className="bg-white rounded-xl max-w-lg w-full p-8 shadow-2xl">
        <h2 className="text-3xl font-bold text-gray-800 mb-4">
          Would you like to actually talk with Bubbe? 🎤
        </h2>
        
        <div className="mb-6 text-gray-700">
          <p className="mb-3">
            If you sign up now, you'll be able to <strong>speak</strong> with her!
          </p>
          <p className="mb-3">
            She wants to get to know you! Bubbe will remember:
          </p>
          <ul className="list-disc list-inside ml-4 space-y-1">
            <li>Your name and family details</li>
            <li>Your relationship status (she has opinions!)</li>
            <li>Your career and education</li>
            <li>Your location for local news & weather</li>
          </ul>
          <p className="mt-3 text-amber-600 font-semibold">
            Please enable audio permissions during signup.
          </p>
        </div>

        <div className="space-y-3">
          <button
            onClick={onProceedToSignup}
            className="w-full px-6 py-3 bg-amber-500 text-white rounded-lg hover:bg-amber-600 transition-colors font-medium text-lg"
          >
            Yes! Let me talk to Bubbe! 🗣️
          </button>
          
          <button
            onClick={onExtendTrial}
            className="w-full px-6 py-3 bg-gray-300 text-gray-700 rounded-lg hover:bg-gray-400 transition-colors font-medium"
          >
            Maybe later (20 more text messages)
          </button>
        </div>

        <p className="mt-4 text-xs text-gray-500 text-center">
          You've used your 3 free text messages. Sign up for unlimited voice & text!
          <br />
          <span className="text-amber-600 font-semibold">Or continue with 20 more text-only messages.</span>
        </p>
      </div>
    </div>
  )
}