// Marketplace.jsx — 3-tab in-SPA marketplace
// Tabs: Patient Products / CE Training / Marketing Packages
// ZIP3 exclusivity note for marketing tier. VPS compliance copy. Pickaxe for payments.
// Compliance: AB 3030, no star ratings, no paid placement as quality signal.

const { useState } = React;

const AB3030 = 'AI-assisted content is disclosed under California AB 3030. Information only — not clinical advice.';

const PATIENT_PRODUCTS = [
  { id: 1, name: 'Oral Hygiene Starter Kit', desc: 'Electric brush, water flosser, tongue scraper — dentist-curated bundle.', price: 89, badge: 'Patient Favorite', img: '🪥' },
  { id: 2, name: 'Whitening System — Professional Grade', desc: 'Carbamide peroxide 10% with custom-fit trays (requires dentist script).', price: 129, badge: 'Compliance Note', img: '✨' },
  { id: 3, name: 'Night Guard — Mail-fit Kit', desc: 'Impressions sent to lab; guard delivered to home. For bruxism prevention.', price: 199, badge: 'Most Popular', img: '🦷' },
  { id: 4, name: 'SmileSim Preview Credit', desc: 'One AI-assisted smile simulation — Informational preview, not a clinical prediction.', price: 15, badge: 'Digital', img: '📸' },
];

const CE_PRODUCTS = [
  { id: 5, name: 'Perio Maintenance 2026', credits: 3, provider: 'ADHA', price: 79, cat: 'Clinical', img: '🩺' },
  { id: 6, name: 'OSHA Compliance Update', credits: 2, provider: 'ADA CERP', price: 49, cat: 'Compliance', img: '📋' },
  { id: 7, name: 'Dental Billing Fundamentals', credits: 3, provider: 'DANB', price: 69, cat: 'Business', img: '💳' },
  { id: 8, name: 'Implant Foundations for DA', credits: 2, provider: 'PACE', price: 59, cat: 'Clinical', img: '🔩' },
  { id: 9, name: 'Case Acceptance Psychology', credits: 1, provider: 'PACE', price: 39, cat: 'Business', img: '🧠' },
];

const MARKETING_TIERS = [
  {
    slug: 'starter',
    name: 'Local Visibility',
    price: 149,
    period: '/month',
    features: [
      'Verified listing on thedentist.ai',
      'ZIP3-exclusive placement (first-come)',
      'VPS score published publicly',
      'Monthly performance report',
    ],
    note: 'Payment does not influence VPS or recognition. Rankings remain payment-independent.',
  },
  {
    slug: 'growth',
    name: 'Growth Bundle',
    price: 399,
    period: '/month',
    popular: true,
    features: [
      'Everything in Local Visibility',
      'Priority in search results (alphabetical tiebreak only)',
      'Monthly patient newsletter feature',
      'Doctor profile page (photos, bio, CE)',
      'CE transcript + recognition display',
    ],
    note: 'ZIP3 exclusivity per specialty. VPS score remains independently calculated.',
  },
  {
    slug: 'pro',
    name: 'Practice Pro',
    price: 749,
    period: '/month',
    features: [
      'Everything in Growth Bundle',
      'SmileCam Pro widget embed on your site',
      'AI patient FAQ (AB 3030 compliant)',
      'Monthly reputation report',
      'Dedicated onboarding call',
    ],
    note: 'VPS and recognition earned only by performance data. Marketing spend is completely walled off.',
  },
  {
    slug: 'enterprise',
    name: 'DSO / Enterprise',
    price: 1499,
    period: '/month',
    features: [
      'All Practice Pro features × all locations',
      'Group dashboard + rollup VPS reporting',
      'Custom integration (PMS, booking)',
      'Quarterly strategy review',
    ],
    note: 'Contact for custom pricing on 10+ locations.',
  },
];

function ProductCard({ product, go }) {
  return (
    <div className="card" style={{ display: 'flex', gap: 16, alignItems: 'flex-start' }}>
      <div style={{ fontSize: 36, flexShrink: 0 }}>{product.img}</div>
      <div style={{ flex: 1 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 8, flexWrap: 'wrap' }}>
          <div>
            <div style={{ fontWeight: 600, fontSize: 14, marginBottom: 2 }}>{product.name}</div>
            <div style={{ fontSize: 12, color: 'var(--color-text-secondary)', marginBottom: 6 }}>{product.desc}</div>
            {product.badge && <span className={`badge badge-${product.badge === 'Compliance Note' ? 'yellow' : 'blue'}`} style={{ fontSize: 11 }}>{product.badge}</span>}
          </div>
          <div style={{ textAlign: 'right', flexShrink: 0 }}>
            <div style={{ fontWeight: 700, fontSize: 16, color: 'var(--color-accent)' }}>${product.price}</div>
            <button type="button" className="btn btn-primary btn-sm" style={{ marginTop: 6 }}
              onClick={() => window.open('https://pickaxe.com', '_blank', 'noopener')}>
              Buy
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

function CeProductCard({ product }) {
  return (
    <div className="card" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 12, flexWrap: 'wrap' }}>
      <div style={{ display: 'flex', gap: 12, alignItems: 'center', flex: 1 }}>
        <div style={{ fontSize: 28, flexShrink: 0 }}>{product.img}</div>
        <div>
          <div style={{ fontWeight: 600, fontSize: 14, marginBottom: 3 }}>{product.name}</div>
          <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
            <span className="badge badge-blue" style={{ fontSize: 11 }}>{product.credits} CE credit{product.credits > 1 ? 's' : ''}</span>
            <span className="badge badge-gray" style={{ fontSize: 11 }}>{product.provider}</span>
            <span className="badge badge-gray" style={{ fontSize: 11 }}>{product.cat}</span>
          </div>
        </div>
      </div>
      <div style={{ textAlign: 'right', flexShrink: 0 }}>
        <div style={{ fontWeight: 700, fontSize: 15, color: 'var(--color-accent)' }}>${product.price}</div>
        <button type="button" className="btn btn-primary btn-sm" style={{ marginTop: 6 }}
          onClick={() => window.open('https://pickaxe.com', '_blank', 'noopener')}>
          Enroll
        </button>
      </div>
    </div>
  );
}

function MarketingTierCard({ tier }) {
  return (
    <div className={`card ${tier.popular ? 'card-highlighted' : ''}`}
      style={{
        borderColor: tier.popular ? 'var(--color-accent)' : undefined,
        borderWidth: tier.popular ? 2 : 1,
        position: 'relative',
      }}>
      {tier.popular && (
        <span className="badge badge-blue" style={{ position: 'absolute', top: -10, left: 16, fontSize: 11 }}>
          Most Popular
        </span>
      )}
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 12 }}>
        <div>
          <div style={{ fontWeight: 700, fontSize: 15 }}>{tier.name}</div>
          <div style={{ fontSize: 12, color: 'var(--color-text-tertiary)', marginTop: 2 }}>ZIP3-exclusive per specialty</div>
        </div>
        <div style={{ textAlign: 'right' }}>
          <span style={{ fontWeight: 700, fontSize: 22, color: 'var(--color-accent)' }}>${tier.price}</span>
          <span style={{ fontSize: 12, color: 'var(--color-text-tertiary)' }}>{tier.period}</span>
        </div>
      </div>
      <ul style={{ paddingLeft: 0, margin: '0 0 12px', listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 6 }}>
        {tier.features.map((f, i) => (
          <li key={i} style={{ fontSize: 13, display: 'flex', gap: 8 }}>
            <span style={{ color: 'var(--color-success,#059669)', flexShrink: 0 }}>✓</span>
            {f}
          </li>
        ))}
      </ul>
      <p style={{ fontSize: 11, color: 'var(--color-text-tertiary)', marginBottom: 12, fontStyle: 'italic' }}>{tier.note}</p>
      <button type="button" className={`btn ${tier.popular ? 'btn-primary' : 'btn-secondary'} btn-block`}
        onClick={() => window.open('https://pickaxe.com', '_blank', 'noopener')}>
        {tier.slug === 'enterprise' ? 'Contact Us' : 'Get Started →'}
      </button>
    </div>
  );
}

function Marketplace({ go }) {
  const [tab, setTab] = useState('patient');

  const tabs = [
    { slug: 'patient', label: '🛒 Patient Products' },
    { slug: 'ce', label: '🎓 CE Training' },
    { slug: 'marketing', label: '📈 Marketing' },
  ];

  return (
    <div className="gap-screen animate-fade-in-up" style={{ maxWidth: 720, margin: '0 auto', padding: '24px 16px' }}>
      <button type="button" className="btn btn-ghost btn-sm" onClick={() => go?.('landing')} style={{ marginBottom: 16, paddingLeft: 0 }}>
        ← Home
      </button>
      <p style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.1em', color: 'var(--color-accent)', textTransform: 'uppercase', marginBottom: 4 }}>
        VERIFIED · INDEPENDENT · NO PAID PLACEMENT
      </p>
      <h1 style={{ fontSize: 'clamp(1.25rem,4vw,1.75rem)', fontWeight: 700, margin: '0 0 4px' }}>Marketplace</h1>
      <p className="section-subtitle" style={{ marginBottom: 20 }}>Products, CE training, and practice marketing — curated by TheDentist.ai.</p>

      {/* Tab bar */}
      <div className="tab-bar" style={{ display: 'flex', gap: 4, marginBottom: 24, background: 'var(--color-surface-raised)', borderRadius: 12, padding: 4 }}>
        {tabs.map(t => (
          <button
            key={t.slug}
            type="button"
            className={`tab-btn ${tab === t.slug ? 'active' : ''}`}
            style={{
              flex: 1, padding: '8px 12px', borderRadius: 10, border: 'none', cursor: 'pointer',
              fontWeight: tab === t.slug ? 700 : 500, fontSize: 13,
              background: tab === t.slug ? 'var(--color-surface)' : 'transparent',
              color: tab === t.slug ? 'var(--color-accent)' : 'var(--color-text-secondary)',
              boxShadow: tab === t.slug ? '0 1px 4px rgba(0,0,0,0.1)' : 'none',
              transition: 'all 0.15s',
            }}
            onClick={() => setTab(t.slug)}
          >
            {t.label}
          </button>
        ))}
      </div>

      {/* Patient Products */}
      {tab === 'patient' && (
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          <p style={{ fontSize: 12, color: 'var(--color-text-tertiary)' }}>
            Dentist-curated products. No paid placement in rankings. <a href="/methodology/" className="methodology-link">Curation criteria →</a>
          </p>
          {PATIENT_PRODUCTS.map(p => <ProductCard key={p.id} product={p} go={go} />)}
        </div>
      )}

      {/* CE Training */}
      {tab === 'ce' && (
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          <p style={{ fontSize: 12, color: 'var(--color-text-tertiary)' }}>
            ADA CERP · ADHA · PACE-approved continuing education for dental professionals.
          </p>
          {CE_PRODUCTS.map(p => <CeProductCard key={p.id} product={p} />)}
          <button type="button" className="btn btn-secondary" onClick={() => go?.('ce-hub')}>
            View full CE Hub →
          </button>
        </div>
      )}

      {/* Marketing Tiers */}
      {tab === 'marketing' && (
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          <div className="disclaimer-banner">
            <strong>VPS is never for sale.</strong> Marketing spend has zero influence on Verified Performance Score, recognition tiers, or directory ranking. Payment only unlocks visibility tools — see{' '}
            <a href="/methodology/" className="methodology-link">methodology</a> for full independence guarantee.
          </div>
          {MARKETING_TIERS.map(t => <MarketingTierCard key={t.slug} tier={t} />)}
        </div>
      )}

      <div className="disclaimer-banner" style={{ marginTop: 24 }}>{AB3030}</div>
      <p style={{ fontSize: 11, color: 'var(--color-text-tertiary)', marginTop: 8 }}>
        TheDentist<em>.ai</em> · Smile Mentors Inc. · <a href="/methodology/" className="methodology-link" style={{ fontSize: 11 }}>Recognition methodology 2026.05</a>
      </p>
    </div>
  );
}

window.Marketplace = Marketplace;