// Site header / Nav drawer. Self-contained — relies on global I icon set.
function Header() {
  const [open, setOpen] = React.useState(false);
  const [sub, setSub] = React.useState(null);

  const TOP_LINKS = [
    { label: 'Home', href: '/' },
    { label: 'Texas Electricity Rates', href: '/texas-electricity-rates.html' },
    { label: 'Houston Electricity Rates', href: '/houston-electricity-rates.html' }
  ];

  const SUBMENUS = {
    'Service Areas': ['Texas', 'Houston', 'Dallas', 'Fort Worth', 'Arlington', 'Corpus Christi', 'Lubbock', 'Plano', 'Irving', 'Katy', 'Sugar Land', 'The Woodlands', 'Frisco', 'See All'],
    'Electricity Providers': ['Gexa Energy', 'TXU Energy', 'Reliant', 'Rhythm', 'Direct Energy', 'Energy Texas', 'APG&E', 'Octopus Energy', '4Change Energy', 'See All'],
    'Electric Utilities': ['Oncor', 'CenterPoint Energy', 'AEP Texas Central', 'AEP Texas North', 'Texas-New Mexico Power', 'See All'],
    'Electricity Plans': ['No Deposit', 'Solar Buyback', 'Free Nights', 'Green Energy', 'Month to Month', 'Prepaid', 'Business', 'See All Plans'],
    'Resources': [
      { label: 'How Switching Works', href: '#' },
      { label: 'Reading Your Bill', href: '#' },
      { label: 'Texas Electricity Rates & Plans', href: 'texas-electricity-rates.html' },
      { label: 'Plan Glossary', href: '#' },
      { label: 'Energy Saving Tips', href: '#' },
      { label: 'Blog', href: '#' }
    ],
    'About Power Texas': ['Our Mission', 'Press', 'Careers', 'Contact', 'Privacy Policy', 'Terms of Service']
  };
  const items = Object.keys(SUBMENUS);

  const closeAll = () => { setOpen(false); setSub(null); };

  const renderSubItem = (entry) => {
    if (typeof entry === 'string') return { label: entry, href: '#' };
    return entry;
  };

  return (
    <header className="nav">
      <div className="container nav-inner">
        <div className="nav-left">
          <button className="menu-btn" onClick={() => { setOpen((o) => !o); setSub(null); }}>
            {open ? <I.X /> : <I.Menu />} Menu
          </button>
        </div>
        <a className="nav-logo" href="/"><img src="assets/logo-colored.svg" alt="Power Texas" /></a>
        <div className="nav-right">
          <a className="nav-link" href="#"></a>
          <a className="nav-link" href="#"></a>
          <a className="nav-link signin" href="#"></a>
        </div>
      </div>
      {open && <div className="menu-backdrop" onClick={closeAll}></div>}
      <aside className={`menu-drawer ${open ? 'open' : ''}`}>
        <div className={`menu-stack ${sub ? 'show-sub' : ''}`}>
          <div className="menu-pane">
            <ul className="menu-list">
              {TOP_LINKS.map((link) =>
                <li key={link.label}>
                  <a href={link.href} onClick={closeAll}>
                    <span>{link.label}</span>
                  </a>
                </li>
              )}
              {items.map((label) =>
                <li key={label}>
                  <a href="#" onClick={(e) => { e.preventDefault(); setSub(label); }}>
                    <span>{label}</span>
                    <I.ChevR />
                  </a>
                </li>
              )}
            </ul>
            <div className="menu-cta">
              <div className="menu-cta-title">Ready to Save?</div>
              <button className="menu-cta-btn">View Plans <span className="menu-cta-arrow">&rarr;</span></button>
            </div>
          </div>
          <div className="menu-pane menu-pane-sub">
            <button className="menu-back" onClick={() => setSub(null)}>
              <I.ChevL /> Back to Main Menu
            </button>
            <ul className="menu-list">
              {(SUBMENUS[sub] || []).map((entry, i) => {
                const item = renderSubItem(entry);
                return (
                  <li key={i}>
                    <a href={item.href}><span>{item.label}</span></a>
                  </li>
                );
              })}
            </ul>
            <div className="menu-cta">
              <div className="menu-cta-title">Ready to Save?</div>
              <button className="menu-cta-btn">View Plans <span className="menu-cta-arrow">&rarr;</span></button>
            </div>
          </div>
        </div>
      </aside>
    </header>
  );
}

window.Header = Header;