{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "official-biography",
  "title": "Official Biography",
  "description": "A component showcasing government official profile and official biography layout.",
  "registryDependencies": [
    "card",
    "button"
  ],
  "files": [
    {
      "path": "src/lib/kapwa/official-biography/index.tsx",
      "content": "import { Button } from '@kapwa/button';\nimport { Phone, Mail, Award, Building, Globe } from 'lucide-react';\n\nexport type ContactInfo = {\n  office: string;\n  phone: string;\n  email: string;\n  website: string;\n};\n\nexport type Education = {\n  degree: string;\n  institution: string;\n  year: string;\n};\n\nexport type BiographyProfile = {\n  name: string;\n  position: string;\n  servingSince: string;\n  profileImage: string;\n  bannerImage: string;\n  contactInfo: ContactInfo;\n  education: Education[];\n  biography: string[];\n  achievements: string[];\n};\n\nexport type BiographyProps = {\n  profile: BiographyProfile;\n  contactCta?: {\n    text: string;\n    onClick: () => void;\n  };\n  websiteCta?: {\n    text: string;\n    onClick: () => void;\n  };\n};\n\nexport const OfficialBiography = ({\n  profile,\n  contactCta,\n  websiteCta,\n}: BiographyProps) => {\n  return (\n    <div className='space-y-8'>\n      <div className='max-w-4xl mx-auto'>\n        <div className='bg-white rounded-xl shadow-xs overflow-hidden'>\n          {/* Header Section */}\n          <div className='relative h-64 bg-primary-700'>\n            <div className='absolute inset-0'>\n              <img\n                src={profile.bannerImage}\n                alt='Office'\n                className='w-full h-full object-cover opacity-20'\n              />\n            </div>\n            <div className='absolute inset-0 bg-linear-to-b from-primary-900/50 to-primary-900/90' />\n            <div className='relative h-full container mx-auto px-6 flex items-center'>\n              <div className='flex items-center space-x-8'>\n                <img\n                  src={profile.profileImage}\n                  alt={profile.name}\n                  className='w-40 h-40 rounded-full border-4 border-white shadow-xl object-cover'\n                />\n                <div className='text-white'>\n                  <div className='text-sm font-medium text-primary-200 mb-1'>\n                    {profile.position}\n                  </div>\n                  <h1 className='text-4xl font-bold mb-2'>{profile.name}</h1>\n                  <p className='text-primary-100'>{profile.servingSince}</p>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          {/* Content Section */}\n          <div className='container mx-auto px-6 py-8'>\n            <div className='grid grid-cols-1 lg:grid-cols-3 gap-8'>\n              {/* Left Column - Contact & Basic Info */}\n              <div className='space-y-6'>\n                <div className='bg-gray-50 rounded-lg p-6'>\n                  <h3 className='text-lg font-semibold mb-4'>\n                    Contact Information\n                  </h3>\n                  <div className='space-y-4'>\n                    <div className='flex items-center text-gray-800'>\n                      <Building className='h-5 w-5 mr-3 text-primary-600' />\n                      <div>\n                        <div className='font-medium'>Office</div>\n                        <div className='text-sm'>\n                          {profile.contactInfo.office}\n                        </div>\n                      </div>\n                    </div>\n                    <div className='flex items-center text-gray-800'>\n                      <Phone className='h-5 w-5 mr-3 text-primary-600' />\n                      <div>\n                        <div className='font-medium'>Phone</div>\n                        <div className='text-sm'>\n                          {profile.contactInfo.phone}\n                        </div>\n                      </div>\n                    </div>\n                    <div className='flex items-center text-gray-800'>\n                      <Mail className='h-5 w-5 mr-3 text-primary-600' />\n                      <div>\n                        <div className='font-medium'>Email</div>\n                        <div className='text-sm'>\n                          {profile.contactInfo.email}\n                        </div>\n                      </div>\n                    </div>\n                    <div className='flex items-center text-gray-800'>\n                      <Globe className='h-5 w-5 mr-3 text-primary-600' />\n                      <div>\n                        <div className='font-medium'>Website</div>\n                        <div className='text-sm'>\n                          {profile.contactInfo.website}\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n\n                <div className='bg-gray-50 rounded-lg p-6'>\n                  <h3 className='text-lg font-semibold mb-4'>Education</h3>\n                  <div className='space-y-4'>\n                    {profile.education.map((edu, index) => (\n                      <div\n                        key={index}\n                        className='border-l-2 border-primary-500 pl-4'\n                      >\n                        <div className='font-medium'>{edu.degree}</div>\n                        <div className='text-sm text-gray-800'>\n                          {edu.institution}\n                        </div>\n                        <div className='text-sm text-gray-800'>{edu.year}</div>\n                      </div>\n                    ))}\n                  </div>\n                </div>\n              </div>\n\n              {/* Right Column - Bio & Achievements */}\n              <div className='lg:col-span-2 space-y-6'>\n                <div>\n                  <h3 className='text-xl font-semibold mb-4'>Biography</h3>\n                  <div className='prose max-w-none'>\n                    {profile.biography.map((paragraph, index) => (\n                      <p\n                        key={index}\n                        className='text-gray-800 leading-relaxed mt-4 first:mt-0'\n                      >\n                        {paragraph}\n                      </p>\n                    ))}\n                  </div>\n                </div>\n\n                <div>\n                  <h3 className='text-xl font-semibold mb-4'>\n                    Key Achievements\n                  </h3>\n                  <div className='grid gap-4'>\n                    {profile.achievements.map((achievement, index) => (\n                      <div key={index} className='flex items-start'>\n                        <Award className='h-5 w-5 text-primary-600 mt-1 mr-3 shrink-0' />\n                        <p className='text-gray-800'>{achievement}</p>\n                      </div>\n                    ))}\n                  </div>\n                </div>\n\n                {(contactCta || websiteCta) && (\n                  <div className='flex space-x-4 mt-8'>\n                    {contactCta && (\n                      <Button\n                        className='bg-primary-600 hover:bg-primary-700 text-white'\n                        onClick={contactCta.onClick}\n                      >\n                        <Mail className='h-4 w-4 mr-2' />\n                        {contactCta.text}\n                      </Button>\n                    )}\n                    {websiteCta && (\n                      <Button\n                        variant='outline'\n                        className='border-gray-300 text-gray-700 hover:bg-gray-50'\n                        onClick={websiteCta.onClick}\n                      >\n                        <Globe className='h-4 w-4 mr-2' />\n                        {websiteCta.text}\n                      </Button>\n                    )}\n                  </div>\n                )}\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}