<!-- DEBUG: Farmers count: 500 -->
<!-- Farmer: Betty Manten County: Nimba -->
<!-- Farmer: Princess Tenwah County: Nimba -->
<!-- Farmer: Nora D Luo County: Nimba -->
<!-- Farmer: Stephen Z Vangehn County: Nimba -->
<!-- Farmer: Wilson S  Kandea County: Nimba -->
<!-- Farmer: Princess Tenwah County: Nimba -->
<!-- Farmer: Gbo Teawon County: Nimba -->
<!-- Farmer: Susanna Massaquoi County: Nimba -->
<!-- Farmer: Marthaline Paye County: Nimba -->
<!-- Farmer: Albert Gongbaye County: Nimba -->
<!-- Farmer: Karboe Gwesiah County: Nimba -->
<!-- Farmer: Estoria Kwahimie County: Nimba -->
<!-- Farmer: Archie  Kwahimie County: Nimba -->
<!-- Farmer: Rita Zorzay County: Nimba -->
<!-- Farmer: Mark Sarmie County: Nimba -->
<!-- Farmer: Ida Waye County: Nimba -->
<!-- Farmer: Yah Flomo County: Nimba -->
<!-- Farmer: Emmanuel  K Z Troy County: Nimba -->
<!-- Farmer: Oretha Yeaney County: Nimba -->
<!-- Farmer: Jeff K Dahn County: Nimba -->
<!-- Farmer: Comfort Gbaintor County: Nimba -->
<!-- Farmer: Louise Karn County: Nimba -->
<!-- Farmer: Ebenezer Yeapeh County: Nimba -->
<!-- Farmer: Lucy Dahn County: Nimba -->
<!-- Farmer: Elijah Paye County: Nimba -->
<!-- Farmer: Patience Woodson County: Nimba -->
<!-- Farmer: Princess Boakai County: Nimba -->
<!-- Farmer: Musu Paye County: Nimba -->
<!-- Farmer: Patricia Gwea County: Nimba -->
<!-- Farmer: Irene Thomas County: Nimba -->
<!-- Farmer: Mary Queyker County: Nimba -->
<!-- Farmer: Martha  Norbiah County: Nimba -->
<!-- Farmer: Martha Saturday County: Nimba -->
<!-- Farmer: Rebecca Bempai County: Nimba -->
<!-- Farmer: Solomon S Gaye County: Nimba -->
<!-- Farmer: Samuel P Karnkeh County: Nimba -->
<!-- Farmer: Rita Zorzay County: Nimba -->
<!-- Farmer: Victor S Dahn County: Nimba -->
<!-- Farmer: Regina Biah County: Nimba -->
<!-- Farmer: Yah  M Tablah County: Nimba -->
<!-- Farmer: Wilfred Suah County: Nimba -->
<!-- Farmer: Lowyee Mango County: Nimba -->
<!-- Farmer: Annie Tiawon County: Nimba -->
<!-- Farmer: Morris Dekorluo County: Nimba -->
<!-- Farmer: Marie Karnue County: Nimba -->
<!-- Farmer: Regina Gbuyee County: Nimba -->
<!-- Farmer: Tonkor Flomo County: Nimba -->
<!-- Farmer: Patrick TD Karnah County: Nimba -->
<!-- Farmer: Joana Gweh County: Nimba -->
<!-- Farmer: Yeh  Gbean County: Nimba -->
<!-- Farmer: Richmond Sengbah County: Nimba -->
<!-- Farmer: Samuel Yeaney County: Nimba -->
<!-- Farmer: James Luogon County: Nimba -->
<!-- Farmer: Ruth Z Troy County: Nimba -->
<!-- Farmer: Maron Bouh County: Nimba -->
<!-- Farmer: Amie Duo County: Nimba -->
<!-- Farmer: Oretha Kerbah County: Nimba -->
<!-- Farmer: Beatrice Duo County: Nimba -->
<!-- Farmer: Theresa Miallie County: Nimba -->
<!-- Farmer: Grace Osaka County: Nimba -->
<!-- Farmer: Ezekiel Saybeah County: Nimba -->
<!-- Farmer: Comfort Borkuah County: Nimba -->
<!-- Farmer: Yah M Teyabiah County: Nimba -->
<!-- Farmer: Winston Youhn County: Nimba -->
<!-- Farmer: Mercy  Sehneah County: Nimba -->
<!-- Farmer: Betty Bella County: Nimba -->
<!-- Farmer: Mamie Wehyee County: Nimba -->
<!-- Farmer: Francis Targan County: Nimba -->
<!-- Farmer: Susanna Nuah County: Nimba -->
<!-- Farmer: Diana Davis County: Nimba -->
<!-- Farmer: Antonette Doitoe County: Nimba -->
<!-- Farmer: Stanford Saye County: Nimba -->
<!-- Farmer: Hector D Dolo County: Nimba -->
<!-- Farmer: Matthew Karlie County: Nimba -->
<!-- Farmer: Abraham Leo County: Nimba -->
<!-- Farmer: Amos G  Dokie County: Nimba -->
<!-- Farmer: Anna Toubay County: Nimba -->
<!-- Farmer: Nyan Davis County: Nimba -->
<!-- Farmer: Nyan David County: Nimba -->
<!-- Farmer: Cyrus Nehbah County: Nimba -->
<!-- Farmer: Kebbeh Lablah County: Nimba -->
<!-- Farmer: Winifred Suah County: Nimba -->
<!-- Farmer: Kenneth Cooper County: Nimba -->
<!-- Farmer: Mark  Sarmie County: Nimba -->
<!-- Farmer: Oretha Mulbah County: Montserrado -->
<!-- Farmer: Patience Woodson County: Nimba -->
<!-- Farmer: Amelia Vonleh County: Nimba -->
<!-- Farmer: Gayduoh  Johnson County: Margibi -->
<!-- Farmer: Beatrice Sumo County: Montserrado -->
<!-- Farmer: Korto  Zayzay County: Margibi -->
<!-- Farmer: Maryoht Shertf County: Bong -->
<!-- Farmer: Martina T Gbusseh County: Bong -->
<!-- Farmer: Jesse Kollie County: Bong -->
<!-- Farmer: John  B  Kollie County: Margibi -->
<!-- Farmer: Adophus Kparngar County: Nimba -->
<!-- Farmer: Siaffa  Konneh County: Margibi -->
<!-- Farmer: Dean Hwang County: Maryland -->
<!-- Farmer: Elizabeth Kolleh County: Margibi -->
<!-- Farmer: Augustus Wolah County: Bomi -->
<!-- Farmer: Joshus T K  Towieh County: Bomi -->
<!-- Farmer: Naomi S  Tokpah County: Grand Bassa -->
<!-- Farmer: Omar Philip TuraY County: Grand Bassa -->
<!-- Farmer: Dahn Wondeh County: Nimba -->
<!-- Farmer: Beatrice Wennie County: Margibi -->
<!-- Farmer: Jonathan T  Vesselee County: Lofa -->
<!-- Farmer: Theresa Winpea County: Bong -->
<!-- Farmer: Eric Yammunta County: Bomi -->
<!-- Farmer: Khalil Dukuly County: Bomi -->
<!-- Farmer: Kiazolu A Jan County: Bomi -->
<!-- Farmer: Abraham  Saah County: Margibi -->
<!-- Farmer: Korto  Zayzay County: Margibi -->
<!-- Farmer: Martha K Bellepa County: Bong -->
<!-- Farmer: Mary Sackie County: Bong -->
<!-- Farmer: Konnah Tokpa County: Bong -->
<!-- Farmer: Johnson B Morris County: Montserrado -->
<!-- Farmer: Esther Y Flomo County: Montserrado -->
<!-- Farmer: Watta Morris County: Montserrado -->
<!-- Farmer: Gormah Flomo County: Montserrado -->
<!-- Farmer: David W Sackie County: Montserrado -->
<!-- Farmer: Annie Home County: Montserrado -->
<!-- Farmer: Hellenkar Wonyon County: Nimba -->
<!-- Farmer: Joana Gweh County: Nimba -->
<!-- Farmer: Lucy Dahn County: Nimba -->
<!-- Farmer: Regina Biah County: Nimba -->
<!-- Farmer: Robert Gaye County: Nimba -->
<!-- Farmer: Jamama Gaye County: Nimba -->
<!-- Farmer: George A  Teh County: Sinoe -->
<!-- Farmer: Joseph Tarnue County: Lofa -->
<!-- Farmer: Daniel Telah County: Grand Cape Mount -->
<!-- Farmer: Kebeh Suah County: Lofa -->
<!-- Farmer: Samie G  Siaway County: Grand Bassa -->
<!-- Farmer: Emery G  Sulon County: Sinoe -->
<!-- Farmer: Emmanuel Thomas County: Gbarpolu -->
<!-- Farmer: Joe S  Sehneah County: Nimba -->
<!-- Farmer: Thomas Sarko County: Lofa -->
<!-- Farmer: Mohammed Seley County: Lofa -->
<!-- Farmer: George O  Rambo County: Montserrado -->
<!-- Farmer: Alex B  Paye County: Nimba -->
<!-- Farmer: Sando Raynes County: Montserrado -->
<!-- Farmer: Denny Sendolo County: Gbarpolu -->
<!-- Farmer: Florence M  Thornes County: Gbarpolu -->
<!-- Farmer: Kpannah  Gbolue County: Margibi -->
<!-- Farmer: Raymond Varteh County: Nimba -->
<!-- Farmer: Ellen Joemah Ndebeh County: Lofa -->
<!-- Farmer: Yassah Mulbah County: Lofa -->
<!-- Farmer: Thomas Necollinh County: Sinoe -->
<!-- Farmer: Eric Mengone County: Nimba -->
<!-- Farmer: Jack G  Luogon County: Nimba -->
<!-- Farmer: Cyrus G  Menkarzon County: Margibi -->
<!-- Farmer: Benedict Newton County: Bong -->
<!-- Farmer: Korpo Kwala County: Lofa -->
<!-- Farmer: Jartu M  Kromah County: Grand Cape Mount -->
<!-- Farmer: Samuel D  Lakpor County: Bong -->
<!-- Farmer: Henry Korkoyah County: Bong -->
<!-- Farmer: James Kollie County: Lofa -->
<!-- Farmer: Gayduo Kortee County: Lofa -->
<!-- Farmer: Josephus F  Lanyee County: Nimba -->
<!-- Farmer: Benjamin Ngunkpanje County: Margibi -->
<!-- Farmer: Dindiin Karyea County: River Cess -->
<!-- Farmer: Siemon Kankon County: Grand Kru -->
<!-- Farmer: Leo Katakpa County: Bong -->
<!-- Farmer: Isaac Julu County: Sinoe -->
<!-- Farmer: Henrietia Jackson County: Bomi -->
<!-- Farmer: William T  Hill County: Nimba -->
<!-- Farmer: Albert S  James County: Sinoe -->
<!-- Farmer: Edward Kalayi County: Nimba -->
<!-- Farmer: Mulbah Keita County: Bong -->
<!-- Farmer: Saye Gono County: Nimba -->
<!-- Farmer: Raymond M  Johnson County: Bomi -->
<!-- Farmer: Patience Johnson County: River Gee -->
<!-- Farmer: Alan Kamara County: Lofa -->
<!-- Farmer: Angeline Kangwen County: Sinoe -->
<!-- Farmer: Petter Z N  Kannie County: Nimba -->
<!-- Farmer: Anothony Z  Karngbo County: River Cess -->
<!-- Farmer: Nyah William Kokeh County: Nimba -->
<!-- Farmer: David S  Kolleh County: Bong -->
<!-- Farmer: Aaron Kollie County: Bong -->
<!-- Farmer: Emmanuel Korkllie County: Bong -->
<!-- Farmer: Daniel A  Kpaan County: Lofa -->
<!-- Farmer: Garmai Kpatakolee County: Lofa -->
<!-- Farmer: Annie W  Kruah County: Nimba -->
<!-- Farmer: Diana Kwabo County: River Gee -->
<!-- Farmer: Diah B  Larmah County: Margibi -->
<!-- Farmer: Darius D  Luogon County: Nimba -->
<!-- Farmer: Junior Makor County: Bong -->
<!-- Farmer: Daniel Mengen County: Nimba -->
<!-- Farmer: Jerry Moriba County: Bong -->
<!-- Farmer: Korto Mulbah County: Lofa -->
<!-- Farmer: Dickson B  Musu County: Maryland -->
<!-- Farmer: Dee D  Natt County: Bong -->
<!-- Farmer: Aaron Nyaquio County: Nimba -->
<!-- Farmer: Eric Paye County: Bong -->
<!-- Farmer: Lucy Dweh Peter County: Maryland -->
<!-- Farmer: Hector W  Quoigoag County: Nimba -->
<!-- Farmer: Leopold S  Sakama County: Lofa -->
<!-- Farmer: Allocious K  Sannah County: Nimba -->
<!-- Farmer: Mayamu Saryon County: Lofa -->
<!-- Farmer: Aloysious Sehneah County: Nimba -->
<!-- Farmer: Rev. Eddie G Seyboe County: Margibi -->
<!-- Farmer: Sando J  Siaffa County: Bong -->
<!-- Farmer: Daniel Songor County: Sinoe -->
<!-- Farmer: Samuel B  Suah County: Grand Bassa -->
<!-- Farmer: Jereniah Sumo County: Bong -->
<!-- Farmer: Peterson Tambah County: Bong -->
<!-- Farmer: Fayiah Taylor County: Bong -->
<!-- Farmer: Emmanuel Teah County: Grand Kru -->
<!-- Farmer: McLoren B  Toe County: Grand Kru -->
<!-- Farmer: Marian G  Tokpa County: Bong -->
<!-- Farmer: Branda Tokpah County: Bong -->
<!-- Farmer: SaHr M  Torto County: Grand Bassa -->
<!-- Farmer: Abel P  Varney County: Margibi -->
<!-- Farmer: Jonathan T  Vesselee County: Lofa -->
<!-- Farmer: Korpo Weah County: Bong -->
<!-- Farmer: Nyemah P  Williams County: Bong -->
<!-- Farmer: Sizi F  Wuolewu County: Lofa -->
<!-- Farmer: Saybah Yamah County: Lofa -->
<!-- Farmer: Moses N  Z. County: Gbarpolu -->
<!-- Farmer: Abraham Saye  Zerkibah County: Nimba -->
<!-- Farmer: Mark Kolleh County: Nimba -->
<!-- Farmer: Rachel  Bai Sah County: Bomi -->
<!-- Farmer: Bendu Golafaley County: Grand Cape Mount -->
<!-- Farmer: Yawo Forson County: Margibi -->
<!-- Farmer: Junior  Sackie County: Margibi -->
<!-- Farmer: Sawo M  Corneh County: Bong -->
<!-- Farmer: Martina R Gbusseh County: Bong -->
<!-- Farmer: Abel Bellepa County: Bong -->
<!-- Farmer: Delvin A Mentee County: Bong -->
<!-- Farmer: Harrison Getteh County: Bong -->
<!-- Farmer: Yanka Mulbah County: Bong -->
<!-- Farmer: Ruth Q Prah County: Bong -->
<!-- Farmer: Abraham Bomu County: Grand Cape Mount -->
<!-- Farmer: Beyan F Cooper County: Montserrado -->
<!-- Farmer: Etta David County: Grand Bassa -->
<!-- Farmer: Mamie  David County: Montserrado -->
<!-- Farmer: Moima Lapolu County: Montserrado -->
<!-- Farmer: Yah Bainda County: Montserrado -->
<!-- Farmer: Tenneh Forkpah County: Montserrado -->
<!-- Farmer: Morris B Kiazolu County: Grand Cape Mount -->
<!-- Farmer: Boakai Samah County: Grand Cape Mount -->
<!-- Farmer: Wilfred S Johnson County: Montserrado -->
<!-- Farmer: Sunday K  Sunday County: Montserrado -->
<!-- Farmer: Annie Joseph County: Montserrado -->
<!-- Farmer: Satta Moses County: Montserrado -->
<!-- Farmer: Eve Paye County: Nimba -->
<!-- Farmer: Patricia  Gwea County: Nimba -->
<!-- Farmer: Karboe Gwesiah County: Nimba -->
<!-- Farmer: Stanley Weamie County: Nimba -->
<!-- Farmer: Yeh Gbean County: Nimba -->
<!-- Farmer: Ezekiel Saybeah County: Nimba -->
<!-- Farmer: Princess  Tenwah County: Nimba -->
<!-- Farmer: Samuel P Karnkeh County: Nimba -->
<!-- Farmer: Princess Bob County: Nimba -->
<!-- Farmer: Marcus Wright County: Nimba -->
<!-- Farmer: Moses Kollie County: Nimba -->
<!-- Farmer: Nenwon G  Gongoloe County: Nimba -->
<!-- Farmer: Abel Goodpeh County: Bong -->
<!-- Farmer: Korvey M  Gboluma County: Lofa -->
<!-- Farmer: Jestina Gbaity County: River Gee -->
<!-- Farmer: Mosese Gbornor County: Bong -->
<!-- Farmer: Abraham K  Grualee County: Nimba -->
<!-- Farmer: Cresar N  Freeman County: Nimba -->
<!-- Farmer: John Z  Forkpah County: Bong -->
<!-- Farmer: Timothy Freeman County: Nimba -->
<!-- Farmer: Joseph Flomo County: Nimba -->
<!-- Farmer: Emmanuel Flomo County: Bong -->
<!-- Farmer: Ernest Flomo Jr County: Bong -->
<!-- Farmer: Deo Gahiza County: Margibi -->
<!-- Farmer: James B  Harris County: Bomi -->
<!-- Farmer: Corboi william Kennedy County: Lofa -->
<!-- Farmer: Daniel Nimely County: Grand Kru -->
<!-- Farmer: Marilyn G  Flomo County: Gbarpolu -->
<!-- Farmer: Joseph Fayiah County: Bong -->
<!-- Farmer: Vesselee Flomo County: Lofa -->
<!-- Farmer: Hilar A  Faijue County: Lofa -->
<!-- Farmer: Emmanuel N  Dweh County: Bomi -->
<!-- Farmer: Hilar A  Faijue County: Lofa -->
<!-- Farmer: Mulbah K  Flomo County: Lofa -->
<!-- Farmer: Elizabeth Dorbor County: Lofa -->
<!-- Farmer: John Karl Dolo County: Nimba -->
<!-- Farmer: Kennedy M  Dorbor County: Lofa -->
<!-- Farmer: Joetta Didi County: Bong -->
<!-- Farmer: Jamal D  Deliphaye County: Bong -->
<!-- Farmer: Alphonso J  Doe County: River Gee -->
<!-- Farmer: Kamah B  Dorweh County: Bong -->
<!-- Farmer: Aaron M  Flomo County: Lofa -->
<!-- Farmer: George David County: Grand Bassa -->
<!-- Farmer: Payne H  Dahn County: Nimba -->
<!-- Farmer: Joamah T Y  David County: Bong -->
<!-- Farmer: Wayeah Cooper County: River Cess -->
<!-- Farmer: Daniel Chea County: Maryland -->
<!-- Farmer: Oliver Chea County: River Gee -->
<!-- Farmer: Solomon Ciapha County: Bong -->
<!-- Farmer: Audovic Cooper County: Sinoe -->
<!-- Farmer: Nya David County: Nimba -->
<!-- Farmer: Archie B  Brown County: Grand Bassa -->
<!-- Farmer: Othello Bontor County: Nimba -->
<!-- Farmer: Nelson Clement County: Bong -->
<!-- Farmer: James Gayflor Clinton County: Bong -->
<!-- Farmer: Bendu Daddeh County: Margibi -->
<!-- Farmer: Paul Dahn County: Nimba -->
<!-- Farmer: Gbankoe Daniels County: Montserrado -->
<!-- Farmer: Elizabeth K  Darkolon County: Lofa -->
<!-- Farmer: Teddy Dayneah County: Nimba -->
<!-- Farmer: Gueve P  Dean County: Lofa -->
<!-- Farmer: Diacallyne D  Diagor County: Nimba -->
<!-- Farmer: Amadou Diallo County: Sinoe -->
<!-- Farmer: Jackson Dolo County: Lofa -->
<!-- Farmer: Martha Dolo County: Bong -->
<!-- Farmer: Curious P  Dolo County: Nimba -->
<!-- Farmer: Elizabeth Dorbor County: Lofa -->
<!-- Farmer: Harley S  Dovee County: Lofa -->
<!-- Farmer: Blessing Duo County: Nimba -->
<!-- Farmer: Amos M  Fagans County: Bong -->
<!-- Farmer: Emuruna Fahnbulleh County: Grand Cape Mount -->
<!-- Farmer: Aloysius Fallah County: Sinoe -->
<!-- Farmer: Robert S  Fayiah County: Lofa -->
<!-- Farmer: John Fello County: Margibi -->
<!-- Farmer: Sylvia K  Flomo County: Montserrado -->
<!-- Farmer: John brown test Test Test County: Bomi -->
<!-- Farmer: Event Flomo County: Bong -->
<!-- Farmer: Joseph Flomo County: Nimba -->
<!-- Farmer: Joe Flomo County: Nimba -->
<!-- Farmer: Paul W  Flomoyan County: Margibi -->
<!-- Farmer: Martin M  Fofana County: Bong -->
<!-- Farmer: Korsor Forkpah County: Bong -->
<!-- Farmer: N. Pelmie Freeman County: Nimba -->
<!-- Farmer: Ezekiel Garpue County: Sinoe -->
<!-- Farmer: Joe Gartei County: Nimba -->
<!-- Farmer: Peter D  Gbauoquiya County: Bong -->
<!-- Farmer: Janathan Gbelah County: Gbarpolu -->
<!-- Farmer: Christain G  Gibson County: Nimba -->
<!-- Farmer: John Jallah Gongoloe County: Margibi -->
<!-- Farmer: Glory Gonkanu County: Nimba -->
<!-- Farmer: Nathan S  Gono County: Nimba -->
<!-- Farmer: Daniel S  Harris County: Nimba -->
<!-- Farmer: Charles G  helb County: Bomi -->
<!-- Farmer: Wade Hoto County: Margibi -->
<!-- Farmer: Kolu P  Howard County: Margibi -->
<!-- Farmer: Sam Johnson County: Grand Bassa -->
<!-- Farmer: Enoch Johnson County: River Cess -->
<!-- Farmer: Fred Johnson County: Lofa -->
<!-- Farmer: Roye K  Johnson County: Nimba -->
<!-- Farmer: Musa Kamara County: Margibi -->
<!-- Farmer: Blamah Kamara County: Margibi -->
<!-- Farmer: Essah Kamara County: Lofa -->
<!-- Farmer: Musa V  Kamara County: Lofa -->
<!-- Farmer: Momo Kanneh County: Grand Cape Mount -->
<!-- Farmer: Nelson Kanneh County: Nimba -->
<!-- Farmer: Melvin Kantor County: Bong -->
<!-- Farmer: Amos S  Karlie County: Nimba -->
<!-- Farmer: Joshua Kerkula County: Bong -->
<!-- Farmer: Patricia T  Koiyan County: Montserrado -->
<!-- Farmer: John B  Kokolo County: Lofa -->
<!-- Farmer: Jonathan Kolleh County: Bong -->
<!-- Farmer: John D  Kollie County: Lofa -->
<!-- Farmer: John D  Kollie County: Lofa -->
<!-- Farmer: Amos W  Konah County: Nimba -->
<!-- Farmer: Alice T  Kongoh County: Bong -->
<!-- Farmer: Samuel K Korwah County: Lofa -->
<!-- Farmer: Daniel A  Kpaan County: Lofa -->
<!-- Farmer: Archie M  Kpahn County: Nimba -->
<!-- Farmer: Marthaline Kpantoe County: Grand Bassa -->
<!-- Farmer: Abibatu T  Kromah County: Bong -->
<!-- Farmer: Mamadee Kromah/Sawala County: Lofa -->
<!-- Farmer: Eva Kublee County: Sinoe -->
<!-- Farmer: Thomas Kumeh County: Maryland -->
<!-- Farmer: Samuel Larbelee County: Bong -->
<!-- Farmer: Vesselee A  Larkpawolo County: Lofa -->
<!-- Farmer: David Liibby County: Grand Cape Mount -->
<!-- Farmer: Arthur Loryon County: Lofa -->
<!-- Farmer: Kalifala F  M. County: Lofa -->
<!-- Farmer: Yeinyeh Mahn County: Bong -->
<!-- Farmer: David Mawolo County: Lofa -->
<!-- Farmer: Arthur Mendscole County: Bomi -->
<!-- Farmer: Quita Momo County: Bong -->
<!-- Farmer: Eric Moore County: Bomi -->
<!-- Farmer: Mildred M  Morris County: Montserrado -->
<!-- Farmer: James L  Mulbah County: Lofa -->
<!-- Farmer: Emmanuel Mulbah County: Bong -->
<!-- Farmer: Alex D  Mulbah County: Bong -->
<!-- Farmer: Jonathan Y  Nakarwour County: Nimba -->
<!-- Farmer: Albert Narwah County: Bong -->
<!-- Farmer: Histen NWehyee County: Margibi -->
<!-- Farmer: Tryphaina N  Nyan County: Bong -->
<!-- Farmer: Ngungk Panje County: Bong -->
<!-- Farmer: Moses Y  Paye County: Grand Bassa -->
<!-- Farmer: Alvin G  Paye County: Nimba -->
<!-- Farmer: Josephus P  Paye County: Nimba -->
<!-- Farmer: Mulbah Pewee County: Lofa -->
<!-- Farmer: George Cooper Quiqui County: Montserrado -->
<!-- Farmer: Elizabeth W  Reeves County: Margibi -->
<!-- Farmer: James Reeves County: Bong -->
<!-- Farmer: Leopld Sakama County: Lofa -->
<!-- Farmer: B. Augustine Sangalie, County: Lofa -->
<!-- Farmer: Winston Sarmie County: Bong -->
<!-- Farmer: Karnay Sarpoe County: Nimba -->
<!-- Farmer: Samuel K  Saye County: Nimba -->
<!-- Farmer: Rosetta Saytue County: Sinoe -->
<!-- Farmer: Deddeh Kesselie Sesay County: Lofa -->
<!-- Farmer: Emily F  Seward County: Margibi -->
<!-- Farmer: Mohamed M  Sheriff County: Lofa -->
<!-- Farmer: William D  Shobert. County: Maryland -->
<!-- Farmer: James K  Soko County: Lofa -->
<!-- Farmer: Arthur B  Solomon County: Margibi -->
<!-- Farmer: Lamine Sonil County: Grand Cape Mount -->
<!-- Farmer: Martin Soriba County: Lofa -->
<!-- Farmer: Akin E  Sumo County: Margibi -->
<!-- Farmer: David K  Sumo County: Lofa -->
<!-- Farmer: Garry Tain County: Nimba -->
<!-- Farmer: Abraham Tamba County: Bong -->
<!-- Farmer: Meme Tarpeh County: Sinoe -->
<!-- Farmer: Jerry T  Tarpeh County: Sinoe -->
<!-- Farmer: Josephus Taylor County: Bong -->
<!-- Farmer: Nyan Teah County: Nimba -->
<!-- Farmer: Lawrence Toe County: Sinoe -->
<!-- Farmer: Alicia T  Toe County: Sinoe -->
<!-- Farmer: Moses Togbah County: Bong -->
<!-- Farmer: Menibah Mulbah Togbah County: Bong -->
<!-- Farmer: Ephraim L  Tokpah County: Bong -->
<!-- Farmer: Jerome Tokpah County: Bong -->
<!-- Farmer: Phelimina Tolbert County: Margibi -->
<!-- Farmer: DicKson Tomah County: Nimba -->
<!-- Farmer: Kangoma M  Turay County: Lofa -->
<!-- Farmer: Eric Tuweh Jr. County: River Gee -->
<!-- Farmer: Hawa D  Varney County: Montserrado -->
<!-- Farmer: Gallah K  Varpilah County: Bong -->
<!-- Farmer: Robert G  Walkor County: Bong -->
<!-- Farmer: Bill S  Wayleh County: Nimba -->
<!-- Farmer: Pauline K  Whenyan County: Montserrado -->
<!-- Farmer: Kiabeh S  Williams County: Bong -->
<!-- Farmer: Patricia Wright County: Nimba -->
<!-- Farmer: Alphonso J  Wrotto County: Bomi -->
<!-- Farmer: Lawrence N  Yallah County: Bong -->
<!-- Farmer: Saybah yamah County: Lofa -->
<!-- Farmer: Moses Yarkpawolo County: Bong -->
<!-- Farmer: Anthony Youwah County: Bong -->
<!-- Farmer: Aaron Zayzay County: Lofa -->
<!-- Farmer: M. Kennewoe Zaza County: Lofa -->
<!-- Farmer: Leroy Cegbe County: Montserrado -->
<!-- Farmer: Philip Sele County: Margibi -->
<!-- Farmer: Jebbah Kallon County: Grand Cape Mount -->
<!-- Farmer: Jebbah  Kallon County: Grand Cape Mount -->
<!-- Farmer: John John John County: Bomi -->
<!-- Farmer: Miatta Johnson County: Bomi -->
<!-- Farmer: Thomas Dassin County: Grand Cape Mount -->
<!-- Farmer: Varney Fahnbulleh County: Grand Cape Mount -->
<!-- Farmer: Elizabeth Kolleh County: Margibi -->
<!-- Farmer: Junior Sackie County: Margibi -->
<!-- Farmer: Gayduoh Johnson County: Margibi -->
<!-- Farmer: John  B  Kollie County: Margibi -->
<!-- Farmer: Comfort  Bono County: Margibi -->
<!-- Farmer: Caroline Tom County: Bong -->
<!-- Farmer: Alexander B Youboty County: Bong -->
<!-- Farmer: Josephine Addy County: Bong -->
<!-- Farmer: Walter  T Elliott County: Bong -->
<!-- Farmer: Mie M Seton County: Bong -->
<!-- Farmer: Florence Freeman County: Bong -->
<!-- Farmer: Jerrie G Addy County: Bong -->
<!-- Farmer: Miatta Kolleh County: Bong -->
<!-- Farmer: Hamah T Mulbah County: Bong -->
<!-- Farmer: John Kollie County: Bong -->
<!-- Farmer: Sando K Rennie County: Bong -->
<!-- Farmer: Bandu Flomo County: Bong -->
<!-- Farmer: Hellena Kerkula County: Bong -->
<!-- Farmer: Emmanuel Bondo County: Montserrado -->
<!-- Farmer: Yoko Kollie County: Montserrado -->
<!-- Farmer: Oretha  Gonablah County: Montserrado -->
<!-- Farmer: Amos  J Kekulah County: Montserrado -->
<!-- Farmer: Oldman Kollie County: Montserrado -->
<!-- Farmer: Annie Tokpah County: Montserrado -->
<!-- Farmer: Kemah Bondo County: Montserrado -->
<!-- Farmer: Matta Bondo County: Montserrado -->
<!-- Farmer: Famata Fineboy County: Montserrado -->
<!-- Farmer: Yarkpazuo Dolo County: Montserrado -->
<!-- Farmer: Joe Cammue County: Lofa -->
<!-- Farmer: Isaiah Brown County: Montserrado -->
<!-- Farmer: Yarkpazyo Dolo County: Montserrado -->
<!-- Farmer: Bondo J Morris County: Montserrado -->
<!-- Farmer: Edwin Bombo County: Lofa -->
<!-- Farmer: Matta Bondo County: Montserrado -->
<!-- Farmer: Hawa Kormah County: Grand Cape Mount -->
<!-- Farmer: Emmanuel K Cooper County: Montserrado -->
<!-- Farmer: Prince S  Bundo County: Lofa -->
<!-- Farmer: Bondo Morris County: Montserrado -->
<!-- Farmer: Esther Quoi County: Montserrado -->
<!-- Farmer: Yassa Bondo County: Montserrado -->
<!-- Farmer: Martha Moses County: Montserrado -->
<!-- Farmer: Kama Fahn County: Montserrado -->
<!-- Farmer: Mameni Cooper County: Montserrado -->
<!-- Farmer: Amie Ballay County: Grand Cape Mount -->
<!-- Farmer: Amos Miaway County: Nimba -->
<!-- Farmer: Louise Karn County: Nimba -->
<!-- Farmer: Beatrice Mendin County: Nimba -->
<!-- Farmer: Betty Bella County: Nimba -->
<!-- Farmer: Nora  Dorleseh Luo County: Nimba -->
<!-- Farmer: Cyrus Nehbah County: Nimba -->
<!-- Farmer: Susanna  Massaquoi County: Nimba -->
<!-- Farmer: Mamie Wehyee County: Nimba -->
<!-- Farmer: Cecelia Flomo County: Nimba -->
<!-- Farmer: Stephen S  T Boie County: Lofa -->
<!-- DEBUG: County Stats: {"Nimba":171,"Montserrado":48,"Margibi":37,"Bong":93,"Maryland":6,"Bomi":17,"Grand Bassa":11,"Lofa":64,"Sinoe":17,"Grand Cape Mount":16,"Gbarpolu":6,"River Cess":4,"Grand Kru":4,"River Gee":6} -->
<!-- DEBUG: Final countyStats: {"Nimba":171,"Bong":93,"Lofa":64,"Montserrado":48,"Margibi":37,"Bomi":17,"Sinoe":17,"Grand Cape Mount":16,"Grand Bassa":11,"Maryland":6,"Gbarpolu":6,"River Gee":6,"River Cess":4,"Grand Kru":4} -->


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AFD - Agricultural Foundation Database | Liberia</title>
    
    <!-- Favicon -->
    <link rel="icon" type="image/png" sizes="32x32" href="https://agfoundationdb.org/afdlogo.png">
<link rel="icon" type="image/png" sizes="16x16" href="https://agfoundationdb.org/afdlogo.png">
<link rel="apple-touch-icon" sizes="180x180" href="https://agfoundationdb.org/afdlogo.png">
<link rel="shortcut icon" type="image/png" href="https://agfoundationdb.org/afdlogo.png">

    
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    
    <!-- AOS Animation -->
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
    
    <!-- Prism.js for code highlighting -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/themes/prism.min.css" rel="stylesheet" />
    <!-- Font Awesome 6 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <!-- Leaflet CSS -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
    
    <!-- Custom CSS Files -->
    <link rel="stylesheet" href="https://agfoundationdb.org/assets/css/styles.css">
    <link rel="stylesheet" href="https://agfoundationdb.org/assets/css/navigation.css">
    <link rel="stylesheet" href="https://agfoundationdb.org/assets/css/hero.css">
    <link rel="stylesheet" href="https://agfoundationdb.org/assets/css/components.css">
    <link rel="stylesheet" href="https://agfoundationdb.org/assets/css/slider.css">
    <link rel="stylesheet" href="https://agfoundationdb.org/assets/css/footer.css">
    <link rel="stylesheet" href="https://agfoundationdb.org/assets/css/responsive.css">
    <link rel="stylesheet" href="https://agfoundationdb.org/assets/css/farmerRegistration.css">
    
</head>
<body>
    <!-- Background Pattern -->
    <div class="bg-pattern"></div>
    
<!-- Top Header Bar - Hidden on Mobile -->
<div class="top-header">
    <div class="container">
        <div class="top-header-content">
            <div class="top-header-left">
                <div class="top-header-info">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                        <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.362 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.338 1.85.573 2.81.7A2 2 0 0 1 22 16.92z"></path>
                    </svg>
                    <span>+231 777 123 456</span>
                </div>
                <div class="top-header-info">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                        <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
                        <polyline points="22,6 12,13 2,6"></polyline>
                    </svg>
                    <span>info@afd.gov.lr</span>
                </div>
                <div class="top-header-info">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                        <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>
                    </svg>
                    <span>Mon-Fri, 8AM - 5PM</span>
                </div>
            </div>
            <div class="top-header-right">
                <div class="top-header-social">
                    <a href="#" class="social-icon" aria-label="Facebook">
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                            <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path>
                        </svg>
                    </a>
                    <a href="#" class="social-icon" aria-label="Twitter">
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                            <path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path>
                        </svg>
                    </a>
                    <a href="#" class="social-icon" aria-label="LinkedIn">
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                            <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path>
                            <rect x="2" y="9" width="4" height="12"></rect>
                            <circle cx="4" cy="4" r="2"></circle>
                        </svg>
                    </a>
                </div>
                <div class="top-header-language">
                    <select class="language-select">
                        <option value="en">English</option>
                        <option value="fr">Français</option>
                    </select>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
/* Top Header Bar Styles - Hidden on Mobile */
.top-header {
    background: #f8f8f8;
    border-bottom: 1px solid #eaeaea;
    padding: 0.5rem 0;
    font-size: 0.75rem;
}

body.dark-mode .top-header {
    background: #111111;
    border-bottom-color: #2a2a2a;
}

.top-header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.top-header-left {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.top-header-info {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #666;
    font-size: 0.7rem;
}

body.dark-mode .top-header-info {
    color: #a0a0a0;
}

.top-header-info svg {
    stroke: #0a5c3b;
}

.top-header-right {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.top-header-social {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: transparent;
    border-radius: 50%;
    transition: all 0.2s ease;
    color: #666;
}

.social-icon svg {
    stroke: #666;
}

body.dark-mode .social-icon svg {
    stroke: #a0a0a0;
}

.social-icon:hover {
    background: #0a5c3b;
    transform: translateY(-2px);
}

.social-icon:hover svg {
    stroke: white;
}

.language-select {
    background: transparent;
    border: 1px solid #e0e0e0;
    border-radius: 30px;
    padding: 0.25rem 1.5rem 0.25rem 0.75rem;
    font-size: 0.7rem;
    color: #666;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 10px;
}

body.dark-mode .language-select {
    border-color: #3a3a3a;
    color: #a0a0a0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23aaa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

.language-select:focus {
    outline: none;
    border-color: #0a5c3b;
}

/* ===== HIDE TOP HEADER ON MOBILE DEVICES ===== */
@media (max-width: 768px) {
    .top-header {
        display: none !important;
    }
}
</style>

    <!-- Navigation with Mobile Menu -->
    <nav class="navbar navbar-expand-lg">
        <div class="container">
            <a class="navbar-brand" href="https://agfoundationdb.org">
<img src="https://agfoundationdb.org/afdlogo.png" alt="AFD Logo" style="width:32px; height:32px; object-fit:contain;">                <span style="display:none;">AFD</span>
                AFD <span>Liberia</span>
            </a>
            
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarMain" aria-expanded="false">
                <span class="navbar-toggler-icon">
                    <span></span>
                    <span></span>
                    <span></span>
                </span>
            </button>
            
            <div class="collapse navbar-collapse" id="navbarMain">
                <ul class="navbar-nav ms-auto">
                    <!-- Registry Mega Menu -->
                    <li class="nav-item dropdown-mega">
                        <a class="nav-link" href="#" onclick="toggleMegaMenu(this); return false;">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                                <rect x="2" y="7" width="20" height="14" rx="2" ry="2"></rect>
                                <path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"></path>
                            </svg>
                            Registry
                            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                                <polyline points="6 9 12 15 18 9"></polyline>
                            </svg>
                        </a>
                        <div class="mega-menu">
                            <div class="container">
                                <div class="mega-menu-grid">
                                    <div class="mega-menu-section">
                                        <h6 class="mega-menu-title">
                                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                                                <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
                                                <circle cx="12" cy="7" r="4"></circle>
                                            </svg>
                                            Farmers
                                        </h6>
                                        <ul class="mega-menu-links">
                                            <li><a href="https://agfoundationdb.org/farmers/register"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg> Register Farmer</a></li>
                                            <li><a href="https://agfoundationdb.org/farmers/search"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg> Search Farmers</a></li>
                                            <li><a href="https://agfoundationdb.org/farmers/verification"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor"><polyline points="20 6 9 17 4 12"></polyline></svg> Verification Status</a></li>
                                            <li><a href="https://agfoundationdb.org/farmers/statistics"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline></svg> Statistics</a></li>
                                        </ul>
                                    </div> 
                                    
                                    <div class="mega-menu-section">
                                        <h6 class="mega-menu-title">
                                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                                                <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
                                                <circle cx="9" cy="7" r="4"></circle>
                                                <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
                                                <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
                                            </svg>
                                            Cooperatives
                                        </h6>
                                        <ul class="mega-menu-links">
                                            <li><a href="https://agfoundationdb.org/groups/register"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg> Register Cooperative</a></li>                                           
                                             <li><a href="https://agfoundationdb.org/groups/directory"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg> Search Groups</a></li>
                                            <li><a href="#"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg> Join Cooperative / group</a></li>
                                        </ul>
                                    </div>
                                    
                                    <div class="mega-menu-section">
                                        <h6 class="mega-menu-title">
                                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                                                <rect x="2" y="7" width="20" height="14" rx="2" ry="2"></rect>
                                                <path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"></path>
                                            </svg>
                                            Agribusinesses
                                        </h6>
                                        <ul class="mega-menu-links">
                                            <li><a href="https://agfoundationdb.org/business/register"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg> Register Business</a></li>                                            
                                            <li><a href="https://agfoundationdb.org/business/directory"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg> Business Directory</a></li>
<li>
    <a href="https://agfoundationdb.org/verified-business">
        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
        </svg>
        Verified Businesses
    </a>
</li>                                        </ul>
                                    </div>
                                  <div class="mega-menu-section">
    <div class="mega-menu-featured">
        <h6>
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline>
            </svg> 
            Quick Stats
        </h6>
        <p>
            <strong>0</strong> Farmers<br>
            <strong>0</strong> Cooperatives<br>
            <strong>0</strong> Businesses<br>
            <strong>0</strong> Verified
        </p>
        <a href="https://agfoundationdb.org/farmers/register" class="btn-featured">
            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                <line x1="5" y1="12" x2="19" y2="12"></line>
                <polyline points="12 5 19 12 12 19"></polyline>
            </svg>
            Start Registration
        </a>
    </div>
</div>
                                </div>
                            </div>
                        </div>
                    </li>

                    <!-- Spatial Mega Menu -->
                    <li class="nav-item dropdown-mega">
                        <a class="nav-link" href="#" onclick="toggleMegaMenu(this); return false;">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                                <polygon points="1 6 12 2 23 6 12 10 1 6"></polygon>
                                <polyline points="1 6 12 10 23 6"></polyline>
                                <polyline points="1 12 12 16 23 12"></polyline>
                                <polyline points="1 18 12 22 23 18"></polyline>
                            </svg>
                            Spatial
                            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                                <polyline points="6 9 12 15 18 9"></polyline>
                            </svg>
                        </a>
                        <div class="mega-menu">
                            <div class="container">
                                <div class="mega-menu-grid">
                                    <div class="mega-menu-section">
                                        <h6 class="mega-menu-title">
                                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                                                <polygon points="1 6 12 2 23 6 12 10 1 6"></polygon>
                                            </svg>
                                            Farm Mapping
                                        </h6>
                                        <ul class="mega-menu-links">
                                            <li><a href="#" onclick="setActiveTab('map'); return false;"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor"><polygon points="3 6 12 2 21 6 12 10 3 6"></polygon></svg> Plot Boundaries</a></li>
                                            <li><a href="#"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path><circle cx="12" cy="10" r="3"></circle></svg> Farm Centroids</a></li>
                                            <li><a href="#"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor"><rect x="2" y="2" width="20" height="20" rx="2.18" ry="2.18"></rect></svg> Area Calculation</a></li>
                                        </ul>
                                    </div>
                                    
                                    <div class="mega-menu-section">
                                        <h6 class="mega-menu-title">
                                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                                                <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>
                                            </svg>
                                            Traceability
                                        </h6>
                                        <ul class="mega-menu-links">
                                            <li><a href="#"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><path d="M9 9h6M9 15h6"></path></svg> Generate QR Code</a></li>
                                            <li><a href="#"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg> Product Trace</a></li>
                                            <li><a href="#"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor"><polyline points="20 6 9 17 4 12"></polyline></svg> EUDR Compliance</a></li>
                                        </ul>
                                    </div>
                                    
                                    <div class="mega-menu-section">
                                        <h6 class="mega-menu-title">
                                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                                                <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline>
                                            </svg>
                                            Analytics
                                        </h6>
                                        <ul class="mega-menu-links">
                                            <li><a href="#" onclick="setActiveTab('dashboards'); return false;"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor"><rect x="2" y="2" width="20" height="20" rx="2.18" ry="2.18"></rect><path d="M8 16v-4M12 16v-8M16 16v-2"></path></svg> Heat Maps</a></li>
                                            <li><a href="#" onclick="setActiveTab('dashboards'); return false;"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M21 16v2a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-2M7 10l5 5 5-5"></path><polyline points="12 15 12 3"></polyline></svg> Land Use Trends</a></li>
                                            <li><a href="#"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor"><ellipse cx="12" cy="5" rx="9" ry="3"></ellipse><path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"></path></svg> Export Data</a></li>
                                        </ul>
                                    </div>
                                    
                                    <div class="mega-menu-section">
                                        <div class="mega-menu-featured">
                                            <h6><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="2" x2="12" y2="12"></line><line x1="12" y1="12" x2="16" y2="16"></line></svg> Coverage</h6>
                                            <p>
                                                <strong>15</strong> Counties<br>
                                                <strong>90+</strong> Districts<br>
                                                <strong>8,432</strong> Plots Mapped<br>
                                                <strong>125K</strong> Hectares
                                            </p>
                                            <a href="#" class="btn-featured" onclick="setActiveTab('map'); return false;">
                                                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
                                                View Interactive Map
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                    
                    <!-- Market Mega Menu -->
                    <li class="nav-item dropdown-mega">
                        <a class="nav-link" href="https://agfoundationdb.org/market" onclick="toggleMegaMenu(this); return false;">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                                <circle cx="9" cy="21" r="1"></circle>
                                <circle cx="20" cy="21" r="1"></circle>
                                <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
                            </svg>
                            Market
                            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                                <polyline points="6 9 12 15 18 9"></polyline>
                            </svg>
                        </a>
                        <div class="mega-menu">
                            <div class="container">
                                <div class="mega-menu-grid">
                                    <div class="mega-menu-section">
                                        <h6 class="mega-menu-title">
                                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                                                <path d="M20 12H4M12 4v16"></path>
                                                <rect x="2" y="2" width="20" height="20" rx="2"></rect>
                                            </svg>
                                            Trade
                                        </h6>
                                        <ul class="mega-menu-links">
                                            <li><a href="https://agfoundationdb.org/market?type=BUY"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M20 12H4M12 4v16"></path></svg> Buy Requests</a></li>
                                            <li><a href="https://agfoundationdb.org/market?type=SELL"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor"><rect x="2" y="2" width="20" height="20" rx="2"></rect><path d="M8 12h8"></path></svg> Sell Offers</a></li>
                                            <li><a href="#"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg> My Trades</a></li>
                                        </ul>
                                    </div>
                                    
                                    <div class="mega-menu-section">
                                        <h6 class="mega-menu-title">
                                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                                                <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline>
                                            </svg>
                                            Market Data
                                        </h6>
                                        <ul class="mega-menu-links">
                                            <li><a href="https://agfoundationdb.org/market/data"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M21 16v2a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-2M7 10l5 5 5-5"></path><polyline points="12 15 12 3"></polyline></svg> Price Trends</a></li>
                                            <li><a href="#"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg> Seasonal Patterns</a></li>
                                            <li><a href="#"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg> Market News</a></li>
                                        </ul>
                                    </div>
                                    
                                    <div class="mega-menu-section">
                                        <h6 class="mega-menu-title">
                                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                                                <rect x="1" y="3" width="15" height="13" rx="2"></rect>
                                                <polygon points="16 8 20 8 23 11 23 16 16 16 16 8"></polygon>
                                                <line x1="10" y1="12" x2="18" y2="12"></line>
                                            </svg>
                                            Logistics
                                        </h6>
                                        <ul class="mega-menu-links">
                                            <li><a href="#"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor"><rect x="2" y="7" width="20" height="14" rx="2" ry="2"></rect><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"></path></svg> Storage Facilities</a></li>
                                            <li><a href="#"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor"><rect x="1" y="3" width="15" height="13" rx="2"></rect><polygon points="16 8 20 8 23 11 23 16 16 16 16 8"></polygon></svg> Transporters</a></li>
                                            <li><a href="#"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M3 12h18M3 6h18M3 18h18"></path></svg> Shipping Routes</a></li>
                                        </ul>
                                    </div>
                                    
                                    <div class="mega-menu-section">
                                        <div class="mega-menu-featured">
                                            <h6><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M12 2v4M12 22v-4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M22 12h-4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83"></path><circle cx="12" cy="12" r="3"></circle></svg> Hot Offers</h6>
                                            <p>
                                                <strong>Premium Rice:</strong> $850/MT<br>
                                                <strong>Cocoa:</strong> $2,400/MT<br>
                                                <strong>Palm Oil:</strong> $1.10/L<br>
                                                <strong>Cassava:</strong> $145/MT
                                            </p>
                                            <a href="https://agfoundationdb.org/market" class="btn-featured">
                                                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
                                                View All Offers
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                    
                    <!-- Extension Mega Menu -->
                    <li class="nav-item dropdown-mega">
                        <a class="nav-link" href="#" onclick="toggleMegaMenu(this); return false;">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                                <path d="M12 2v4M12 22v-4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M22 12h-4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83"></path>
                                <circle cx="12" cy="12" r="3"></circle>
                            </svg>
                            Extension
                            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                                <polyline points="6 9 12 15 18 9"></polyline>
                            </svg>
                        </a>
                        <div class="mega-menu">
                            <div class="container">
                                <div class="mega-menu-grid">
                                    <div class="mega-menu-section">
                                        <h6 class="mega-menu-title">
                                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                                                <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"></path>
                                                <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"></path>
                                            </svg>
                                            Resources
                                        </h6>
                                        <ul class="mega-menu-links">
                                            <li><a href="#" onclick="setActiveTab('extension'); return false;"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M12 2v4M12 22v-4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M22 12h-4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83"></path><circle cx="12" cy="12" r="3"></circle></svg> Good Agricultural Practices</a></li>
                                            <li><a href="#" onclick="setActiveTab('extension'); return false;"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline></svg> Commodity Guides</a></li>
                                            <li><a href="#" onclick="setActiveTab('extension'); return false;"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M21 16v2a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-2M7 10l5 5 5-5"></path><polyline points="12 15 12 3"></polyline></svg> Climate Advisory</a></li>
                                        </ul>
                                    </div>
                                    
                                    <div class="mega-menu-section">
                                        <h6 class="mega-menu-title">
                                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                                                <rect x="2" y="2" width="20" height="20" rx="2.18" ry="2.18"></rect>
                                                <line x1="8" y1="12" x2="16" y2="12"></line>
                                                <line x1="12" y1="8" x2="12" y2="16"></line>
                                            </svg>
                                            Training
                                        </h6>
                                        <ul class="mega-menu-links">
                                            <li><a href="#"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg> Upcoming Workshops</a></li>
                                            <li><a href="#"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor"><circle cx="12" cy="12" r="10"></circle><polygon points="10 8 16 12 10 16 10 8"></polygon></svg> Video Tutorials</a></li>
                                            <li><a href="#"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline></svg> Downloadable Guides</a></li>
                                        </ul>
                                    </div>
                                    
                                    <div class="mega-menu-section">
                                        <h6 class="mega-menu-title">
                                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                                                <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.362 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.338 1.85.573 2.81.7A2 2 0 0 1 22 16.92z"></path>
                                            </svg>
                                            Support
                                        </h6>
                                        <ul class="mega-menu-links">
                                            <li><a href="#"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.362 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.338 1.85.573 2.81.7A2 2 0 0 1 22 16.92z"></path></svg> Extension Hotline</a></li>
                                            <li><a href="#"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg> Live Chat</a></li>
                                            <li><a href="#"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg> Email Support</a></li>
                                        </ul>
                                    </div>
                                    
                                    <div class="mega-menu-section">
                                        <div class="mega-menu-featured">
                                            <h6><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path></svg> Need Assistance?</h6>
                                            <p>
                                                <strong>Hotline:</strong> +231 XXX-XXX-XXX<br>
                                                <strong>Email:</strong> extension@afd.gov.lr<br>
                                                <strong>Hours:</strong> Mon-Fri, 8AM-5PM
                                            </p>
                                            <a href="#" class="btn-featured" onclick="showToast('Extension Support', 'An extension officer will contact you shortly.')">
                                                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path></svg>
                                                Contact Officer
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                    
                    <!-- Developers Tab -->
                    <li class="nav-item dropdown-mega">
                        <a class="nav-link" href="#" onclick="toggleMegaMenu(this); return false;">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                                <polygon points="12 2 2 7 12 12 22 7 12 2"></polygon>
                                <polyline points="2 17 12 22 22 17"></polyline>
                                <polyline points="2 12 12 17 22 12"></polyline>
                            </svg>
                            Developers
                            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                                <polyline points="6 9 12 15 18 9"></polyline>
                            </svg>
                        </a>
                        <div class="mega-menu">
                            <div class="container">
                                <div class="mega-menu-grid">
                                    <div class="mega-menu-section">
                                        <h6 class="mega-menu-title">
                                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                                                <polygon points="12 2 2 7 12 12 22 7 12 2"></polygon>
                                            </svg>
                                            API Reference
                                        </h6>
                                        <ul class="mega-menu-links">
                                            <li><a href="#" onclick="setActiveTab('developers'); showApiSection('overview'); return false;"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor"><circle cx="12" cy="12" r="10"></circle><line x1="2" y1="12" x2="22" y2="12"></line><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path></svg> API Overview</a></li>
                                            <li><a href="#" onclick="setActiveTab('developers'); showApiSection('authentication'); return false;"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg> Authentication</a></li>
                                            <li><a href="#" onclick="setActiveTab('developers'); showApiSection('endpoints'); return false;"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor"><line x1="4" y1="9" x2="20" y2="9"></line><line x1="4" y1="15" x2="20" y2="15"></line><line x1="10" y1="3" x2="8" y2="21"></line><line x1="16" y1="3" x2="14" y2="21"></line></svg> Endpoints</a></li>
                                            <li><a href="#" onclick="setActiveTab('developers'); showApiSection('versions'); return false;"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor"><polygon points="12 2 2 7 12 12 22 7 12 2"></polygon><polyline points="2 17 12 22 22 17"></polyline><polyline points="2 12 12 17 22 12"></polyline></svg> Versions</a></li>
                                        </ul>
                                    </div>
                                    
                                    <div class="mega-menu-section">
                                        <h6 class="mega-menu-title">
                                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                                                <rect x="2" y="7" width="20" height="14" rx="2" ry="2"></rect>
                                                <path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"></path>
                                            </svg>
                                            Registry APIs
                                        </h6>
                                        <ul class="mega-menu-links">
                                            <li><a href="#" onclick="setActiveTab('developers'); showApiSection('farmers-api'); return false;"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg> Farmers API</a></li>
                                            <li><a href="#" onclick="setActiveTab('developers'); showApiSection('groups-api'); return false;"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg> Groups API</a></li>
                                            <li><a href="#" onclick="setActiveTab('developers'); showApiSection('business-api'); return false;"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor"><rect x="2" y="7" width="20" height="14" rx="2" ry="2"></rect><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"></path></svg> Business API</a></li>
                                        </ul>
                                    </div>
                                    
                                    <div class="mega-menu-section">
                                        <h6 class="mega-menu-title">
                                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                                                <polygon points="1 6 12 2 23 6 12 10 1 6"></polygon>
                                            </svg>
                                            Spatial APIs
                                        </h6>
                                        <ul class="mega-menu-links">
                                            <li><a href="#" onclick="setActiveTab('developers'); showApiSection('mapping-api'); return false;"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor"><polygon points="3 6 12 2 21 6 12 10 3 6"></polygon></svg> Mapping API</a></li>
                                            <li><a href="#" onclick="setActiveTab('developers'); showApiSection('traceability-api'); return false;"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path></svg> Traceability API</a></li>
                                            <li><a href="#" onclick="setActiveTab('developers'); showApiSection('analytics-api'); return false;"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline></svg> Analytics API</a></li>
                                        </ul>
                                    </div>
                                    
                                    <div class="mega-menu-section">
                                        <div class="mega-menu-featured">
                                            <h6><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M21 16v2a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-2M7 10l5 5 5-5"></path><polyline points="12 15 12 3"></polyline></svg> Get Started</h6>
                                            <p>Complete API documentation with examples, SDKs, and interactive testing environment.</p>
                                            <a href="#" class="btn-featured">
                                                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor"><polygon points="12 2 2 7 12 12 22 7 12 2"></polygon></svg>
                                                View Docs
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                    
                    <!-- Auth Buttons -->
                    <li class="nav-item">
                        <div class="auth-buttons">
                            <a href="https://agfoundationdb.org/auth/login" class="btn-auth btn-login">
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
        <path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"></path>
        <polyline points="10 17 15 12 10 7"></polyline>
        <line x1="15" y1="12" x2="3" y2="12"></line>
    </svg>
    <span>Login</span>
</a>
<a href="https://agfoundationdb.org/auth/register" class="btn-auth btn-register">
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
        <path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
        <circle cx="8.5" cy="7" r="4"></circle>
        <line x1="20" y1="8" x2="20" y2="14"></line>
        <line x1="17" y1="11" x2="23" y2="11"></line>
    </svg>
    <span>Register</span>
</a>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    
    <!-- Tabs Navigation with Search - Outline Icons & Reduced Spacing -->
<div class="container">
    <div class="d-flex align-items-center gap-3">
        <div class="tabs-nav">
            <button class="tab-btn active" onclick="window.location.href='https://agfoundationdb.org'">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                    <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2h-5v-8H9v8H5a2 2 0 0 1-2-2z"></path>
                </svg>
                Home
            </button>            
                        
            <button class="tab-btn" onclick="window.location.href='https://agfoundationdb.org/business/directory'">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                    <rect x="2" y="7" width="20" height="14" rx="2" ry="2"></rect>
                    <path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"></path>
                    <line x1="12" y1="11" x2="12" y2="13"></line>
                    <line x1="9" y1="11" x2="9" y2="13"></line>
                    <line x1="15" y1="11" x2="15" y2="13"></line>
                </svg>
                Directory
            </button>           
            <button class="tab-btn" onclick="window.location.href='https://agfoundationdb.org/market'">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                    <circle cx="9" cy="21" r="1"></circle>
                    <circle cx="20" cy="21" r="1"></circle>
                    <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
                </svg>
                Market
            </button>
            <button class="tab-btn" onclick="window.location.href='https://agfoundationdb.org/analytics'">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                    <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline>
                </svg>
                Analytics
            </button>            
            <button class="tab-btn" onclick="window.location.href='https://agfoundationdb.org/map'">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                    <polygon points="1 6 12 2 23 6 12 10 1 6"></polygon>
                    <polyline points="1 6 12 10 23 6"></polyline>
                    <polyline points="1 12 12 16 23 12"></polyline>
                    <polyline points="1 18 12 22 23 18"></polyline>
                </svg>
                Map
            </button>
        </div>
        
        <!-- Search Bar -->
        <div class="search-wrapper-wide">
            <div class="input-group">
                <span class="input-group-text">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                        <circle cx="11" cy="11" r="8"></circle>
                        <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
                    </svg>
                </span>
                <input type="text" 
                    class="form-control" 
                    placeholder="Search farmers, groups, businesses..." 
                    aria-label="Search"
                    id="globalSearch"
                    autocomplete="off">
                <button class="btn-search" type="button" id="searchButton">
                    <span>Search</span>
                </button>
            </div>
        </div>
    </div>
</div>
    <!-- ========== DARK MODE INITIALIZATION SCRIPT ========== -->
    <script>
    (function() {
        function getThemePreference() {
            const savedTheme = localStorage.getItem('theme');
            if (savedTheme === 'dark' || savedTheme === 'light') {
                return savedTheme;
            }
            return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
        }
        
        function applyTheme(theme) {
            if (theme === 'dark') {
                document.body.classList.add('dark-mode');
            } else {
                document.body.classList.remove('dark-mode');
            }
            localStorage.setItem('theme', theme);
        }
        
        const initialTheme = getThemePreference();
        applyTheme(initialTheme);
        
        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
            if (!localStorage.getItem('theme')) {
                applyTheme(e.matches ? 'dark' : 'light');
            }
        });
        
        window.toggleDarkMode = function() {
            const isDark = document.body.classList.contains('dark-mode');
            applyTheme(isDark ? 'light' : 'dark');
        };
    })();
    </script>
    <!-- ========== END DARK MODE INITIALIZATION ========== -->

    <script>
    function setActiveTab(tabId) {
        console.log('Active tab:', tabId);
    }
    
    function toggleMegaMenu(element) {
        if (window.innerWidth <= 991) {
            event.preventDefault();
            const parent = element.closest('.dropdown-mega');
            if (parent) parent.classList.toggle('show-mega');
        }
    }
    
    // SEARCH FUNCTION - WORKING
    document.addEventListener('DOMContentLoaded', function() {
        var searchInput = document.getElementById('globalSearch');
        var searchButton = document.getElementById('searchButton');
        
        function performSearch() {
            var searchTerm = searchInput.value.trim();
            if (searchTerm === '') {
                alert('Please enter a search term');
                return;
            }
            window.location.href = 'https://agfoundationdb.org/search?q=' + encodeURIComponent(searchTerm);
        }
        
        if (searchButton) {
            searchButton.addEventListener('click', performSearch);
        }
        
        if (searchInput) {
            searchInput.addEventListener('keypress', function(event) {
                if (event.key === 'Enter') {
                    event.preventDefault();
                    performSearch();
                }
            });
        }
    });
    
    function showApiSection(section) {
        console.log('API section:', section);
    }
    
    function showToast(title, message) {
        console.log('Toast:', title, message);
    }
    </script>
    
  <style>
/* Custom styles for wider search and light gradient buttons */
.search-wrapper-wide {
    flex: 1 !important;
    min-width: 200px;
    height: 48px !important; /* Match tabs-nav height */
}

.search-wrapper-wide .input-group {
    height: 100% !important;
    width: 100%;
}

.search-wrapper-wide .input-group-text {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-right: none;
    border-radius: 50px 0 0 50px;
    padding: 0 1rem;
    height: 100% !important;
    transition: background 0.3s ease, border-color 0.3s ease;
    display: flex;
    align-items: center;
}

.search-wrapper-wide .input-group-text svg {
    stroke: var(--gray-500);
    width: 16px;
    height: 16px;
}

.search-wrapper-wide .form-control {
    border: 1px solid var(--gray-200);
    border-left: none;
    border-right: none;
    font-size: 0.85rem;
    height: 100% !important;
    padding: 0 0.75rem;
    background: var(--white);
    color: var(--gray-700);
    transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.search-wrapper-wide .form-control:focus {
    border-color: var(--primary);
    box-shadow: none;
    outline: none;
}

.search-wrapper-wide .btn-search {
    background: linear-gradient(135deg, #e8f2ec 0%, #faf3e8 100%);
    border: 1px solid var(--gray-200);
    border-left: none;
    border-radius: 0 50px 50px 0;
    padding: 0 1.5rem;
    font-size: 0.85rem;
    height: 100% !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    color: var(--primary);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

body.dark-mode .search-wrapper-wide .btn-search {
    background: linear-gradient(135deg, #1a2a1a 0%, #2a241a 100%);
    color: #6fbf8a;
    border-color: #3a3a3a;
}

.search-wrapper-wide .btn-search:hover {
    background: linear-gradient(135deg, #d9e8df 0%, #f5e8db 100%);
    transform: translateY(-1px);
}

body.dark-mode .search-wrapper-wide .btn-search:hover {
    background: linear-gradient(135deg, #2a3a2a 0%, #3a342a 100%);
}

/* Auth buttons with light gradient */
.btn-register {
    background: linear-gradient(135deg, #e8f2ec 0%, #faf3e8 100%) !important;
    color: var(--primary) !important;
    border: 1px solid var(--gray-200) !important;
}

body.dark-mode .btn-register {
    background: linear-gradient(135deg, #1a2a1a 0%, #2a241a 100%) !important;
    color: #6fbf8a !important;
    border-color: #3a3a3a !important;
}

.btn-register:hover {
    background: linear-gradient(135deg, #d9e8df 0%, #f5e8db 100%) !important;
    transform: translateY(-1px);
}

body.dark-mode .btn-register:hover {
    background: linear-gradient(135deg, #2a3a2a 0%, #3a342a 100%) !important;
}

.btn-login {
    background: transparent !important;
    border: 1px solid var(--gray-300) !important;
}

.btn-login:hover {
    background: var(--gray-100) !important;
    border-color: var(--primary) !important;
    color: var(--primary) !important;
}

/* Tabs Navigation */
.tabs-nav {
    display: flex;
    gap: 0.25rem !important;
    padding: 0.25rem;
    background: var(--white);
    border-radius: 60px;
    border: 1px solid var(--gray-200);
    width: auto !important;
    flex-shrink: 0 !important;
    height: 48px !important; /* Fixed height */
}

.tab-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
    padding: 0 0.9rem !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    border-radius: 50px !important;
    transition: all 0.2s ease !important;
    height: 100% !important; /* Full height of parent */
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--gray-600);
    white-space: nowrap !important;
}

.tab-btn svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    stroke-width: 1.5;
    flex-shrink: 0;
}

.tab-btn.active {
    background: var(--primary) !important;
    color: white !important;
}

.tab-btn:hover:not(.active) {
    background: var(--gray-100) !important;
    color: var(--primary) !important;
}

/* Flex container */
.d-flex.align-items-center.gap-3 {
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
    width: 100% !important;
}

/* Responsive adjustments */
@media (max-width: 1200px) {
    .search-wrapper-wide {
        min-width: 280px;
    }
    
    .tab-btn {
        padding: 0 0.8rem !important;
        font-size: 0.8rem !important;
    }
    
    .tab-btn svg {
        width: 13px;
        height: 13px;
    }
}

@media (max-width: 992px) {
    .tabs-nav {
        height: 44px !important;
    }
    
    .search-wrapper-wide {
        height: 44px !important;
    }
    
    .tab-btn {
        padding: 0 0.75rem !important;
        font-size: 0.78rem !important;
    }
    
    .search-wrapper-wide .input-group-text {
        padding: 0 0.8rem;
    }
    
    .search-wrapper-wide .input-group-text svg {
        width: 14px;
        height: 14px;
    }
    
    .search-wrapper-wide .form-control {
        font-size: 0.8rem;
        padding: 0 0.6rem;
    }
    
    .search-wrapper-wide .btn-search {
        padding: 0 1.2rem;
        font-size: 0.8rem;
    }
}

@media (max-width: 768px) {
    .d-flex.align-items-center.gap-3 {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.75rem !important;
    }
    
    .tabs-nav {
        width: 100% !important;
        height: 44px !important;
        overflow-x: auto !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
        -webkit-overflow-scrolling: touch;
    }
    
    .tabs-nav::-webkit-scrollbar {
        display: none !important;
    }
    
    .tab-btn {
        flex-shrink: 0 !important;
        padding: 0 0.8rem !important;
    }
    
    .search-wrapper-wide {
        width: 100% !important;
        flex: none !important;
        height: 44px !important;
        min-width: 100%;
    }
}

@media (max-width: 480px) {
    .tabs-nav {
        height: 40px !important;
    }
    
    .tab-btn {
        padding: 0 0.6rem !important;
        font-size: 0.7rem !important;
    }
    
    .tab-btn svg {
        width: 11px;
        height: 11px;
    }
    
    .search-wrapper-wide {
        height: 40px !important;
    }
    
    .search-wrapper-wide .input-group-text {
        padding: 0 0.7rem;
    }
    
    .search-wrapper-wide .input-group-text svg {
        width: 12px;
        height: 12px;
    }
    
    .search-wrapper-wide .form-control {
        font-size: 0.7rem;
        padding: 0 0.5rem;
    }
    
    .search-wrapper-wide .btn-search {
        padding: 0 1rem;
        font-size: 0.7rem;
    }
}

/* Hide scrollbar on tabs navigation for mobile */
@media (max-width: 991px) {
    .tabs-nav {
        overflow-x: auto !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
        flex-wrap: nowrap !important;
        white-space: nowrap !important;
        -webkit-overflow-scrolling: touch;
        margin-bottom: 0 !important;
    }
    
    .tabs-nav::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }
    
    /* Keep dropdown menus functional */
    .dropdown-mega .mega-menu {
        display: none;
    }
    
    .dropdown-mega.show-mega .mega-menu {
        display: block;
    }
}

/* Dark mode adjustments */
body.dark-mode .tabs-nav {
    background: #2a2a2a;
    border-color: #3a3a3a;
}

body.dark-mode .tab-btn {
    color: #c0c0c0;
}

body.dark-mode .tab-btn:hover:not(.active) {
    background: #3a3a3a !important;
}

body.dark-mode .search-wrapper-wide .input-group-text {
    background: #2a2a2a;
    border-color: #3a3a3a;
}

body.dark-mode .search-wrapper-wide .form-control {
    background: #2a2a2a;
    border-color: #3a3a3a;
    color: #ffffff;
}

body.dark-mode .search-wrapper-wide .input-group-text svg {
    stroke: #a0a0a0;
}
</style>
</body>
</html>
<!-- Chart.js for advanced charts -->
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>

<style>
/* Page Background */
.statistics-section {
    padding: 2rem 0;
    background: url('https://agfoundationdb.org/background.png') center/cover fixed;
    position: relative;
    min-height: calc(100vh - 70px);
}

.statistics-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(232, 242, 236, 0.92), rgba(250, 243, 232, 0.92));
    z-index: 1;
}

body.dark-mode .statistics-section::before {
    background: linear-gradient(135deg, rgba(30, 40, 30, 0.92), rgba(40, 35, 25, 0.92));
}

.statistics-section > * {
    position: relative;
    z-index: 2;
}

/* Container */
.statistics-container {
    max-width: 1400px;
    width: 95%;
    margin: 0 auto;
    padding: 0 1.5rem;
}

@media (max-width: 768px) {
    .statistics-container {
        width: 100%;
        padding: 0 1rem;
    }
}

/* Header */
.statistics-header {
    text-align: center;
    margin-bottom: 2rem;
}

.statistics-header h1 {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--gray-800);
    margin-bottom: 0.5rem;
}

.statistics-header p {
    font-size: 0.85rem;
    color: var(--gray-600);
}

@media (max-width: 480px) {
    .statistics-header h1 {
        font-size: 1.35rem;
    }
}

/* Stats Grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

@media (max-width: 900px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.875rem;
    }
}

.stat-card {
    background: var(--white);
    border-radius: 16px;
    padding: 1.25rem 1rem;
    text-align: center;
    border: 1px solid var(--gray-200);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary), #b88b4a);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.stat-card:hover::before {
    transform: scaleX(1);
}

.stat-card i {
    font-size: 1.75rem;
    margin-bottom: 0.5rem;
}

.stat-number {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--primary);
    display: block;
    line-height: 1.2;
}

.stat-label {
    font-size: 0.7rem;
    color: var(--gray-600);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

@media (max-width: 480px) {
    .stat-card {
        padding: 0.875rem 0.5rem;
    }
    .stat-number {
        font-size: 1.35rem;
    }
    .stat-card i {
        font-size: 1.35rem;
    }
}

/* Filter Bar */
.filter-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    padding: 0.75rem 1rem;
    background: var(--white);
    border-radius: 14px;
    border: 1px solid var(--gray-200);
}

@media (max-width: 768px) {
    .filter-bar {
        flex-direction: column;
        align-items: stretch;
    }
}

.filter-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.filter-group label {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--gray-600);
    white-space: nowrap;
}

.filter-group select {
    padding: 0.45rem 0.7rem;
    border-radius: 10px;
    font-size: 0.7rem;
    border: 1px solid var(--gray-300);
    background: var(--white);
}

.btn-reset {
    padding: 0.45rem 1rem;
    border-radius: 10px;
    font-size: 0.7rem;
    background: transparent;
    border: 1px solid var(--gray-300);
    color: var(--gray-600);
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.btn-reset:hover {
    border-color: var(--primary);
    color: var(--primary);
}

@media (max-width: 768px) {
    .filter-group {
        width: 100%;
        justify-content: space-between;
    }
    .btn-reset {
        width: 100%;
        justify-content: center;
    }
}

/* Chart Grid */
.chart-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

@media (max-width: 900px) {
    .chart-grid {
        grid-template-columns: 1fr;
    }
}

.chart-card {
    background: var(--white);
    border-radius: 16px;
    padding: 1.25rem;
    border: 1px solid var(--gray-200);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.chart-title {
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--gray-200);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.chart-title i {
    color: var(--primary);
}

.chart-type-select {
    padding: 0.3rem 0.6rem;
    border-radius: 8px;
    font-size: 0.65rem;
    border: 1px solid var(--gray-300);
    background: var(--white);
    cursor: pointer;
}

.chart-canvas {
    max-height: 300px;
    width: 100%;
}

/* County List */
.county-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-top: 1rem;
    max-height: 320px;
    overflow-y: auto;
}

.county-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.county-name {
    width: 110px;
    font-size: 0.75rem;
    font-weight: 500;
}

.county-bar {
    flex: 1;
    background: var(--gray-200);
    border-radius: 8px;
    height: 26px;
    overflow: hidden;
}

.county-fill {
    background: linear-gradient(90deg, var(--primary), #b88b4a);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 0.5rem;
    color: white;
    font-size: 0.65rem;
}

/* KPI Row */
.kpi-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

@media (max-width: 900px) {
    .kpi-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .kpi-row {
        grid-template-columns: 1fr;
    }
}

.kpi-card {
    background: var(--white);
    border-radius: 14px;
    padding: 1rem;
    border: 1px solid var(--gray-200);
    text-align: center;
}

.kpi-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary);
}

.kpi-label {
    font-size: 0.7rem;
    color: var(--gray-500);
    margin-top: 0.25rem;
}

/* Insights Grid */
.insights-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

@media (max-width: 900px) {
    .insights-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .insights-grid {
        grid-template-columns: 1fr;
    }
}

.insight-card {
    background: var(--white);
    border-radius: 14px;
    padding: 1rem;
    border: 1px solid var(--gray-200);
    text-align: center;
}

.insight-icon {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.insight-title {
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.insight-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--primary);
}

.insight-desc {
    font-size: 0.65rem;
    color: var(--gray-500);
    margin-top: 0.25rem;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.stat-card, .chart-card, .kpi-card, .insight-card {
    animation: fadeInUp 0.4s ease-out;
}
</style>

<div id="mainContent">
    <section class="statistics-section">
        <div class="statistics-container">
            <div class="statistics-header">
                <h1>Agricultural Statistics Dashboard</h1>
                <p>Comprehensive insights into Liberia's agricultural sector</p>
            </div>
            
            <!-- Filter Bar -->
            <div class="filter-bar">
                <div class="filter-group">
                    <label><i class="fas fa-chart-line"></i> Data Type:</label>
                    <select id="dataType">
                        <option value="all">All Data</option>
                        <option value="farmers">Farmers Only</option>
                    </select>
                </div>
                <div class="filter-group">
                    <label><i class="fas fa-map-marker-alt"></i> County:</label>
                    <select id="countyFilter">
                        <option value="all">All Counties</option>
                                                    <option value="Bomi">Bomi</option>
                                                    <option value="Bong">Bong</option>
                                                    <option value="Gbarpolu">Gbarpolu</option>
                                                    <option value="Grand Bassa">Grand Bassa</option>
                                                    <option value="Grand Cape Mount">Grand Cape Mount</option>
                                                    <option value="Grand Gedeh">Grand Gedeh</option>
                                                    <option value="Grand Kru">Grand Kru</option>
                                                    <option value="Lofa">Lofa</option>
                                                    <option value="Margibi">Margibi</option>
                                                    <option value="Maryland">Maryland</option>
                                                    <option value="Montserrado">Montserrado</option>
                                                    <option value="Nimba">Nimba</option>
                                                    <option value="River Cess">River Cess</option>
                                                    <option value="River Gee">River Gee</option>
                                                    <option value="Sinoe">Sinoe</option>
                                            </select>
                </div>
                <button class="btn-reset" onclick="resetFilters()">
                    <i class="fas fa-undo-alt"></i> Reset
                </button>
            </div>
            
            <!-- Stats Grid -->
            <div class="stats-grid">
                <div class="stat-card">
                    <i class="fas fa-users"></i>
                    <span class="stat-number" id="totalFarmers">500</span>
                    <span class="stat-label">Total Farmers</span>
                </div>
                <div class="stat-card">
                    <i class="fas fa-check-circle"></i>
                    <span class="stat-number" id="verifiedFarmers">0</span>
                    <span class="stat-label">Verified</span>
                </div>
                <div class="stat-card">
                    <i class="fas fa-handshake"></i>
                    <span class="stat-number" id="tradingEligible">0</span>
                    <span class="stat-label">Trading Eligible</span>
                </div>
                <div class="stat-card">
                    <i class="fas fa-chart-line"></i>
                    <span class="stat-number" id="verificationRate">0%</span>
                    <span class="stat-label">Verification Rate</span>
                </div>
            </div>
            
            <!-- KPI Row -->
            <div class="kpi-row">
                <div class="kpi-card">
                    <div class="kpi-value" id="avgFarmSize">0.0</div>
                    <div class="kpi-label">Avg Farm Size (ha)</div>
                </div>
                <div class="kpi-card">
                    <div class="kpi-value" id="pendingCount">0</div>
                    <div class="kpi-label">Pending Verification</div>
                </div>
                <div class="kpi-card">
                    <div class="kpi-value" id="notStartedCount">500</div>
                    <div class="kpi-label">Not Started</div>
                </div>
                <div class="kpi-card">
                    <div class="kpi-value" id="failedCount">0</div>
                    <div class="kpi-label">Failed/Rejected</div>
                </div>
            </div>
            
            <!-- Chart Grid -->
            <div class="chart-grid">
                <div class="chart-card">
                    <div class="chart-title">
                        <span><i class="fas fa-map-marker-alt"></i> Farmers by County</span>
                        <select class="chart-type-select" id="countyChartType" onchange="updateCountyChart()">
                            <option value="bar">Bar Chart</option>
                            <option value="horizontal">Horizontal Bar</option>
                        </select>
                    </div>
                    <canvas id="countyChart" class="chart-canvas"></canvas>
                    <div id="countyList" class="county-list"></div>
                </div>
                
                <div class="chart-card">
                    <div class="chart-title">
                        <span><i class="fas fa-chart-pie"></i> Verification Status Distribution</span>
                    </div>
                    <canvas id="statusChart" class="chart-canvas"></canvas>
                </div>
            </div>
            
            <!-- Insights Grid -->
            <div class="insights-grid">
                <div class="insight-card">
                    <div class="insight-icon"><i class="fas fa-chart-line"></i></div>
                    <div class="insight-title">Most Active County</div>
                    <div class="insight-value" id="mostActiveCounty">Loading...</div>
                    <div class="insight-desc" id="mostActiveCountyCount">-</div>
                </div>
                <div class="insight-card">
                    <div class="insight-icon"><i class="fas fa-chart-pie"></i></div>
                    <div class="insight-title">Verification Progress</div>
                    <div class="insight-value" id="verificationProgress">0%</div>
                    <div class="insight-desc">of farmers verified</div>
                </div>
                <div class="insight-card">
                    <div class="insight-icon"><i class="fas fa-tractor"></i></div>
                    <div class="insight-title">Total Farm Area</div>
                    <div class="insight-value" id="totalFarmArea">0</div>
                    <div class="insight-desc">hectares</div>
                </div>
            </div>
        </div>
    </section>
</div>
<script>
// Data from PHP
const countyStats = {"Nimba":171,"Bong":93,"Lofa":64,"Montserrado":48,"Margibi":37,"Bomi":17,"Sinoe":17,"Grand Cape Mount":16,"Grand Bassa":11,"Maryland":6,"Gbarpolu":6,"River Gee":6,"River Cess":4,"Grand Kru":4};
const countiesList = ["Bomi","Bong","Gbarpolu","Grand Bassa","Grand Cape Mount","Grand Gedeh","Grand Kru","Lofa","Margibi","Maryland","Montserrado","Nimba","River Cess","River Gee","Sinoe"];
const totalFarmers = 500;
const verifiedFarmers = 0;
const pendingFarmers = 0;
const notStartedCount = 500;
const failedCount = 0;
const tradingEligible = 0;
const avgFarmSize = 0;
const totalFarmArea = 0;

let countyChart = null;
let statusChart = null;
let currentCountyChartType = 'bar';

// Debug: Log data to console
console.log('Data from PHP:');
console.log('countyStats:', countyStats);
console.log('totalFarmers:', totalFarmers);
console.log('verifiedFarmers:', verifiedFarmers);
console.log('pendingFarmers:', pendingFarmers);
console.log('notStartedCount:', notStartedCount);
console.log('failedCount:', failedCount);

// Initialize County Chart
function initCountyChart() {
    const canvas = document.getElementById('countyChart');
    if (!canvas) {
        console.error('County chart canvas not found');
        return;
    }
    
    const ctx = canvas.getContext('2d');
    if (countyChart) {
        countyChart.destroy();
    }
    
    let labels = [];
    let values = [];
    
    if (Object.keys(countyStats).length > 0) {
        const sorted = Object.entries(countyStats).sort((a, b) => b[1] - a[1]);
        labels = sorted.map(item => item[0]);
        values = sorted.map(item => item[1]);
        console.log('County chart labels:', labels);
        console.log('County chart values:', values);
    } else {
        labels = countiesList;
        values = new Array(countiesList.length).fill(0);
        console.log('No county stats, using zeros');
    }
    
    const indexAxis = currentCountyChartType === 'horizontal' ? 'y' : 'x';
    
    countyChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: labels,
            datasets: [{
                label: 'Number of Farmers',
                data: values,
                backgroundColor: '#0f5e3a',
                borderRadius: 6
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: true,
            indexAxis: indexAxis,
            plugins: {
                legend: { position: 'top' }
            },
            scales: {
                y: { 
                    beginAtZero: true, 
                    title: { display: true, text: 'Number of Farmers' },
                    ticks: { stepSize: 1 }
                },
                x: { 
                    ticks: { maxRotation: 45, minRotation: 45 }
                }
            }
        }
    });
    
    // Update county list
    const maxValue = Math.max(...values, 1);
    document.getElementById('countyList').innerHTML = labels.slice(0, 10).map((label, i) => `
        <div class="county-item">
            <span class="county-name">${escapeHtml(label)}</span>
            <div class="county-bar">
                <div class="county-fill" style="width: ${(values[i] / maxValue) * 100}%;">${values[i].toLocaleString()}</div>
            </div>
        </div>
    `).join('');
}

// Initialize Status Chart
function initStatusChart() {
    const canvas = document.getElementById('statusChart');
    if (!canvas) {
        console.error('Status chart canvas not found');
        return;
    }
    
    const ctx = canvas.getContext('2d');
    if (statusChart) {
        statusChart.destroy();
    }
    
    const statusData = [verifiedFarmers, pendingFarmers, notStartedCount, failedCount];
    console.log('Status chart data:', statusData);
    console.log('Total farmers:', totalFarmers);
    
    statusChart = new Chart(ctx, {
        type: 'pie',
        data: {
            labels: ['Verified', 'Pending', 'Not Started', 'Failed/Rejected'],
            datasets: [{
                data: statusData,
                backgroundColor: ['#0a5c3b', '#b88b4a', '#6b7280', '#dc2626'],
                borderWidth: 0
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: true,
            plugins: {
                legend: { position: 'bottom' },
                tooltip: { 
                    callbacks: { 
                        label: (ctx) => {
                            const total = totalFarmers || 1;
                            const percentage = total > 0 ? ((ctx.raw / total) * 100).toFixed(1) : 0;
                            return `${ctx.label}: ${ctx.raw.toLocaleString()} farmers (${percentage}%)`;
                        }
                    } 
                }
            }
        }
    });
}

// Update insights
function updateInsights() {
    // Most active county
    let mostActive = 'N/A';
    let mostActiveCount = 0;
    if (Object.keys(countyStats).length > 0) {
        const sorted = Object.entries(countyStats).sort((a, b) => b[1] - a[1]);
        mostActive = sorted[0][0];
        mostActiveCount = sorted[0][1];
    }
    document.getElementById('mostActiveCounty').innerText = mostActive;
    document.getElementById('mostActiveCountyCount').innerHTML = `${mostActiveCount.toLocaleString()} registered farmers`;
    
    // Update verification progress
    const verificationRate = totalFarmers > 0 ? ((verifiedFarmers / totalFarmers) * 100).toFixed(1) : 0;
    document.getElementById('verificationProgress').innerText = verificationRate;
    document.getElementById('totalFarmArea').innerText = totalFarmArea.toLocaleString();
}

function updateCountyChart() {
    currentCountyChartType = document.getElementById('countyChartType').value;
    initCountyChart();
}

function applyFilters() {
    const selectedCounty = document.getElementById('countyFilter').value;
    const dataType = document.getElementById('dataType').value;
    
    if (selectedCounty !== 'all' && countyStats[selectedCounty]) {
        const countyCount = countyStats[selectedCounty];
        document.getElementById('totalFarmers').innerText = countyCount.toLocaleString();
        document.getElementById('mostActiveCounty').innerText = selectedCounty;
        document.getElementById('mostActiveCountyCount').innerHTML = `${countyCount.toLocaleString()} farmers in this county`;
    } else {
        document.getElementById('totalFarmers').innerText = totalFarmers.toLocaleString();
        updateInsights();
    }
}

function resetFilters() {
    document.getElementById('dataType').value = 'all';
    document.getElementById('countyFilter').value = 'all';
    
    document.getElementById('totalFarmers').innerText = totalFarmers.toLocaleString();
    document.getElementById('verifiedFarmers').innerText = verifiedFarmers.toLocaleString();
    document.getElementById('tradingEligible').innerText = tradingEligible.toLocaleString();
    const verificationRate = totalFarmers > 0 ? ((verifiedFarmers / totalFarmers) * 100).toFixed(1) : 0;
    document.getElementById('verificationRate').innerText = verificationRate + '%';
    document.getElementById('pendingCount').innerText = pendingFarmers.toLocaleString();
    document.getElementById('notStartedCount').innerText = notStartedCount.toLocaleString();
    document.getElementById('failedCount').innerText = failedCount.toLocaleString();
    document.getElementById('avgFarmSize').innerText = avgFarmSize.toFixed(1);
    document.getElementById('totalFarmArea').innerText = totalFarmArea.toLocaleString();
    document.getElementById('verificationProgress').innerText = verificationRate;
    updateInsights();
    initCountyChart();
    initStatusChart();
}

function escapeHtml(str) {
    if (!str) return '';
    return String(str).replace(/[&<>]/g, function(m) {
        if (m === '&') return '&amp;';
        if (m === '<') return '&lt;';
        if (m === '>') return '&gt;';
        return m;
    });
}

// Initialize on page load - with a slight delay to ensure DOM is ready
document.addEventListener('DOMContentLoaded', function() {
    console.log('DOM loaded, initializing charts...');
    
    // Small delay to ensure canvas is ready
    setTimeout(function() {
        initCountyChart();
        initStatusChart();
        updateInsights();
        console.log('Charts initialized');
    }, 100);
});

// Event listeners
document.getElementById('dataType').addEventListener('change', applyFilters);
document.getElementById('countyFilter').addEventListener('change', applyFilters);
</script>

<!-- Toast Container -->
<div id="toastContainer" class="toast-container"></div>

<!-- AI Chat Support Widget - Professional Design -->
<div class="chat-widget" id="chatWidget">
    <div class="chat-toggle" id="chatToggle">
        <i class="fas fa-comment-dots"></i>
        <span class="chat-badge"></span>
    </div>
    
    <div class="chat-container" id="chatContainer">
        <div class="chat-header">
            <div class="chat-header-info">
                <div class="chat-avatar">
                    <i class="fas fa-robot"></i>
                </div>
                <div class="chat-title">
                    <h4>AFD Support</h4>
                    <p>Online</p>
                </div>
            </div>
            <button class="chat-close" id="chatClose">
                <i class="fas fa-times"></i>
            </button>
        </div>
        
        <div class="chat-messages" id="chatMessages">
            <div class="message bot">
                <div class="message-avatar">
                    <i class="fas fa-robot"></i>
                </div>
                <div class="message-content">
                    <p>Hello! I'm your AFD Support Assistant. I can help you with:</p>
                    <ul>
                        <li>Farmer registration process</li>
                        <li>Finding agribusinesses in the directory</li>
                        <li>Understanding analytics and reports</li>
                        <li>Using the spatial map</li>
                        <li>Market trading on AgroTrader</li>
                    </ul>
                    <p>How can I assist you today?</p>
                    <span class="message-time">Just now</span>
                </div>
            </div>
        </div>
        
        <div class="chat-input-area">
          
            <div class="chat-input-wrapper">
                <input type="text" id="chatInput" placeholder="Type your message..." autocomplete="off">
                <button id="chatSend" class="chat-send">
                    <i class="fas fa-paper-plane"></i>
                </button>
            </div>
            <div class="chat-typing" id="chatTyping">
                <span>AFD Assistant is typing</span>
                <span class="typing-dots">...</span>
            </div>
        </div>
    </div>
</div>

<!-- Footer -->
<footer class="footer">
    <div class="container">
        <div class="row g-4">
            <div class="col-lg-4">
                <h5 class="footer-title">About AFD</h5>
                <p class="small text-muted">Official agricultural registry of Liberia, established by the Ministry of Agriculture.</p>
                <div class="d-flex gap-3 mt-3">
                    <a href="#" class="social-link"><i class="fab fa-facebook-f"></i></a>
                    <a href="#" class="social-link"><i class="fab fa-twitter"></i></a>
                    <a href="#" class="social-link"><i class="fab fa-linkedin-in"></i></a>
                    <a href="#" class="social-link"><i class="fab fa-github"></i></a>
                </div>
            </div>
            
            <div class="col-lg-2">
                <h5 class="footer-title">Registry</h5>
                <ul class="footer-links">
                    <li><a href="#" onclick="setActiveTab('farmers'); return false;">Farmers</a></li>
                    <li><a href="#" onclick="setActiveTab('groups'); return false;">Cooperatives</a></li>
                    <li><a href="#" onclick="setActiveTab('business'); return false;">Businesses</a></li>
                </ul>
            </div>
            
            <div class="col-lg-2">
                <h5 class="footer-title">Services</h5>
                <ul class="footer-links">
                    <li><a href="#" onclick="setActiveTab('market'); return false;">Marketplace</a></li>
                    <li><a href="#" onclick="setActiveTab('map'); return false;">Traceability</a></li>
                    <li><a href="#" onclick="setActiveTab('dashboards'); return false;">Analytics</a></li>
                </ul>
            </div>
            
            <div class="col-lg-2">
                <h5 class="footer-title">Resources</h5>
                <ul class="footer-links">
                    <li><a href="#" onclick="setActiveTab('extension'); return false;">Extension</a></li>
                    <li><a href="#" onclick="setActiveTab('developers'); return false;">Developers</a></li>
                    <li><a href="#">API</a></li>
                </ul>
            </div>
            
            <div class="col-lg-2">
                <h5 class="footer-title">Legal</h5>
                <ul class="footer-links">
                    <li><a href="#">Privacy</a></li>
                    <li><a href="#">Terms</a></li>
                    <li><a href="#">Accessibility</a></li>
                </ul>
            </div>
        </div>
        
        <div class="footer-bottom">
            <div class="footer-copyright">
                © <span id="currentYear"></span> AFD - Ministry of Agriculture, Liberia. All rights reserved.
            </div>
            <div class="footer-right">
                <div class="theme-switcher">
                    <button class="theme-btn" data-theme="light" id="lightModeBtn" title="Light Mode">
                        <i class="fas fa-sun"></i>
                    </button>
                    <button class="theme-btn" data-theme="dark" id="darkModeBtn" title="Dark Mode">
                        <i class="fas fa-moon"></i>
                    </button>
                    <button class="theme-btn" data-theme="system" id="systemModeBtn" title="System Preference">
                        <i class="fas fa-desktop"></i>
                    </button>
                </div>
                <div class="status-badge">
                    <i class="fas fa-circle"></i>
                    System Operational
                </div>
            </div>
        </div>
    </div>
</footer>

<style>
/* Footer Styles */
.footer {
    background: linear-gradient(135deg, #e8f2ec 0%, #faf3e8 100%);
    padding: 3rem 0 1.5rem;
    border-top: 1px solid rgba(3, 36, 22, 0.1);
    margin-top: 2rem;
}

body.dark-mode .footer {
    background: linear-gradient(135deg, #0c150c 0%, #2a241a 100%);
    border-top-color: rgba(111,191,138,0.15);
}

/* Desktop Layout - Keep Bootstrap row */
.footer .row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -0.75rem;
}

.footer .col-lg-4,
.footer .col-lg-2 {
    padding: 0 0.75rem;
}

.footer-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 1.25rem;
    letter-spacing: 0.3px;
}

body.dark-mode .footer-title {
    color: #e0e0e0;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 0.6rem;
}

.footer-links a {
    color: #4a5568;
    text-decoration: none;
    font-size: 0.8rem;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

body.dark-mode .footer-links a {
    color: #a0a0a0;
}

.footer-links a:hover {
    color: #0a5c3b;
    transform: translateX(3px);
}

body.dark-mode .footer-links a:hover {
    color: #6fbf8a;
}

.social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: rgba(255,255,255,0.9);
    color: #4a5568;
    border-radius: 50%;
    transition: all 0.2s ease;
    text-decoration: none;
}

body.dark-mode .social-link {
    background: rgba(30,30,30,0.9);
    color: #a0a0a0;
}

.social-link:hover {
    background: #0a5c3b;
    color: white;
    transform: translateY(-2px);
}

.footer-bottom {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(10,92,59,0.15);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

body.dark-mode .footer-bottom {
    border-top-color: rgba(111,191,138,0.15);
}

.footer-copyright {
    font-size: 0.75rem;
    color: #4a5568;
}

body.dark-mode .footer-copyright {
    color: #8a8a8a;
}

.footer-right {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

/* Theme Switcher */
.theme-switcher {
    display: flex;
    gap: 0.5rem;
    background: rgba(255,255,255,0.7);
    padding: 0.25rem;
    border-radius: 40px;
    backdrop-filter: blur(4px);
}

body.dark-mode .theme-switcher {
    background: rgba(30,30,30,0.7);
}

.theme-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: #4a5568;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
}

body.dark-mode .theme-btn {
    color: #a0a0a0;
}

.theme-btn:hover {
    background: rgba(10,92,59,0.2);
    transform: scale(1.05);
}

.theme-btn.active {
    background: #0a5c3b;
    color: white;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(255,255,255,0.9);
    padding: 0.3rem 1rem;
    border-radius: 30px;
    font-size: 0.7rem;
    font-weight: 500;
    color: #0a5c3b;
    backdrop-filter: blur(4px);
}

body.dark-mode .status-badge {
    background: rgba(30,30,30,0.9);
    color: #6fbf8a;
}

.status-badge i {
    font-size: 0.5rem;
    color: #0a5c3b;
}

body.dark-mode .status-badge i {
    color: #6fbf8a;
}

/* ===== MOBILE ONLY - 2 COLUMN FOOTER WITH REDUCED HEIGHT ===== */
@media (max-width: 768px) {
    .footer {
        padding: 1.5rem 0 1rem !important;
    }
    
    .footer .row {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem !important;
        margin: 0 !important;
    }
    
    .footer .col-lg-4,
    .footer .col-lg-2 {
        width: 100% !important;
        flex: none !important;
        max-width: 100% !important;
        padding: 0 !important;
    }
    
    /* About section spans both columns */
    .footer .col-lg-4 {
        grid-column: span 2 !important;
        margin-bottom: 0 !important;
    }
    
    .footer-title {
        margin-bottom: 0.6rem !important;
        font-size: 0.8rem !important;
    }
    
    .footer-links li {
        margin-bottom: 0.35rem !important;
    }
    
    .footer-links a {
        font-size: 0.7rem !important;
        padding: 0 !important;
    }
    
    .social-link {
        width: 28px !important;
        height: 28px !important;
    }
    
    .social-link i {
        font-size: 0.75rem !important;
    }
    
    .footer-bottom {
        margin-top: 1rem !important;
        padding-top: 0.75rem !important;
        flex-direction: column;
        text-align: center;
        gap: 0.5rem !important;
    }
    
    .footer-right {
        justify-content: center;
        gap: 0.75rem !important;
    }
    
    .theme-switcher {
        justify-content: center;
    }
    
    .footer-copyright {
        font-size: 0.65rem !important;
    }
    
    .status-badge {
        padding: 0.2rem 0.75rem !important;
        font-size: 0.6rem !important;
    }
    
    .theme-btn {
        width: 28px !important;
        height: 28px !important;
        font-size: 0.75rem !important;
    }
}

/* Small Mobile Devices - Even More Compact */
@media (max-width: 480px) {
    .footer {
        padding: 1.2rem 0 0.8rem !important;
    }
    
    .footer .row {
        gap: 0.75rem !important;
    }
    
    .footer-title {
        font-size: 0.75rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    .footer-links li {
        margin-bottom: 0.25rem !important;
    }
    
    .footer-links a {
        font-size: 0.65rem !important;
    }
    
    .social-link {
        width: 26px !important;
        height: 26px !important;
    }
    
    .social-link i {
        font-size: 0.7rem !important;
    }
    
    .footer-bottom {
        margin-top: 0.75rem !important;
        padding-top: 0.5rem !important;
    }
    
    .footer-copyright {
        font-size: 0.6rem !important;
    }
    
    .status-badge {
        padding: 0.15rem 0.6rem !important;
        font-size: 0.55rem !important;
    }
    
    .theme-btn {
        width: 26px !important;
        height: 26px !important;
        font-size: 0.7rem !important;
    }
}

/* ========== AI CHAT WIDGET - PROFESSIONAL DESIGN ========== */
.chat-widget {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 9999;
}

.chat-toggle {
    width: 52px;
    height: 52px;
    background: linear-gradient(135deg, #0a5c3b, #1a7a4a);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(10,92,59,0.25);
    transition: all 0.3s ease;
}

.chat-toggle:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 16px rgba(10,92,59,0.35);
}

.chat-toggle i {
    font-size: 1.3rem;
    color: white;
}

.chat-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 10px;
    height: 10px;
    background: #4caf50;
    border-radius: 50%;
    border: 2px solid white;
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.2); opacity: 0.8; }
}

.chat-container {
    position: absolute;
    bottom: 70px;
    right: 0;
    width: 340px;
    height: 460px;
    background: var(--white);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
    display: none;
    flex-direction: column;
    overflow: hidden;
    animation: slideUp 0.25s ease;
}

body.dark-mode .chat-container {
    background: #2a2a2a;
}

.chat-container.open {
    display: flex;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(15px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Chat Header - Light Gradient */
.chat-header {
    background: linear-gradient(135deg, #e8f2ec, #faf3e8);
    padding: 0.9rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

body.dark-mode .chat-header {
    background: linear-gradient(135deg, #1a2a1a, #2a241a);
    border-bottom-color: rgba(255,255,255,0.05);
}

.chat-header-info {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.chat-avatar {
    width: 36px;
    height: 36px;
    background: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

.chat-avatar i {
    font-size: 1rem;
    color: #0a5c3b;
}

.chat-title h4 {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--gray-800);
    margin: 0;
}

body.dark-mode .chat-title h4 {
    color: #ffffff;
}

.chat-title p {
    font-size: 0.6rem;
    color: var(--gray-500);
    margin: 0;
}

body.dark-mode .chat-title p {
    color: #a0a0a0;
}

.chat-close {
    background: transparent;
    border: none;
    color: var(--gray-500);
    cursor: pointer;
    font-size: 1rem;
    transition: opacity 0.2s;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.chat-close:hover {
    background: rgba(0,0,0,0.05);
}

body.dark-mode .chat-close:hover {
    background: rgba(255,255,255,0.1);
}

/* Chat Messages */
.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    background: var(--white);
}

body.dark-mode .chat-messages {
    background: #2a2a2a;
}

.message {
    display: flex;
    gap: 0.6rem;
    animation: messageFadeIn 0.3s ease;
}

@keyframes messageFadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.message.user {
    flex-direction: row-reverse;
}

.message-avatar {
    width: 28px;
    height: 28px;
    background: var(--gray-100);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

body.dark-mode .message-avatar {
    background: #3a3a3a;
}

.message.user .message-avatar {
    background: #e8f2ec;
}

body.dark-mode .message.user .message-avatar {
    background: #1e3a2e;
}

.message-avatar i {
    font-size: 0.75rem;
    color: #0a5c3b;
}

.message-content {
    max-width: 75%;
    background: var(--gray-100);
    padding: 0.6rem 0.85rem;
    border-radius: 14px;
    font-size: 0.8rem;
    line-height: 1.4;
    color: var(--gray-800);
}

body.dark-mode .message-content {
    background: #3a3a3a;
    color: #e0e0e0;
}

.message.user .message-content {
    background: #0a5c3b;
    color: white;
}

.message-content ul {
    margin: 0.4rem 0;
    padding-left: 1rem;
}

.message-content li {
    margin: 0.2rem 0;
    font-size: 0.75rem;
}

.message-time {
    font-size: 0.55rem;
    color: var(--gray-500);
    display: block;
    margin-top: 0.3rem;
}

/* Chat Input Area */
.chat-input-area {
    padding: 0.8rem;
    border-top: 1px solid var(--gray-200);
    background: var(--white);
}

body.dark-mode .chat-input-area {
    background: #2a2a2a;
    border-top-color: #3a3a3a;
}

.quick-replies {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.7rem;
}

.quick-reply {
    padding: 0.25rem 0.7rem;
    background: var(--gray-100);
    border: 1px solid var(--gray-200);
    border-radius: 30px;
    font-size: 0.65rem;
    cursor: pointer;
    transition: all 0.2s;
    color: var(--gray-700);
    white-space: nowrap;
}

body.dark-mode .quick-reply {
    background: #3a3a3a;
    border-color: #4a4a4a;
    color: #e0e0e0;
}

.quick-reply:hover {
    background: #e8f2ec;
    border-color: #0a5c3b;
    color: #0a5c3b;
}

.chat-input-wrapper {
    display: flex;
    gap: 0.5rem;
}

#chatInput {
    flex: 1;
    padding: 0.55rem 0.9rem;
    border: 1px solid var(--gray-300);
    border-radius: 30px;
    font-size: 0.8rem;
    background: var(--white);
    color: var(--gray-800);
    outline: none;
}

body.dark-mode #chatInput {
    background: #3a3a3a;
    border-color: #4a4a4a;
    color: #e0e0e0;
}

#chatInput:focus {
    border-color: #0a5c3b;
}

.chat-send {
    width: 36px;
    height: 36px;
    background: #0a5c3b;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chat-send i {
    color: white;
    font-size: 0.85rem;
}

.chat-send:hover {
    background: #0b4e33;
    transform: scale(1.02);
}

.chat-typing {
    display: none;
    align-items: center;
    gap: 0.3rem;
    padding: 0.4rem 0 0;
    font-size: 0.65rem;
    color: var(--gray-500);
}

.chat-typing.active {
    display: flex;
}

.typing-dots {
    animation: blink 1.2s infinite;
}

@keyframes blink {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
}

/* Responsive Design for Chat Widget */
@media (max-width: 768px) {
    .chat-container {
        width: calc(100vw - 2rem);
        max-width: 340px;
        right: 0;
        bottom: 70px;
        height: 420px;
    }
    
    .chat-toggle {
        width: 48px;
        height: 48px;
    }
    
    .chat-toggle i {
        font-size: 1.2rem;
    }
    
    .quick-replies {
        flex-wrap: wrap;
    }
    
    .quick-reply {
        white-space: normal;
        font-size: 0.6rem;
        padding: 0.2rem 0.6rem;
    }
}

@media (max-width: 480px) {
    .chat-container {
        width: calc(100vw - 1.5rem);
        max-width: 320px;
        height: 400px;
        bottom: 65px;
        right: 0.75rem;
    }
    
    .chat-widget {
        bottom: 1rem;
        right: 1rem;
    }
    
    .message-content {
        max-width: 85%;
        font-size: 0.75rem;
    }
    
    .quick-reply {
        font-size: 0.55rem;
    }
}
</style>
<script>
// ========== THEME SWITCHER - LIGHT MODE DEFAULT ==========
(function() {
    // Set current year
    document.getElementById('currentYear').textContent = new Date().getFullYear();
    
    // Get saved theme or default to 'light'
    let currentTheme = localStorage.getItem('theme') || 'light';
    
    function applySystemTheme() {
        const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
        if (isDark) {
            document.body.classList.add('dark-mode');
        } else {
            document.body.classList.remove('dark-mode');
        }
    }
    
    function applyTheme(theme) {
        // Remove dark-mode class first
        document.body.classList.remove('dark-mode');
        
        if (theme === 'dark') {
            document.body.classList.add('dark-mode');
        } else if (theme === 'light') {
            document.body.classList.remove('dark-mode');
        } else if (theme === 'system') {
            applySystemTheme();
        }
        
        // Update active button state
        document.querySelectorAll('.theme-btn').forEach(btn => {
            btn.classList.remove('active');
            if (btn.getAttribute('data-theme') === theme) {
                btn.classList.add('active');
            }
        });
        
        // Save to localStorage
        localStorage.setItem('theme', theme);
        currentTheme = theme;
        
        // Update toast colors if any toasts exist
        document.querySelectorAll('.toast').forEach(toast => {
            if (theme === 'dark' || (theme === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
                toast.style.background = '#2a2a2a';
                toast.style.color = '#e0e0e0';
                toast.style.border = '1px solid #3a3a3a';
            } else {
                toast.style.background = '#ffffff';
                toast.style.color = '#333333';
                toast.style.border = '1px solid #e5e5e5';
            }
        });
    }
    
    // Listen for system theme changes
    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
        if (currentTheme === 'system') {
            applySystemTheme();
        }
    });
    
    // Apply saved theme on load
    const savedTheme = localStorage.getItem('theme') || 'light';
    applyTheme(savedTheme);
    
    // Add event listeners for theme buttons
    const lightBtn = document.getElementById('lightModeBtn');
    const darkBtn = document.getElementById('darkModeBtn');
    const systemBtn = document.getElementById('systemModeBtn');
    
    if (lightBtn) lightBtn.addEventListener('click', () => applyTheme('light'));
    if (darkBtn) darkBtn.addEventListener('click', () => applyTheme('dark'));
    if (systemBtn) systemBtn.addEventListener('click', () => applyTheme('system'));
})();

// ========== AI CHAT SUPPORT FUNCTIONALITY ==========
(function() {
    const chatToggle = document.getElementById('chatToggle');
    const chatContainer = document.getElementById('chatContainer');
    const chatClose = document.getElementById('chatClose');
    const chatMessages = document.getElementById('chatMessages');
    const chatInput = document.getElementById('chatInput');
    const chatSend = document.getElementById('chatSend');
    const chatTyping = document.getElementById('chatTyping');
    
    // AI Response Database - Professional without emojis
    const aiResponses = {
        'farmer registration': "To register as a farmer, click the 'Farmer' tab in the navigation menu and complete the registration form. You will need to provide personal information, location details, farming details, and consent preferences. Would you like assistance with any specific section?",
        
        'register farmer': "The farmer registration form collects personal details (name, contact), location (county, district), farming information (commodity, farm size), and consent preferences. You can access it from the Farmer page in the main navigation.",
        
        'business directory': "The Agribusiness Directory lists all registered agribusinesses in Liberia. You can search by business name, category, or location. Each listing includes contact details, services offered, and verification status.",
        
        'find businesses': "To find agribusinesses, go to the Directory page. You can filter by category such as Processor, Aggregator, Exporter, or by county. Verified businesses are marked with a green verification badge.",
        
        'market': "The AgroTrader Market platform connects buyers and sellers of agricultural products. You can view active buy and sell offers, filter by commodity and location, and contact traders directly.",
        
        'spatial map': "The Spatial Map displays agricultural activity across Liberia's 15 counties. You can switch between registrations and hectares views. Click on any county to see detailed statistics.",
        
        'analytics': "The Analytics Dashboard provides comprehensive insights including registration growth over time, commodity distribution, county breakdowns, and market price trends.",
        
        'help': "I can assist you with farmer registration, business directory, AgroTrader market, spatial maps, and analytics. What would you like to know?",
        
        'default': "I'm your AFD Support Assistant. I can help you with farmer registration, business directory, market trading, spatial maps, and analytics. Please ask me about any of these topics."
    };
    
    function getAIResponse(message) {
        const lowerMsg = message.toLowerCase();
        
        for (const [key, response] of Object.entries(aiResponses)) {
            if (lowerMsg.includes(key)) {
                return response;
            }
        }
        
        return aiResponses.default;
    }
    
    function addMessage(message, isUser = true) {
        const messageDiv = document.createElement('div');
        messageDiv.className = `message ${isUser ? 'user' : 'bot'}`;
        
        const time = new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
        
        messageDiv.innerHTML = `
            <div class="message-avatar">
                <i class="fas ${isUser ? 'fa-user' : 'fa-robot'}"></i>
            </div>
            <div class="message-content">
                <p>${message.replace(/\n/g, '<br>')}</p>
                <span class="message-time">${time}</span>
            </div>
        `;
        
        chatMessages.appendChild(messageDiv);
        chatMessages.scrollTop = chatMessages.scrollHeight;
    }
    
    function showTyping() {
        if (chatTyping) chatTyping.classList.add('active');
        if (chatMessages) chatMessages.scrollTop = chatMessages.scrollHeight;
    }
    
    function hideTyping() {
        if (chatTyping) chatTyping.classList.remove('active');
    }
    
    function sendMessage() {
        const message = chatInput.value.trim();
        if (!message) return;
        
        addMessage(message, true);
        chatInput.value = '';
        
        showTyping();
        
        setTimeout(() => {
            hideTyping();
            const response = getAIResponse(message);
            addMessage(response, false);
        }, 600);
    }
    
    // Event listeners
    if (chatToggle) {
        chatToggle.addEventListener('click', () => {
            if (chatContainer) chatContainer.classList.toggle('open');
        });
    }
    
    if (chatClose) {
        chatClose.addEventListener('click', () => {
            if (chatContainer) chatContainer.classList.remove('open');
        });
    }
    
    if (chatSend) {
        chatSend.addEventListener('click', sendMessage);
    }
    
    if (chatInput) {
        chatInput.addEventListener('keypress', (e) => {
            if (e.key === 'Enter') sendMessage();
        });
    }
})();

// ========== TOAST FUNCTION WITH DARK MODE SUPPORT ==========
function showToast(title, body) {
    const container = document.getElementById('toastContainer');
    if (!container) return;
    
    const toastId = 'toast-' + Date.now();
    const toast = document.createElement('div');
    toast.className = 'toast';
    toast.id = toastId;
    toast.innerHTML = `
        <div class="toast-header">
            <span class="toast-title">${title}</span>
            <button class="toast-close btn-close btn-close-sm" onclick="this.closest('.toast').remove()"></button>
        </div>
        <div class="toast-body">${body}</div>
    `;
    container.appendChild(toast);
    
    // Apply current theme styles
    const isDarkMode = document.body.classList.contains('dark-mode');
    if (isDarkMode) {
        toast.style.background = '#2a2a2a';
        toast.style.color = '#e0e0e0';
        toast.style.border = '1px solid #3a3a3a';
    } else {
        toast.style.background = '#ffffff';
        toast.style.color = '#333333';
        toast.style.border = '1px solid #e5e5e5';
    }
    
    setTimeout(() => {
        const toastEl = document.getElementById(toastId);
        if (toastEl) toastEl.remove();
    }, 4000);
}
</script>

<!-- Scripts -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/prism.min.js"></script>

<script>
    // Initialize AOS
    AOS.init({ duration: 600, once: true });

    // Current active tab
    let currentTab = 'home';
    let authMode = 'login';

    // Mock data
    const directoryData = [
        { id: 'AB-00021', name: 'Kpatawee Rice Mill', category: 'Processor', county: 'Bong', services: ['Processing', 'Buying'], phone: '+231-777-123-456', email: 'info@kpataweerice.lr', listing: 'LIST_PUBLIC' },
        { id: 'AB-00042', name: 'Nimba Produce Aggregators', category: 'Aggregator', county: 'Nimba', services: ['Aggregation', 'Logistics'], phone: '+231-888-234-567', email: 'contact@nimbaaggregators.lr', listing: 'LIST_PUBLIC' },
        { id: 'AB-00055', name: 'Cape Mount Inputs Depot', category: 'Input Supplier', county: 'Grand Cape Mount', services: ['Inputs'], phone: '+231-777-765-432', email: 'sales@capemountinputs.lr', listing: 'LIST_PUBLIC' },
        { id: 'AB-00077', name: 'Monrovia Cold Chain Logistics', category: 'Transport & Logistics', county: 'Montserrado', services: ['Cold chain', 'Transport'], phone: '+231-777-999-111', email: 'ops@mvacoldchain.lr', listing: 'LIST_PUBLIC' },
        { id: 'AB-00103', name: 'Sinoe Palm Export', category: 'Exporter', county: 'Sinoe', services: ['Export', 'Buying'], phone: '+231-888-321-000', email: 'trade@sinoepalm.lr', listing: 'LIST_PUBLIC' },
    ];

    const marketData = [
        { id: 'BR-2026-0012', type: 'BUY', commodity: 'Rice', qty: '30 MT', location: 'Bong', price: 'Negotiable', status: 'Active' },
        { id: 'SO-2026-0108', type: 'SELL', commodity: 'Cassava', qty: '12 MT', location: 'Nimba', price: 'USD 145/MT', status: 'Active' },
        { id: 'BR-2026-0026', type: 'BUY', commodity: 'Cocoa', qty: '8 MT', location: 'Lofa', price: 'USD 2,850/MT', status: 'Active' },
        { id: 'SO-2026-0133', type: 'SELL', commodity: 'Palm Oil', qty: '5,000 L', location: 'Grand Bassa', price: 'USD 1.10/L', status: 'Active' },
    ];

    function toggleMegaMenu(element) {
        if (window.innerWidth <= 991) {
            event.preventDefault();
            const parent = element.closest('.dropdown-mega');
            parent.classList.toggle('show-mega');
        }
    }

    document.addEventListener('click', function(event) {
        if (window.innerWidth <= 991) {
            const isClickInside = event.target.closest('.navbar');
            if (!isClickInside) {
                document.querySelectorAll('.dropdown-mega.show-mega').forEach(el => {
                    el.classList.remove('show-mega');
                });
            }
        }
    });

    function setActiveTab(tabId) {
        document.querySelectorAll('.tab-btn').forEach(btn => btn.classList.remove('active'));
        if (event && event.target) {
            event.target.closest('.tab-btn')?.classList.add('active');
        }

        const sections = ['homeSection', 'farmersSection', 'groupsSection', 'businessSection', 'directorySection', 
                        'marketSection', 'dashboardsSection', 'mapSection', 'extensionSection', 'developersSection', 'authSection',
                        'recentTradesSection', 'featuredDirectorySection', 'ctaSection'];
        
        sections.forEach(id => {
            const el = document.getElementById(id);
            if (el) el.style.display = 'none';
        });

        if (tabId === 'home') {
            document.getElementById('homeSection').style.display = 'block';
            document.getElementById('recentTradesSection').style.display = 'block';
            document.getElementById('featuredDirectorySection').style.display = 'block';
            document.getElementById('ctaSection').style.display = 'block';
        } else {
            const sectionEl = document.getElementById(tabId + 'Section');
            if (sectionEl) sectionEl.style.display = 'block';
        }

        if (tabId === 'directory') renderDirectory();
        if (tabId === 'market') renderMarketFeed();
        if (tabId === 'dashboards') initCharts();
        if (tabId === 'developers') showApiSection('overview');

        if (window.innerWidth <= 991) {
            const navbarCollapse = document.getElementById('navbarMain');
            if (navbarCollapse && navbarCollapse.classList.contains('show')) {
                navbarCollapse.classList.remove('show');
            }
        }
    }

    function createSparkline(ctxId, color, data) {
        const canvas = document.getElementById(ctxId);
        if (!canvas) return;
        new Chart(canvas, {
            type: 'line',
            data: { labels: ['', '', '', '', ''], datasets: [{ data, borderColor: color, borderWidth: 1.5, pointRadius: 0, tension: 0.4 }] },
            options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false }, tooltip: { enabled: false } }, scales: { x: { display: false }, y: { display: false } } }
        });
    }

    function initCharts() {
        const regCtx = document.getElementById('registrationsChart')?.getContext('2d');
        if (regCtx) {
            new Chart(regCtx, {
                type: 'line',
                data: {
                    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
                    datasets: [
                        { label: 'Farmers', data: [420, 680, 930, 1210, 1560, 1840], borderColor: '#0f5e3a', tension: 0.4 },
                        { label: 'Groups', data: [18, 22, 28, 33, 41, 49], borderColor: '#b38b4d', tension: 0.4 },
                        { label: 'Businesses', data: [34, 41, 59, 66, 74, 88], borderColor: '#64748b', tension: 0.4 }
                    ]
                },
                options: { responsive: true, maintainAspectRatio: false }
            });
        }

        const comCtx = document.getElementById('commodityChart')?.getContext('2d');
        if (comCtx) {
            new Chart(comCtx, {
                type: 'doughnut',
                data: {
                    labels: ['Rice', 'Cassava', 'Cocoa', 'Palm', 'Rubber'],
                    datasets: [{ data: [38, 21, 14, 12, 15], backgroundColor: ['#0f5e3a', '#b38b4d', '#64748b', '#475569', '#1e293b'] }]
                },
                options: { responsive: true, maintainAspectRatio: false }
            });
        }
    }

    function renderDirectory() {
        const search = document.getElementById('directorySearch')?.value.toLowerCase() || '';
        const county = document.getElementById('directoryCountyFilter')?.value || '';
        const category = document.getElementById('directoryCategoryFilter')?.value || '';

        const filtered = directoryData.filter(item => {
            if (county && item.county !== county) return false;
            if (category && !item.category.toLowerCase().includes(category.toLowerCase())) return false;
            if (search) {
                return `${item.name} ${item.category} ${item.county}`.toLowerCase().includes(search);
            }
            return true;
        });

        const html = filtered.map(item => `
            <div class="resource-card mb-2">
                <div class="d-flex justify-content-between align-items-start">
                    <div>
                        <h6 class="mb-1">${item.name}</h6>
                        <div class="small text-muted">${item.category} • ${item.county}</div>
                        <div class="mt-1">${item.services.map(s => `<span class="tag me-1">${s}</span>`).join('')}</div>
                    </div>
                    <button class="btn btn-outline btn-sm" onclick="showToast('Business Profile', '${item.name}')">View</button>
                </div>
            </div>
        `).join('');

        const directoryList = document.getElementById('directoryList');
        if (directoryList) directoryList.innerHTML = html || '<p class="small text-muted">No businesses match your filters.</p>';
    }

    function renderMarketFeed() {
        const search = document.getElementById('marketSearch')?.value.toLowerCase() || '';
        const filtered = marketData.filter(item => 
            `${item.id} ${item.commodity} ${item.location}`.toLowerCase().includes(search)
        );

        const html = filtered.map(item => `
            <div class="resource-card mb-2">
                <div class="d-flex justify-content-between align-items-center">
                    <div class="d-flex align-items-center gap-2">
                        <span class="market-badge ${item.type === 'BUY' ? 'badge-buy' : 'badge-sell'}">${item.type}</span>
                        <div>
                            <span class="fw-medium">${item.commodity}</span>
                            <span class="small text-muted ms-2">${item.qty} • ${item.location}</span>
                        </div>
                    </div>
                    <span class="small">${item.price}</span>
                </div>
            </div>
        `).join('');

        const marketFeed = document.getElementById('marketFeed');
        if (marketFeed) marketFeed.innerHTML = html || '<p class="small text-muted">No market items found.</p>';
    }

    function clearDirectoryFilters() {
        const searchInput = document.getElementById('directorySearch');
        const countyFilter = document.getElementById('directoryCountyFilter');
        const categoryFilter = document.getElementById('directoryCategoryFilter');
        
        if (searchInput) searchInput.value = '';
        if (countyFilter) countyFilter.value = '';
        if (categoryFilter) categoryFilter.value = '';
        renderDirectory();
    }

    function updateMapMetric() {
        const countyDetails = document.getElementById('countyDetails');
        if (countyDetails) countyDetails.innerHTML = '<p class="small text-muted">Interactive map placeholder - metric changed</p>';
    }

    function switchAuthMode(mode) {
        authMode = mode;
        const loginBtn = document.getElementById('loginModeBtn');
        const signupBtn = document.getElementById('signupModeBtn');
        const signupFields = document.getElementById('signupFields');
        const authSubmitBtn = document.getElementById('authSubmitBtn');
        
        if (loginBtn) loginBtn.className = mode === 'login' ? 'btn btn-primary' : 'btn btn-outline';
        if (signupBtn) signupBtn.className = mode === 'signup' ? 'btn btn-primary' : 'btn btn-outline';
        if (signupFields) signupFields.style.display = mode === 'signup' ? 'block' : 'none';
        if (authSubmitBtn) authSubmitBtn.textContent = mode === 'login' ? 'Sign In' : 'Create Account';
    }

    function handleRegistration(event, type) {
        event.preventDefault();
        showToast(
            type.charAt(0).toUpperCase() + type.slice(1) + ' Registration',
            'Reference: AFD-' + Math.random().toString(36).substr(2, 8).toUpperCase()
        );
        event.target.reset();
    }

    function handleAuth(event) {
        event.preventDefault();
        showToast(
            authMode === 'login' ? 'Login Simulated' : 'Signup Simulated',
            'Welcome to AFD!'
        );
        event.target.reset();
    }

    function showToast(title, body) {
        const container = document.getElementById('toastContainer');
        if (!container) return;
        
        const toastId = 'toast-' + Date.now();
        const toast = document.createElement('div');
        toast.className = 'toast';
        toast.id = toastId;
        toast.innerHTML = `
            <div class="toast-header">
                <span class="toast-title">${title}</span>
                <button class="toast-close btn-close btn-close-sm" onclick="this.closest('.toast').remove()"></button>
            </div>
            <div class="toast-body">${body}</div>
        `;
        container.appendChild(toast);
        
        if (document.body.classList.contains('dark-mode')) {
            toast.style.background = '#2a2a2a';
            toast.style.color = '#e0e0e0';
            toast.style.border = '1px solid #3a3a3a';
        }
        
        setTimeout(() => {
            const toastEl = document.getElementById(toastId);
            if (toastEl) toastEl.remove();
        }, 4000);
    }

    function handleGlobalSearch(event) {
        if (event.key === 'Enter') {
            performGlobalSearch();
        }
    }

    function performGlobalSearch() {
        const searchInput = document.getElementById('globalSearch');
        const searchTerm = searchInput ? searchInput.value.trim() : '';
        
        if (!searchTerm) {
            showToast('Search', 'Please enter a search term');
            return;
        }
        
        showToast('Search Results', `Searching for "${searchTerm}"...`);
        
        if (currentTab === 'directory') {
            const directorySearch = document.getElementById('directorySearch');
            if (directorySearch) directorySearch.value = searchTerm;
            renderDirectory();
        } 
        else if (currentTab === 'market') {
            const marketSearch = document.getElementById('marketSearch');
            if (marketSearch) marketSearch.value = searchTerm;
            renderMarketFeed();
        }
        else {
            setActiveTab('directory');
            setTimeout(() => {
                const directorySearch = document.getElementById('directorySearch');
                if (directorySearch) directorySearch.value = searchTerm;
                renderDirectory();
            }, 100);
        }
    }

    function showApiSection(section) {
        document.querySelectorAll('.api-content').forEach(el => {
            el.style.display = 'none';
        });
        
        let sectionId;
        switch(section) {
            case 'overview': sectionId = 'apiOverview'; break;
            case 'authentication': sectionId = 'apiAuthentication'; break;
            case 'endpoints': sectionId = 'apiEndpoints'; break;
            case 'farmers-api': sectionId = 'apiFarmers'; break;
            case 'groups-api': sectionId = 'apiGroups'; break;
            case 'business-api': sectionId = 'apiBusiness'; break;
            default: sectionId = 'apiOverview';
        }
        
        const sectionEl = document.getElementById(sectionId);
        if (sectionEl) sectionEl.style.display = 'block';
        
        if (event && event.target) {
            document.querySelectorAll('.btn-outline.btn-sm').forEach(btn => {
                btn.classList.remove('active');
            });
            event.target.classList.add('active');
        }
    }

    document.addEventListener('DOMContentLoaded', function() {
        createSparkline('riceChart', '#0f5e3a', [2, 3, 5, 4, 6]);
        createSparkline('cocoaChart', '#b38b4d', [4, 3, 6, 5, 7]);
        createSparkline('palmChart', '#0f5e3a', [3, 4, 3, 5, 4]);
        setActiveTab('home');
        renderDirectory();
        renderMarketFeed();
    });
</script>
</body>
</html>