// asiz-nav.jsx — sticky nav + footer + marquee

// ── Logo variants ────────────────────────────────────────────────
// Minimalist house marks in the current palette (uses --ink and --accent).

function LogoMark({ size = 28, variant = 'pitch' }) {
  const s = { display: 'block', flexShrink: 0, color: 'var(--ink)' };
  const props = { width: size, height: size, viewBox: '0 0 40 40', fill: 'none', 'aria-hidden': 'true', style: s };

  if (variant === 'door') {
    // Solid gable with a terracotta door — matches favicon
    return (
      <svg {...props}>
        <path d="M5 34 L5 17 L20 5 L35 17 L35 34 Z" fill="currentColor" />
        <rect x="17" y="22" width="6" height="12" fill="var(--accent)" />
      </svg>
    );
  }

  if (variant === 'pitch') {
    // Thin-line pitched roof with an accent door notch
    return (
      <svg {...props}>
        <path d="M6 20 L20 7 L34 20 L34 34 L6 34 Z" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round" />
        <rect x="18" y="24" width="4" height="10" fill="var(--accent)" />
      </svg>
    );
  }

  if (variant === 'monogram') {
    // A|I monogram inside a house silhouette
    return (
      <svg {...props}>
        <path d="M5 18 L20 6 L35 18" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" fill="none" />
        <path d="M8 18 L8 34 L32 34 L32 18" stroke="currentColor" strokeWidth="1.4" fill="none" />
        <text x="20" y="31" textAnchor="middle" fontFamily="var(--font-display)" fontSize="13" fontStyle="italic" fontWeight="500" fill="var(--accent)">a</text>
      </svg>
    );
  }

  if (variant === 'flag') {
    // Simple solid gable with an accent flag/pennant
    return (
      <svg {...props}>
        <path d="M7 34 L7 18 L20 8 L33 18 L33 34 Z" fill="currentColor" />
        <path d="M20 8 L20 3 L28 4.5 L22 6 Z" fill="var(--accent)" />
      </svg>
    );
  }

  if (variant === 'window') {
    // Single open window in a thin outline house
    return (
      <svg {...props}>
        <path d="M5 19 L20 6 L35 19 L35 35 L5 35 Z" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round" fill="none" />
        <rect x="16" y="21" width="8" height="10" fill="var(--accent)" />
        <line x1="20" y1="21" x2="20" y2="31" stroke="var(--bg)" strokeWidth="1" />
        <line x1="16" y1="26" x2="24" y2="26" stroke="var(--bg)" strokeWidth="1" />
      </svg>
    );
  }

  if (variant === 'corner') {
    // Abstract corner — two stacked chevrons forming a roof peak
    return (
      <svg {...props}>
        <path d="M5 22 L20 9 L35 22" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" fill="none" />
        <path d="M10 29 L20 19 L30 29" stroke="var(--accent)" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" fill="none" />
      </svg>
    );
  }

  if (variant === 'brackets') {
    // House drawn with negative-space brackets + accent ridge
    return (
      <svg {...props}>
        <path d="M6 34 L6 20 L20 8 L34 20 L34 34" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" fill="none" />
        <line x1="20" y1="8" x2="20" y2="18" stroke="var(--accent)" strokeWidth="2" strokeLinecap="round" />
      </svg>
    );
  }

  // 'seal' (default) — compact gable rendered as a monogrammed seal
  return (
    <svg {...props}>
      <rect x="3" y="3" width="34" height="34" rx="3" stroke="currentColor" strokeWidth="1.4" fill="none" />
      <path d="M10 24 L20 14 L30 24" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" fill="none" />
      <line x1="20" y1="14" x2="20" y2="28" stroke="var(--accent)" strokeWidth="1.8" strokeLinecap="round" />
    </svg>
  );
}

function Nav({ route, setRoute, palette, heroVariant, logoVariant = 'pitch' }) {
  const links = [
    ['home', 'Home'],
    ['agents', 'Agents'],
    ['sellers', 'Sellers'],
    ['how', 'How it works'],
    ['compare', 'Compare'],
    ['faq', 'FAQ'],
    ['about', 'About'],
    ['contact', 'Contact'],
  ];
  const [open, setOpen] = React.useState(false);
  React.useEffect(() => { setOpen(false); }, [route]);
  React.useEffect(() => {
    document.body.style.overflow = open ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [open]);

  const go = (k) => { setRoute(k); setOpen(false); };

  return (
    <React.Fragment>
      <nav className="asiz-nav">
        <div className="asiz-wrap asiz-nav-inner">
          <a
            href="#"
            className="asiz-logo"
            onClick={(e) => { e.preventDefault(); go('home'); }}
          >
            <LogoMark size={30} variant={logoVariant} />
            <span>As&nbsp;Iz&nbsp;Homes</span>
          </a>
          <div className="asiz-nav-links">
            {links.slice(1).map(([k, l]) => (
              <a
                key={k}
                href="#"
                style={{ color: route === k ? 'var(--ink)' : undefined }}
                onClick={(e) => { e.preventDefault(); go(k); }}
              >
                {l}
              </a>
            ))}
          </div>
          <div className="asiz-nav-cta">
            <a href="tel:4244242959" className="asiz-phone">(424) 424-2959</a>
            <button
              className="asiz-btn asiz-btn--accent asiz-nav-cta-btn"
              onClick={() => go('contact')}
              style={{ padding: '10px 18px', fontSize: 13 }}
            >
              Get offer
            </button>
          </div>
          <button
            className="asiz-nav-burger"
            aria-label={open ? 'Close menu' : 'Open menu'}
            aria-expanded={open}
            onClick={() => setOpen(!open)}
          >
            <span className={`asiz-burger-lines ${open ? 'is-open' : ''}`}>
              <span /><span /><span />
            </span>
          </button>
        </div>
      </nav>

      <div className={`asiz-nav-drawer ${open ? 'is-open' : ''}`} aria-hidden={!open}>
        <div className="asiz-nav-drawer-inner">
          <div className="asiz-nav-drawer-links">
            {links.map(([k, l]) => (
              <a
                key={k}
                href="#"
                className={route === k ? 'is-active' : ''}
                onClick={(e) => { e.preventDefault(); go(k); }}
              >
                {l}
              </a>
            ))}
          </div>
          <div className="asiz-nav-drawer-cta">
            <a href="tel:4244242959" className="asiz-phone" style={{ fontSize: 18 }}>(424) 424-2959</a>
            <button
              className="asiz-btn asiz-btn--accent"
              onClick={() => go('contact')}
              style={{ width: '100%', justifyContent: 'center', marginTop: 18 }}
            >
              Get a structured offer
              <span className="asiz-arrow">
                <svg width="10" height="10" viewBox="0 0 10 10"><line x1="1" y1="5" x2="8" y2="5" stroke="currentColor" strokeWidth="1.5" /><path d="M5 2 L8 5 L5 8" stroke="currentColor" strokeWidth="1.5" fill="none" /></svg>
              </span>
            </button>
          </div>
        </div>
      </div>
    </React.Fragment>
  );
}

function Footer({ setRoute, logoVariant = 'pitch' }) {
  return (
    <footer className="asiz-foot">
      <div className="asiz-wrap">
        <div className="asiz-foot-grid">
          <div>
            <div className="asiz-logo" style={{ fontSize: 28, marginBottom: 14 }}>
              <LogoMark size={40} variant={logoVariant} />
              <span>As&nbsp;Iz&nbsp;Homes</span>
            </div>
            <p style={{ maxWidth: 40 + 'ch', margin: 0 }}>
              We close Sub-To deals nationwide. Take over the existing mortgage, take title at closing, hold the property. 5 closes to date. 6-day average from offer to deed.
            </p>
          </div>
          <div>
            <h5>Company</h5>
            <ul>
              <li><a href="#" onClick={(e)=>{e.preventDefault();setRoute('agents');}}>Agents</a></li>
              <li><a href="#" onClick={(e)=>{e.preventDefault();setRoute('sellers');}}>Sellers</a></li>
              <li><a href="#" onClick={(e)=>{e.preventDefault();setRoute('how');}}>How it works</a></li>
              <li><a href="#" onClick={(e)=>{e.preventDefault();setRoute('faq');}}>FAQ</a></li>
              <li><a href="#" onClick={(e)=>{e.preventDefault();setRoute('about');}}>About</a></li>
            </ul>
          </div>
          <div>
            <h5>Compare</h5>
            <ul>
              <li><a href="#" onClick={(e)=>{e.preventDefault();setRoute('compare');}}>Traditional listing</a></li>
              <li><a href="#" onClick={(e)=>{e.preventDefault();setRoute('subToVsCash');}}>Sub-To vs cash offer</a></li>
              <li><a href="#" onClick={(e)=>{e.preventDefault();setRoute('subToVsShortSale');}}>Sub-To vs short sale</a></li>
            </ul>
          </div>
          <div>
            <h5>Contact</h5>
            <ul>
              <li><a href="tel:4244242959">(424) 424-2959</a></li>
              <li><a href="mailto:oleg@asizhomes.com">oleg@asizhomes.com</a></li>
              <li>United States · nationwide</li>
            </ul>
          </div>
        </div>
        <div className="asiz-foot-bottom">
          <span>© 2026 Clawsers LLC</span>
          <span style={{ display: 'flex', gap: 18, fontSize: 13 }}>
            <a href="/terms" onClick={(e) => { e.preventDefault(); setRoute('terms'); }}>Terms of Use</a>
            <a href="/privacy" onClick={(e) => { e.preventDefault(); setRoute('privacy'); }}>Privacy Policy</a>
          </span>
        </div>
      </div>
    </footer>
  );
}

function Marquee({ items, speed = 60 }) {
  const track = (
    <div className="asiz-marquee-track">
      {items.map((t, i) => (
        <span key={i} style={{ display: 'inline-flex', alignItems: 'center', gap: 48 }}>
          <span>{t}</span>
          <span style={{ opacity: 0.4 }}>◆</span>
        </span>
      ))}
    </div>
  );
  return (
    <div className="asiz-marquee" style={{ '--marquee-speed': `${speed}s` }}>
      {track}
      {track}
    </div>
  );
}

Object.assign(window, { Nav, Footer, Marquee });