import React from 'react';
import { Dump } from '@rasahq/react-tabula/utils';

import { NavDropdown } from './site-nav-dropdown';

const navStructure = [
  {
    text: 'Product',
    items: [
      { text: 'Why Rasa?', title: '', href: '' },
      { text: 'Features', title: '', href: '' },
      { text: 'Rasa Open Source', title: '', href: '' },
      { text: 'Rasa X', title: '', href: '' },
      { text: 'Rasa Enterprise', title: '', href: '' },
    ],
  },
  {
    text: 'Plans + Pricing',
    items: [
      { text: 'Compare Plans', title: '', href: '' },
      { text: 'Rasa Enterprise', title: '', href: '' },
    ],
  },
  {
    text: 'Solutions',
    items: [
      {
        text: 'Use Cases',
        items: [
          { text: 'Customer Experience', title: '', href: '' },
          { text: 'Enterprise Operations', title: '', href: '' },
          { text: 'Lead Gen & Sales', title: '', href: '' },
          { text: 'Voice', title: '', href: '' },
        ],
      },
      {
        text: 'Industries',
        items: [
          { text: 'Financial Services', title: '', href: '' },
          { text: 'Healthcare', title: '', href: '' },
          { text: 'Telecom', title: '', href: '' },
          { text: 'Travel & Culture', title: '', href: '' },
        ],
      },
    ],
  },
  {
    text: 'Open Source',
    items: [
      { text: 'Rasa Open Source', title: '', href: '' },
      { text: 'Download Rasa Open Source', title: '', href: '' },
      { text: 'Join the Community', title: '', href: '' },
      { text: 'How to Contribute', title: '', href: '' },
      { text: 'Community Showcase', title: '', href: '' },
      { text: 'Rasa Developer Blog', title: '', href: '' },
    ],
  },
  {
    text: 'Docs',
    items: [
      { text: 'Developer Portal', title: '', href: '' },
      { text: 'Rasa Open Source', title: '', href: '' },
      { text: 'Rasa Action Server', title: '', href: '' },
      { text: 'Rasa X', title: '', href: '' },
    ],
  },
  {
    text: 'Resources',
    items: [
      {
        text: 'Education',
        items: [
          { text: 'Case Studies', title: '', href: '' },
          { text: 'Whitepapers & Webinars', title: '', href: '' },
          { text: 'Developer Portal', title: '', href: '' },
          { text: 'The Rasa Blog', title: '', href: '' },
          { text: 'Rasa on YouTube', title: '', href: '' },
          { text: 'Rasa on Udemy', title: '', href: '' },
          { text: 'Events', title: '', href: '' },
        ],
      },
      {
        text: 'Community',
        items: [
          { text: 'Join the Community', title: '', href: '' },
          { text: 'How to Contribute', title: '', href: '' },
          { text: 'Community Showcase', title: '', href: '' },
          { text: 'Rasa on Github', title: '', href: '' },
        ],
      },
      {
        text: 'Company',
        items: [
          { text: 'Financial Services', title: '', href: '' },
          { text: 'Healthcare', title: '', href: '' },
          { text: 'Telecom', title: '', href: '' },
          { text: 'Travel & Culture', title: '', href: '' },
        ],
      },
    ],
  },
  {
    text: 'Get Started',
    items: [
      { text: 'Get a Technical Demo', title: '', href: '' },
      { text: 'Download Open Source', title: '', href: '' },
      { text: 'Talk to Sales', title: '', href: '' },
    ],
  },
];
const mainNavItems = navStructure.slice(0, navStructure.length - 1);
const lastNavItem = navStructure[navStructure.length - 1];
export function SiteNav() {
  return (
    <nav className="site site-nav d-flex ai-stretch">
      <div className="wrap-l frame chain jc-center ai-stretch" style={{ '--train-gap': '20px' }}>
        <div className="site-nav-item mr-auto">RASA</div>
        {mainNavItems.map(({ text, items }, i) => {
          return <NavDropdown className="site-nav-item" key={text} text={text} items={items} />;
        })}
        <NavDropdown className="site-nav-item ml-auto" text={lastNavItem.text} items={lastNavItem.items} />
      </div>
    </nav>
  );
}