// screens-pricing.jsx — For Psychologists / Pricing page

function PricingScreen({ setRoute, authUser }) {
  const { lang } = useLang();
  const el = lang === 'el';
  const [notified, setNotified] = React.useState(false);
  const [notifyLoading, setNotifyLoading] = React.useState(false);

  async function handleNotifyMe(plan) {
    if (!authUser) { setRoute('signup-pro'); return; }
    setNotifyLoading(plan);
    try {
      const token = JSON.parse(localStorage.getItem('psyche-auth') || '{}').token;
      await fetch('/api/notify-interest', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', Authorization: 'Bearer ' + token },
        body: JSON.stringify({ plan }),
      });
    } catch (e) {}
    setNotifyLoading(false);
    setNotified(plan);
  }

  const FREE_FEATURES = el ? [
    'Πλήρες δημόσιο προφίλ (φωτογραφία, βιο, εξειδικεύσεις)',
    'Badge Εξουσιοδοτημένος / Αναγνωρισμένος',
    'Εμφάνιση στον κατάλογο & στο quiz matching',
    'Έως 3 εξειδικεύσεις',
    'Verified badge μετά από έλεγχο εγγράφων',
    'Απεριόριστες 1:1 βιντεοκλήσεις ασφαλείς GDPR',
    'Ενσωματωμένο ημερολόγιο με προσωπική σελίδα κρατήσεων',
    'Στοιχεία επικοινωνίας & link ιστοσελίδας',
    'GeSY & online/δια ζώσης ένδειξη',
  ] : [
    'Full public profile (photo, bio, specializations)',
    'Licensed / Qualified badge',
    'Appear in directory & quiz matching',
    'Up to 3 specializations',
    'Verified badge after document check',
    'Unlimited 1:1 GDPR-secure online video calls',
    'Built-in calendar with personal booking page',
    'Contact details & website link',
    'GeSY & online/in-person indicator',
  ];

  const PRO_FEATURES = el ? [
    'Όλα του Βασικού',
    'Προτεραιότητα στα αποτελέσματα αναζήτησης',
    'Highlighted profile card στη λίστα',
    'Featured σε σελίδες επαρχιών & προσεγγίσεων',
    'Προσωπικό waiting room για βιντεοκλήσεις',
    'Βιντεοκλήσεις με πολλούς συμμετέχοντες',
    'Προγραμματισμός επαναλαμβανόμενων συνεδριών',
    'Embed βίντεο εισαγωγής',
    'Analytics: views, κλικ επικοινωνίας',
    'Email όταν το quiz σε ταιριάζει με χρήστη',
    'Badge "Psyche Professional"',
  ] : [
    'Everything in Free',
    'Priority ranking in search results',
    'Highlighted profile card in listings',
    'Featured on district & approach pages',
    'Personal waiting room for online video calls',
    'Video calls with multiple participants',
    'Schedule recurring sessions with clients',
    'Video introduction embed',
    'Analytics: profile views & contact clicks',
    'Email alerts when quiz matches you',
    '"Psyche Professional" badge',
  ];

  const PREMIUM_FEATURES = el ? [
    'Όλα του Επαγγελματικού',
    'Guaranteed top-3 placement σε σχετικές αναζητήσεις',
    'Featured σε άρθρα & editorial content',
    '"Top Psyche Pick" badge',
    'Εμφάνιση σε email newsletters προς χρήστες',
    'Detailed analytics (search terms, conversion rate)',
    'Dedicated URL: psyche.com.cy/[όνομά-σας]',
    'Priority verification & support',
    'Early access σε νέα features',
  ] : [
    'Everything in Professional',
    'Guaranteed top-3 placement in relevant searches',
    'Featured in articles & editorial content',
    '"Top Psyche Pick" badge',
    'Featured in user email newsletters',
    'Detailed analytics (search terms, conversion)',
    'Dedicated URL: psyche.com.cy/[your-name]',
    'Priority verification & support',
    'Early access to new features',
  ];

  const plans = [
    {
      id: 'free',
      name:     el ? 'Βασικό'        : 'Free',
      nameNote: el ? 'Δωρεάν για πάντα' : 'Always free',
      price:    el ? '€0'            : '€0',
      period:   el ? '/μήνα'         : '/month',
      desc:     el
        ? 'Μπείτε στην πλατφόρμα, χτίστε το προφίλ σας και γίνετε ορατοί σε χιλιάδες χρήστες.'
        : 'Get on the platform, build your profile, and become visible to thousands of users.',
      cta:      el ? 'Ξεκινήστε δωρεάν' : 'Get started free',
      ctaStyle: 'ghost',
      features: FREE_FEATURES,
      badge: null,
      comingSoon: false,
    },
    {
      id: 'pro',
      name:     el ? 'Επαγγελματικό' : 'Professional',
      nameNote: el ? 'Πιο δημοφιλές' : 'Most popular',
      price:    '€12',
      period:   el ? '/μήνα'         : '/month',
      priceSub: el ? 'ή €120/χρόνο (εξοικονομήστε €24)' : 'or €120/year (save €24)',
      desc:     el
        ? 'Αποκτήστε προτεραιότητα στα αποτελέσματα και μετατρέψτε την ορατότητα σε νέους πελάτες.'
        : 'Get priority placement and turn visibility into new clients.',
      cta:      el ? 'Ειδοποιήστε με όταν είναι διαθέσιμο' : 'Notify me when available',
      ctaStyle: 'accent',
      features: PRO_FEATURES,
      badge:    el ? 'Πιο Δημοφιλές' : 'Most Popular',
      comingSoon: true,
      comingSoonLabel: el ? 'Σύντομα' : 'Coming Soon',
    },
    {
      id: 'premium',
      name:     el ? 'Premium'        : 'Premium',
      nameNote: el ? 'Μέγιστη ορατότητα' : 'Maximum visibility',
      price:    '€22',
      period:   el ? '/μήνα'          : '/month',
      priceSub: el ? 'ή €220/χρόνο (εξοικονομήστε €44)' : 'or €220/year (save €44)',
      desc:     el
        ? 'Top-3 placement εγγυημένα. Για ψυχολόγους στην κορυφή της λίστας.'
        : 'Guaranteed top-3 placement. For psychologists who want a full practice.',
      cta:      el ? 'Ειδοποιήστε με όταν είναι διαθέσιμο' : 'Notify me when available',
      ctaStyle: 'ghost',
      features: PREMIUM_FEATURES,
      badge: null,
      comingSoon: true,
      comingSoonLabel: el ? 'Σύντομα' : 'Coming Soon',
    },
  ];

  return (
    <div className="page">

      {/* Hero */}
      <section style={{ textAlign: 'center', paddingTop: 64, paddingBottom: 48, maxWidth: 700, margin: '0 auto' }}>
        <span className="eyebrow" style={{ color: 'var(--psy-accent)' }}>
          {el ? 'Για Ψυχολόγους' : 'For Psychologists'}
        </span>
        <h1 style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(36px,6vw,58px)', fontWeight: 500, letterSpacing: '-0.03em', marginTop: 16, lineHeight: 1.05 }}>
          {el
            ? 'Βρεθείτε από τους ανθρώπους\nπου χρειάζονται βοήθεια.'
            : 'Be found by the people\nwho need your help.'}
        </h1>
        <p style={{ fontSize: 17, color: 'var(--fg2)', marginTop: 20, lineHeight: 1.6 }}>
          {el
            ? 'Το Psyche είναι η πρώτη πλατφόρμα κατάλογου ψυχολόγων φτιαγμένη αποκλειστικά για την Κύπρο. Δωρεάν για πάντα για τους χρήστες — freemium για τους ψυχολόγους.'
            : 'Psyche is the first psychologist directory built exclusively for Cyprus. Always free for users — freemium for psychologists.'}
        </p>

        {/* Early adopter banner */}
        <div style={{
          marginTop: 32, padding: '16px 24px', borderRadius: 16,
          background: 'var(--psy-accent-soft)', border: '1.5px solid var(--psy-accent)',
          display: 'inline-flex', alignItems: 'flex-start', gap: 12, textAlign: 'left', maxWidth: 560,
        }}>
          <Icon name="stars" style={{ color: 'var(--psy-accent)', marginTop: 2, flexShrink: 0 }} />
          <div>
            <div style={{ fontWeight: 700, color: 'var(--psy-accent)', fontSize: 14, marginBottom: 4 }}>
              {el ? 'Early Adopter Offer' : 'Early Adopter Offer'}
            </div>
            <div style={{ fontSize: 13, color: 'var(--fg1)', lineHeight: 1.5 }}>
              {el
                ? 'Εγγραφείτε τώρα δωρεάν και κλειδώστε μειωμένη τιμή για το Professional plan όταν κυκλοφορήσει. Οι πρώτοι 50 ψυχολόγοι θα πληρώνουν €7/μήνα για τον πρώτο χρόνο.'
                : 'Sign up free now and lock in a discounted rate for the Professional plan at launch. The first 50 psychologists pay €7/month for the first year.'}
            </div>
          </div>
        </div>
      </section>

      {/* Pricing cards */}
      <section style={{ maxWidth: 1100, margin: '0 auto', padding: '0 16px 80px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 20 }}>
          {plans.map(plan => (
            <div key={plan.id} style={{
              background: 'var(--psy-surface-2)',
              border: plan.id === 'pro' ? '2px solid var(--psy-accent)' : '1.5px solid var(--psy-rule)',
              borderRadius: 24,
              padding: 28,
              display: 'flex', flexDirection: 'column',
              position: 'relative',
            }}>
              {/* Badge */}
              {plan.badge && (
                <div style={{
                  position: 'absolute', top: -13, left: '50%', transform: 'translateX(-50%)',
                  background: 'var(--psy-accent)', color: '#fff',
                  fontSize: 11, fontWeight: 700, letterSpacing: '0.06em',
                  padding: '4px 14px', borderRadius: 999, whiteSpace: 'nowrap',
                }}>
                  {plan.badge}
                </div>
              )}

              {/* Coming soon chip */}
              {plan.comingSoon && (
                <div style={{
                  display: 'inline-flex', alignItems: 'center', gap: 6,
                  background: '#FEF3C7', color: '#92400E',
                  fontSize: 11, fontWeight: 700, letterSpacing: '0.05em',
                  padding: '3px 10px', borderRadius: 999, marginBottom: 16, alignSelf: 'flex-start',
                }}>
                  <Icon name="schedule" style={{ fontSize: 13 }} />
                  {plan.comingSoonLabel}
                </div>
              )}

              <div style={{ fontSize: 12, fontWeight: 700, color: 'var(--fg3)', letterSpacing: '0.06em', textTransform: 'uppercase', marginBottom: 6 }}>
                {plan.nameNote}
              </div>
              <div style={{ fontFamily: 'var(--font-display)', fontSize: 24, fontWeight: 600, letterSpacing: '-0.02em' }}>
                {plan.name}
              </div>

              {/* Price */}
              <div style={{ marginTop: 20, marginBottom: 4 }}>
                <span style={{ fontFamily: 'var(--font-display)', fontSize: 48, fontWeight: 500, letterSpacing: '-0.04em' }}>{plan.price}</span>
                <span style={{ fontSize: 15, color: 'var(--fg2)', marginLeft: 4 }}>{plan.period}</span>
              </div>
              {plan.priceSub && (
                <div style={{ fontSize: 12, color: 'var(--fg3)', marginBottom: 4 }}>{plan.priceSub}</div>
              )}

              <p style={{ fontSize: 14, color: 'var(--fg2)', lineHeight: 1.55, marginTop: 12, marginBottom: 24 }}>
                {plan.desc}
              </p>

              {/* CTA */}
              <button
                className={`btn ${plan.ctaStyle === 'accent' ? 'accent' : 'ghost'}`}
                style={{ width: '100%', justifyContent: 'center' }}
                disabled={notifyLoading === plan.id || notified === plan.id}
                onClick={() => plan.comingSoon
                  ? handleNotifyMe(plan.id)
                  : setRoute('signup-pro')
                }
              >
                {notified === plan.id
                  ? <><Icon name="check_circle" className="sm" /> {el ? 'Θα σας ειδοποιήσουμε!' : "You're on the list!"}</>
                  : notifyLoading === plan.id
                    ? (el ? 'Παρακαλώ περιμένετε...' : 'Please wait...')
                    : plan.cta
                }
              </button>

              {/* Divider */}
              <div style={{ borderTop: '1px solid var(--psy-rule)', margin: '24px 0' }} />

              {/* Features */}
              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10, flex: 1 }}>
                {plan.features.map((f, i) => (
                  <li key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 10, fontSize: 13, color: 'var(--fg1)', lineHeight: 1.4 }}>
                    <Icon name="check_circle" style={{ color: 'var(--psy-leaf)', fontSize: 17, flexShrink: 0, marginTop: 1 }} />
                    {f}
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        {/* ROI note */}
        <div style={{
          marginTop: 40, padding: '24px 32px', borderRadius: 20,
          background: 'var(--psy-surface-2)', border: '1.5px solid var(--psy-rule)',
          display: 'flex', alignItems: 'flex-start', gap: 20,
          maxWidth: 780, margin: '40px auto 0',
        }}>
          <Icon name="calculate" style={{ color: 'var(--psy-accent)', fontSize: 28, flexShrink: 0, marginTop: 2 }} />
          <div>
            <div style={{ fontWeight: 700, fontSize: 15, marginBottom: 8 }}>
              {el ? 'Το ROI με αριθμούς' : 'The ROI in numbers'}
            </div>
            <p style={{ fontSize: 14, color: 'var(--fg2)', lineHeight: 1.6, margin: 0 }}>
              {el
                ? 'Ένας νέος πελάτης που έρχεται μηνιαία στα €50-80/συνεδρία αξίζει €600–960/χρόνο. Το Professional plan κοστίζει €120/χρόνο. Χρειάζεστε μόνο έναν νέο πελάτη κάθε 2 μήνες για να αποσβεστεί — οτιδήποτε παραπάνω είναι κέρδος.'
                : 'One new client coming monthly at €50-80/session is worth €600–960/year. The Professional plan costs €120/year. You need just one new client every 2 months to break even — everything beyond that is pure gain.'}
            </p>
          </div>
        </div>
      </section>

      {/* Regulatory note */}
      <section style={{ background: 'var(--psy-surface-2)', borderTop: '1px solid var(--psy-rule)', padding: '48px 32px' }}>
        <div style={{ maxWidth: 860, margin: '0 auto' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 16 }}>
            <Icon name="gavel" style={{ color: 'var(--psy-accent)' }} />
            <h2 style={{ margin: 0, fontSize: 20, fontWeight: 700, letterSpacing: '-0.02em' }}>
              {el ? 'Σημαντική νομική διάκριση' : 'Important legal distinction'}
            </h2>
          </div>
          <p style={{ fontSize: 14, color: 'var(--fg2)', lineHeight: 1.7, margin: '0 0 16px' }}>
            {el
              ? 'Σύμφωνα με τον Νόμο 68(Ι)/1995, στην Κύπρο υπάρχουν δύο νομικά διαφορετικές κατηγορίες ψυχολόγων. Το Psyche εμφανίζει αυτή τη διάκριση σε κάθε προφίλ για να διασφαλίσει τη σωστή ενημέρωση των χρηστών.'
              : 'Under Law 68(I)/1995, Cyprus recognises two legally distinct tiers of psychologist. Psyche displays this distinction on every profile to ensure users are correctly informed.'}
          </p>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16, maxWidth: 700 }}>
            {[
              {
                title: el ? 'Εξουσιοδοτημένος Ψυχολόγος' : 'Licensed Psychologist',
                desc:  el ? 'Αυτόνομη άσκηση, διάγνωση και θεραπεία της ανθρώπινης συμπεριφοράς.' : 'Autonomous practice, diagnosis and treatment of human behaviour.',
                color: 'var(--psy-leaf)',
                bg:    'var(--psy-leaf-soft)',
              },
              {
                title: el ? 'Αναγνωρισμένος Ψυχολόγος' : 'Qualified Psychologist',
                desc:  el ? 'Διδασκαλία, έρευνα και παραπομπή μόνο. Δεν δικαιούται ανεξάρτητη κλινική άσκηση.' : 'Teaching, research and referral only. Independent clinical practice is not permitted.',
                color: 'var(--psy-accent)',
                bg:    'var(--psy-accent-soft)',
              },
            ].map(item => (
              <div key={item.title} style={{ background: item.bg, borderRadius: 14, padding: '16px 20px' }}>
                <div style={{ fontWeight: 700, fontSize: 14, color: item.color, marginBottom: 6 }}>{item.title}</div>
                <div style={{ fontSize: 13, color: 'var(--fg2)', lineHeight: 1.5 }}>{item.desc}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* FAQ */}
      <section style={{ maxWidth: 700, margin: '0 auto', padding: '64px 16px' }}>
        <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 32, fontWeight: 500, letterSpacing: '-0.025em', marginBottom: 32 }}>
          {el ? 'Συχνές ερωτήσεις' : 'Frequently asked questions'}
        </h2>
        {(el ? [
          { q: 'Θα παραμείνει πάντα δωρεάν το βασικό πλάνο;', a: 'Ναι. Το δωρεάν tier δεν αφαιρείται ποτέ. Τα paid plans προσθέτουν ορατότητα — δεν αφαιρούν τίποτα από το δωρεάν.' },
          { q: 'Πότε θα είναι διαθέσιμα τα paid plans;', a: 'Σύντομα. Θέλουμε πρώτα να χτίσουμε έναν αξιόπιστο κατάλογο με πραγματικό traffic. Εγγραφείτε τώρα και θα σας ειδοποιήσουμε — με early adopter τιμή για τους πρώτους 50.' },
          { q: 'Χρειάζεται να υπάρχουν νέοι πελάτες για να αξίζει;', a: 'Ακριβώς αυτό μετράμε. Θα δείτε analytics με πόσοι χρήστες είδαν το προφίλ σας πριν αποφασίσετε αν το paid tier αξίζει για εσάς.' },
          { q: 'Υποστηρίζεται το ΓεΣΥ;', a: 'Ναι. Μπορείτε να δηλώσετε αν δέχεστε ΓεΣΥ και οι χρήστες μπορούν να φιλτράρουν βάσει αυτού.' },
        ] : [
          { q: 'Will the free plan always stay free?', a: 'Yes. The free tier is never removed. Paid plans add visibility — they take nothing away from the free plan.' },
          { q: 'When will paid plans be available?', a: 'Soon. We want to build a credible directory with real traffic first. Sign up now and we\'ll notify you — with an early adopter price for the first 50 psychologists.' },
          { q: 'Do I need new clients to make it worthwhile?', a: 'That\'s exactly what we measure. You\'ll see analytics showing how many users viewed your profile before deciding whether the paid tier is worth it for you.' },
          { q: 'Is GeSY supported?', a: 'Yes. You can indicate whether you accept GeSY and users can filter by this.' },
        ]).map((item, i) => (
          <div key={i} style={{ borderBottom: '1px solid var(--psy-rule)', padding: '20px 0' }}>
            <div style={{ fontWeight: 600, fontSize: 15, marginBottom: 8 }}>{item.q}</div>
            <div style={{ fontSize: 14, color: 'var(--fg2)', lineHeight: 1.6 }}>{item.a}</div>
          </div>
        ))}
      </section>

      {/* Final CTA */}
      <section style={{ background: 'var(--psy-ink)', padding: '64px 32px', textAlign: 'center' }}>
        <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(28px,5vw,42px)', fontWeight: 500, letterSpacing: '-0.03em', color: '#fff', margin: '0 0 16px' }}>
          {el ? 'Εγγραφείτε σήμερα, δωρεάν.' : 'Join today, for free.'}
        </h2>
        <p style={{ color: 'rgba(255,255,255,0.6)', fontSize: 15, marginBottom: 28 }}>
          {el
            ? 'Φτιάξτε το προφίλ σας και γίνετε μέρος της πρώτης κυπριακής πλατφόρμας ψυχολόγων.'
            : 'Build your profile and become part of the first Cyprus-native psychologist platform.'}
        </p>
        <button className="btn" style={{ background: '#fff', color: 'var(--psy-ink)', fontWeight: 700, fontSize: 16, padding: '14px 36px', borderRadius: 999 }}
          onClick={() => setRoute('signup-pro')}>
          {el ? 'Δημιουργήστε δωρεάν προφίλ' : 'Create your free profile'}
          <Icon name="arrow_forward" className="sm" style={{ marginLeft: 8 }} />
        </button>
      </section>

    </div>
  );
}

Object.assign(window, { PricingScreen });