// Nav + Hero
const { Icons: NavIcons } = window;

const NAV_MENU = [
  {
    label: 'Services',
    items: [
      { t: 'Custom Shopify Store Design', d: 'Complete Shopify store design & development', href: 'shopify-store.html' },
      { t: 'Convert Figma to Shopify',    d: 'Pixel-perfect Figma to Shopify conversion',   href: 'figma-to-shopify.html' },
      { t: 'Custom Theme Development',    d: 'Hand-coded Liquid themes from scratch',      href: 'shopify-theme.html' },
    ],
  },
  {
    label: 'Optimization',
    items: [
      { t: 'Page Audits',  d: 'Data-driven redesign that boosts conversions 30%', href: 'page-audits.html' },
      { t: 'Cart Drawer',  d: 'Gamified cart drawer that incentivizes sales',     href: 'cart-drawer.html' },
      { t: 'Checkout',     d: '2× faster checkout that boosts conversions',        href: 'checkout.html' },
    ],
  },
  {
    label: 'Content & Listings',
    items: [
      { t: 'A+ Content',           d: 'Premium content that drives conversions',    href: 'a-plus-content.html' },
      { t: 'Bulk Product Listing', d: 'List hundreds of products with zero errors', href: 'bulk-product-listing.html' },
    ],
  },
  {
    label: 'Migrate',
    items: [
      { t: 'Seamless Migration to Shopify',        d: 'Any platform, zero data loss migration',       href: 'migrate.html' },
      { t: 'Migrate from Salesforce to Shopify',   d: 'Commerce Cloud to Shopify, hassle-free',        href: 'migrate.html#salesforce' },
      { t: 'Migrate from Magento to Shopify',      d: 'Adobe Commerce to Shopify migration',            href: 'migrate.html#magento' },
      { t: 'Migrate from BigCommerce to Shopify',  d: 'Full BigCommerce store transfer to Shopify',     href: 'migrate.html#bigcommerce' },
      { t: 'Migrate from WooCommerce to Shopify',  d: 'WordPress to Shopify, seamlessly',               href: 'migrate.html#woocommerce' },
      { t: 'POS System Migrations to Shopify',     d: 'Unified POS migration for retail experiences',   href: 'migrate.html#pos' },
    ],
  },
  { label: 'Portfolio', href: 'https://portfolio.maximiseteck.com' },
  { label: 'About', href: 'about.html' },
];

function NavItem({ item }) {
  const [open, setOpen] = React.useState(false);
  const closeT = React.useRef();

  const onEnter = () => { clearTimeout(closeT.current); setOpen(true); };
  const onLeave = () => { closeT.current = setTimeout(() => setOpen(false), 120); };

  if (!item.items) {
    return (
      <a href={item.href} className="nav-link">{item.label}</a>
    );
  }

  // size dropdown wider for long menus
  const wide = item.items.length >= 5;

  return (
    <div className="nav-dd-wrap" onMouseEnter={onEnter} onMouseLeave={onLeave}>
      <button className={`nav-link nav-dd-trigger ${open ? 'is-open' : ''}`} aria-expanded={open}>
        {item.label}
        <span className="caret"><NavIcons.Caret /></span>
      </button>
      <div className={`nav-dd ${wide ? 'wide' : ''} ${open ? 'is-open' : ''}`} role="menu">
        <ul>
          {item.items.map((it) => (
            <li key={it.t}>
              <a href={it.href || '#'} role="menuitem">
                <span className="dd-t">{it.t}</span>
                <span className="dd-d">{it.d}</span>
                <span className="dd-arrow"><NavIcons.Arrow size={14} /></span>
              </a>
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
}

function MobileMenu({ open, onClose }) {
  const [openIdx, setOpenIdx] = React.useState(null);

  React.useEffect(() => {
    document.body.classList.toggle('nav-locked', open);
    return () => document.body.classList.remove('nav-locked');
  }, [open]);

  return (
    <div className={`nav-mobile ${open ? 'is-open' : ''}`} aria-hidden={!open}>
      <div className="container">
        {NAV_MENU.map((item, i) => {
          if (!item.items) {
            return (
              <div key={item.label} className="nav-mobile-section">
                <a className="nav-mobile-link" href={item.href} onClick={onClose}>
                  {item.label}
                  <span className="chev"><NavIcons.Arrow size={16} /></span>
                </a>
              </div>
            );
          }
          const sectionOpen = openIdx === i;
          return (
            <div key={item.label} className="nav-mobile-section">
              <button
                type="button"
                className={`nav-mobile-trigger ${sectionOpen ? 'is-open' : ''}`}
                aria-expanded={sectionOpen}
                onClick={() => setOpenIdx(sectionOpen ? null : i)}
              >
                {item.label}
                <span className="chev">
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m6 9 6 6 6-6"/></svg>
                </span>
              </button>
              <div className={`nav-mobile-panel ${sectionOpen ? 'is-open' : ''}`}>
                <ul>
                  {item.items.map((it) => (
                    <li key={it.t}>
                      <a href={it.href || '#'} onClick={onClose}>
                        <span className="dd-t">{it.t}</span>
                        <span className="dd-d">{it.d}</span>
                      </a>
                    </li>
                  ))}
                </ul>
              </div>
            </div>
          );
        })}
        <div className="nav-mobile-cta">
          <a href="contact.html" className="btn btn-primary btn-arrow" onClick={onClose}>
            Book a Discovery Call <NavIcons.Arrow size={14} />
          </a>
        </div>
      </div>
    </div>
  );
}

function Nav() {
  const [mobileOpen, setMobileOpen] = React.useState(false);

  return (
    <header className="nav">
      <div className="container nav-inner">
        <a href="landing.html" className="nav-logo">
          <img src="../assets/logo.png" alt="MaximiseTeck" />
          <span className="mono" style={{ color: 'var(--mute)', fontSize: '10px', borderLeft: '1px solid var(--line)', paddingLeft: '12px', marginLeft: '4px' }}>
            Shopify<br/>Studio
          </span>
        </a>
        <nav className="nav-links">
          {NAV_MENU.map((item) => <NavItem key={item.label} item={item} />)}
        </nav>
        <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
          <a href="contact.html" className="btn btn-primary btn-arrow">
            Book a Call <NavIcons.Arrow size={14} />
          </a>
          <button
            type="button"
            className={`nav-burger ${mobileOpen ? 'is-open' : ''}`}
            aria-label={mobileOpen ? 'Close menu' : 'Open menu'}
            aria-expanded={mobileOpen}
            onClick={() => setMobileOpen(o => !o)}
          >
            <span className="b-lines"><span></span><span></span><span></span></span>
          </button>
        </div>
      </div>
      <MobileMenu open={mobileOpen} onClose={() => setMobileOpen(false)} />
    </header>
  );
}

function Hero({ variant, headline }) {
  // Split headline into two parts at the {{accent}} delimiter
  const m = (headline || '').match(/^(.*?)\{\{(.+?)\}\}(.*)$/);
  const before = m ? m[1] : headline;
  const accent = m ? m[2] : '';
  const after = m ? m[3] : '';

  return (
    <section className={`hero variant-${variant}`}>
      <div className="container">
        <div className="hero-grid">
          <div className="hero-left">
            <div className="hero-eyebrow">
              <span className="pill"><span className="dot"></span> Trusted by 500+ brands · Shopify Partner</span>
            </div>
            <h1 className="display">
              {before}
              {accent && <span className="accent">{accent}</span>}
              {after}
            </h1>
            <p className="lead">
              Custom builds, migrations, B2B & Plus. We design, develop and tune Shopify stores end-to-end for brands that need to ship fast and convert harder.
            </p>
            <div className="hero-ctas">
              <a href="#contact" className="btn btn-primary btn-arrow">
                Book a discovery call <NavIcons.Arrow size={16} />
              </a>
              <a href="#work" className="btn btn-ghost">
                See our work
              </a>
            </div>
            <div className="stats">
              <div className="stat">
                <div className="num">500<span className="unit">+</span></div>
                <div className="label">Shopify stores shipped</div>
              </div>
              <div className="stat">
                <div className="num">3<span className="unit">×</span></div>
                <div className="label">Avg. conversion lift</div>
              </div>
              <div className="stat">
                <div className="num">48<span className="unit">hr</span></div>
                <div className="label">Project turnaround</div>
              </div>
              <div className="stat">
                <div className="num">98<span className="unit">%</span></div>
                <div className="label">Client satisfaction</div>
              </div>
            </div>
          </div>

          {/* Form variant (default) */}
          <div className="hero-card">
            <h3>Start your project</h3>
            <p className="sub">Free consultation — no commitment. We'll reply within 4 hours.</p>
            <div className="tabs">
              <button className="active"><span className="step">1</span> Contact</button>
              <button><span className="step">2</span> Project</button>
              <button><span className="step">3</span> Timeline</button>
            </div>
            <div className="field">
              <label>Full Name <span className="req">*</span></label>
              <input placeholder="Jane Mehta" />
            </div>
            <div className="field">
              <label>Business Email <span className="req">*</span></label>
              <input placeholder="jane@brand.com" />
            </div>
            <div className="field">
              <label>Phone <span className="req">*</span></label>
              <div className="phone-row">
                <select defaultValue="+91"><option>+91</option><option>+1</option><option>+44</option><option>+971</option></select>
                <input placeholder="98765 43210" />
              </div>
            </div>
            <div className="field">
              <label>Brand / Store URL</label>
              <input placeholder="yourbrand.com" />
            </div>
            <button className="btn btn-primary submit btn-arrow">
              Continue <NavIcons.Arrow size={14} />
            </button>
          </div>

          {/* Mock variant */}
          <div className="hero-mock">
            <div className="tag">// preview-store-001.myshopify.com</div>
            <div className="label">Store preview<br/>drops here</div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Nav = Nav;
window.Hero = Hero;